Summary
In dark mode on Linux, native <select> dropdowns render with a white background and faint/unreadable text. The native window menu bar (File / Edit / Workspace / View / Help) also renders white instead of following the dark theme.
Screenshot:
Visible in screenshot:
- Settings menu bar (File/Edit/Workspace/View/Help) — white background
- Language dropdown — white background, near-invisible text
- Light theme / Dark theme dropdowns — same issue
Reproduction
- Launch Krillnotes on Linux (KDE/Plasma observed)
- Settings → Appearance → Mode = Dark
- Open the Language / Light theme / Dark theme dropdowns
Likely root cause
krillnotes-desktop/src/utils/themeManager.ts adds the .dark class to <html> and sets CSS custom properties, but never sets the color-scheme: dark CSS property. Without color-scheme: dark declared on :root (or html), the webview renders native form widget chrome (selects, scrollbars, date pickers) using the OS light theme regardless of the page's own CSS variables.
Likely fix: in applyTokens() (themeManager.ts:44-48), also set root.style.colorScheme = variant so native widgets follow the active variant.
Scope of impact
Probably affects every <select> in the app, not just Settings. Other native selects exist in:
ChannelPicker.tsx, OperationsLogDialog.tsx, AddContactDialog.tsx, InfoPanel.tsx, FieldEditor.tsx, ShareDialog.tsx, NewWorkspaceDialog.tsx, InviteWorkflow.tsx, EditContactDialog.tsx, WorkspaceManagerDialog.tsx, WorkspacePropertiesDialog.tsx, AddNoteDialog.tsx
Native scrollbars may also be affected by the same root cause.
Menu bar caveat
The top-level window menu bar is a Tauri-native menu (built in krillnotes-desktop/src-tauri/src/menu.rs). On Linux it follows the GTK theme, not the webview. That part may need a separate fix (or be unfixable from the app side) — but worth tracking here as part of the broader "dark mode looks wrong" experience.
Environment
- OS: Linux (KDE/Plasma)
- Branch: development
Summary
In dark mode on Linux, native
<select>dropdowns render with a white background and faint/unreadable text. The native window menu bar (File / Edit / Workspace / View / Help) also renders white instead of following the dark theme.Screenshot:
Visible in screenshot:
Reproduction
Likely root cause
krillnotes-desktop/src/utils/themeManager.tsadds the.darkclass to<html>and sets CSS custom properties, but never sets thecolor-scheme: darkCSS property. Withoutcolor-scheme: darkdeclared on:root(orhtml), the webview renders native form widget chrome (selects, scrollbars, date pickers) using the OS light theme regardless of the page's own CSS variables.Likely fix: in
applyTokens()(themeManager.ts:44-48), also setroot.style.colorScheme = variantso native widgets follow the active variant.Scope of impact
Probably affects every
<select>in the app, not just Settings. Other native selects exist in:ChannelPicker.tsx,OperationsLogDialog.tsx,AddContactDialog.tsx,InfoPanel.tsx,FieldEditor.tsx,ShareDialog.tsx,NewWorkspaceDialog.tsx,InviteWorkflow.tsx,EditContactDialog.tsx,WorkspaceManagerDialog.tsx,WorkspacePropertiesDialog.tsx,AddNoteDialog.tsxNative scrollbars may also be affected by the same root cause.
Menu bar caveat
The top-level window menu bar is a Tauri-native menu (built in
krillnotes-desktop/src-tauri/src/menu.rs). On Linux it follows the GTK theme, not the webview. That part may need a separate fix (or be unfixable from the app side) — but worth tracking here as part of the broader "dark mode looks wrong" experience.Environment