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

/* catppuccin colors */

latte = {
	red: #d20f39,
	yellow: #df8e1d,
	green: #40a02b,
	sapphire: #1e66f5, // blue
	mauve: #8839ef,
}

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

/* TODO: everything should be a catppuccin color or based on one */

light-theme = {
	--syntax-brd: rgba(255, 255, 255, 0.2),
	--syntax-bg: #e6e9ef,
	--syntax-ledg: rgba(0, 0, 0, 0.1),
	--syntax-sh: #6c6f85,
	--syntax-name: latte['green'],
	--syntax-mag: latte['red'],
	--syntax-lit: latte['mauve'],
	--syntax-lits: latte['yellow'],
	--syntax-aq: latte['sapphire'],
	--syntax-err: latte['red'],
	--icon-shadow: #fff,
	--heading-fg: #4c4f69,
	--link-fg: latte['sapphire'],
	--link-visited-fg: alpha(latte['mauve'], 1.0),
	--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 = {
	--syntax-brd: rgba(255, 255, 255, 0.2),
	--syntax-bg: #181825,
	--syntax-ledg: #313244,
	--syntax-sh: #6c7086,
	--icon-shadow: #000,
	--syntax-name: mocha['green'],
	--syntax-mag: mocha['red'],
	--syntax-lit: mocha['mauve'],
	--syntax-lits: mocha['yellow'],
	--syntax-aq: mocha['sapphire'],
	--syntax-err: mocha['red'],
	--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-fg: mocha['sapphire'],
	--link-visited-fg: alpha(mocha['mauve'], 1.0),
	--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
	--syntax-bpx: 5px
	--ff system-ui, sans-serif
	--msff ldiosevka, IosevkaLyteWeb, IosevkaLyte, Iosevka, "Fira Code", monospace
	--pc #df3c59
	--pcd #8e293b

:root, body.dark-theme
	{dark-theme}

body.light-theme
	{light-theme}

:root
	@media (prefers-color-scheme light)
		{light-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: inherit }
	.hide-in-light-theme { display: none }
	body.light-theme .hide-in-dark-theme { display: none }
	body.dark-theme .hide-in-light-theme { display: inherit }

body.dark-theme .hide-in-dark-theme { display: inherit }
body.dark-theme .hide-in-light-theme { display: none }
body.light-theme .hide-in-dark-theme { display: none }
body.light-theme .hide-in-light-theme { display: inherit }

body .only-in-light-theme { display: none }
body .only-in-dark-theme { display: none }
body .only-in-system-theme { display: none }

body.dark-theme .only-in-dark-theme { display: inherit }
body.light-theme .only-in-light-theme { display: inherit }
body.system-theme .only-in-system-theme { display: inherit }