@eox/pages-theme-eox 0.1.0

package/README.md

@@ -0,0 +1,18 @@
+# pages-theme-eox
+
+Vitepress theme for EOX branded pages.
+
+## Usage
+
+```
+npm install -D @eox/pages-theme-eox
+
+// .vitepress/theme/index.js
+import EOX from "@eox/pages-theme-eox"
+
+export default {
+  extends: EOX
+};
+```
+
+See also the [Vitepress Docs](https://vitepress.dev/guide/custom-theme#consuming-a-custom-theme).

package/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "@eox/pages-theme-eox",
+  "version": "0.1.0",
+  "description": "Vitepress Theme with EOX branding",
+  "main": "src/index.js",
+  "author": "EOX",
+  "license": "MIT"
+}

package/src/index.js

@@ -0,0 +1,28 @@
+import DefaultTheme from "vitepress/theme";
+
+export default {
+  extends: DefaultTheme,
+  enhanceApp({ siteData }) {
+    if (!import.meta.env.SSR) {
+      const brandStyle = document.createElement("style");
+      brandStyle.appendChild(
+        document.createTextNode(`
+      :root {
+        /* legacy fallback */
+        --vp-c-brand: ${siteData.value.themeConfig.theme.primaryColor};
+        --vp-c-brand-1: ${siteData.value.themeConfig.theme.primaryColor};
+        --vp-c-brand-2: ${siteData.value.themeConfig.theme.primaryColor};
+        --vp-c-brand-3: ${siteData.value.themeConfig.theme.primaryColor};
+    
+        /* brand color shadings */
+        --vp-c-brand-1: color-mix(in srgb, ${siteData.value.themeConfig.theme.primaryColor} 100%, white);
+        --vp-c-brand-2: color-mix(in srgb, ${siteData.value.themeConfig.theme.primaryColor} 90%, white);
+        --vp-c-brand-3: color-mix(in srgb, ${siteData.value.themeConfig.theme.primaryColor} 80%, white);
+        --vp-c-brand-soft: color-mix(in srgb, ${siteData.value.themeConfig.theme.primaryColor} 16%, transparent);
+      }
+    `)
+      );
+      document.head.appendChild(brandStyle);
+    }
+  },
+};