Alternative ways to provide theme globally? (can't modify app) #6733

sghuang19 · 2025-01-31T23:48:16Z

sghuang19
Jan 31, 2025

Hi! I've been working on an addon that brings Naive UI components to Slidev, a slide-as-code tool based on Vue. I managed to introduce the components by using app.use(naive).

The issue is, the components in the slideshow do not respond to the dark theme. Since this is a plugin, I have no control on the definition of app, I can only configure it, so there's no way I can wrap a NConfigProvider around everything.

Are there any alternative ways to provide theme to all components?

Here's the npm package I'm buildin: https://github.com/sghuang19/slidev-addon-naive

And here's a screenshot:

Here's how I configure the app to support Naive UI:

import naive, { darkTheme } from "naive-ui";
import { defineAppSetup } from "@slidev/types";
import { shallowRef, h } from "vue";

export default defineAppSetup(({ app }) => {
  // Set up naive-ui
  app.use(naive);

  // Inject Naive UI styles into <head> element
  if (typeof window !== "undefined") {
    const head = document.head || document.getElementsByTagName("head")[0];
    ["naive-ui-style", "vueuc-style"].forEach((name) => {
      const meta = document.createElement("meta");
      meta.name = name;
      head.appendChild(meta);
    });
  }

  // Set dark mode
  const naiveTheme = shallowRef(null);
  const updateTheme = () => {
    // console.log("Color scheme changed, updating Naive theme...");
    naiveTheme.value = document.documentElement.classList.contains("dark")
      ? darkTheme
      : null;
  };
  updateTheme();

  // Watch for changes to <html> class and update theme
  const observer = new MutationObserver(updateTheme);
  observer.observe(document.documentElement, {
    attributes: true,
    attributeFilter: ["class"],
  });

  // TODO: provide updated theme

});