Skip to content

Commit e59e033

Browse files
praveen-murali-indpraveen-murali-ind
authored
Support dark mode (#1339)
* Dark mode support base * Update hr color * Color fix
1 parent eff7202 commit e59e033

1 file changed

Lines changed: 238 additions & 2 deletions

File tree

‎src/styles/editor/editor-content.scss‎

Lines changed: 238 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,171 @@
11
@import url("https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/styles/github.min.css");
22

3-
:root {
3+
4+
.neeto-ui-theme--dark .hljs {
5+
color: #c9d1d9;
6+
background: #0d1117
7+
}
8+
9+
.neeto-ui-theme--dark .hljs-doctag,
10+
.neeto-ui-theme--dark .hljs-keyword,
11+
.neeto-ui-theme--dark .hljs-meta .hljs-keyword,
12+
.neeto-ui-theme--dark .hljs-template-tag,
13+
.neeto-ui-theme--dark .hljs-template-variable,
14+
.neeto-ui-theme--dark .hljs-type,
15+
.neeto-ui-theme--dark .hljs-variable.language_ {
16+
color: #ff7b72
17+
}
18+
19+
.neeto-ui-theme--dark .hljs-title,
20+
.neeto-ui-theme--dark .hljs-title.class_,
21+
.neeto-ui-theme--dark .hljs-title.class_.inherited__,
22+
.neeto-ui-theme--dark .hljs-title.function_ {
23+
color: #d2a8ff
24+
}
25+
26+
.neeto-ui-theme--dark .hljs-attr,
27+
.neeto-ui-theme--dark .hljs-attribute,
28+
.neeto-ui-theme--dark .hljs-literal,
29+
.neeto-ui-theme--dark .hljs-meta,
30+
.neeto-ui-theme--dark .hljs-number,
31+
.neeto-ui-theme--dark .hljs-operator,
32+
.neeto-ui-theme--dark .hljs-selector-attr,
33+
.neeto-ui-theme--dark .hljs-selector-class,
34+
.neeto-ui-theme--dark .hljs-selector-id,
35+
.neeto-ui-theme--dark .hljs-variable {
36+
color: #79c0ff
37+
}
38+
39+
.neeto-ui-theme--dark .hljs-meta .hljs-string,
40+
.neeto-ui-theme--dark .hljs-regexp,
41+
.neeto-ui-theme--dark .hljs-string {
42+
color: #a5d6ff
43+
}
44+
45+
.neeto-ui-theme--dark .hljs-built_in,
46+
.neeto-ui-theme--dark .hljs-symbol {
47+
color: #ffa657
48+
}
49+
50+
.neeto-ui-theme--dark .hljs-code,
51+
.neeto-ui-theme--dark .hljs-comment,
52+
.neeto-ui-theme--dark .hljs-formula {
53+
color: #8b949e
54+
}
55+
56+
.neeto-ui-theme--dark .hljs-name,
57+
.neeto-ui-theme--dark .hljs-quote,
58+
.neeto-ui-theme--dark .hljs-selector-pseudo,
59+
.neeto-ui-theme--dark .hljs-selector-tag {
60+
color: #7ee787
61+
}
62+
63+
.neeto-ui-theme--dark .hljs-subst {
64+
color: #c9d1d9
65+
}
66+
67+
.neeto-ui-theme--dark .hljs-section {
68+
color: #1f6feb;
69+
}
70+
71+
.neeto-ui-theme--dark .hljs-bullet {
72+
color: #f2cc60
73+
}
74+
75+
.neeto-ui-theme--dark .hljs-emphasis {
76+
color: #c9d1d9;
77+
}
78+
79+
.neeto-ui-theme--dark .hljs-strong {
80+
color: #c9d1d9;
81+
font-weight: 700
82+
}
83+
84+
.neeto-ui-theme--dark .hljs-addition {
85+
color: #aff5b4;
86+
background-color: #033a16
87+
}
88+
89+
.neeto-ui-theme--dark .hljs-deletion {
90+
color: #ffdcd7;
91+
background-color: #67060c
92+
}
93+
94+
.neeto-ui-theme--light .hljs {
95+
color: #333;
96+
background: #f8f8f8
97+
}
98+
99+
.neeto-ui-theme--light .hljs-comment,
100+
.neeto-ui-theme--light .hljs-quote {
101+
color: #998;
102+
}
103+
104+
.neeto-ui-theme--light .hljs-keyword,
105+
.neeto-ui-theme--light .hljs-selector-tag,
106+
.neeto-ui-theme--light .hljs-subst {
107+
color: #333;
108+
}
109+
110+
.neeto-ui-theme--light .hljs-literal,
111+
.neeto-ui-theme--light .hljs-number,
112+
.neeto-ui-theme--light .hljs-tag .hljs-attr,
113+
.neeto-ui-theme--light .hljs-template-variable,
114+
.neeto-ui-theme--light .hljs-variable {
115+
color: teal
116+
}
117+
118+
.neeto-ui-theme--light .hljs-doctag,
119+
.neeto-ui-theme--light .hljs-string {
120+
color: #d14
121+
}
122+
123+
.neeto-ui-theme--light .hljs-section,
124+
.neeto-ui-theme--light .hljs-selector-id,
125+
.neeto-ui-theme--light .hljs-title {
126+
color: #900;
127+
}
128+
129+
.neeto-ui-theme--light .hljs-class .hljs-title,
130+
.neeto-ui-theme--light .hljs-type {
131+
color: #458;
132+
}
133+
134+
.neeto-ui-theme--light .hljs-attribute,
135+
.neeto-ui-theme--light .hljs-name,
136+
.neeto-ui-theme--light .hljs-tag {
137+
color: navy;
138+
}
139+
140+
.neeto-ui-theme--light .hljs-link,
141+
.neeto-ui-theme--light .hljs-regexp {
142+
color: #009926
143+
}
144+
145+
.neeto-ui-theme--light .hljs-bullet,
146+
.neeto-ui-theme--light .hljs-symbol {
147+
color: #990073
148+
}
149+
150+
.neeto-ui-theme--light .hljs-built_in,
151+
.neeto-ui-theme--light .hljs-builtin-name {
152+
color: #0086b3
153+
}
154+
155+
.neeto-ui-theme--light .hljs-meta {
156+
color: #999;
157+
}
158+
159+
.neeto-ui-theme--light .hljs-deletion {
160+
background: #fdd
161+
}
162+
163+
.neeto-ui-theme--light .hljs-addition {
164+
background: #dfd
165+
}
166+
167+
:root,
168+
.neeto-ui-theme--light {
4169
--neeto-editor-white: 255, 255, 255;
5170
--neeto-editor-black: 12, 17, 29;
6171
--neeto-editor-gray-800: 16, 24, 40;
@@ -91,13 +256,84 @@
91256
--neeto-editor-content-image-border-radius: 8px;
92257
}
93258

259+
.neeto-ui-theme--dark {
260+
--neeto-editor-white: 18, 18, 18;
261+
--neeto-editor-black: 224, 224, 224;
262+
--neeto-editor-gray-50: 10, 10, 10;
263+
--neeto-editor-gray-100: 30, 30, 30;
264+
--neeto-editor-gray-200: 44, 44, 44;
265+
--neeto-editor-gray-300: 57, 57, 57;
266+
--neeto-editor-gray-400: 73, 73, 73;
267+
--neeto-editor-gray-500: 92, 92, 92;
268+
--neeto-editor-gray-600: 124, 124, 124;
269+
--neeto-editor-gray-700: 162, 162, 162;
270+
--neeto-editor-gray-800: 200, 200, 200;
271+
--neeto-editor-primary-800: 0, 245, 200;
272+
--neeto-editor-primary-600: 0, 224, 183;
273+
--neeto-editor-primary-500: 0, 204, 167;
274+
--neeto-editor-primary-100: 0, 61, 49;
275+
--neeto-editor-primary-50: 0, 41, 33;
276+
--neeto-editor-accent-800: 142, 189, 245;
277+
--neeto-editor-accent-600: 105, 167, 242;
278+
--neeto-editor-accent-500: 67, 144, 239;
279+
--neeto-editor-accent-100: 10, 56, 113;
280+
--neeto-editor-accent-50: 7, 37, 75;
281+
--neeto-editor-error-800: 247, 109, 116;
282+
--neeto-editor-error-600: 236, 91, 98;
283+
--neeto-editor-error-500: 227, 72, 80;
284+
--neeto-editor-error-100: 129, 33, 38;
285+
--neeto-editor-success-800: 0, 245, 200;
286+
--neeto-editor-success-600: 0, 224, 183;
287+
--neeto-editor-success-500: 0, 204, 167;
288+
--neeto-editor-success-100: 0, 61, 49;
289+
--neeto-editor-warning-800: 249, 164, 63;
290+
--neeto-editor-warning-600: 242, 148, 35;
291+
--neeto-editor-warning-500: 230, 134, 25;
292+
--neeto-editor-warning-100: 131, 74, 11;
293+
--neeto-editor-info-800: 142, 189, 245;
294+
--neeto-editor-info-600: 105, 167, 242;
295+
--neeto-editor-info-500: 67, 144, 239;
296+
--neeto-editor-info-100: 10, 56, 113;
297+
--neeto-editor-pastel-silver: 167, 168, 170;
298+
--neeto-editor-pastel-red: 183, 164, 165;
299+
--neeto-editor-pastel-yellow: 182, 175, 143;
300+
--neeto-editor-pastel-green: 152, 179, 167;
301+
--neeto-editor-pastel-blue: 170, 175, 183;
302+
--neeto-editor-pastel-purple: 171, 169, 183;
303+
--neeto-editor-pastel-pink: 181, 162, 174;
304+
--neeto-editor-content-heading-color: 224, 224, 224, 1;
305+
--neeto-editor-content-paragraph-color: 224, 224, 224, 1;
306+
--neeto-editor-content-code-background-color: 21, 27, 35, 1;
307+
--neeto-editor-content-code-line-number-color: 89, 99, 110, 1;
308+
--neeto-editor-content-code-color: 240, 246, 252, 1;
309+
--neeto-editor-content-blockquote-color: 145, 152, 161, 1;
310+
--neeto-editor-content-blockquote-border-color: 61, 68, 77, 1;
311+
}
312+
313+
.neeto-ui-theme--dark .neeto-editor-content.neeto-editor-size--small {
314+
--neeto-editor-content-heading-color: 224, 224, 224, 1;
315+
--neeto-editor-content-paragraph-color: 224, 224, 224, 1;
316+
}
317+
318+
.neeto-ui-theme--light .neeto-editor-content {
319+
--neeto-editor-content-heading-color: 12, 17, 29, 1;
320+
--neeto-editor-content-paragraph-color: 54, 55, 55, 1;
321+
}
322+
323+
.neeto-ui-theme--light .neeto-editor-content.neeto-editor-size--small {
324+
--neeto-editor-content-heading-color: 31, 35, 40, 1;
325+
--neeto-editor-content-paragraph-color: 31, 35, 40, 1;
326+
}
327+
94328
.neeto-editor-content {
95329
white-space: pre-wrap;
96330
word-break: break-word;
97331
tab-size: 2;
98332

99333
hr {
100334
margin: 0.5rem 0;
335+
border-color: rgba(var(--neeto-editor-content-paragraph-color));
336+
opacity: 0.2;
101337
}
102338

103339
.table-responsive {
@@ -739,4 +975,4 @@
739975
background-color: rgb(var(--neeto-editor-gray-300));
740976
}
741977
}
742-
}
978+
}

0 commit comments

Comments
 (0)