@@ -30,12 +30,11 @@ Light color scheme has to be defined using the css selector `:root` and `html[da
3030``` css
3131:root ,
3232html [data-theme = " light" ] {
33- --color-fill : 246 , 238 , 225 ;
34- --color-text-base : 1 , 44 , 86 ;
35- --color-accent : 225 , 74 , 57 ;
36- --color-card : 217 , 209 , 195 ;
37- --color-card-muted : 239 , 216 , 176 ;
38- --color-border : 220 , 152 , 145 ;
33+ --background : #f6eee1 ;
34+ --foreground : #012c56 ;
35+ --accent : #e14a39 ;
36+ --muted : #efd8b0 ;
37+ --border : #dc9891 ;
3938}
4039```
4140
@@ -46,12 +45,11 @@ html[data-theme="light"] {
4645``` css
4746:root ,
4847html [data-theme = " light" ] {
49- --color-fill : 242 , 245 , 236 ;
50- --color-text-base : 53 , 53 , 56 ;
51- --color-accent : 17 , 88 , 209 ;
52- --color-card : 206 , 213 , 180 ;
53- --color-card-muted : 187 , 199 , 137 ;
54- --color-border : 124 , 173 , 255 ;
48+ --background : #f2f5ec ;
49+ --foreground : #353538 ;
50+ --accent : #1158d1 ;
51+ --muted : #bbc789 ;
52+ --border : #7cadff ;
5553}
5654```
5755
@@ -62,12 +60,11 @@ html[data-theme="light"] {
6260``` css
6361:root ,
6462html [data-theme = " light" ] {
65- --color-fill : 250 , 252 , 252 ;
66- --color-text-base : 34 , 46 , 54 ;
67- --color-accent : 211 , 0 , 106 ;
68- --color-card : 234 , 206 , 219 ;
69- --color-card-muted : 241 , 186 , 212 ;
70- --color-border : 227 , 169 , 198 ;
63+ --background : #fafcfc ;
64+ --foreground : #222e36 ;
65+ --accent : #d3006a ;
66+ --muted : #f1bad4 ;
67+ --border : #e3a9c6 ;
7168}
7269```
7370
@@ -81,12 +78,11 @@ Dark color scheme has to be defined as `html[data-theme="dark"]`.
8178
8279``` css
8380html [data-theme = " dark" ] {
84- --color-fill : 47 , 55 , 65 ;
85- --color-text-base : 230 , 230 , 230 ;
86- --color-accent : 26 , 217 , 217 ;
87- --color-card : 63 , 75 , 90 ;
88- --color-card-muted : 89 , 107 , 129 ;
89- --color-border : 59 , 70 , 85 ;
81+ --background : #2f3741 ;
82+ --foreground : #e6e6e6 ;
83+ --accent : #1ad9d9 ;
84+ --muted : #596b81 ;
85+ --border : #3b4655 ;
9086}
9187```
9288
@@ -96,12 +92,11 @@ html[data-theme="dark"] {
9692
9793``` css
9894html [data-theme = " dark" ] {
99- --color-fill : 33 , 35 , 61 ;
100- --color-text-base : 244 , 247 , 245 ;
101- --color-accent : 255 , 82 , 86 ;
102- --color-card : 57 , 60 , 102 ;
103- --color-card-muted : 74 , 78 , 134 ;
104- --color-border : 177 , 47 , 50 ;
95+ --background : #21233d ;
96+ --foreground : #f4f7f5 ;
97+ --accent : #ff5256 ;
98+ --muted : #4a4e86 ;
99+ --border : #b12f32 ;
105100}
106101```
107102
@@ -111,12 +106,11 @@ html[data-theme="dark"] {
111106
112107``` css
113108html [data-theme = " dark" ] {
114- --color-fill : 53 , 54 , 64 ;
115- --color-text-base : 233 , 237 , 241 ;
116- --color-accent : 255 , 120 , 200 ;
117- --color-card : 75 , 76 , 89 ;
118- --color-card-muted : 113 , 85 , 102 ;
119- --color-border : 134 , 67 , 107 ;
109+ --background : #353640 ;
110+ --foreground : #e9edf1 ;
111+ --accent : #ff78c8 ;
112+ --muted : #715566 ;
113+ --border : #86436b ;
120114}
121115```
122116
@@ -126,13 +120,11 @@ html[data-theme="dark"] {
126120
127121``` css
128122html [data-theme = " dark" ] {
129- --color-fill : 16 , 23 , 42 ; /* higher contrast bgColor */
130- --color-fill : 33 , 39 , 55 ;
131- --color-text-base : 234 , 237 , 243 ;
132- --color-accent : 255 , 107 , 1 ;
133- --color-card : 27 , 39 , 70 ;
134- --color-card-muted : 138 , 51 , 2 ;
135- --color-border : 171 , 75 , 8 ;
123+ --background : #212737 ;
124+ --foreground : #eaedf3 ;
125+ --accent : #ff6b01 ;
126+ --muted : #8a3302 ;
127+ --border : #ab4b08 ;
136128}
137129```
138130
@@ -142,12 +134,11 @@ html[data-theme="dark"] {
142134
143135``` css
144136html [data-theme = " dark" ] {
145- --color-fill : 33 , 39 , 55 ; /* lower contrast bgColor */
146- --color-text-base : 234 , 237 , 243 ;
147- --color-accent : 255 , 107 , 1 ;
148- --color-card : 52 , 63 , 96 ;
149- --color-card-muted : 138 , 51 , 2 ;
150- --color-border : 171 , 75 , 8 ;
137+ --background : #212737 ; /* lower contrast background */
138+ --foreground : #eaedf3 ;
139+ --accent : #ff6b01 ;
140+ --muted : #8a3302 ;
141+ --border : #ab4b08 ;
151142}
152143```
153144
@@ -157,12 +148,11 @@ html[data-theme="dark"] {
157148
158149``` css
159150html [data-theme = " dark" ] {
160- --color-fill : 33 , 39 , 55 ;
161- --color-text-base : 234 , 237 , 243 ;
162- --color-accent : 235 , 63 , 211 ;
163- --color-card : 52 , 63 , 96 ;
164- --color-card-muted : 125 , 79 , 124 ;
165- --color-border : 100 , 36 , 81 ;
151+ --background : #212737 ;
152+ --foreground : #eaedf3 ;
153+ --accent : #eb3fd3 ;
154+ --muted : #7d4f7c ;
155+ --border : #642451 ;
166156}
167157```
168158
@@ -172,11 +162,10 @@ html[data-theme="dark"] {
172162
173163``` css
174164html [data-theme = " dark" ] {
175- --color-fill : 0 , 1 , 35 ;
176- --color-accent : 97 , 123 , 255 ;
177- --color-text-base : 234 , 237 , 243 ;
178- --color-card : 33 , 34 , 83 ;
179- --color-card-muted : 12 , 14 , 79 ;
180- --color-border : 48 , 63 , 138 ;
165+ --background : #000123 ;
166+ --accent : #617bff ;
167+ --foreground : #eaedf3 ;
168+ --muted : #0c0e4f ;
169+ --border : #303f8a ;
181170}
182171```
0 commit comments