roadmap/quartz/util/theme.ts

64 lines
1.8 KiB
TypeScript
Raw Normal View History

2023-06-01 21:35:31 +00:00
export interface ColorScheme {
2023-07-23 00:27:41 +00:00
light: string
lightgray: string
gray: string
darkgray: string
dark: string
secondary: string
tertiary: string
2023-06-01 21:35:31 +00:00
highlight: string
}
export interface Theme {
typography: {
2023-07-23 00:27:41 +00:00
header: string
body: string
2023-06-01 21:35:31 +00:00
code: string
2023-07-23 00:27:41 +00:00
}
2023-06-01 21:35:31 +00:00
colors: {
2023-07-23 00:27:41 +00:00
lightMode: ColorScheme
2023-06-01 21:35:31 +00:00
darkMode: ColorScheme
}
}
2023-07-23 00:27:41 +00:00
const DEFAULT_SANS_SERIF =
'-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif'
const DEFAULT_MONO = "ui-monospace, SFMono-Regular, SF Mono, Menlo, monospace"
2023-07-25 04:54:47 +00:00
2023-06-01 21:35:31 +00:00
export function googleFontHref(theme: Theme) {
const { code, header, body } = theme.typography
return `https://fonts.googleapis.com/css2?family=${code}&family=${header}:wght@400;700&family=${body}:ital,wght@0,400;0,600;1,400;1,600&display=swap`
}
2023-06-03 19:07:19 +00:00
export function joinStyles(theme: Theme, ...stylesheet: string[]) {
2023-07-25 04:54:47 +00:00
return `
${stylesheet.join("\n\n")}
:root {
2023-06-01 21:35:31 +00:00
--light: ${theme.colors.lightMode.light};
--lightgray: ${theme.colors.lightMode.lightgray};
--gray: ${theme.colors.lightMode.gray};
--darkgray: ${theme.colors.lightMode.darkgray};
--dark: ${theme.colors.lightMode.dark};
--secondary: ${theme.colors.lightMode.secondary};
--tertiary: ${theme.colors.lightMode.tertiary};
--highlight: ${theme.colors.lightMode.highlight};
2023-08-20 05:04:29 +00:00
--headerFont: "${theme.typography.header}", ${DEFAULT_SANS_SERIF};
--bodyFont: "${theme.typography.body}", ${DEFAULT_SANS_SERIF};
--codeFont: "${theme.typography.code}", ${DEFAULT_MONO};
2023-06-01 21:35:31 +00:00
}
:root[saved-theme="dark"] {
--light: ${theme.colors.darkMode.light};
--lightgray: ${theme.colors.darkMode.lightgray};
--gray: ${theme.colors.darkMode.gray};
--darkgray: ${theme.colors.darkMode.darkgray};
--dark: ${theme.colors.darkMode.dark};
--secondary: ${theme.colors.darkMode.secondary};
--tertiary: ${theme.colors.darkMode.tertiary};
--highlight: ${theme.colors.darkMode.highlight};
}
2023-07-25 04:54:47 +00:00
`
2023-06-01 21:35:31 +00:00
}