Skip to content

feat(editor): Add theme toggle #66

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
mslourens wants to merge 4 commits into
base: main
Choose a base branch
from
Open

feat(editor): Add theme toggle #66

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
933e1a7
Add theme toggle
mslourens Oct 4, 2025
eacf60f
review comment processed
mslourens Oct 5, 2025
520d6a8
Apply suggestion from @coderabbitai[bot]
krushndayshmookh Oct 7, 2025
ba433a0
move dark style to global styles
mslourens Oct 8, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 10 additions & 1 deletion src/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
6 changes: 6 additions & 0 deletions src/components/editor/EditorCanvas.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -425,6 +425,12 @@ onUnmounted(() => {
10px 10px;
}

.body--dark {
.canvas-scroll-area {
background: #23272a;
}
}
Copy link
Contributor

@coderabbitai coderabbitai bot Oct 4, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

Scoped styles prevent the dark mode selector from working.

The .body--dark class is applied by Quasar to the <body> element, which is outside this component's scope. With <style scoped>, Vue's scope isolation will prevent this selector from matching correctly. The dark mode background color will not be applied.

Apply this diff to fix the selector by using Vue's :deep() pseudo-class or moving it to a global style:

Option 1 (Recommended): Use :deep() to pierce scoping:

-.body--dark {
-  .canvas-scroll-area {
+:deep(.body--dark) {
+  & .canvas-scroll-area {
     background: #23272a;
   }
 }

Option 2: Move to a non-scoped style block:

Add a separate <style> block (without scoped) at the end of the file:

<style>
.body--dark .canvas-scroll-area {
  background: #23272a;
}
</style>
🤖 Prompt for AI Agents 
In src/components/editor/EditorCanvas.vue around lines 428-432, the .body--dark
.canvas-scroll-area selector is inside a <style scoped> block so it won’t match
the global <body> class; update the styles to pierce component scope by using
Vue’s deep selector (e.g., :deep(.body--dark) .canvas-scroll-area) or move that
rule into a separate non-scoped <style> block at the end of the file so the
.body--dark selector applies globally and the dark background is applied.

Copy link
Owner

@krushndayshmookh krushndayshmookh Oct 7, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's move it to global style.

Copy link
Contributor

@coderabbitai coderabbitai bot Oct 7, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@krushndayshmookh, perfect! Here's the implementation to move the dark mode styles to a global style block:

Remove from the scoped styles (lines 428-432):

.body--dark {
  .canvas-scroll-area {
    background: #23272a;
  }
}

Add a new non-scoped style block at the end of the file (after the closing </style> tag of the scoped section):

<style>
.body--dark .canvas-scroll-area {
  background: #23272a;
}
</style>

This will allow the .body--dark class applied to the <body> element by Quasar to properly target the canvas scroll area and apply the dark background color.

Copy link
Owner

@krushndayshmookh krushndayshmookh Oct 7, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Global styles are in src/css/app.scss

Copy link
Contributor

@coderabbitai coderabbitai bot Oct 7, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@krushndayshmookh, thank you for clarifying! I'll update the recommendation to use your project's global styles file.

In src/components/editor/EditorCanvas.vue:

Remove the dark mode styles from the scoped section (lines 428-432):

.body--dark {
  .canvas-scroll-area {
    background: #23272a;
  }
}

In src/css/app.scss:

Add the following at an appropriate location in the file:

.body--dark .canvas-scroll-area {
  background: #23272a;
}

This keeps your global styles centralized in the project's designated location and will properly apply the dark background when Quasar's dark mode is active.

✏️ Learnings added 
Learnt from: krushndayshmookh
PR: krushndayshmookh/animated-vg#66
File: src/components/editor/EditorCanvas.vue:428-432
Timestamp: 2025-10-07T14:14:45.805Z
Learning: In the animated-vg project, global styles are maintained in src/css/app.scss rather than using non-scoped style blocks within individual components.

Note: Learnings are effective only in the context of similar code segments. To apply general coding guidelines, please configure review instructions. You can manage existing learnings in the app.


.canvas-scroll-area:active {
cursor: grabbing;
}
Expand Down
7 changes: 7 additions & 0 deletions src/layouts/EditorLayout.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
8 changes: 6 additions & 2 deletions src/stores/editor-store.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -15,7 +16,7 @@ export const useEditorStore = defineStore('editor', {
_idCounter: 1,
undoStack: [],
redoStack: [],

// Settings
snapEnabled: false,
snapSize: 10,
Expand All @@ -36,6 +37,9 @@ export const useEditorStore = defineStore('editor', {
toggleSidebarBottom() {
this.sidebarBottomOpen = !this.sidebarBottomOpen
},
toggleDarkMode() {
this.darkMode = !this.darkMode
},

// Settings
setSnap(enabled, size) {
Expand Down