feat(editor): Add theme toggle

src/App.vue

@@ -3,5 +3,14 @@
 </template>
 
 <script setup>
-//
+import { useEditorStore } from 'stores/editor-store.js'
+import { effect } from 'vue'
+import { useQuasar } from 'quasar'
+
+const editorStore = useEditorStore()
+const $q = useQuasar()
+
+effect(() => {
+  $q.dark.set(editorStore.darkMode)
+})
 </script>

src/css/app.scss

@@ -1 +1,6 @@
 // app global css in SCSS form
+body.body--dark {
+  .canvas-scroll-area {
+    background: #23272a;
+  }
+}

src/layouts/EditorLayout.vue

@@ -4,6 +4,13 @@
       <q-toolbar>
         <q-toolbar-title> AnimatedVG </q-toolbar-title>
 
+        <LayoutButton
+          :active="editorStore.darkMode"
+          icon="eva-moon-outline"
+          data-test="toolbar-toggle-darkMode"
+          @click="editorStore.toggleDarkMode"
+        />
+
         <LayoutButton
           :active="editorStore.sidebarLeftOpen"
           icon="eva-arrowhead-left-outline"

src/stores/editor-store.js

@@ -1,11 +1,12 @@
 import { defineStore } from 'pinia'
-import { importSvg, exportSvg, domToJson } from 'src/services/svg-io'
+import { domToJson, exportSvg, importSvg } from 'src/services/svg-io'
 
 export const useEditorStore = defineStore('editor', {
   state: () => ({
     sidebarLeftOpen: false,
     sidebarRightOpen: false,
     sidebarBottomOpen: false,
+    darkMode: false,
 
     xml: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"></svg>',
     json: { id: 'svg-root', tagName: 'svg', children: [] }, // Initialize with basic structure
@@ -15,7 +16,7 @@ export const useEditorStore = defineStore('editor', {
     _idCounter: 1,
     undoStack: [],
     redoStack: [],
-    
+
     // Settings
     snapEnabled: false,
     snapSize: 10,
@@ -36,6 +37,9 @@ export const useEditorStore = defineStore('editor', {
     toggleSidebarBottom() {
       this.sidebarBottomOpen = !this.sidebarBottomOpen
     },
+    toggleDarkMode() {
+      this.darkMode = !this.darkMode
+    },
 
     // Settings
     setSnap(enabled, size) {