scss support

quartz/theme.ts

@@ -0,0 +1,59 @@
+export interface ColorScheme {
+  light: string,
+  lightgray: string,
+  gray: string,
+  darkgray: string,
+  dark: string,
+  secondary: string,
+  tertiary: string,
+  highlight: string
+}
+
+export interface Theme {
+  typography: {
+    header: string,
+    body: string,
+    code: string
+  },
+  colors: {
+    lightMode: ColorScheme,
+    darkMode: ColorScheme
+  }
+}
+
+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`
+}
+
+export function templateThemeStyles(theme: Theme, stylesheet: string) {
+  return `
+:root {
+  --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};
+
+  --headerFont: ${theme.typography.header};
+  --bodyFont: ${theme.typography.body};
+  --codeFont: ${theme.typography.code};
+}
+
+: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};
+}
+
+${stylesheet}
+`
+}