yaroslav
/
SequenceDiagram
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add dark theme when OS is set to dark mode

This commit is contained in:
David Evans 2020-01-20 01:26:41 +00:00
parent 9f8cd51875
commit 5d8f9dfff3
2 changed files with 115 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
web/styles/codemirror-override.css
View File

@ -12,3 +12,27 @@
.cm-s-default .cm-trailingspace {
background: rgba(255, 0, 0, 0.2);
}
@media (prefers-color-scheme: dark) {
.CodeMirror-cursor {border-color: #FFFFFF;}
.CodeMirror-selected {background: #666666;}
.CodeMirror-focused .CodeMirror-selected {background: #666699;}
.CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection {background: #666699;}
.CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection {background: #666699;}
.CodeMirror-gutters {
border-color: #444444;
background: #222222;
}
.cm-s-default .cm-keyword {color: #44AAFF;}
.cm-s-default .cm-variable {color: #FF9900;}
.cm-s-default .cm-operator {color: #44AAFF;}
.cm-s-default .cm-comment {color: #88FF00;}
.cm-s-default .cm-string {color: #FFEEDD;}
.cm-s-default .cm-error {color: #FF0000;}
.cm-s-default .cm-trailingspace {
background: rgba(255, 0, 0, 0.2);
}
}

91
web/styles/editor.css
View File

@ -380,6 +380,7 @@ html, body {
width: calc(100% - 20px);
line-height: 28px;
background: #99EE99;
color: #000000;
box-sizing: border-box;
}
@ -587,6 +588,96 @@ svg a:active, svg a:hover {
color: #FFCC00;
}
@media (prefers-color-scheme: dark) {
body, #loader p.noscript {
background: #222222;
color: #EEEEEE;
}
.drop-target:after {
background: rgba(64, 64, 64, 0.6);
text-shadow: 0 0 3px #000000;
border-color: #66AA55;
}
.pane-view {
background: #888888;
}
.pane-library {
background: #555555;
}
.pane-code .CodeMirror {
background: #222222;
}
.pane-code .editor-simple {
background: #222222;
color: #EEEEEE;
}
.param {
border-color: #AA0000;
}
.hover {
background: #807700;
}
.library-item > div {
border-color: #555555;
background: #888888;
}
.library-item:hover > div {
background: #999977;
}
.msg-error {
color: #440000;
background: #AA6666;
}
.options {
background: #333333;
}
.options, .options a, .urlbuilder {
border-color: #222222 !important;
}
.options a:link, .options a:visited {
color: #4488DD;
}
.options a:active, .options a:hover {
background: #444444;
color: #22AAFF;
}
.urlbuilder .message {
color: #AAAAAA;
}
.urlbuilder .or {
color: #999999;
}
.pick-document-item > div {
border-color: #999999;
background: #666666;
}
.pick-document-item:hover > div {
background: #888866;
}
.pick-document-item.new > div:before {
color: #999999;
}
}
@media print {
.drop-target:after {
display: none;