You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I've been working on an addon that brings Naive UI components to Slidev. I managed to introduce the components by using app.use(naive).
The problem 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 context globally?
Here's how I configure the app to support Naive UI:
importnaive,{darkTheme}from"naive-ui";import{defineAppSetup}from"@slidev/types";import{shallowRef,h}from"vue";exportdefaultdefineAppSetup(({ app })=>{// Set up naive-uiapp.use(naive);// Inject Naive UI styles into <head> elementif(typeofwindow!=="undefined"){consthead=document.head||document.getElementsByTagName("head")[0];["naive-ui-style","vueuc-style"].forEach((name)=>{constmeta=document.createElement("meta");meta.name=name;head.appendChild(meta);});}// Set dark modeconstnaiveTheme=shallowRef(null);constupdateTheme=()=>{// 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 themeconstobserver=newMutationObserver(updateTheme);observer.observe(document.documentElement,{attributes: true,attributeFilter: ["class"],});// TODO: provide updated theme});
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
I've been working on an addon that brings Naive UI components to Slidev. I managed to introduce the components by using
app.use(naive).The problem 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 aNConfigProvideraround everything.Are there any alternative ways to provide context globally?
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
appto support Naive UI:Beta Was this translation helpful? Give feedback.
All reactions