From 13334d2ab0ed49de23bc820904d486f505dfca06 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?P=C4=93teris=20Caune?= Date: Fri, 18 Jun 2021 12:27:43 +0300 Subject: [PATCH] Implement explicit light/dark mode selection (WIP) --- static/css/my_checks.css | 31 ++----- static/css/nouislider.dark.css | 46 +++++------ static/css/pricing.css | 45 +++-------- static/css/selectize.dark.css | 8 +- static/css/syntax.css | 142 ++++++++++++++++----------------- static/css/variables.css | 124 +++++++++++++++++----------- static/css/welcome.css | 8 +- 7 files changed, 190 insertions(+), 214 deletions(-) diff --git a/static/css/my_checks.css b/static/css/my_checks.css index a7728806..423598da 100644 --- a/static/css/my_checks.css +++ b/static/css/my_checks.css @@ -3,17 +3,9 @@ } #my-checks-tags .up { - color: #333; - background-color: #fff; - border-color: #ccc; -} - -@media (prefers-color-scheme: dark) { - #my-checks-tags .up { - color: #e0e0e2; - background-color: #25252a; - border-color: #303033; - } + color: var(--tag-up-color); + background-color: var(--tag-up-bg); + border-color: var(--tag-up-border); } #my-checks-tags .grace { @@ -29,19 +21,10 @@ } #my-checks-tags .checked { - box-shadow: 0 0 3px #ddd; - background: #333; - color: #eee; - border-color: #000; -} - -@media (prefers-color-scheme: dark) { - #my-checks-tags .checked { - box-shadow: none; - background: #fff; - color: #333; - border-color: #ccc; - } + box-shadow: 0 0 3px var(--tag-checked-shadow); + background: var(--tag-checked-bg); + color: var(--tag-checked-color); + border-color: var(--tag-checked-border); } #search { diff --git a/static/css/nouislider.dark.css b/static/css/nouislider.dark.css index a5562b68..5ea6c0c3 100644 --- a/static/css/nouislider.dark.css +++ b/static/css/nouislider.dark.css @@ -1,29 +1,27 @@ -@media (prefers-color-scheme: dark) { - .noUi-background { - background-color: #3c3939; - box-shadow: none; - } +body.dark .noUi-background { + background-color: #3c3939; + box-shadow: none; +} - .noUi-target { - border-color: #515151; - box-shadow: none; - } +body.dark .noUi-target { + border-color: #515151; + box-shadow: none; +} - .noUi-target.noUi-connect { - box-shadow: none; - } +body.dark .noUi-target.noUi-connect { + box-shadow: none; +} - .noUi-handle { - background-color: #515050; - border-color: #605c5c; - box-shadow: none; - } +body.dark .noUi-handle { + background-color: #515050; + border-color: #605c5c; + box-shadow: none; +} - .noUi-marker { - background: #777; - } +body.dark .noUi-marker { + background: #777; +} - .noUi-pips { - color: #777780; - } -} \ No newline at end of file +body.dark .noUi-pips { + color: #777780; +} diff --git a/static/css/pricing.css b/static/css/pricing.css index c1bdcb2e..fd646183 100644 --- a/static/css/pricing.css +++ b/static/css/pricing.css @@ -10,56 +10,29 @@ display: inline-block; line-height: 0.9; - text-shadow: 0px 1px white, -1px 1px white, 1px 1px white, -1px 0px white; + text-shadow: 0px 1px var(--panel-bg), -1px 1px var(--panel-bg), 1px 1px var(--panel-bg), -1px 0px var(--panel-bg); } .hobbyist h1 { - color: #0a220c; - border-bottom: 3px solid #A5D6A7; + color: var(--plan-hobbyist-color); + border-bottom: 3px solid var(--plan-hobbyist-border); } .supporter h1 { - color: #1d190f; - border-bottom: 3px solid #FFE082; + color: var(--plan-supporter-color); + border-bottom: 3px solid var(--plan-supporter-border); } .business h1 { - color: #141c22; - border-bottom: 3px solid #90CAF9; + color: var(--plan-business-color); + border-bottom: 3px solid var(--plan-business-border); } .business-plus h1 { - color: #221f1e; - border-bottom: 3px solid #BCAAA4; + color: var(--plan-business-plus-color); + border-bottom: 3px solid var(--plan-business-plus-border); } -@media (prefers-color-scheme: dark) { - .panel.plan h1 { - text-shadow: 0px 1px var(--panel-bg), -1px 1px var(--panel-bg), 1px 1px var(--panel-bg), -1px 0px var(--panel-bg); - } - - .hobbyist h1 { - color: #e3ffe4; - border-bottom: 3px solid #A5D6A7; - } - - .supporter h1 { - color: #fff0c4; - border-bottom: 3px solid #FFE082; - } - - .business h1 { - color: #e8f2f9; - border-bottom: 3px solid #90CAF9; - } - - .business-plus h1 { - color: #fff5f2; - border-bottom: 3px solid #BCAAA4; - } -} - - .mo { font-size: 16px; } diff --git a/static/css/selectize.dark.css b/static/css/selectize.dark.css index d391df7c..94306d02 100644 --- a/static/css/selectize.dark.css +++ b/static/css/selectize.dark.css @@ -1,5 +1,3 @@ -@media (prefers-color-scheme: dark) { - .selectize-input input { - color: var(--input-color); - } -} \ No newline at end of file +.selectize-input input { + color: var(--input-color); +} diff --git a/static/css/syntax.css b/static/css/syntax.css index 4df5c952..95cfe4cd 100644 --- a/static/css/syntax.css +++ b/static/css/syntax.css @@ -59,74 +59,74 @@ .highlight .vi { color: #008080 } /* Name.Variable.Instance */ .highlight .il { color: #009999 } /* Literal.Number.Integer.Long */ -@media (prefers-color-scheme: dark) { -.highlight .hll { background-color: #49483e } -.highlight .c { color: #75715e } /* Comment */ -.highlight .err { color: #960050; background-color: #1e0010 } /* Error */ -.highlight .k { color: #66d9ef } /* Keyword */ -.highlight .l { color: #ae81ff } /* Literal */ -.highlight .n { color: #f8f8f2 } /* Name */ -.highlight .o { color: #f92672 } /* Operator */ -.highlight .p { color: #f8f8f2 } /* Punctuation */ -.highlight .ch { color: #75715e } /* Comment.Hashbang */ -.highlight .cm { color: #75715e } /* Comment.Multiline */ -.highlight .cp { color: #75715e } /* Comment.Preproc */ -.highlight .cpf { color: #75715e } /* Comment.PreprocFile */ -.highlight .c1 { color: #75715e } /* Comment.Single */ -.highlight .cs { color: #75715e } /* Comment.Special */ -.highlight .gd { color: #f92672 } /* Generic.Deleted */ -.highlight .ge { font-style: italic } /* Generic.Emph */ -.highlight .gi { color: #a6e22e } /* Generic.Inserted */ -.highlight .gs { font-weight: bold } /* Generic.Strong */ -.highlight .gu { color: #75715e } /* Generic.Subheading */ -.highlight .kc { color: #66d9ef } /* Keyword.Constant */ -.highlight .kd { color: #66d9ef } /* Keyword.Declaration */ -.highlight .kn { color: #f92672 } /* Keyword.Namespace */ -.highlight .kp { color: #66d9ef } /* Keyword.Pseudo */ -.highlight .kr { color: #66d9ef } /* Keyword.Reserved */ -.highlight .kt { color: #66d9ef } /* Keyword.Type */ -.highlight .ld { color: #e6db74 } /* Literal.Date */ -.highlight .m { color: #ae81ff } /* Literal.Number */ -.highlight .s { color: #e6db74 } /* Literal.String */ -.highlight .na { color: #a6e22e } /* Name.Attribute */ -.highlight .nb { color: #f8f8f2 } /* Name.Builtin */ -.highlight .nc { color: #a6e22e } /* Name.Class */ -.highlight .no { color: #66d9ef } /* Name.Constant */ -.highlight .nd { color: #a6e22e } /* Name.Decorator */ -.highlight .ni { color: #f8f8f2 } /* Name.Entity */ -.highlight .ne { color: #a6e22e } /* Name.Exception */ -.highlight .nf { color: #a6e22e } /* Name.Function */ -.highlight .nl { color: #f8f8f2 } /* Name.Label */ -.highlight .nn { color: #f8f8f2 } /* Name.Namespace */ -.highlight .nx { color: #a6e22e } /* Name.Other */ -.highlight .py { color: #f8f8f2 } /* Name.Property */ -.highlight .nt { color: #f92672 } /* Name.Tag */ -.highlight .nv { color: #f8f8f2 } /* Name.Variable */ -.highlight .ow { color: #f92672 } /* Operator.Word */ -.highlight .w { color: #f8f8f2 } /* Text.Whitespace */ -.highlight .mb { color: #ae81ff } /* Literal.Number.Bin */ -.highlight .mf { color: #ae81ff } /* Literal.Number.Float */ -.highlight .mh { color: #ae81ff } /* Literal.Number.Hex */ -.highlight .mi { color: #ae81ff } /* Literal.Number.Integer */ -.highlight .mo { color: #ae81ff } /* Literal.Number.Oct */ -.highlight .sa { color: #e6db74 } /* Literal.String.Affix */ -.highlight .sb { color: #e6db74 } /* Literal.String.Backtick */ -.highlight .sc { color: #e6db74 } /* Literal.String.Char */ -.highlight .dl { color: #e6db74 } /* Literal.String.Delimiter */ -.highlight .sd { color: #e6db74 } /* Literal.String.Doc */ -.highlight .s2 { color: #e6db74 } /* Literal.String.Double */ -.highlight .se { color: #ae81ff } /* Literal.String.Escape */ -.highlight .sh { color: #e6db74 } /* Literal.String.Heredoc */ -.highlight .si { color: #e6db74 } /* Literal.String.Interpol */ -.highlight .sx { color: #e6db74 } /* Literal.String.Other */ -.highlight .sr { color: #e6db74 } /* Literal.String.Regex */ -.highlight .s1 { color: #e6db74 } /* Literal.String.Single */ -.highlight .ss { color: #e6db74 } /* Literal.String.Symbol */ -.highlight .bp { color: #f8f8f2 } /* Name.Builtin.Pseudo */ -.highlight .fm { color: #a6e22e } /* Name.Function.Magic */ -.highlight .vc { color: #f8f8f2 } /* Name.Variable.Class */ -.highlight .vg { color: #f8f8f2 } /* Name.Variable.Global */ -.highlight .vi { color: #f8f8f2 } /* Name.Variable.Instance */ -.highlight .vm { color: #f8f8f2 } /* Name.Variable.Magic */ -.highlight .il { color: #ae81ff } /* Literal.Number.Integer.Long */ -} + +body.dark .highlight .hll { background-color: #49483e } +body.dark .highlight .c { color: #75715e } /* Comment */ +body.dark .highlight .err { color: #960050; background-color: #1e0010 } /* Error */ +body.dark .highlight .k { color: #66d9ef } /* Keyword */ +body.dark .highlight .l { color: #ae81ff } /* Literal */ +body.dark .highlight .n { color: #f8f8f2 } /* Name */ +body.dark .highlight .o { color: #f92672 } /* Operator */ +body.dark .highlight .p { color: #f8f8f2 } /* Punctuation */ +body.dark .highlight .ch { color: #75715e } /* Comment.Hashbang */ +body.dark .highlight .cm { color: #75715e } /* Comment.Multiline */ +body.dark .highlight .cp { color: #75715e } /* Comment.Preproc */ +body.dark .highlight .cpf { color: #75715e } /* Comment.PreprocFile */ +body.dark .highlight .c1 { color: #75715e } /* Comment.Single */ +body.dark .highlight .cs { color: #75715e } /* Comment.Special */ +body.dark .highlight .gd { color: #f92672 } /* Generic.Deleted */ +body.dark .highlight .ge { font-style: italic } /* Generic.Emph */ +body.dark .highlight .gi { color: #a6e22e } /* Generic.Inserted */ +body.dark .highlight .gs { font-weight: bold } /* Generic.Strong */ +body.dark .highlight .gu { color: #75715e } /* Generic.Subheading */ +body.dark .highlight .kc { color: #66d9ef } /* Keyword.Constant */ +body.dark .highlight .kd { color: #66d9ef } /* Keyword.Declaration */ +body.dark .highlight .kn { color: #f92672 } /* Keyword.Namespace */ +body.dark .highlight .kp { color: #66d9ef } /* Keyword.Pseudo */ +body.dark .highlight .kr { color: #66d9ef } /* Keyword.Reserved */ +body.dark .highlight .kt { color: #66d9ef } /* Keyword.Type */ +body.dark .highlight .ld { color: #e6db74 } /* Literal.Date */ +body.dark .highlight .m { color: #ae81ff } /* Literal.Number */ +body.dark .highlight .s { color: #e6db74 } /* Literal.String */ +body.dark .highlight .na { color: #a6e22e } /* Name.Attribute */ +body.dark .highlight .nb { color: #f8f8f2 } /* Name.Builtin */ +body.dark .highlight .nc { color: #a6e22e } /* Name.Class */ +body.dark .highlight .no { color: #66d9ef } /* Name.Constant */ +body.dark .highlight .nd { color: #a6e22e } /* Name.Decorator */ +body.dark .highlight .ni { color: #f8f8f2 } /* Name.Entity */ +body.dark .highlight .ne { color: #a6e22e } /* Name.Exception */ +body.dark .highlight .nf { color: #a6e22e } /* Name.Function */ +body.dark .highlight .nl { color: #f8f8f2 } /* Name.Label */ +body.dark .highlight .nn { color: #f8f8f2 } /* Name.Namespace */ +body.dark .highlight .nx { color: #a6e22e } /* Name.Other */ +body.dark .highlight .py { color: #f8f8f2 } /* Name.Property */ +body.dark .highlight .nt { color: #f92672 } /* Name.Tag */ +body.dark .highlight .nv { color: #f8f8f2 } /* Name.Variable */ +body.dark .highlight .ow { color: #f92672 } /* Operator.Word */ +body.dark .highlight .w { color: #f8f8f2 } /* Text.Whitespace */ +body.dark .highlight .mb { color: #ae81ff } /* Literal.Number.Bin */ +body.dark .highlight .mf { color: #ae81ff } /* Literal.Number.Float */ +body.dark .highlight .mh { color: #ae81ff } /* Literal.Number.Hex */ +body.dark .highlight .mi { color: #ae81ff } /* Literal.Number.Integer */ +body.dark .highlight .mo { color: #ae81ff } /* Literal.Number.Oct */ +body.dark .highlight .sa { color: #e6db74 } /* Literal.String.Affix */ +body.dark .highlight .sb { color: #e6db74 } /* Literal.String.Backtick */ +body.dark .highlight .sc { color: #e6db74 } /* Literal.String.Char */ +body.dark .highlight .dl { color: #e6db74 } /* Literal.String.Delimiter */ +body.dark .highlight .sd { color: #e6db74 } /* Literal.String.Doc */ +body.dark .highlight .s2 { color: #e6db74 } /* Literal.String.Double */ +body.dark .highlight .se { color: #ae81ff } /* Literal.String.Escape */ +body.dark .highlight .sh { color: #e6db74 } /* Literal.String.Heredoc */ +body.dark .highlight .si { color: #e6db74 } /* Literal.String.Interpol */ +body.dark .highlight .sx { color: #e6db74 } /* Literal.String.Other */ +body.dark .highlight .sr { color: #e6db74 } /* Literal.String.Regex */ +body.dark .highlight .s1 { color: #e6db74 } /* Literal.String.Single */ +body.dark .highlight .ss { color: #e6db74 } /* Literal.String.Symbol */ +body.dark .highlight .bp { color: #f8f8f2 } /* Name.Builtin.Pseudo */ +body.dark .highlight .fm { color: #a6e22e } /* Name.Function.Magic */ +body.dark .highlight .vc { color: #f8f8f2 } /* Name.Variable.Class */ +body.dark .highlight .vg { color: #f8f8f2 } /* Name.Variable.Global */ +body.dark .highlight .vi { color: #f8f8f2 } /* Name.Variable.Instance */ +body.dark .highlight .vm { color: #f8f8f2 } /* Name.Variable.Magic */ +body.dark .highlight .il { color: #ae81ff } /* Literal.Number.Integer.Long */ + diff --git a/static/css/variables.css b/static/css/variables.css index 6ccef4b0..77c85014 100644 --- a/static/css/variables.css +++ b/static/css/variables.css @@ -23,6 +23,7 @@ --channel-off-color: #ddd; --close-color: #000; --debug-warning-bg: #eee; + --get-started-bg: #f2f5f2; --input-bg-disabled: #eeeeee; --input-border: #ccc; --input-color: #555; @@ -31,62 +32,91 @@ --log-missing-bg: #fff3f2; --modal-content-bg: #fff; --nav-pills-active-link-hover-bg: #eee; - --panel-bg: transparent; + --panel-bg: #fff; --panel-success-bg: #dff0d8; + --plan-business-border: #90CAF9; + --plan-business-color: #141c22; + --plan-business-plus-border: #BCAAA4; + --plan-business-plus-color: #221f1e; + --plan-hobbyist-border: #A5D6A7; + --plan-hobbyist-color: #0a220c; + --plan-supporter-border: #FFE082; + --plan-supporter-color: #1d190f; --pre-bg: #f5f5f5; --small-text-color: #111; --status-new-color: #ccc; --table-bg-hover: #f5f5f5; --tag-bg: #eee; + --tag-checked-bg: #333; + --tag-checked-border: #000; + --tag-checked-color: #eee; + --tag-checked-shadow: #ddd; --tag-color: #555; + --tag-up-bg: #fff; + --tag-up-border: #ccc; + --tag-up-color: #333; --text-color: #333; --text-muted: #777; } -@media (prefers-color-scheme: dark) { - :root { - --alert-info-bg: #123051; - --alert-info-border: #163c64; - --alert-info-color: #e0e2f5; - --alert-no-data-bg: #29292c; - --alert-no-data-border: #303033; - --alert-no-data-color: #878790; - --alert-success-bg: #0f2c1c; - --alert-success-border: #2b4939; - --alert-success-color: #ebf5ef; - --body-bg: #161619; - --border-color: #303033; - --border-muted: #303033; - --breadcrumb-bg: #25252a; - --btn-active-bg: #6f6f7f; - --btn-active-border: #818191; - --btn-default-bg: #383840; - --btn-default-border: #4e4e59; - --btn-default-color: #e0e0e2; - --btn-remove-bg: #202024; - --btn-remove-color: #ff4c46; - --btn-remove-hover: #3f1a22; - --channel-off-color: #464649; - --close-color: #fff; - --debug-warning-bg: #60002d; - --input-bg-disabled: #29292c; - --input-border: #464649; - --input-color: #b0b0b2; - --input-group-addon-bg: #29292c; - --jumbotron-bg: #1f1f22; - --log-missing-bg: #2d1e21; - --modal-content-bg: #1f1f22; - --nav-pills-active-link-hover-bg: #383840; - --panel-bg: #25252a; - --panel-success-bg: #165b35; - --pre-bg: #29292c; - --small-text-color: #f0f0f2; - --status-new-color: #464649; - --table-bg-hover: #25252a; - --tag-bg: #303033; - --tag-color: #e0e0e2; - --text-color: #e0e0e2; - --text-muted: #777780; - } -} \ No newline at end of file +body.dark { + --alert-info-bg: #123051; + --alert-info-border: #163c64; + --alert-info-color: #e0e2f5; + --alert-no-data-bg: #29292c; + --alert-no-data-border: #303033; + --alert-no-data-color: #878790; + --alert-success-bg: #0f2c1c; + --alert-success-border: #2b4939; + --alert-success-color: #ebf5ef; + --body-bg: #161619; + --border-color: #303033; + --border-muted: #303033; + --breadcrumb-bg: #25252a; + --btn-active-bg: #6f6f7f; + --btn-active-border: #818191; + --btn-default-bg: #383840; + --btn-default-border: #4e4e59; + --btn-default-color: #e0e0e2; + --btn-remove-bg: #202024; + --btn-remove-color: #ff4c46; + --btn-remove-hover: #3f1a22; + --channel-off-color: #464649; + --close-color: #fff; + --debug-warning-bg: #60002d; + --get-started-bg: #2c2e2c; + --input-bg-disabled: #29292c; + --input-border: #464649; + --input-color: #b0b0b2; + --input-group-addon-bg: #29292c; + --jumbotron-bg: #1f1f22; + --log-missing-bg: #2d1e21; + --modal-content-bg: #1f1f22; + --nav-pills-active-link-hover-bg: #383840; + --panel-bg: #25252a; + --panel-success-bg: #165b35; + --plan-business-border: #90CAF9; + --plan-business-color: #e8f2f9; + --plan-business-plus-border: #BCAAA4; + --plan-business-plus-color: #fff5f2; + --plan-hobbyist-border: #A5D6A7; + --plan-hobbyist-color: #e3ffe4; + --plan-supporter-border: #FFE082; + --plan-supporter-color: #fff0c4; + --pre-bg: #29292c; + --small-text-color: #f0f0f2; + --status-new-color: #464649; + --table-bg-hover: #25252a; + --tag-bg: #303033; + --tag-checked-bg: #fff; + --tag-checked-border: #ccc; + --tag-checked-color: #333; + --tag-checked-shadow: #000; + --tag-color: #e0e0e2; + --tag-up-bg: #25252a; + --tag-up-border: #303033; + --tag-up-color: #e0e0e2; + --text-color: #e0e0e2; + --text-muted: #777780; +} diff --git a/static/css/welcome.css b/static/css/welcome.css index fc036ec5..1188eb49 100644 --- a/static/css/welcome.css +++ b/static/css/welcome.css @@ -7,16 +7,10 @@ } .get-started-bleed { - background: #f2f5f2; + background: var(--get-started-bg); padding: 3em 0; } -@media (prefers-color-scheme: dark) { - .get-started-bleed { - background: #2c2e2c; - } -} - .footer-jumbo-bleed { background: #eee; }