custom.css

 1:root {
 2    --ifm-color-primary: #4ade80;
 3    --ifm-color-primary-dark: #22c55e;
 4    --ifm-color-primary-darker: #16a34a;
 5    --ifm-color-primary-darkest: #15803d;
 6    --ifm-color-primary-light: #86efac;
 7    --ifm-color-primary-lighter: #bbf7d0;
 8    --ifm-color-primary-lightest: #dcfce7;
 9    --ifm-code-font-size: 95%;
10    --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
11
12    --gh-note:      #0969da;
13    --gh-tip:       #1a7f37;
14    --gh-important: #8250df;
15    --gh-warning:   #9a6700;
16    --gh-caution:   #cf222e;
17}
18
19[data-theme="dark"] {
20    --ifm-color-primary: #4ade80;
21    --ifm-color-primary-dark: #22c55e;
22    --ifm-color-primary-darker: #16a34a;
23    --ifm-color-primary-darkest: #15803d;
24    --ifm-color-primary-light: #86efac;
25    --ifm-color-primary-lighter: #bbf7d0;
26    --ifm-color-primary-lightest: #dcfce7;
27    --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
28
29    --gh-note:      #1f6feb;
30    --gh-tip:       #3fb950;
31    --gh-important: #a371f7;
32    --gh-warning:   #d29922;
33    --gh-caution:   #f85149;
34}
35
36/* GitHub-style alerts */
37.alert {
38    --ifm-alert-background-color: transparent;
39    --ifm-alert-shadow: none;
40    border-width: 0 0 0 4px;
41    border-radius: 2px;
42}
43
44[class*='admonitionHeading'] {
45    text-transform: capitalize;
46}
47
48.alert--secondary {
49    --ifm-alert-border-color: var(--gh-note);
50    --ifm-alert-foreground-color: var(--ifm-font-color-base);
51}
52.alert--secondary [class*='admonitionHeading'],
53.alert--secondary [class*='admonitionIcon'] svg {
54    color: var(--gh-note);
55    fill: var(--gh-note);
56}
57
58.alert--success {
59    --ifm-alert-border-color: var(--gh-tip);
60    --ifm-alert-foreground-color: var(--ifm-font-color-base);
61}
62.alert--success [class*='admonitionHeading'],
63.alert--success [class*='admonitionIcon'] svg {
64    color: var(--gh-tip);
65    fill: var(--gh-tip);
66}
67
68.alert--info {
69    --ifm-alert-border-color: var(--gh-important);
70    --ifm-alert-foreground-color: var(--ifm-font-color-base);
71}
72.alert--info [class*='admonitionHeading'],
73.alert--info [class*='admonitionIcon'] svg {
74    color: var(--gh-important);
75    fill: var(--gh-important);
76}
77
78.alert--warning {
79    --ifm-alert-border-color: var(--gh-warning);
80    --ifm-alert-foreground-color: var(--ifm-font-color-base);
81}
82.alert--warning [class*='admonitionHeading'],
83.alert--warning [class*='admonitionIcon'] svg {
84    color: var(--gh-warning);
85    fill: var(--gh-warning);
86}
87
88.alert--danger {
89    --ifm-alert-border-color: var(--gh-caution);
90    --ifm-alert-foreground-color: var(--ifm-font-color-base);
91}
92.alert--danger [class*='admonitionHeading'],
93.alert--danger [class*='admonitionIcon'] svg {
94    color: var(--gh-caution);
95    fill: var(--gh-caution);
96}