Summary
Knowte currently ships with a single fixed visual theme. There is no dark/light mode toggle, and the application does not respond to the user's OS-level theme preference (prefers-color-scheme). For a desktop application used during long study sessions — often in the evening — the absence of a dark mode option is a genuine ergonomic issue.
Problem
- The application renders a single fixed theme regardless of the user's system appearance setting.
- There is no toggle in the UI for the user to switch between dark and light modes.
prefers-color-scheme media query is not listened to, so users who switch their OS to dark mode after launching the app see no change.- User theme preference is not persisted — even if a toggle were added without persistence, the setting would reset every launch.
Impact
- Students studying in the evening with OS dark mode enabled experience an uncomfortably bright interface.
- The absence of dark mode is a common first-impression complaint for desktop productivity applications.
- Inconsistency with system appearance breaks the "native desktop app" feel that Tauri is specifically chosen to enable.
Proposed Solution
-
CSS variable-based theming: Refactor existing hardcoded colour values into CSS custom properties defined on :root[data-theme="dark"] and :root[data-theme="light"]. Tailwind CSS v4 (already in the stack) has built-in dark mode support via dark: variants — I will leverage this.
-
System preference detection: On app startup, read window.matchMedia('(prefers-color-scheme: dark)').matches and set the initial theme accordingly. Register a listener to update the theme if the OS setting changes while the app is running.
-
User toggle: Add a theme toggle button (sun/moon icon) in the TitleBar.tsx component, which is already the correct location for window-level controls.
-
Persistence via Tauri store: Persist the user's explicit preference using tauri-plugin-store so the chosen theme survives app restarts. Explicit user choice should override the system default.
I am happy to implement this end-to-end. Could you please assign this issue to me?
Labels: enhancement, feature request, UX, help wanted, GSSoC 2026
Summary
Knowte currently ships with a single fixed visual theme. There is no dark/light mode toggle, and the application does not respond to the user's OS-level theme preference (
prefers-color-scheme). For a desktop application used during long study sessions — often in the evening — the absence of a dark mode option is a genuine ergonomic issue.Problem
prefers-color-schememedia query is not listened to, so users who switch their OS to dark mode after launching the app see no change.Impact
Proposed Solution
CSS variable-based theming: Refactor existing hardcoded colour values into CSS custom properties defined on
:root[data-theme="dark"]and:root[data-theme="light"]. Tailwind CSS v4 (already in the stack) has built-in dark mode support viadark:variants — I will leverage this.System preference detection: On app startup, read
window.matchMedia('(prefers-color-scheme: dark)').matchesand set the initial theme accordingly. Register a listener to update the theme if the OS setting changes while the app is running.User toggle: Add a theme toggle button (sun/moon icon) in the
TitleBar.tsxcomponent, which is already the correct location for window-level controls.Persistence via Tauri store: Persist the user's explicit preference using
tauri-plugin-storeso the chosen theme survives app restarts. Explicit user choice should override the system default.I am happy to implement this end-to-end. Could you please assign this issue to me?
Labels:
enhancement,feature request,UX,help wanted,GSSoC 2026