|
9 | 9 |
|
10 | 10 | :root { |
11 | 11 | --vp-c-brand: #56332b; |
| 12 | + --vp-c-brand-1: #56332b; |
12 | 13 | --vp-c-brand-light: #ccac8d; |
13 | 14 | --vp-c-brand-lighter: #efcca3; |
| 15 | + --vp-c-brand-lightest: #efcca3; |
14 | 16 | --vp-c-brand-dark: #56332b; |
15 | 17 | --vp-c-brand-darker: #442823; |
16 | 18 | --vp-c-brand-dimm: rgba(100, 108, 255, 0.08); |
|
21 | 23 | * -------------------------------------------------------------------------- */ |
22 | 24 |
|
23 | 25 | :root { |
24 | | - --vp-button-brand-border: var(--vp-c-brand); |
25 | | - --vp-button-brand-text: var(--vp-c-text-dark-1); |
26 | | - --vp-button-brand-bg: var(--vp-c-brand-darker); |
27 | | - --vp-button-brand-hover-border: var(--vp-c-brand-dark); |
28 | | - --vp-button-brand-hover-text: var(--vp-c-text-dark-1); |
29 | | - --vp-button-brand-hover-bg: var(--vp-c-brand-dark); |
| 26 | + --vp-button-brand-border: var(--vp-c-brand-light); |
| 27 | + --vp-button-brand-text: var(--vp-c-white); |
| 28 | + --vp-button-brand-bg: var(--vp-c-brand); |
| 29 | + --vp-button-brand-hover-border: var(--vp-c-brand-light); |
| 30 | + --vp-button-brand-hover-text: var(--vp-c-white); |
| 31 | + --vp-button-brand-hover-bg: var(--vp-c-brand-light); |
30 | 32 | --vp-button-brand-active-border: var(--vp-c-brand-light); |
31 | | - --vp-button-brand-active-text: var(--vp-c-text-dark-1); |
| 33 | + --vp-button-brand-active-text: var(--vp-c-white); |
32 | 34 | --vp-button-brand-active-bg: var(--vp-button-brand-bg); |
33 | 35 | } |
34 | 36 |
|
|
75 | 77 | } |
76 | 78 |
|
77 | 79 | .dark { |
| 80 | + --vp-c-brand-1: #ccac8d; |
78 | 81 | --vp-custom-block-tip-border: var(--vp-c-brand); |
79 | | - --vp-custom-block-tip-text: var(--vp-c-brand-lighter); |
| 82 | + --vp-custom-block-tip-text: var(--vp-c-brand-lightest); |
80 | 83 | --vp-custom-block-tip-bg: var(--vp-c-brand-dimm); |
81 | 84 | } |
82 | 85 |
|
| 86 | +/** |
| 87 | + * VitePress: Custom fix |
| 88 | + * -------------------------------------------------------------------------- */ |
| 89 | + |
| 90 | +/* |
| 91 | + Use lighter colors for links in dark mode for a11y. |
| 92 | + Also specify some classes twice to have higher specificity |
| 93 | + over scoped class data attribute. |
| 94 | +*/ |
83 | 95 | .dark .vp-doc a, |
84 | | -.dark .edit-link-button, |
85 | | -.dark .title, |
86 | | -.dark .link.active, |
87 | | -.dark .link.active .link-text, |
88 | | -.dark .VPNavBarMenuLink.active { |
89 | | - color: var(--vp-c-brand-light); |
| 96 | +.dark .vp-doc a > code, |
| 97 | +.dark .VPNavBarMenuLink.VPNavBarMenuLink:hover, |
| 98 | +.dark .VPNavBarMenuLink.VPNavBarMenuLink.active, |
| 99 | +.dark .link.link:hover, |
| 100 | +.dark .link.link.active, |
| 101 | +.dark .edit-link-button.edit-link-button, |
| 102 | +.dark .pager-link .title { |
| 103 | + color: var(--vp-c-brand-lighter); |
90 | 104 | } |
91 | 105 |
|
92 | | -.dark .link:hover, |
93 | | -.dark .VPNavBarMenuLink:hover { |
94 | | - color: var(--vp-c-brand-lighter); |
| 106 | +.dark .vp-doc a:hover, |
| 107 | +.dark .vp-doc a > code:hover { |
| 108 | + color: var(--vp-c-brand-lightest); |
| 109 | + opacity: 1; |
| 110 | +} |
| 111 | + |
| 112 | +/* Transition by color instead of opacity */ |
| 113 | +.dark .vp-doc .custom-block a { |
| 114 | + transition: color 0.25s; |
95 | 115 | } |
0 commit comments