Add high contrast theme

This commit is contained in:
Zed 2019-10-27 11:24:09 +01:00
parent d0cb6d3da4
commit ffba11a565
3 changed files with 43 additions and 4 deletions

View file

@ -0,0 +1,37 @@
body {
--bg_color: #000000;
--fg_color: #FFFFFF;
--fg_faded: #FFFFFFD4;
--fg_dark: var(--accent);
--fg_nav: var(--accent);
--bg_panel: #0C0C0C;
--bg_elements: #000000;
--bg_overlays: var(--bg_panel);
--bg_hover: #131313;
--grey: #E2E2E2;
--dark_grey: #4E4E4E;
--darker_grey: #272727;
--darkest_grey: #212121;
--border_grey: #7D7D7D;
--accent: #FF6C60;
--accent_light: #FFACA0;
--accent_dark: #909090;
--accent_border: #FF6C6091;
--play_button: var(--accent);
--play_button_hover: var(--accent_light);
--more_replies_dots: #A7A7A7;
--error_red: #420A05;
--verified_blue: #1DA1F2;
--icon_text: var(--fg_color);
--tab: var(--fg_color);
--tab_selected: var(--accent);
--profile_stat: var(--fg_color);
}

View file

@ -10,7 +10,8 @@ export preferences
proc findThemes*(dir: string): seq[string] =
for kind, path in walkDir(dir / "css" / "themes"):
result.add path.splitFile.name.capitalizeAscii
let theme = path.splitFile.name
result.add theme.capitalizeAscii.replace("_", " ")
sort(result)
proc createPrefRouter*(cfg: Config) =

View file

@ -1,4 +1,4 @@
import uri, strutils
import uri, strutils, strformat
import karax/[karaxdsl, vdom]
import renderutils
@ -31,12 +31,13 @@ proc renderNavbar*(title, rss: string; req: Request): VNode =
proc renderMain*(body: VNode; req: Request; cfg: Config; titleText=""; desc="";
rss=""; `type`="article"; video=""; images: seq[string] = @[]): string =
let prefs = getPrefs(req.cookies.getOrDefault("preferences"), cfg)
let theme = "/css/themes/" & toLowerAscii(prefs.theme) & ".css"
let theme = toLowerAscii(prefs.theme).replace(" ", "_")
let node = buildHtml(html(lang="en")):
head:
link(rel="stylesheet", `type`="text/css", href="/css/style.css")
link(rel="stylesheet", `type`="text/css", href="/css/fontello.css")
link(rel="stylesheet", `type`="text/css", href=theme)
if theme.len > 0:
link(rel="stylesheet", `type`="text/css", href=(&"/css/themes/{theme}.css"))
link(rel="apple-touch-icon", sizes="180x180", href="/apple-touch-icon.png")
link(rel="icon", type="image/png", sizes="32x32", href="/favicon-32x32.png")