From 18c7265e128b23f5e87ae4abb14c1f15b4f096fa Mon Sep 17 00:00:00 2001 From: Tim Nguyen Date: Thu, 19 Jul 2018 16:39:49 +0000 Subject: [PATCH 1/5] Dark theme CSS --- static/css/data.css | 4 +++ static/css/janitor-new.css | 70 +++++++++++++++++++++++++++++++------- static/css/landing.css | 14 +++++++- templates/landing.html | 6 ++-- 4 files changed, 77 insertions(+), 17 deletions(-) diff --git a/static/css/data.css b/static/css/data.css index f6833962..b786c93e 100644 --- a/static/css/data.css +++ b/static/css/data.css @@ -38,6 +38,10 @@ left: 50%; transform: translate(-50%, -50%); } + + .dark-theme .data-container::after { + background: #2a2a2e; + } .data-topic { flex-basis: 50%; diff --git a/static/css/janitor-new.css b/static/css/janitor-new.css index cbee2341..d6c7d608 100644 --- a/static/css/janitor-new.css +++ b/static/css/janitor-new.css @@ -20,6 +20,50 @@ body { min-height: 100%; } +/* Dark theme */ + +.dark-theme { + background: #2a2a2e; + color: #ededf0; +} + +.dark-theme header, +.dark-theme .card, +.dark-theme .panel, +.dark-theme .panel-body, +.dark-theme footer { + background: #38383d; +} + +.dark-theme .form-control { + background: #0c0c0d; + color: #ededf0; +} + +.dark-theme .danger-zone { + color: #d70022; +} + +.dark-theme section:not(:last-child), +.dark-theme .global-tab-nav, +.dark-theme .panel > .panel-heading, +.dark-theme .panel > .panel-section, +.dark-theme footer { + border-color: rgba(255,255,255,0.1); +} + +.dark-theme .grey-text, +.dark-theme p, +.dark-theme .link-list-wrapper ul li a:not(:hover) { + color: #b1b1b3; +} + +.dark-theme .icon::before, +.dark-theme .form-control-feedback::before, +.dark-theme .brand-logo img { + filter: invert(1); +} + /* Helper classes */ .float-left { @@ -100,12 +144,12 @@ a:not(:hover) { text-decoration: none; } -a { - color: #0060df; +a:not(.btn) { + color: #0a84ff; } -a:active { - color: #003eaa; +a:not(.btn):active { + color: #0060df; } small { @@ -207,9 +251,9 @@ section:not(:last-child) { .btn { border: none; border-radius: 2px; - background: #ededf0; + background: rgba(12, 12, 13, 0.1); padding: 6px 10px; - color: #0c0c0d; + color: inherit; text-decoration: none; font: inherit; display: inline-block; @@ -222,11 +266,11 @@ section:not(:last-child) { } .btn:hover { - background: #d7d7db; + background: rgba(12, 12, 13, 0.2); } .btn:hover:active { - background: #b1b1b3; + background: rgba(12, 12, 13, 0.3); } .btn:focus { @@ -240,11 +284,11 @@ section:not(:last-child) { } .btn-primary:hover { - background: #38383d; + background: #2a2a2e; } .btn-primary:hover:active { - background: #2a2a2e; + background: #38383d; } .btn-error { @@ -298,14 +342,14 @@ textarea.form-control { .form-control.disabled, .form-control:disabled { pointer-events: none; - background: #f5f5f5; + opacity: 0.3; } /* Header and footer shared code */ .brand-logo { text-decoration: none; - color: inherit; + color: inherit !important; display: block; } @@ -343,7 +387,7 @@ textarea.form-control { } .link-list-wrapper ul li a:hover { - color: #0b0b0d; + color: inherit; } /* Navigation bar */ diff --git a/static/css/landing.css b/static/css/landing.css index 8a71a70f..4d13dabe 100644 --- a/static/css/landing.css +++ b/static/css/landing.css @@ -36,6 +36,11 @@ justify-content: space-around; } +.dark-theme #quotes { + background: #38383d; + border-color: rgba(255,255,255,0.05); +} + @media screen and (max-width: 768px) { #quotes { display: block; @@ -68,7 +73,6 @@ text-align: justify; line-height: 1.5; margin: 0; - color: #666; padding: 0 5px 20px 0; } @@ -88,6 +92,14 @@ list-style-image: url(../img/icons/check.svg); } +#feature-list li::-moz-list-bullet { + filter: invert(1); +} + +#feature-list li::marker { + filter: invert(1); +} + .partners { display: flex; flex-wrap: wrap; diff --git a/templates/landing.html b/templates/landing.html index 54a29396..8639650b 100644 --- a/templates/landing.html +++ b/templates/landing.html @@ -10,15 +10,15 @@
-
Just wanted to say thanks for making Janitor. It just saved me a ton of time debugging a crash.
+
Just wanted to say thanks for making Janitor. It just saved me a ton of time debugging a crash.
― Brian Grinstead
-
This will change the lives of a lot of contributors.
+
This will change the lives of a lot of contributors.
― Michael Kohler
-
Mind blown! This would have literally saved months of my life years ago when I hacked on Firefox.
+
Mind blown! This would have literally saved months of my life years ago when I hacked on Firefox.
― Brian King
From deb2670f6baa8eba66409b0d5e07c3b09daddb9e Mon Sep 17 00:00:00 2001 From: Tim Nguyen Date: Mon, 22 Apr 2019 20:24:40 +0200 Subject: [PATCH 2/5] Use @media (prefers-color-scheme: dark) + few tweaks --- static/css/janitor-new.css | 100 +++++++++++++++++++------------------ 1 file changed, 51 insertions(+), 49 deletions(-) diff --git a/static/css/janitor-new.css b/static/css/janitor-new.css index d6c7d608..74f06b5d 100644 --- a/static/css/janitor-new.css +++ b/static/css/janitor-new.css @@ -20,50 +20,6 @@ body { min-height: 100%; } -/* Dark theme */ - -.dark-theme { - background: #2a2a2e; - color: #ededf0; -} - -.dark-theme header, -.dark-theme .card, -.dark-theme .panel, -.dark-theme .panel-body, -.dark-theme footer { - background: #38383d; -} - -.dark-theme .form-control { - background: #0c0c0d; - color: #ededf0; -} - -.dark-theme .danger-zone { - color: #d70022; -} - -.dark-theme section:not(:last-child), -.dark-theme .global-tab-nav, -.dark-theme .panel > .panel-heading, -.dark-theme .panel > .panel-section, -.dark-theme footer { - border-color: rgba(255,255,255,0.1); -} - -.dark-theme .grey-text, -.dark-theme p, -.dark-theme .link-list-wrapper ul li a:not(:hover) { - color: #b1b1b3; -} - -.dark-theme .icon::before, -.dark-theme .form-control-feedback::before, -.dark-theme .brand-logo img { - filter: invert(1); -} - /* Helper classes */ .float-left { @@ -144,11 +100,11 @@ a:not(:hover) { text-decoration: none; } -a:not(.btn) { +a { color: #0a84ff; } -a:not(.btn):active { +a:active { color: #0060df; } @@ -500,17 +456,17 @@ textarea.form-control { } .navbar ul li:hover { - background: #f8f8f8; + background: rgba(128,128,128,0.15); } .navbar ul li.active { - background: #f8f8f8; + background: rgba(128,128,128,0.2); font-weight: 600; } .navbar ul li a { color: #0b0b0d; - border-bottom: solid 1px #eee; + border-bottom: solid 1px rgba(128,128,128,0.2); display: block; line-height: 50px; font-size: 14px; @@ -861,3 +817,49 @@ textarea.form-control { .ajax-form.error .form-control-feedback::before { background-image: url(../img/icons/error.svg); } + +/* Dark theme */ + +@media (prefers-color-scheme: dark) { + body { + background: #2a2a2e; + color: #ededf0; + } + + .navbar, + .card, + .panel, + .panel-body, + .footer { + background: #38383d; + } + + .form-control { + background: #0c0c0d; + color: #ededf0; + } + + .danger-zone { + color: #d70022; + } + + section:not(:last-child), + .global-tab-nav, + .panel > .panel-heading, + .panel > .panel-section, + .footer { + border-color: rgba(255,255,255,0.1); + } + + .grey-text, + p, + .link-list-wrapper ul li a:not(:hover) { + color: #b1b1b3; + } + + .icon::before, + .form-control-feedback::before, + .brand-logo img { + filter: invert(1); + } +} From cc66f858e9453d2a15f2189f277f9d7e771288a6 Mon Sep 17 00:00:00 2001 From: Tim Nguyen Date: Mon, 22 Apr 2019 20:26:02 +0200 Subject: [PATCH 3/5] Update data.css --- static/css/data.css | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/static/css/data.css b/static/css/data.css index b786c93e..404d0f89 100644 --- a/static/css/data.css +++ b/static/css/data.css @@ -39,8 +39,10 @@ transform: translate(-50%, -50%); } - .dark-theme .data-container::after { - background: #2a2a2e; + @media (prefers-color-scheme: dark) { + .data-container::after { + background: #2a2a2e; + } } .data-topic { From be090e76c764e359083e92959e25b72eb98aef64 Mon Sep 17 00:00:00 2001 From: Tim Nguyen Date: Mon, 22 Apr 2019 20:27:07 +0200 Subject: [PATCH 4/5] Update landing.css --- static/css/landing.css | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/static/css/landing.css b/static/css/landing.css index 4d13dabe..2f1cad43 100644 --- a/static/css/landing.css +++ b/static/css/landing.css @@ -36,9 +36,11 @@ justify-content: space-around; } -.dark-theme #quotes { - background: #38383d; - border-color: rgba(255,255,255,0.05); +@media (prefers-color-scheme: dark) { + #quotes { + background: #38383d; + border-color: rgba(255,255,255,0.05); + } } @media screen and (max-width: 768px) { From ec4b585c9b17e3845e3b03fa6a94688c09778611 Mon Sep 17 00:00:00 2001 From: Tim Nguyen Date: Mon, 22 Apr 2019 20:30:40 +0200 Subject: [PATCH 5/5] Update landing.css --- static/css/landing.css | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/static/css/landing.css b/static/css/landing.css index f357d80b..b87e0ec2 100644 --- a/static/css/landing.css +++ b/static/css/landing.css @@ -101,12 +101,10 @@ vertical-align: middle; } -#feature-list li::-moz-list-bullet { - filter: invert(1); -} - -#feature-list li::marker { - filter: invert(1); +@media (prefers-color-scheme: dark) { + #feature-list li::before { + filter: invert(1); + } } .partners {