GreenTeaSpeak 2 - Standard UI Theme Template
============================================

Neutral starter theme matching the default dark client look.
Use this as a blank base: copy it, then restyle everything you need.


HOW THEMES WORK
---------------
1. theme.css is injected as <style id="gts-ui-theme"> into every renderer window.
2. Prefer overriding :root CSS variables (section A in theme.css). Most chrome,
   chat, tree, settings, favorites, identities, and dialogs inherit from them.
3. For layout / structural restyles, target the class selectors in section B
   (commented examples in theme.css). Keep specificity moderate - avoid
   !important unless a hardcoded rule blocks you.
4. Optional: set name / author / version in theme.json; colorScheme "dark" or "light".
5. Activate (or re-select) the theme under Settings -> Extensions -> Themes.


CREATE / EDIT
-------------
Deutsch:
  Einstellungen -> Erweiterungen -> Themen -> "Aus Vorlage anlegen..."
  Bearbeitbare Kopie: %APPDATA%/GreenTeaSpeak 2/themes/...
  (Linux: ~/.config/GreenTeaSpeak 2/themes/...
   macOS: ~/Library/Application Support/GreenTeaSpeak 2/themes/...)
  theme.css bearbeiten, danach Thema erneut aktivieren.

English:
  Settings -> Extensions -> Themes -> "Create from template..."
  Editable copy: %APPDATA%/GreenTeaSpeak 2/themes/...
  Edit theme.css, then re-activate the theme to reload CSS.

You can also import a ZIP/folder that contains theme.css (+ optional theme.json).


SURFACE MAP (what to override)
------------------------------
Global tokens (:root) - start here:
  --bg-app / --bg-panel* / --bg-toolbar / --bg-status / --bg-window*
  --text / --text-muted / --accent / --border* / --menu-* / --btn-*
  --tree-* / --chat-* / --selection* / --dialog-* / --modal-*
  --settings-* (also drives favorites, whisper lists, profiles, poke,
                server/channel edit, permissions)
  --about-* / --font-ui / --font-ui-size / --status-news-hover / --settings-glow-*

Main connection view:
  .app-shell, .menu-bar, .toolbar, .server-tabs, .workspace, .panel,
  .channel-tree / .channel-tree-pane, .chat-area, .status-bar, .connect-dialog

Favorites (bookmarks):
  .bookmark-manager - local --bm-* inherit from --settings-* by default

Settings:
  html.settings-window-page, .settings-window, .settings-navigation,
  .settings-content, .settings-group, .settings-page-header

Identities / profiles:
  html.profiles-page, .profiles-window, .profile-create-window
  --profiles-* inherit from --settings-*

Dialogs / modals:
  .modal-card (+ --modal-*), .connect-dialog, .moderation-dialog (--mod-*),
  .whisper-lists-dialog (--wl-*), .contacts-dialog (--ct-*),
  .poke-*-dialog (--poke-*), html.server-edit-page (--se-*),
  html.channel-edit-page (--ce-*), html.permission-*-page (--pe-*)

Menus:
  .menu-dropdown, .menu-item, .menu-submenu
  (native Electron/OS context menus are not CSS-themeable)

Video / extras:
  .channel-video-stage*, .info-panel, .about-*


QUICK START
-----------
1. Create from template (or copy this folder).
2. Change --accent, --bg-app, --settings-accent in :root.
3. Re-activate the theme.
4. For deeper changes, uncomment section B selectors in theme.css.


GAPS / LIMITS
-------------
- Native OS context menus and window title bars are not CSS-themeable.
- Some status / sprite icons keep their bitmap colors.
- A few niche panels still use hardcoded hex (e.g. some connection-info
  quota colors, channel-video overlays) - override those selectors if needed.
- Plugin windows may ship their own CSS; injected variables still apply
  if the plugin uses them.


FORMAT
------
theme.json  - metadata (name, author, version, colorScheme, format: css-vars)
theme.css   - required; variables + optional structural rules
style.css / custom.css also accepted as CSS filename alternatives
ZIP import: folder containing theme.css + optional theme.json
