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

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),
	link-visited-fg: #666,
	link-fg: #000,
}

:root
	--syntax-bpx: 5px
	--ff system-ui, sans-serif
	--msff ldiosevka, monospace
	--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)

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}

:root
	@media (max-width: 600px)
		--syntax-bpx 2px

.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 }