iridium/redsunlib
iridium/redsunlib
2
2
Fork 0
Code Issues 2 Pull Requests Packages Projects Releases 4 Wiki Activity

Refactor system theme

Browse Source
This commit is contained in:
spikecodes 2021-01-17 18:11:36 -08:00
parent 2bcdf68e40
commit a562395c26
3 changed files with 48 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

128
static/style.css
View File

@ -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 {

2
templates/base.html
View File

@ -15,7 +15,7 @@
<body class="
{% if prefs.layout != "" %}{{ prefs.layout }}{% 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 -->
<nav>
<p id="logo">

2
templates/settings.html
View File

@ -14,7 +14,7 @@
<div id="theme">
<label for="theme">Theme:</label>
<select name="theme">
{% call utils::options(prefs.theme, ["system", "dark", "light"], "system") %}
{% call utils::options(prefs.theme, ["system", "light", "dark"], "system") %}
</select>
</div>
<p>Interface</p>