feat: override Naive UI with base font size (#20)

sghng · web-flow · commit 5c31c7710754 · 2025-02-08T11:42:22.000-05:00
* Watching changes in .slidev-layout

* Add debug msg to useInjectStyle.ts

* Only read font size when layout loaded

* Inject base font sizes through config provider

* Add a comment

* Remove useBaseFontSizes from naive.ts

* Directly import base font size

* Use isDark as a singleton

* Rename base font hook

* Add a comment in useBaseFontSize

* Bump version

* Update latest changes
diff --git a/README.md b/README.md
@@ -109,12 +109,13 @@ supported, along with full compatibility for props and slots.
 
 ## Latest Changes
 
+- **`v0.8.0`:** Override Naive UI font size with base font size.
 - **`v0.7.0`:** Added support for using addon as a Vue plugin.
 - **`v0.6.0`:** Added full support for UnoCSS utility classes. No more `!`
   prefixes needed!
 - **`v0.5.1`:** Improved logic in `main.ts`.
 - **`v0.5.0`:** Added support for dynamic dark theme.
-- **`v0.4.0:`** Fixed a bug that caused Naive UI styles not loaded.
-- **`v0,3.0:`** Adopted a new way of loading components.
-- **`v0.2.0:`** Added all components.
-- **`v0.1.0:`** First working version with a few components.
+- **`v0.4.0`:** Fixed a bug that caused Naive UI styles not loaded.
+- **`v0,3.0`:** Adopted a new way of loading components.
+- **`v0.2.0`:** Added all components.
+- **`v0.1.0`:** First working version with a few components.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "slidev-addon-naive",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "An addon that brings Naive UI components to Slidev.",
   "keywords": [
     "naive-ui",
diff --git a/src/naive.ts b/src/naive.ts
@@ -1,10 +1,12 @@
+import { type App } from "vue";
+
 import naive from "naive-ui";
 
 import useConfigProvider from "./useConfigProvider.ts";
 import useInjectStyle from "./useInjectStyle.ts";
 
 export default {
-  install(app) {
+  install(app: App) {
     app.use(naive); // setup Naive UI
     useInjectStyle(); // inject styles to <head>
     useConfigProvider(app); // provide theme and overrides
diff --git a/src/useBaseFontSize.ts b/src/useBaseFontSize.ts
@@ -0,0 +1,44 @@
+import { ref } from "vue";
+
+// must be a ref for Naive components to be rendered with overrides
+const fontSize = ref("16px"); // default font size
+
+const setBaseFontSize = () => {
+  const element = document.querySelector(".slidev-layout");
+  if (element) {
+    const computedStyle = window.getComputedStyle(element);
+    fontSize.value = computedStyle.fontSize;
+    console.debug("[Naive] Base font size:", fontSize.value);
+  } else {
+    console.error(
+      "[Naive] .slidev-layout not found, using default font size (16px)",
+    );
+  }
+};
+
+if (typeof window === "undefined") {
+  console.error(
+    `[Naive] Window is undefined, can't observe DOM to set base font size`,
+  );
+} else {
+  // Setup observer for DOM changes
+  const observer = new MutationObserver(() => {
+    const slidevLayout = document.querySelector(".slidev-layout");
+
+    if (slidevLayout) {
+      console.debug("[Naive] Found .slidev-layout");
+      observer.disconnect(); // stop observing the document body
+      setBaseFontSize();
+    }
+  });
+
+  // Start observing the document body for layout appearance
+  observer.observe(document.body, {
+    childList: true,
+    subtree: true,
+  });
+
+  console.debug("[Naive] Watching for .slidev-layout element to show up");
+}
+
+export default fontSize;
diff --git a/src/useConfigProvider.ts b/src/useConfigProvider.ts
@@ -1,16 +1,31 @@
-import { ref, computed } from "vue";
+import { ref, computed, type App } from "vue";
 import { darkTheme, lightTheme } from "naive-ui";
+import { ConfigProviderInjection } from "naive-ui/es/config-provider/src/internal-interface.js";
 
-import useDarkTheme from "./useDarkTheme.ts";
+import isDark from "./useDarkTheme.ts";
+import baseFontSize from "./useBaseFontSize.ts";
 
-const useConfigProvider = (app) => {
+/**
+ * I'm trying to mimic the design of original Naive UI, which can be found by
+ * checking default theme variables or inspecting Naive UI website.
+ *
+ * https://www.naiveui.com/en-US/docs/theme
+ */
+
+const themeOverrides = computed(() => ({
+  common: {
+    fontSize: baseFontSize.value, // regular text - 16px
+    fontSizeMedium: baseFontSize.value, // default buttons - 16px
+  },
+}));
+
+const useConfigProvider = (app: App) => {
   // Manually inject n-config-provider context
-  const isDark = useDarkTheme();
   app.provide("n-config-provider", {
     mergedThemeRef: computed(() => (isDark.value ? darkTheme : lightTheme)), // required
-    mergedThemeOverridesRef: ref({}), // required
+    mergedThemeOverridesRef: themeOverrides, // required
     mergedClsPrefixRef: ref("n"), // required for styles
-  });
+  } as Partial<ConfigProviderInjection>);
 };
 
 export default useConfigProvider;
diff --git a/src/useDarkTheme.ts b/src/useDarkTheme.ts
@@ -1,25 +1,21 @@
-import { ref, type Ref } from "vue";
+import { ref } from "vue";
 
-const useDarkTheme = (): Ref<boolean> => {
-  const isDark = ref(false);
+const isDark = ref(false);
 
-  if (typeof window !== "undefined") {
-    // Initialize with current state
-    isDark.value = document.documentElement.classList.contains("dark");
-
-    // Watch for changes in the 'dark' class
-    const observer = new MutationObserver(() => {
-      isDark.value = document.documentElement.classList.contains("dark");
-    });
+if (typeof window !== "undefined") {
+  // Initialize with current state
+  isDark.value = document.documentElement.classList.contains("dark");
 
-    // Start observing the html element for class changes
-    observer.observe(document.documentElement, {
-      attributes: true,
-      attributeFilter: ["class"],
-    });
-  }
+  // Watch for changes in the 'dark' class
+  const observer = new MutationObserver(() => {
+    isDark.value = document.documentElement.classList.contains("dark");
+  });
 
-  return isDark;
-};
+  // Start observing the html element for class changes
+  observer.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ["class"],
+  });
+}
 
-export default useDarkTheme;
+export default isDark;
diff --git a/src/useInjectStyle.ts b/src/useInjectStyle.ts
@@ -7,6 +7,7 @@ const useInjectStyle = () => {
       meta.name = name;
       head.appendChild(meta);
     });
+    console.debug("[Naive] Styles injected to <head>");
   }
 };
 
diff --git a/uno.config.ts b/uno.config.ts
@@ -13,7 +13,9 @@ import { defineConfig, presetWind } from "unocss";
 export default defineConfig({
   presets: [
     presetWind({
-      important: ":root", // makes UnoCSS override Naive UI styles
+      // Makes UnoCSS override Naive UI styles. This is needed for some UnoCSS
+      // utility classes to take effect without adding ! prefix
+      important: ":root",
     }),
   ],
 });

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "slidev-addon-naive",`
`3`		`- "version": "0.7.0",`
	`3`	`+ "version": "0.8.0",`
`4`	`4`	`"description": "An addon that brings Naive UI components to Slidev.",`
`5`	`5`	`"keywords": [`
`6`	`6`	`"naive-ui",`
Original file line number	Diff line number	Diff line change
`@@ -7,6 +7,7 @@ const useInjectStyle = () => {`
`7`	`7`	`meta.name = name;`
`8`	`8`	`head.appendChild(meta);`
`9`	`9`	`});`
	`10`	`+ console.debug("[Naive] Styles injected to <head>");`
`10`	`11`	`}`
`11`	`12`	`};`
`12`	`13`