docs: add dark/light appearance switcher

packages/docs/.vitepress/config.ts

@@ -63,7 +63,6 @@ export default defineConfig({
         ['meta', { name: 'twitter:description', content: "Oruga UI is like a caterpillar, minimal and yet functional. It's in your hands turning it into a butterfly." }],
         ['meta', { name: 'twitter:image', content: 'https://oruga-ui.com/logo-banner.png?v=3' }],
     ],
-    appearance: false,
     themeConfig: {
         logo: "/logo.png",
         outline: [2, 4],

packages/docs/.vitepress/theme/components/ExampleShowcase.ce.vue

@@ -16,12 +16,6 @@ if (!shadowRoot)
     throw new Error("ExampleShowcase must be used as web component.");
 
 onMounted(() => {
-    if (host?.children)
-        // add bulma light theme attribute to the slot content
-        host.childNodes.forEach((child) =>
-            child.setAttribute("data-theme", "light"),
-        );
-
     // The slot content must be moved to the shadow root
     // for the scoped style above to be applied.
     if (host?.childNodes) shadowRoot.append(...(host.childNodes ?? []));

packages/docs/.vitepress/theme/components/ExampleViewer.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
-import { ref, computed, onMounted, useTemplateRef, nextTick } from "vue";
+import { ref, computed, onMounted, useTemplateRef, nextTick, watch } from "vue";
 import MarkdownIt from "markdown-it";
 import MarkdownItHighlightjs from "markdown-it-highlightjs";
+// @ts-expect-error types not found
+import { useData } from "vitepress/dist/client/theme-default/composables/data";
 
 const markdown = new MarkdownIt().use(MarkdownItHighlightjs);
 
@@ -75,9 +77,34 @@ const tab = ref(
 
 const showcaseElement = useTemplateRef<HTMLElement>("showcaseRef");
 
+const { isDark } = useData();
+
+// change appearance on theme change
+watch(isDark, () => applyAppearance());
+
+function applyAppearance(): void {
+    // get example-showcase root
+    const shadowRoot = showcaseElement.value?.shadowRoot;
+    if (!shadowRoot) return;
+
+    // get only sections in child nodes
+    const sections = Array.from(shadowRoot.children).filter(
+        (node) => node.tagName === "SECTION",
+    );
+
+    // set theme specific attributes to example sections
+    sections.forEach((child) => {
+        child.setAttribute("data-theme", isDark.value ? "dark" : "light");
+        child.setAttribute("data-bs-theme", isDark.value ? "dark" : "light");
+    });
+}
+
 onMounted(() => {
     // await component got rendered
     nextTick(() => {
+        // set default appearance style
+        applyAppearance();
+
         if (!styleCode.value || !props.component) return;
 
         // get example-showcase root