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

/* catppuccin colors */
latte = {
	red: #d20f39,
	yellow: #df8e1d,
	green: #40a02b,
	sapphire: #209fb5,
	mauve: #8839ef,
}

mocha = {
	red: #f38ba8,
	yellow: #f9e2af,
	green: #a6e3a1
	sapphire: #74c7ec,
	mauve: #cba6f7,
}

light-syntax = {
	brd: rgba(255, 255, 255, 0.2),
	bg: #e6e9ef,
	ledg: rgba(0, 0, 0, 0.1),
	sh: #6c6f85,
	name: latte['green'],
	mag: latte['red'],
	lit: latte['mauve'],
	lits: latte['yellow'],
	aq: latte['sapphire'],
	err: latte['red'],
}

dark-syntax = {
	brd: rgba(255, 255, 255, 0.2),
	bg: #181825,
	ledg: #313244,
	sh: #6c7086,
	name: mocha['green'],
	mag: mocha['red'],
	lit: mocha['mauve'],
	lits: mocha['yellow'],
	aq: mocha['sapphire'],
	err: mocha['red'],
}

theme-colors = {
	icon-shadow: #fff,
	link-visited-fg: #5c5f77,
	link-fg: #209fb5,
}

:root
	--syntax-bpx: 5px
	--ff system-ui, sans-serif
	--msff ldiosevka, IosevkaLyteWeb, IosevkaLyte, Iosevka, "Fira Code", monospace
	--pc #df3c59
	--pcd #8e293b

light-theme =
	for k, v in light-syntax
		--syntax-{k}: v
	for k2, v2 in theme-colors
		{unquote("--" + k2)}: v2
	--heading-fg #4c4f69
	--bg #eff1f5
	--header-bg rgba(255, 255, 255, 0.1)
	--header-hover-bg rgba(255, 255, 255, 0.2)
	--fg #4c4f69
	--inline-code-bg rgba(0,0,0,0.08)
	--input-bg #dce0e8
	--input-hover-bg rgba(0, 0, 0, 0.16)
	--input-focus-bg var(--input-bg)
	--button-bg var(--input-bg)
	--button-hover-bg var(--input-hover-bg)
	--button-focus-bg var(--input-bg)

dark-theme =
	for k, v in dark-syntax
		--syntax-{k}: v
	for k2, v2 in theme-colors
		{unquote("--" + k2)}: invert(v2)
	--bg #1e1e2e
	--header-bg rgba(255, 255, 255, 0.03)
	--header-hover-bg rgba(255, 255, 255, 0.06)
	--fg #cdd6f4
	--heading-fg #cdd6f4
	--link-visited-fg #a6adc8
	--link-fg #74c7ec
	--inline-code-bg rgba(255,255,255,0.05)
	--input-bg #181825
	--input-hover-bg #313244
	--input-focus-bg #45475a
	--button-bg var(--input-bg)
	--button-hover-bg var(--input-hover-bg)
	--button-focus-bg var(--input-bg)

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