-
-
Notifications
You must be signed in to change notification settings - Fork 310
/
styles.scss
89 lines (76 loc) · 2.76 KB
/
styles.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
@import "scss/variables";
@import "scss/functions";
@import "~codemirror/lib/codemirror.css";
@import "~codemirror/addon/fold/foldgutter.css";
@import "~codemirror/addon/hint/show-hint.css";
@import "~codemirror/addon/lint/lint.css";
@import "~codemirror/addon/dialog/dialog.css";
@import "~codemirror/addon/search/matchesonscrollbar.css";
@import "~codemirror/addon/tern/tern.css";
@import "~ngx-toastr/toastr.css";
@import "scss/globals";
@import "scss/framework";
@import "scss/all";
@mixin dark-theme {
// Reset the imported modules for the new theme.
// This is required because clarity uses the exports mixin mechanism to prevent loading components multiple times.
// This prevents being able to include styles for the component in the new theme class.
// $imported-modules: () !global;
--theme-bg-color: var(--black-color);
--theme-off-bg-color: #3f4349;
--theme-font-color: var(--white-color);
--theme-off-font-color: var(--light-grey-color);
--theme-border-color: #565c64;
--theme-off-border-color: #565656;
--shadow-bg: rgba(0, 0, 0, 0.3);
--header-bg-color: var(--theme-off-bg-color);
--rgb-theme-bg: var(--rgb-black);
--rgb-theme-off-bg: 63, 67, 73; // #3f4349
--rgb-theme-font: var(--rgb-white);
--rgb-theme-off-font: var(--rgb-light-grey);
--rgb-theme-border: 86, 92, 100; // #565c64
--rgb-theme-off-border: 86, 86, 86; // #565656
// @import "scss/framework.dark";
// @import "scss/all";
--editor-comment-color: var(--dark-grey-color);
--editor-string-color: var(--orange-color);
--editor-number-color: var(--orange-color);
--editor-variable-color: var(--theme-font-color);
--editor-keyword-color: var(--blue-color);
--editor-atom-color: var(--theme-font-color);
--editor-attribute-color: var(--green-color);
--editor-property-color: var(--blue-color);
--editor-punctuation-color: var(--blue-color);
--editor-def-color: var(--orange-color);
--editor-cursor-color: var(--blue-color);
}
.dark-theme {
@include dark-theme;
}
.dracula-theme {
--theme-bg-color: #282a36;
--theme-off-bg-color: #303240;
--theme-font-color: #f8f8f2;
--theme-off-font-color: #f8f8f2;
--theme-border-color: #40414d;
--theme-off-border-color: #383942;
--header-bg-color: var(--theme-off-bg-color);
--rgb-theme-bg: 40, 42, 54;
--rgb-theme-off-bg: 48, 50, 54;
--editor-comment-color: #6272a4;
--editor-string-color: #f1fa8c;
--editor-number-color: #bd93f9;
--editor-variable-color: #50fa7b;
--editor-attribute-color: #ff79c6;
--editor-keyword-color: #ff79c6;
--editor-atom-color: #bd93f9;
--editor-property-color: #bd93f9;
--editor-punctuation-color: #f8f8f2;
--editor-cursor-color: #f8f8f2;
}
.system-theme {
@media (prefers-color-scheme: dark) {
@include dark-theme;
}
// @media (prefers-color-scheme: light) {}
}