Skip to content

feat: Add dark mode toggle to application header #34

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

Merged
platzhersh merged 1 commit into from
Jan 31, 2026
Merged

feat: Add dark mode toggle to application header #34

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
27 changes: 26 additions & 1 deletion web/src/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,21 @@
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { RouterView } from 'vue-router'
import { Github } from 'lucide-vue-next'
import { Github, Moon, Sun } from 'lucide-vue-next'

const isDark = ref(false)

function toggleDark() {
isDark.value = !isDark.value
document.documentElement.classList.toggle('dark', isDark.value)
localStorage.setItem('theme', isDark.value ? 'dark' : 'light')

Check failure on line 11 in web/src/App.vue

View workflow job for this annotation

GitHub Actions / lint-and-test 

'localStorage' is not defined
}

onMounted(() => {
const saved = localStorage.getItem('theme')

Check failure on line 15 in web/src/App.vue

View workflow job for this annotation

GitHub Actions / lint-and-test 

'localStorage' is not defined
isDark.value = saved === 'dark' || (!saved && window.matchMedia('(prefers-color-scheme: dark)').matches)
document.documentElement.classList.toggle('dark', isDark.value)
Comment on lines +8 to +17
Copy link

@coderabbitai coderabbitai bot Jan 31, 2026

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟠 Major

Fix ESLint no-undef for localStorage (CI is failing).

Lint/pipeline errors report localStorage as undefined on Line 11 and Line 15. Use window.localStorage (or globalThis.localStorage) to satisfy the ESLint environment and keep behavior unchanged.

🐛 Proposed fix 
 function toggleDark() {
   isDark.value = !isDark.value
   document.documentElement.classList.toggle('dark', isDark.value)
-  localStorage.setItem('theme', isDark.value ? 'dark' : 'light')
+  window.localStorage.setItem('theme', isDark.value ? 'dark' : 'light')
 }

 onMounted(() => {
-  const saved = localStorage.getItem('theme')
+  const saved = window.localStorage.getItem('theme')
   isDark.value = saved === 'dark' || (!saved && window.matchMedia('(prefers-color-scheme: dark)').matches)
   document.documentElement.classList.toggle('dark', isDark.value)
 })
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
function toggleDark() {
isDark.value = !isDark.value
document.documentElement.classList.toggle('dark', isDark.value)
localStorage.setItem('theme', isDark.value ? 'dark' : 'light')
}
onMounted(() => {
const saved = localStorage.getItem('theme')
isDark.value = saved === 'dark' || (!saved && window.matchMedia('(prefers-color-scheme: dark)').matches)
document.documentElement.classList.toggle('dark', isDark.value)
function toggleDark() {
isDark.value = !isDark.value
document.documentElement.classList.toggle('dark', isDark.value)
window.localStorage.setItem('theme', isDark.value ? 'dark' : 'light')
}
onMounted(() => {
const saved = window.localStorage.getItem('theme')
isDark.value = saved === 'dark' || (!saved && window.matchMedia('(prefers-color-scheme: dark)').matches)
document.documentElement.classList.toggle('dark', isDark.value)
})
🧰 Tools
🪛 GitHub Actions: Frontend CI

[error] 11-11: ESLint: 'localStorage' is not defined. (no-undef)

🪛 GitHub Check: lint-and-test

[failure] 15-15:
'localStorage' is not defined

[failure] 11-11:
'localStorage' is not defined

🤖 Prompt for AI Agents 
In `@web/src/App.vue` around lines 8 - 17, ESLint flags `localStorage` as
undefined in toggleDark and the onMounted block; update references to use a
global-qualified accessor (e.g., window.localStorage or globalThis.localStorage)
to satisfy the linter without changing behavior. Specifically, inside the
toggleDark function (and where isDark is initialized in the onMounted callback
used alongside document.documentElement.classList.toggle), replace
localStorage.getItem/setItem usages with window.localStorage.getItem/setItem (or
globalThis.localStorage) so the symbols remain unique and lint-clean.

})
</script>

<template>
Expand All @@ -27,6 +42,15 @@
Encounters
</RouterLink>
</nav>
<div class="flex items-center gap-4">
<button
@click="toggleDark"
class="inline-flex items-center justify-center rounded-md p-2 text-muted-foreground transition-colors hover:text-primary hover:bg-accent"

Check warning on line 48 in web/src/App.vue

View workflow job for this annotation

GitHub Actions / lint-and-test 

Attribute "class" should go before "@click"
:title="isDark ? 'Switch to light mode' : 'Switch to dark mode'"

Check warning on line 49 in web/src/App.vue

View workflow job for this annotation

GitHub Actions / lint-and-test 

Attribute ":title" should go before "@click"
Comment on lines +46 to +49
Copy link

@coderabbitai coderabbitai bot Jan 31, 2026

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟡 Minor

Reorder button attributes to clear lint warnings.

Static analysis reports attribute order warnings. Move class and :title before @click to satisfy the lint rule.

🧹 Proposed fix 
-          <button
-            `@click`="toggleDark"
-            class="inline-flex items-center justify-center rounded-md p-2 text-muted-foreground transition-colors hover:text-primary hover:bg-accent"
-            :title="isDark ? 'Switch to light mode' : 'Switch to dark mode'"
-          >
+          <button
+            class="inline-flex items-center justify-center rounded-md p-2 text-muted-foreground transition-colors hover:text-primary hover:bg-accent"
+            :title="isDark ? 'Switch to light mode' : 'Switch to dark mode'"
+            `@click`="toggleDark"
+          >
🧰 Tools
🪛 GitHub Check: lint-and-test

[warning] 49-49:
Attribute ":title" should go before "@click"

[warning] 48-48:
Attribute "class" should go before "@click"

🤖 Prompt for AI Agents 
In `@web/src/App.vue` around lines 46 - 49, The button element with
`@click`="toggleDark" should have its static and bound attributes ordered before
event handlers to satisfy the linter: move the class and :title attributes to
appear before the `@click` attribute on the <button> (referencing the button that
calls the toggleDark method and uses isDark for the title). Update the attribute
order so class and :title come first, then `@click`, preserving the same values
and spacing.

>
<Sun v-if="isDark" :size="18" />
<Moon v-else :size="18" />
</button>
<a
href="https://github.com/platzhersh/open-cis"
target="_blank"
Expand All @@ -37,6 +61,7 @@
<Github :size="18" />
<span>Open Source</span>
</a>
</div>
</div>
</header>
<main class="container py-6">
Expand Down
Loading