feat: add dark mode theme

[Copilot]

Implements light/dark theme switching for Yasgui with persistent user preferences and system theme detection.

Implementation

• ThemeManager: Handles theme state, localStorage persistence (1-year expiry), and system preference detection via prefers-color-scheme
• Theme toggle button: Positioned in control bar between Settings icon and PREFIX button with sun/moon icons for instant switching
• Styling: CSS custom properties (~30 variables) applied across all components - editor (Material Palenight for dark mode), results, tables, tabs, modals, endpoint textbox, buttons, and hints
• Configuration: theme?: 'light' | 'dark' and showThemeToggle?: boolean (default: true)

Themed Components

• ✅ Yasqe editor with Material Palenight theme for dark mode
• ✅ Yasr results viewer (Table and Response plugins)
• ✅ Endpoint textbox (dark background with white text)
• ✅ All buttons (share, query execute, maximize)
• ✅ Tab labels and navigation
• ✅ Notification hints (e.g., "Press CTRL - ")
• ✅ CodeMirror autocomplete popup
• ✅ Modals and dialogs

API

import Yasgui, { Theme } from '@matdata/yasgui';

const yasgui = new Yasgui(element, {
  theme: 'dark',
  showThemeToggle: true
});

yasgui.getTheme();        // Returns current theme
yasgui.setTheme('dark');  // Sets theme programmatically
yasgui.toggleTheme();     // Toggles between themes

Screenshots

Light Mode:

Dark Mode:

See THEME_GUIDE.md for detailed configuration options.

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Add different themes (dark mode)</issue_title>
<issue_description></issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes Add different themes (dark mode) #1

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[MathiasVDA]

the endpoint textbox also needs to be dark (with white text)
the colors of the share, query execute and maximise buttons in yasq dark mode are not changed
did you also adapt the plugin interface so that plug ins can also change mode?
did you adapt the default plugins 'table' and 'response' ? Also create a screenshot of these. Use a dummy yasqe query response if you can't access the internet

[MathiasVDA]

The themeToggleIcon pushes the list of the queries to the right side. It would be better to put this icon next to the settings icon, between the settings icon and the 'prefix' button.

I notice the following three elements that do not change with a theme toggle:

• the "Query" tab labels
• the hint 'press CTRL - '
• the settings modal dialog

please implement changes

[Copilot]

The themeToggleIcon pushes the list of the queries to the right side. It would be better to put this icon next to the settings icon, between the settings icon and the 'prefix' button.

I notice the f...

Fixed in commit a92b25e:

1. Theme toggle button relocated: Moved from tab bar to control bar, now positioned between the Settings icon and PREFIX button
2. "Query" tab labels: Now properly themed with correct text colors in both light and dark modes
3. Notification hints: Added theming for hint text (e.g., "press CTRL - ") - text now uses theme-aware colors

Light Mode:

Dark Mode: