Implement Theme Switcher and Translucent UI Configuration

[zaloguj12]

Pull Request: Implement Theme Switcher and Translucent UI Configuration

Overview

This PR implements a cohesive, theme-aware user experience by introducing a Theme Switcher (supporting Light, Dark, and System Auto preferences) along with a customizable Translucent UI toggle for in-game and settings overlays.

---

Key Features

1. App Themes:
   • Light Mode: Replaced hardcoded dark themes with a clean, low-contrast slate light mode.
   • Dark Mode: Soft charcoal obsidian layout.
   • System Auto: Dynamically tracks OS theme preferences (prefers-color-scheme) in real-time.
2. Translucent UI Toggle:
   • Toggles glassmorphism (backdrop-filter) and soft opacity for floating overlay components.
   • Affected Overlays: Settings Modal, Navbar Modal, Screenshot Modal, In-Game Stats HUD, Session Limit Clock, Time Warnings, and AFK Confirmation dialogs.
   • Reverted background chrome (Navbar) to remain solid by default for structure, while optimizing settings modal opacity to a soft 15% with 8px blur.

---

Detailed File Changes

Backend & Shared State

• opennow-stable/src/shared/gfn.ts
  • Added appTheme (AppTheme) and translucentUI (boolean) to the shared Settings contract.
• opennow-stable/src/main/settings.ts
  • Handled default values (appTheme: "auto", translucentUI: false).
  • Added migrations and strict type validation for the new settings fields in the main process.

Renderer & UI Layer

• opennow-stable/src/renderer/src/App.tsx
  • Added defaults to the React initial state.
  • Set up active layout effects for theme changes and window preference listeners.
• opennow-stable/src/renderer/src/lib/uiCustomization.ts
  • Implemented helpers applyTheme and applyTranslucentUI to toggle data-theme and data-translucent attributes directly on document.documentElement.
• opennow-stable/src/renderer/src/components/SettingsPage.tsx
  • Added a Theme Dropdown Selector (Auto / Light / Dark) and Translucent UI Switch under the Appearance settings card.
• locales/en.json
  • Translated and added local key strings for "theme", "themeHint", "themeAuto", "themeLight", "themeDark", "translucentUI", and "translucentUIHint".

Style System (CSS)

• opennow-stable/src/renderer/src/styles.css
  • Declared CSS variables for the Light theme (--bg-a, --bg-b, --bg-c, --panel, --ink).
  • Replaced over 130 hardcoded rgba(255, 255, 255, x) rules with theme-aware color-mix(in srgb, var(--ink) x%, transparent).
  • Configured conditional .settings-modal, .navbar-modal, .sv-stats, .sv-session-clock, and dialog styles to react to [data-translucent="true"].

---

Validation & Verification Checks

• Typecheck: npm run typecheck completed successfully with no compilation errors on node/renderer.
• Locales Check: npm run locales:check passed baseline translations verify.
• Theme Syncing: Setting theme to auto and changing OS settings syncs real-time.
• Visual Polish: Minimised blur values to subtle levels (4px to 8px) with 15% modal opacity.

• (pr desc generated by gemini)

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 5c71b1a9-7bf2-4863-afec-fa36913c8172

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[capy-ai]

Capy auto-review is paused for this organization because the usage-cycle auto-review limit has been reached. Increase the limit or turn it off in billing settings to resume automatic reviews.

[zaloguj12]

Screenshots:

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 8f4a4d5b45

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

[zaloguj12]

67676767766767767676