From a562395c26a17b22842b437cfdd8ac849f88b066 Mon Sep 17 00:00:00 2001 From: spikecodes <19519553+spikecodes@users.noreply.github.com> Date: Sun, 17 Jan 2021 18:11:36 -0800 Subject: [PATCH] Refactor system theme --- static/style.css | 128 +++++++++++++++------------------------- templates/base.html | 2 +- templates/settings.html | 2 +- 3 files changed, 48 insertions(+), 84 deletions(-) diff --git a/static/style.css b/static/style.css index 364fbce..d68ae7e 100644 --- a/static/style.css +++ b/static/style.css @@ -1,10 +1,55 @@ -/* General */ +/* Define themes */ +/* Constants */ :root { --nsfw: #ff5c5d; --admin: #ea0027; } +/* Automatic theme selection */ +:root, .dark{ + /* Default & fallback theme (dark) */ + --accent: aqua; + --green: #5cff85; + --text: white; + --foreground: #222; + --background: #0f0f0f; + --outside: #1f1f1f; + --post: #161616; + --highlighted: #333; + --shadow: 0 1px 3px rgba(0, 0, 0, 0.5); +} + +/* Browser-defined light theme */ +@media (prefers-color-scheme: light) { + :root { + --accent: #009a9a; + --green: #00a229; + --text: black; + --foreground: #f5f5f5; + --background: #ddd; + --outside: #ececec; + --post: #eee; + --highlighted: white; + --shadow: 0 1px 3px rgba(0, 0, 0, 0.1); + } +} + +/* Light theme setting */ +.light { + --accent: #009a9a; + --green: #00a229; + --text: black; + --foreground: #f5f5f5; + --background: #ddd; + --outside: #ececec; + --post: #eee; + --highlighted: white; + --shadow: 0 1px 3px rgba(0, 0, 0, 0.1); +} + +/* General */ + ::selection { color: var(--foreground); background: var(--accent); @@ -131,87 +176,6 @@ aside { opacity: 0.5; } -/* Define themes */ - -:root { - /* Light theme */ - --accent-light: #009a9a; - --green-light: #00a229; - --text-light: black; - --foreground-light: #f5f5f5; - --background-light: #ddd; - --outside-light: #ececec; - --post-light: #eee; - --highlighted-light: white; - --shadow-light: 0 1px 3px rgba(0, 0, 0, 0.1); - - /* Dark theme */ - --accent-dark: aqua; - --green-dark: #5cff85; - --text-dark: white; - --foreground-dark: #222; - --background-dark: #0f0f0f; - --outside-dark: #1f1f1f; - --post-dark: #161616; - --highlighted-dark: #333; - --shadow-dark: 0 1px 3px rgba(0, 0, 0, 0.5); -} - -/* Automatic theme selection */ - -:root{ - /* Default & fallback theme (dark) */ - --accent: var(--accent-dark); - --green: var(--green-dark); - --text: var(--text-dark); - --foreground: var(--foreground-dark); - --background: var(--background-dark); - --outside: var(--outside-dark); - --post: var(--post-dark); - --highlighted: var(--highlighted-dark); - --shadow: var(--shadow-dark); -} - -@media (prefers-color-scheme: light) { - :root { - --accent: var(--accent-light); - --green: var(--green-light); - --text: var(--text-light); - --foreground: var(--foreground-light); - --background: var(--background-light); - --outside: var(--outside-light); - --post: var(--post-light); - --highlighted: var(--highlighted-light); - --shadow: var(--shadow-light); - } -} - -/* User-set theme overrides */ - -.light { - --accent: var(--accent-light); - --green: var(--green-light); - --text: var(--text-light); - --foreground: var(--foreground-light); - --background: var(--background-light); - --outside: var(--outside-light); - --post: var(--post-light); - --highlighted: var(--highlighted-light); - --shadow: var(--shadow-light); -} - -.dark { - --accent: var(--accent-dark); - --green: var(--green-dark); - --text: var(--text-dark); - --foreground: var(--foreground-dark); - --background: var(--background-dark); - --outside: var(--outside-dark); - --post: var(--post-dark); - --highlighted: var(--highlighted-dark); - --shadow: var(--shadow-dark); -} - /* User & Subreddit */ #user, #subreddit, #sidebar { diff --git a/templates/base.html b/templates/base.html index b535698..15dfe8d 100644 --- a/templates/base.html +++ b/templates/base.html @@ -15,7 +15,7 @@ + {% if prefs.theme != "system" %} {{ prefs.theme }}{% endif %}">