site.lyte.dev/src/stylus/theme.styl

89 lines
1.7 KiB
Stylus

light-syntax = {
brd: rgba(255, 255, 255, 0.2),
bg: rgba(0, 0, 0, 0.05),
ledg: #ccc,
sh: #775,
name: #480,
mag: #d04,
lit: #40f,
lits: #660,
aq: #04d,
err: #960050,
}
dark-syntax = {
brd: rgba(255, 255, 255, 0.2),
bg: rgba(255, 255, 255, 0.03),
ledg: #333,
sh: #75715e,
name: #a6e22e,
mag: #f92672,
lit: #ae81ff,
lits: #e6db74,
aq: #66d9ef,
err: #960050,
}
theme-colors = {
heading-fg: #333,
icon-shadow: #fff,
input-bg: rgba(0, 0, 0, 0.08),
input-hover-bg: rgba(0, 0, 0, 0.16),
}
:root
--ff system-ui
--msff iosevka
--pc #df3c59
--pcd #8e293b
--input-focus-bg var(--input-bg)
--button-bg var(--input-bg)
--button-hover-bg var(--input-hover-bg)
--button-focus-bg var(--input-bg)
--link-fg var(--fg)
--link-visited-fg var(heading-fg)
light-theme =
for k, v in light-syntax
--syntax-{k}: v
for k2, v2 in theme-colors
{unquote("--" + k2)}: v2
--bg #fff
--header-bg #eee
--fg #111
dark-theme =
for k, v in dark-syntax
--syntax-{k}: v
for k2, v2 in theme-colors
{unquote("--" + k2)}: invert(v2)
--bg #111
--header-bg #191919
--fg #fff
--link-visited-fg #aaa
:root, body.light-theme
{light-theme}
body.dark-theme
{dark-theme}
:root
@media (prefers-color-scheme dark)
{dark-theme}
.hide-in-light-theme
display none
@media (prefers-color-scheme dark)
.hide-in-dark-theme
display none
.hide-in-light-theme { display: inherit }
body.light-theme .hide-in-dark-theme { display: inherit }
body.dark-theme .hide-in-light-theme { display: none }
body.dark-theme .hide-in-dark-theme { display: none }
body.dark-theme .hide-in-light-theme { display: inherit }
body.light-theme .hide-in-dark-theme { display: inherit }
body.light-theme .hide-in-light-theme { display: none }