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

Merge pull request #62 from mcrossman/master

Browse Source 
Add "system" theme that matches browser/OS theme
This commit is contained in:
Spike 2021-01-18 01:59:12 +00:00 committed by GitHub
commit 2bcdf68e40
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 80 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

98
static/style.css
View File

@ -1,17 +1,8 @@
/* General */ /* General */
:root { :root {
--accent: aqua; --nsfw: #ff5c5d;
--green: #5cff85;
--nsfw: #FF5C5D;
--admin: #ea0027; --admin: #ea0027;
--text: white;
--foreground: #222;
--background: #0F0F0F;
--outside: #1F1F1F;
--post: #161616;
--highlighted: #333;
--shadow: 0 1px 3px rgba(0,0,0,0.5);
} }
::selection { ::selection {
@ -140,18 +131,85 @@ aside {
opacity: 0.5; opacity: 0.5;
} }
/* Light Theme */ /* 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 { .light {
--accent: #009a9a; --accent: var(--accent-light);
--green: #00a229; --green: var(--green-light);
--text: black; --text: var(--text-light);
--foreground: #f5f5f5; --foreground: var(--foreground-light);
--background: #DDD; --background: var(--background-light);
--outside: #ECECEC; --outside: var(--outside-light);
--post: #eee; --post: var(--post-light);
--highlighted: white; --highlighted: var(--highlighted-light);
--shadow: 0 1px 3px rgba(0,0,0,0.1); --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 */

2
templates/base.html
View File

@ -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 == "light" %} light{% endif %}"> {% if (prefs.theme == "dark" || prefs.theme =="light") %} {{ prefs.theme }}{% endif %}">
<!-- NAVIGATION BAR --> <!-- NAVIGATION BAR -->
<nav> <nav>
<p id="logo"> <p id="logo">

2
templates/settings.html
View File

@ -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, ["dark", "light"], "dark") %} {% call utils::options(prefs.theme, ["system", "dark", "light"], "system") %}
</select> </select>
</div> </div>
<p>Interface</p> <p>Interface</p>