Improved the demo

Author: JohnCampionJr

demo/package-lock.json

@@ -9,6 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@vueuse/core": "^9.1.0",
     "vue": "^3.2.37"
   },
   "devDependencies": {

demo/package.json

@@ -1,12 +1,20 @@
 <script setup lang="ts">
+import DarkToggle from './components/DarkToggle.vue'
 // This starter template is using Vue 3 <script setup> SFCs
 // Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
 </script>
 
 <template>
-  <h1 class="font-bold underline">Hello world!</h1>
-  <div class="i-[carbon-add]"></div>
-  <div class="i-bg-[carbon-checkmark]">test</div>
-  <div class="i-[carbon-error]"></div>
-  <div class="icon-[carbon-add]"></div>
+  <DarkToggle></DarkToggle>
+  <h1 class="font-bold underline text-blue-900 dark:text-blue-100">Hello world!</h1>
+
+  <div class="flex flex-row">
+    <div class="basis-1/3"><div class="i-[carbon-add] text-blue-900 dark:text-blue-100"></div></div>
+    <div class="basis-1/3">
+      <div class="i-[carbon-checkmark] text-blue-900 dark:text-blue-100"></div>
+    </div>
+    <div class="basis-1/3">
+      <div class="i-[carbon-error] text-blue-900 dark:text-blue-100"></div>
+    </div>
+  </div>
 </template>

demo/src/App.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { useColorMode } from '@vueuse/core'
+
+const color = useColorMode()
+
+function toggleDark() {
+  color.value = color.value === 'dark' ? 'light' : 'dark'
+}
+</script>
+
+<template>
+  <button class="!outline-none" @click="toggleDark">
+    <div class="i-[carbon-sun] dark:i-[carbon-moon] text-2xl text-blue-900 dark:text-blue-100" />
+  </button>
+</template>

demo/src/components/DarkToggle.vue

@@ -31,6 +31,9 @@ body {
   min-width: 320px;
   min-height: 100vh;
 }
+.dark body {
+  background-color: #222222;
+}
 
 h1 {
   font-size: 3.2em;

demo/src/components/HelloWorld.vue

@@ -1,5 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
+  darkMode: 'class',
   content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
   theme: {
     extend: {},