Newer
Older
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
.cm-editor .cm-gutters {
@extend .border-end;
@extend .border-secondary-subtle;
}
.cm-editor .cm-gutter {
@extend .bg-secondary-subtle;
@extend .text-secondary-emphasis;
}
.cm-editor .cm-activeLineGutter {
@extend .bg-secondary;
@extend .text-white;
background-color: yellow;
}
.cm-editor .cm-panels {
@extend .bg-body-secondary;
@extend .text-body;
}
.cm-editor .cm-selectionBackground {
@extend .bg-body-secondary;
}
/* Based on https://discuss.codemirror.net/t/dynamic-light-mode-dark-mode-how/4709/5 */
.cm-editor, .cm-view {
.cmt-atom {color: #221199;}
.cmt-comment {color: #AA5500;}
.cmt-keyword {color: #8959A8;}
.cmt-literal {color: #4271AE;}
.cmt-number {color: #F5871F;}
.cmt-operator {color: #008803;}
.cmt-separator {color: #990033;}
.cmt-string {color: #FF5500;}
@media (prefers-color-scheme: dark) {
.cmt-atom {color: #F78C6C;}
.cmt-comment {color: #A0A0A0;}
.cmt-keyword {color: #C792EA;}
.cmt-literal {color: #FFCB6B;}
.cmt-number {color: #FF5370;}
.cmt-operator {color: #89DDFF;}
.cmt-separator {color: #FF7DE9;}
.cmt-string {color: #F07178;}
}
}