feat(editor): Add theme toggle#66
Conversation
WalkthroughAdds a dark mode feature: a state and toggle action in the editor store, a toolbar button to flip dark mode, a reactive effect in App.vue to sync Quasar’s dark mode, and SCSS to adjust canvas background in dark theme. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor U as User
participant TB as Editor Toolbar Button
participant ES as Editor Store
participant APP as App.vue Effect
participant Q as Quasar Dark Mode
participant CSS as SCSS Rules
U->>TB: Click "Toggle Dark Mode"
TB->>ES: ES.toggleDarkMode()
ES-->>ES: Flip state: darkMode = !darkMode
ES-->>APP: darkMode state change (reactive)
rect rgba(200,220,255,0.25)
note right of APP: Reactive effect runs
APP->>Q: $q.dark.set(darkMode)
end
Q-->>CSS: Adds body.body--dark class when enabled
CSS-->>U: Canvas background updates
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
🔇 Additional comments (1)
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (1)
src/App.vue (1)
6-15: Consider usingwatchEffectinstead ofeffectfor better idiomaticity.The low-level
effectAPI from@vue/reactivityworks correctly here, but the more conventional and recommended approach in Vue 3's Composition API is to usewatchEffectfrom the mainvuepackage. Both achieve the same result, butwatchEffectis the documented standard for reactive effects in components.Apply this diff to use the more idiomatic API:
-import { effect } from 'vue' +import { watchEffect } from 'vue' import { useQuasar } from 'quasar' const editorStore = useEditorStore() const $q = useQuasar() -effect(() => { +watchEffect(() => { $q.dark.set(editorStore.darkMode) })
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
src/App.vue(1 hunks)src/components/editor/EditorCanvas.vue(1 hunks)src/layouts/EditorLayout.vue(1 hunks)src/stores/editor-store.js(3 hunks)
🔇 Additional comments (1)
src/stores/editor-store.js (1)
9-9: LGTM! Dark mode state initialized correctly.The
darkModestate is properly initialized tofalse, and sincepersist: trueis configured for this store (line 29), the user's dark mode preference will be remembered across sessions, which is good UX.
| .body--dark { | ||
| .canvas-scroll-area { | ||
| background: #23272a; | ||
| } | ||
| } |
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
Let's move it to global style.
There was a problem hiding this comment.
@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.
There was a problem hiding this comment.
Global styles are in src/css/app.scss
There was a problem hiding this comment.
@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.
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/layouts/EditorLayout.vue(1 hunks)src/stores/editor-store.js(3 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- src/stores/editor-store.js
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
| .body--dark { | ||
| .canvas-scroll-area { | ||
| background: #23272a; | ||
| } | ||
| } |
There was a problem hiding this comment.
Let's move it to global style.
|
Hi @krushndayshmookh, can you approve my PR so I can merge it? |
2 participants
Implements #22
Summary by CodeRabbit
New Features
Style