Skip to content

Commit

Permalink
fix: dark theme colors and fix issue #40 #42
Browse files Browse the repository at this point in the history
  • Loading branch information
@joonas-yoon
joonas-yoon committed Oct 20, 2021
1 parent 02a2d2f commit 94023a2
Showing 1 changed file with 90 additions and 70 deletions.
160 changes: 90 additions & 70 deletions css/theme-dark.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -266,7 +266,7 @@ html[theme='dark'] .input-group-addon {
border-color: #222;
}
html[theme='dark'] .breadcrumbs {
background: #1a1a1a;
background: #1d1d1d;
border-color: #252525;
}
html[theme='dark'] .sky-form {
Expand Down Expand Up @@ -369,7 +369,7 @@ html[theme='dark'] .dropdown-menu > li > a:focus {
background-color: #5f5f5f;
}
html[theme='dark'] .funny-boxes {
background: #191919;
background: #262626;
}
html[theme='dark'] .funny-boxes h2 a {
color: #89c4e8;
Expand Down Expand Up @@ -441,6 +441,9 @@ html[theme='dark'] .posts .dl-horizontal a {
html[theme='dark'] .result-ac {
color: #09b58c !important;
}
html[theme='dark'] .result-pac {
color: #efc050 !important;
}
html[theme='dark'] .result-wa {
color: #dd4124 !important;
}
Expand Down Expand Up @@ -551,7 +554,7 @@ html[theme='dark'] .problem-label-bookmark {
color: #777 !important;
}
html[theme='dark'] .label-purple,
html[theme='dark'] .badge-purple,
html[theme='dark'] .badge-purple,
html[theme='dark'] .problem-label-tag {
background-color: transparent;
border: 1px solid #9b6bcc;
Expand Down Expand Up @@ -683,9 +686,9 @@ html[theme='dark'] .redactor-styles figure,
html[theme='dark'] .redactor-box.redactor-styles-on,
html[theme='dark'] #logo-header,
html[theme='dark'] #problem-body img:not(.level_badge) {
filter: invert(80%) hue-rotate(180deg) brightness(110%) contrast(150%);
-webkit-filter: invert(80%) hue-rotate(180deg) brightness(110%) contrast(150%);
-moz-filter: invert(80%) hue-rotate(180deg) brightness(110%) contrast(150%);
filter: invert(100%) hue-rotate(180deg) brightness(120%) contrast(72.5%);
-webkit-filter: invert(100%) hue-rotate(180deg) brightness(120%) contrast(72.5%);
-moz-filter: invert(100%) hue-rotate(180deg) brightness(120%) contrast(72.5%);
transition: 0.2s ease-out;
}
html[theme='dark'] .panel img:hover,
Expand Down Expand Up @@ -764,121 +767,138 @@ html[theme='dark'] .CodeMirror {
Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16)
But override as 'cm-s-paper', 'cm-s-default' to replace (original is 'cm-s-base16-dark')
*/
html[theme="dark"] .cm-s-default.CodeMirror,
html[theme="dark"] .cm-s-paper.CodeMirror {
background: #151515;
html[theme='dark'] .cm-s-default.CodeMirror,
html[theme='dark'] .cm-s-paper.CodeMirror {
background: #1d1d1d;
color: #e0e0e0;
}
html[theme="dark"] .cm-s-default div.CodeMirror-selected,
html[theme="dark"] .cm-s-paper div.CodeMirror-selected {
html[theme='dark'] .cm-s-default div.CodeMirror-selected,
html[theme='dark'] .cm-s-paper div.CodeMirror-selected {
background: #303030;
}
html[theme="dark"] .cm-s-default .CodeMirror-line::selection,
html[theme="dark"] .cm-s-paper .CodeMirror-line::selection,
html[theme="dark"] .cm-s-default .CodeMirror-line > span::selection,
html[theme="dark"] .cm-s-paper .CodeMirror-line > span::selection,
html[theme="dark"] .cm-s-default .CodeMirror-line > span > span::selection,
html[theme="dark"] .cm-s-paper .CodeMirror-line > span > span::selection {
html[theme='dark'] .cm-s-default .CodeMirror-line::selection,
html[theme='dark'] .cm-s-paper .CodeMirror-line::selection,
html[theme='dark'] .cm-s-default .CodeMirror-line > span::selection,
html[theme='dark'] .cm-s-paper .CodeMirror-line > span::selection,
html[theme='dark'] .cm-s-default .CodeMirror-line > span > span::selection,
html[theme='dark'] .cm-s-paper .CodeMirror-line > span > span::selection {
background: rgba(48, 48, 48, 0.99);
}
html[theme="dark"] .cm-s-default .CodeMirror-line::-moz-selection,
html[theme="dark"] .cm-s-paper .CodeMirror-line::-moz-selection,
html[theme="dark"] .cm-s-default .CodeMirror-line > span::-moz-selection,
html[theme="dark"] .cm-s-paper .CodeMirror-line > span::-moz-selection,
html[theme="dark"] .cm-s-default .CodeMirror-line > span > span::-moz-selection,
html[theme="dark"] .cm-s-paper .CodeMirror-line > span > span::-moz-selection {
html[theme='dark'] .cm-s-default .CodeMirror-line::-moz-selection,
html[theme='dark'] .cm-s-paper .CodeMirror-line::-moz-selection,
html[theme='dark'] .cm-s-default .CodeMirror-line > span::-moz-selection,
html[theme='dark'] .cm-s-paper .CodeMirror-line > span::-moz-selection,
html[theme='dark'] .cm-s-default .CodeMirror-line > span > span::-moz-selection,
html[theme='dark'] .cm-s-paper .CodeMirror-line > span > span::-moz-selection {
background: rgba(48, 48, 48, 0.99);
}
html[theme="dark"] .cm-s-default .CodeMirror-gutters,
html[theme="dark"] .cm-s-paper .CodeMirror-gutters {
background: #151515;
html[theme='dark'] .editor-toolbar a.fa-header-x:after {
color: #d6dadd !important;
}
html[theme='dark'] .editor-toolbar.fullscreen,
html[theme='dark'] .editor-toolbar.fullscreen::before,
html[theme='dark'] .editor-toolbar.fullscreen::after {
background: #222222;
}
html[theme='dark'] .editor-preview-active,
html[theme='dark'] .editor-preview-active-side {
background: #222;
border: 1px solid #333;
}
html[theme='dark'] .editor-toolbar.disabled-for-preview a:not(.no-disable) {
background: inherit;
opacity: 0.5;
}
html[theme='dark'] .cm-s-default .CodeMirror-gutters,
html[theme='dark'] .cm-s-paper .CodeMirror-gutters {
background: #1d1d1d;
border-right: 0px;
}
html[theme="dark"] .cm-s-default .CodeMirror-guttermarker,
html[theme="dark"] .cm-s-paper .CodeMirror-guttermarker {
html[theme='dark'] .cm-s-default .CodeMirror-guttermarker,
html[theme='dark'] .cm-s-paper .CodeMirror-guttermarker {
color: #ac4142;
}
html[theme="dark"] .cm-s-default .CodeMirror-guttermarker-subtle,
html[theme="dark"] .cm-s-paper .CodeMirror-guttermarker-subtle {
html[theme='dark'] .cm-s-default .CodeMirror-guttermarker-subtle,
html[theme='dark'] .cm-s-paper .CodeMirror-guttermarker-subtle {
color: #505050;
}
html[theme="dark"] .cm-s-default .CodeMirror-linenumber,
html[theme="dark"] .cm-s-paper .CodeMirror-linenumber {
html[theme='dark'] .cm-s-default .CodeMirror-linenumber,
html[theme='dark'] .cm-s-paper .CodeMirror-linenumber {
color: #505050;
}
html[theme="dark"] .cm-s-default .CodeMirror-cursor,
html[theme="dark"] .cm-s-paper .CodeMirror-cursor {
html[theme='dark'] .cm-s-default .CodeMirror-cursor,
html[theme='dark'] .cm-s-paper .CodeMirror-cursor {
border-left: 1px solid #b0b0b0;
}
html[theme="dark"] .cm-s-default.cm-fat-cursor .CodeMirror-cursor,
html[theme="dark"] .cm-s-paper.cm-fat-cursor .CodeMirror-cursor {
html[theme='dark'] .cm-s-default.cm-fat-cursor .CodeMirror-cursor,
html[theme='dark'] .cm-s-paper.cm-fat-cursor .CodeMirror-cursor {
background-color: #8e8d8875 !important;
}
html[theme="dark"] .cm-s-default .cm-animate-fat-cursor,
html[theme="dark"] .cm-s-paper .cm-animate-fat-cursor {
html[theme='dark'] .cm-s-default .cm-animate-fat-cursor,
html[theme='dark'] .cm-s-paper .cm-animate-fat-cursor {
background-color: #8e8d8875 !important;
}
html[theme="dark"] .cm-s-default span.cm-comment,
html[theme="dark"] .cm-s-paper span.cm-comment {
html[theme='dark'] .cm-s-default span.cm-comment,
html[theme='dark'] .cm-s-paper span.cm-comment {
color: #8f5536;
}
html[theme="dark"] .cm-s-default span.cm-atom,
html[theme="dark"] .cm-s-paper span.cm-atom {
html[theme='dark'] .cm-s-default span.cm-atom,
html[theme='dark'] .cm-s-paper span.cm-atom {
color: #aa759f;
}
html[theme="dark"] .cm-s-default span.cm-number,
html[theme="dark"] .cm-s-paper span.cm-number {
html[theme='dark'] .cm-s-default span.cm-number,
html[theme='dark'] .cm-s-paper span.cm-number {
color: #aa759f;
}
html[theme="dark"] .cm-s-default span.cm-property,
html[theme="dark"] .cm-s-paper span.cm-property,
html[theme="dark"] .cm-s-default span.cm-attribute,
html[theme="dark"] .cm-s-paper span.cm-attribute {
html[theme='dark'] .cm-s-default span.cm-property,
html[theme='dark'] .cm-s-paper span.cm-property,
html[theme='dark'] .cm-s-default span.cm-attribute,
html[theme='dark'] .cm-s-paper span.cm-attribute {
color: #90a959;
}
html[theme="dark"] .cm-s-default span.cm-keyword,
html[theme="dark"] .cm-s-paper span.cm-keyword {
html[theme='dark'] .cm-s-default span.cm-keyword,
html[theme='dark'] .cm-s-paper span.cm-keyword {
color: #ac4142;
}
html[theme="dark"] .cm-s-default span.cm-string,
html[theme="dark"] .cm-s-paper span.cm-string {
html[theme='dark'] .cm-s-default span.cm-string,
html[theme='dark'] .cm-s-paper span.cm-string {
color: #f4bf75;
}
html[theme="dark"] .cm-s-default span.cm-variable,
html[theme="dark"] .cm-s-paper span.cm-variable {
html[theme='dark'] .cm-s-default span.cm-variable,
html[theme='dark'] .cm-s-paper span.cm-variable {
color: #90a959;
}
html[theme="dark"] .cm-s-default span.cm-variable-2,
html[theme="dark"] .cm-s-paper span.cm-variable-2 {
html[theme='dark'] .cm-s-default span.cm-variable-2,
html[theme='dark'] .cm-s-paper span.cm-variable-2 {
color: #6a9fb5;
}
html[theme="dark"] .cm-s-default span.cm-def,
html[theme="dark"] .cm-s-paper span.cm-def {
html[theme='dark'] .cm-s-default span.cm-def,
html[theme='dark'] .cm-s-paper span.cm-def {
color: #d28445;
}
html[theme="dark"] .cm-s-default span.cm-bracket,
html[theme="dark"] .cm-s-paper span.cm-bracket {
html[theme='dark'] .cm-s-default span.cm-bracket,
html[theme='dark'] .cm-s-paper span.cm-bracket {
color: #e0e0e0;
}
html[theme="dark"] .cm-s-default span.cm-tag,
html[theme="dark"] .cm-s-paper span.cm-tag {
html[theme='dark'] .cm-s-default span.cm-tag,
html[theme='dark'] .cm-s-paper span.cm-tag {
color: #ac4142;
}
html[theme="dark"] .cm-s-default span.cm-link,
html[theme="dark"] .cm-s-paper span.cm-link {
html[theme='dark'] .cm-s-default span.cm-link,
html[theme='dark'] .cm-s-paper span.cm-link {
color: #aa759f;
}
html[theme="dark"] .cm-s-default span.cm-error,
html[theme="dark"] .cm-s-paper span.cm-error {
html[theme='dark'] .cm-s-default span.cm-error,
html[theme='dark'] .cm-s-paper span.cm-error {
background: #ac4142;
color: #b0b0b0;
}
html[theme="dark"] .cm-s-default .CodeMirror-activeline-background,
html[theme="dark"] .cm-s-paper .CodeMirror-activeline-background {
html[theme='dark'] .cm-s-default .CodeMirror-activeline-background,
html[theme='dark'] .cm-s-paper .CodeMirror-activeline-background {
background: #202020;
}
html[theme="dark"] .cm-s-default .CodeMirror-matchingbracket,
html[theme="dark"] .cm-s-paper .CodeMirror-matchingbracket {
html[theme='dark'] .cm-s-default .CodeMirror-matchingbracket,
html[theme='dark'] .cm-s-paper .CodeMirror-matchingbracket {
text-decoration: underline;
color: white !important;
}

0 comments on commit 94023a2

Please sign in to comment.