Refactor system theme
This commit is contained in:
spikecodes
parent
2bcdf68e40
commit
a562395c26
128
static/style.css
128
static/style.css
@ -1,10 +1,55 @@
|
|||||||
/* General */
|
/* Define themes */
|
||||||
|
|
||||||
|
/* Constants */
|
||||||
:root {
|
:root {
|
||||||
--nsfw: #ff5c5d;
|
--nsfw: #ff5c5d;
|
||||||
--admin: #ea0027;
|
--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 {
|
::selection {
|
||||||
color: var(--foreground);
|
color: var(--foreground);
|
||||||
background: var(--accent);
|
background: var(--accent);
|
||||||
@ -131,87 +176,6 @@ aside {
|
|||||||
opacity: 0.5;
|
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 */
|
||||||
|
|
||||||
#user, #subreddit, #sidebar {
|
#user, #subreddit, #sidebar {
|
||||||
|
|||||||
@ -15,7 +15,7 @@
|
|||||||
<body class="
|
<body class="
|
||||||
{% if prefs.layout != "" %}{{ prefs.layout }}{% endif %}
|
{% if prefs.layout != "" %}{{ prefs.layout }}{% endif %}
|
||||||
{% if prefs.wide == "on" %} wide{% endif %}
|
{% if prefs.wide == "on" %} wide{% endif %}
|
||||||
{% if (prefs.theme == "dark" || prefs.theme =="light") %} {{ prefs.theme }}{% endif %}">
|
{% if prefs.theme != "system" %} {{ prefs.theme }}{% endif %}">
|
||||||
<!-- NAVIGATION BAR -->
|
<!-- NAVIGATION BAR -->
|
||||||
<nav>
|
<nav>
|
||||||
<p id="logo">
|
<p id="logo">
|
||||||
|
|||||||
@ -14,7 +14,7 @@
|
|||||||
<div id="theme">
|
<div id="theme">
|
||||||
<label for="theme">Theme:</label>
|
<label for="theme">Theme:</label>
|
||||||
<select name="theme">
|
<select name="theme">
|
||||||
{% call utils::options(prefs.theme, ["system", "dark", "light"], "system") %}
|
{% call utils::options(prefs.theme, ["system", "light", "dark"], "system") %}
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
<p>Interface</p>
|
<p>Interface</p>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user