From d7440861ec155fee71cb2e401199e7def57afadb Mon Sep 17 00:00:00 2001 From: bopol Date: Fri, 8 Jan 2021 23:48:35 +0100 Subject: [PATCH 1/2] Separate dark theme css --- static/css/dark.css | 184 ++++++++++++++++++++++++++++++++++++++++ static/css/styles.css | 182 --------------------------------------- views/includes/head.pug | 1 + 3 files changed, 185 insertions(+), 182 deletions(-) create mode 100644 static/css/dark.css diff --git a/static/css/dark.css b/static/css/dark.css new file mode 100644 index 0000000..671e279 --- /dev/null +++ b/static/css/dark.css @@ -0,0 +1,184 @@ +:root { + --darkbg: #0F0F0F; + --darkbglight: #252525; + --darklinkcolor: #599bff; +} + +body.dark { + background: var(--darkbg); + color: #cacaca; +} +body.dark nav { + background: #1f1f1f; +} +body.dark .top-links a { + background: var(--darkbg); + color: #bfbfbf; +} +body.dark header { + background: var(--darkbglight); + color: #f1f1f1; +} +body.dark #post header div a { + color: var(--darklinkcolor); + text-decoration: none; +} +body.dark a { + color: #f5f5f5; +} +body.dark a:hover, body.dark a:focus { + color: #3d8aff; + text-decoration: underline; +} +body.dark #post header div a:hover, +body.dark #post header div a:focus { + text-decoration: underline; +} +body.dark input[type="submit"]:hover, +body.dark input[type="submit"]:focus, +body.dark .btn:hover, +body.dark .btn:focus { + background: white; + color: black; + text-decoration: none; +} +body.dark form legend { + border-bottom: 1px solid #353535; +} +body.dark #post .title a { + color: var(--darklinkcolor); +} +body.dark #post .submitted { + color: #a5a5a5; +} +body.dark #post .usertext-body { + background: #0a0a0a; + border: 1px solid #404040; +} +body.dark #post .infobar { + background-color: #d2d2d2; + color: #2f2f2f; +} +body.dark #post .infobar.blue { + background: #c7e3f9; + border: 1px solid #4b78a4; +} +body.dark #post .infobar a { + color: #0356d4; +} +body.dark header .tabmenu li a { + background: #3e3e3e; +} +body.dark header .tabmenu li a:hover, body.dark header .tabmenu li a:focus { + text-decoration: underline; + color: white; +} +body.dark #search { + color: #d2d2d2; +} +body.dark .md { + color: #dadada; +} +body.dark .md blockquote, body.dark .md del { + color: #777777; +} +body.dark .md code, body.dark .md pre { + background: black; + color: white; +} +body.dark .comment .body blockquote { + background: #313131; + color: #afafaf; + border-color: #464646; +} +body.dark .even-depth { + background: var(--darkbg); +} +body.dark .odd-depth { + background: var(--darkbglight); +} + +body.dark .comment .comment { + border-left: 1px solid #545454; +} + +body.dark .comment .meta .created a { + color: #7b7b7b; +} +body.dark .comment details summary { + color: #868686; +} +body.dark .comment details summary::-webkit-details-marker, +body.dark .comment details summary::marker { + color: #868686; +} +body.dark #links .link .entry .title a h2 { + color: #f0f0f0; +} +body.dark #links .link .entry .title a:visited h2 { + color: #6f6f6f; +} +body.dark #links .link .image .no-image, +body.dark #user .entry .image .no-image { + filter: opacity(0.5); +} +body.dark #user .comment { + width: 100%; + background: var(--darkbg); +} +body.dark #links .link .upvotes { + color: #858585; +} +body.dark .upvotes .arrow, +body.dark .score .arrow { + filter: opacity(0.5); +} +body.dark #links .link .entry .meta a { + color: #c7c7c7; +} +body.dark .content .bottom img { + filter: invert(1); +} +body.dark .container .content { + border: 1px solid #5e5e5e; +} +body.dark input[type="submit"], +body.dark .btn { + background: black; + color: white; +} +body.dark #post .crosspost { + background: var(--darkbg); +} +body.dark .view-more-links a { + background: black; + color: white; +} +body.dark .md .md-spoiler-text:not(.revealed):active, +body.dark .md .md-spoiler-text:not(.revealed):focus, +body.dark .md .md-spoiler-text:not(.revealed):hover { + background: white; + color: black; +} +body.dark .comment .body a, +body.dark .usertext-body a { + color: #3d99fb; +} +body.dark header .tabmenu li.active a { + background: #acacac; + color: #151515; +} +body.dark #search form input[type="text"] { + background: #0f0f0f; + color: white; +} +body.dark footer { + background: #2f2f2f; +} +body.dark footer a { + color: #999; +} +body.dark .flair { + color: #eaeaea !important; + background-color: #404040 !important; +} diff --git a/static/css/styles.css b/static/css/styles.css index 01bf346..2d10f54 100644 --- a/static/css/styles.css +++ b/static/css/styles.css @@ -2,10 +2,7 @@ --sm-font: 0.666rem; --lightgray: #f5f5f5; --whitebg: #ffffff; - --darkbg: #0F0F0F; - --darkbglight: #252525; --linkcolor: #000bac; - --darklinkcolor: #599bff; --graytext: #6f6f6f; } * { @@ -13,182 +10,7 @@ margin: 0; font-family: sans-serif; } -/* Move themes to the beginning of the file to avoid themes flickering. */ -/* DARK THEME */ -body.dark { - background: var(--darkbg); - color: #cacaca; -} -body.dark nav { - background: #1f1f1f; -} -body.dark .top-links a { - background: var(--darkbg); - color: #bfbfbf; -} -body.dark header { - background: var(--darkbglight); - color: #f1f1f1; -} -body.dark #post header div a { - color: var(--darklinkcolor); - text-decoration: none; -} -body.dark a { - color: #f5f5f5; -} -body.dark a:hover, body.dark a:focus { - color: #3d8aff; - text-decoration: underline; -} -body.dark #post header div a:hover, -body.dark #post header div a:focus { - text-decoration: underline; -} -body.dark input[type="submit"]:hover, -body.dark input[type="submit"]:focus, -body.dark .btn:hover, -body.dark .btn:focus { - background: white; - color: black; - text-decoration: none; -} -body.dark form legend { - border-bottom: 1px solid #353535; -} -body.dark #post .title a { - color: var(--darklinkcolor); -} -body.dark #post .submitted { - color: #a5a5a5; -} -body.dark #post .usertext-body { - background: #0a0a0a; - border: 1px solid #404040; -} -body.dark #post .infobar { - background-color: #d2d2d2; - color: #2f2f2f; -} -body.dark #post .infobar.blue { - background: #c7e3f9; - border: 1px solid #4b78a4; -} -body.dark #post .infobar a { - color: #0356d4; -} -body.dark header .tabmenu li a { - background: #3e3e3e; -} -body.dark header .tabmenu li a:hover, body.dark header .tabmenu li a:focus { - text-decoration: underline; - color: white; -} -body.dark #search { - color: #d2d2d2; -} -body.dark .md { - color: #dadada; -} -body.dark .md blockquote, body.dark .md del { - color: #777777; -} -body.dark .md code, body.dark .md pre { - background: black; - color: white; -} -body.dark .comment .body blockquote { - background: #313131; - color: #afafaf; - border-color: #464646; -} -body.dark .even-depth { - background: var(--darkbg); -} -body.dark .odd-depth { - background: var(--darkbglight); -} -body.dark .comment .comment { - border-left: 1px solid #545454; -} - -body.dark .comment .meta .created a { - color: #7b7b7b; -} -body.dark .comment details summary { - color: #868686; -} -body.dark .comment details summary::-webkit-details-marker, -body.dark .comment details summary::marker { - color: #868686; -} -body.dark #links .link .entry .title a h2 { - color: #f0f0f0; -} -body.dark #links .link .entry .title a:visited h2 { - color: #6f6f6f; -} -body.dark #links .link .image .no-image, -body.dark #user .entry .image .no-image { - filter: opacity(0.5); -} -body.dark #user .comment { - width: 100%; - background: var(--darkbg); -} -body.dark #links .link .upvotes { - color: #858585; -} -body.dark .upvotes .arrow, -body.dark .score .arrow { - filter: opacity(0.5); -} -body.dark #links .link .entry .meta a { - color: #c7c7c7; -} -body.dark .content .bottom img { - filter: invert(1); -} -body.dark .container .content { - border: 1px solid #5e5e5e; -} -body.dark input[type="submit"], -body.dark .btn { - background: black; - color: white; -} -body.dark #post .crosspost { - background: var(--darkbg); -} -body.dark .view-more-links a { - background: black; - color: white; -} -body.dark .md .md-spoiler-text:not(.revealed):active, -body.dark .md .md-spoiler-text:not(.revealed):focus, -body.dark .md .md-spoiler-text:not(.revealed):hover { - background: white; - color: black; -} -body.dark .comment .body a, -body.dark .usertext-body a { - color: #3d99fb; -} -body.dark header .tabmenu li.active a { - background: #acacac; - color: #151515; -} -body.dark #search form input[type="text"] { - background: #0f0f0f; - color: white; -} -body.dark footer { - background: #2f2f2f; -} -body.dark footer a { - color: #999; -} a { color: var(--linkcolor); text-decoration: none; @@ -1126,10 +948,6 @@ footer a { margin-left: 10px; padding: 0 2px; } -body.dark .flair { - color: #eaeaea !important; - background-color: #404040 !important; -} #post .comments .flair, #user .comment .meta .flair { margin-left: 0 !important; diff --git a/views/includes/head.pug b/views/includes/head.pug index 9972988..8cd1be7 100644 --- a/views/includes/head.pug +++ b/views/includes/head.pug @@ -1,4 +1,5 @@ link(rel="stylesheet", type="text/css", href="/css/styles.css") +link(rel="stylesheet", type="text/css", href="/css/dark.css") link(rel="icon", type="image/png", sizes="32x32", href="/favicon.png") meta(name="viewport", content="width=device-width, initial-scale=1.0") - From 18ca25b18a7a78c2b0b7f78bb25cead53c5aeca2 Mon Sep 17 00:00:00 2001 From: bopol Date: Sat, 9 Jan 2021 11:48:49 +0100 Subject: [PATCH 2/2] only include dark.css if dark theme is choosen --- views/includes/head.pug | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/views/includes/head.pug b/views/includes/head.pug index 8cd1be7..588875f 100644 --- a/views/includes/head.pug +++ b/views/includes/head.pug @@ -1,5 +1,6 @@ +if(user_preferences.theme === 'dark') + link(rel="stylesheet", type="text/css", href="/css/dark.css") link(rel="stylesheet", type="text/css", href="/css/styles.css") -link(rel="stylesheet", type="text/css", href="/css/dark.css") link(rel="icon", type="image/png", sizes="32x32", href="/favicon.png") meta(name="viewport", content="width=device-width, initial-scale=1.0") -