begin themeing work

- define themes
- implement global stylesheets

src/content-env.d.ts

@@ -102,13 +102,40 @@ declare module 'content/routes.js' {
   } | {
     children: HeaderEntry[]
   })
+
+  /**
+   * Defines what kind of theme a specified theme is
+   * for the purposes of determining a default theme
+   * based on the system/browser setting of the visitor
+   */
+  type SiteThemeType =
+    | 'dark'
+    | 'light'
+    | 'dark_hc'
+    | 'light_hc'
+
+  /**
+   * Defines a stylesheet the site uses for applying a theme
+   */
+  type SiteTheme = {
+    displayName?: string
+    type: SiteThemeType
+    url: string
+  }
+
+  /**
+   * Defines a list of themes the site uses
+   */
+  type SiteThemeList = { [id: string]: SiteTheme }
   
   /**
    * Defines global values for the site.
    */
   type SiteGlobals = {
-    header: HeaderEntry[],
+    header: HeaderEntry[]
     id: string
+    stylesheetUrls: string[]
+    themes: SiteThemeList
     warning: WarningModal
   }
 

src/main.vue

@@ -40,17 +40,28 @@ const determineWarning = () => {
     : routeConfig.warning
 }
 
+const injectStylesheet = (url: string, className: string) => {
+  const newElement = document.createElement('link')
+    newElement.setAttribute('rel', 'stylesheet')
+    newElement.setAttribute('href', url)
+    newElement.classList.add(className)
+    document.head.appendChild(newElement)
+}
+
 const determineStylesheets = (stylesheetUrls?: string[]) => {
-  const staleStylesheets = document.head.querySelectorAll('link[rel="stylesheet"]')
+  const staleStylesheets = document.head.querySelectorAll('link.page-stylesheet[rel="stylesheet"]')
   staleStylesheets.forEach(stylesheet => {
     document.head.removeChild(stylesheet)
   })
 
   stylesheetUrls?.forEach(stylesheet => {
-    const newElement = document.createElement('link')
+    injectStylesheet(stylesheet, 'page-stylesheet')
-    newElement.setAttribute('rel', 'stylesheet')
+  })
-    newElement.setAttribute('href', stylesheet)
+}
-    document.head.appendChild(newElement)
+
+const determineGlobalStylesheets = () => {
+  globalConfig.stylesheetUrls.forEach(stylesheet => {
+    injectStylesheet(stylesheet, 'global-stylesheet')
   })
 }
 
@@ -77,6 +88,7 @@ const onAcknowledgedWarning = () => {
 
 onMounted(async () => {
   await refresh()
+  determineGlobalStylesheets()
   router.afterEach(async (to, from) => {
     await refresh()
   })