Update dark mode doc
parent
83da44f351
commit
9ca36be4b0
|
@ -2,7 +2,7 @@
|
||||||
<DocSectionText v-bind="$attrs">
|
<DocSectionText v-bind="$attrs">
|
||||||
<p>
|
<p>
|
||||||
PrimeVue uses the <i>system</i> as the default <i>darkModeSelector</i> in theme configuration. If you have a dark mode switch in your application, set the <i>darkModeSelector</i> to the selector you utilize such as <i>.my-app-dark</i> so
|
PrimeVue uses the <i>system</i> as the default <i>darkModeSelector</i> in theme configuration. If you have a dark mode switch in your application, set the <i>darkModeSelector</i> to the selector you utilize such as <i>.my-app-dark</i> so
|
||||||
that PrimeVue can fit in seamlessly with your light-dark toggle.
|
that PrimeVue can fit in seamlessly with your color scheme.
|
||||||
</p>
|
</p>
|
||||||
<DocSectionCode :code="code1" hideToggleCode importCode hideStackBlitz />
|
<DocSectionCode :code="code1" hideToggleCode importCode hideStackBlitz />
|
||||||
<p>
|
<p>
|
||||||
|
@ -12,6 +12,9 @@
|
||||||
<DocSectionCode :code="code2" hideToggleCode hideStackBlitz />
|
<DocSectionCode :code="code2" hideToggleCode hideStackBlitz />
|
||||||
<DocSectionCode :code="code3" hideToggleCode importCode hideStackBlitz />
|
<DocSectionCode :code="code3" hideToggleCode importCode hideStackBlitz />
|
||||||
<p>In case you prefer to use dark mode all the time, apply the <i>darkModeSelector</i> initially and never change it.</p>
|
<p>In case you prefer to use dark mode all the time, apply the <i>darkModeSelector</i> initially and never change it.</p>
|
||||||
|
<DocSectionCode :code="code4" hideToggleCode hideStackBlitz />
|
||||||
|
<p>It is also possible to disable dark mode completely using <i>false</i> or <i>none</i> as the value of the selector.</p>
|
||||||
|
<DocSectionCode :code="code5" hideToggleCode importCode hideStackBlitz />
|
||||||
</DocSectionText>
|
</DocSectionText>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
@ -45,8 +48,22 @@ app.use(PrimeVue, {
|
||||||
code3: {
|
code3: {
|
||||||
basic: `
|
basic: `
|
||||||
function toggleDarkMode() {
|
function toggleDarkMode() {
|
||||||
const element = document.querySelector('html');
|
document.documentElement.classList.toggle('my-app-dark');
|
||||||
element.classList.toggle('my-app-dark');
|
}
|
||||||
|
`
|
||||||
|
},
|
||||||
|
code4: {
|
||||||
|
basic: `
|
||||||
|
<html class="my-app-dark">
|
||||||
|
`
|
||||||
|
},
|
||||||
|
code5: {
|
||||||
|
basic: `
|
||||||
|
theme: {
|
||||||
|
preset: Aura,
|
||||||
|
options: {
|
||||||
|
darkModeSelector: false || 'none',
|
||||||
|
}
|
||||||
}
|
}
|
||||||
`
|
`
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue