github-starred/actual
2
0
Fork 0
mirror of https://github.com/actualbudget/actual.git synced 2026-05-06 20:15:33 -05:00
Code Issues 1.5k Packages Projects Releases 55 Wiki Activity

[PR #1367] [MERGED] Begin integrating support for themes #22302

New Issue
Closed
opened 2026-04-16 16:40:26 -05:00 by GiteaMirror · 0 comments
GiteaMirror commented 2026-04-16 16:40:26 -05:00
Owner
Copy Link

📋 Pull Request Information

Original PR: https://github.com/actualbudget/actual/pull/1367
Author: @j-f1
Created: 7/19/2023
Status: ✅ Merged
Merged: 7/20/2023
Merged by: @j-f1

Base: master ← Head: jed/semantic-colors

📝 Commits (10+)

  • 3fa6c10 Move style.tsx to its own folder
  • faa7a5e Split style.tsx into separate files
  • 0fc80b0 Add in color themes
  • 96eb142 Add ThemeStyle to App
  • 891e5bd Add ThemeSelector component
  • fc37ef5 Port ThemeSelector to TS
  • 5f4adf6 Add Sun and MoonStars icons
  • 706868a Add a theme picker in settings
  • e50827e Rewrite ExperimentalFeatures settings component in TS
  • 8c62d52 Gate the feature behind a feature flag

📊 Changes

23 files changed (+788 additions, -185 deletions)

View changed files

📝 packages/desktop-client/src/components/App.js (+2 -1)
➕ packages/desktop-client/src/components/ThemeSelector.tsx (+33 -0)
📝 packages/desktop-client/src/components/Titlebar.js (+3 -0)
➖ packages/desktop-client/src/components/settings/Experimental.js (+0 -92)
➕ packages/desktop-client/src/components/settings/Experimental.tsx (+121 -0)
➕ packages/desktop-client/src/components/settings/Themes.js (+29 -0)
📝 packages/desktop-client/src/components/settings/index.js (+5 -1)
📝 packages/desktop-client/src/hooks/useFeatureFlag.ts (+1 -13)
➕ packages/desktop-client/src/icons/v2/MoonStars.js (+24 -0)
➕ packages/desktop-client/src/icons/v2/Sun.js (+20 -0)
➕ packages/desktop-client/src/icons/v2/moon-stars.svg (+4 -0)
➕ packages/desktop-client/src/icons/v2/sun.svg (+3 -0)
➕ packages/desktop-client/src/style/colors.ts (+70 -0)
➕ packages/desktop-client/src/style/index.ts (+3 -0)
➕ packages/desktop-client/src/style/palette.ts (+71 -0)
📝 packages/desktop-client/src/style/styles.ts (+2 -77)
➕ packages/desktop-client/src/style/theme.tsx (+33 -0)
➕ packages/desktop-client/src/style/themes/dark.ts (+115 -0)
➕ packages/desktop-client/src/style/themes/development.ts (+115 -0)
➕ packages/desktop-client/src/style/themes/light.ts (+115 -0)

...and 3 more files

📄 Description

This is extracted from #922. In this PR:

  • Feature flag for themes
  • Theme selector in the titlebar & settings when the flag is enabled
  • New color palette (used only for the theme/dynamic colors). QUESTION: should we use this palette or keep the existing one? (third option: keep the existing palette, but update the color names to match the new palette) Compare them here (keeping existing palette for now)
  • reorganize the styles.tsx file a bit to make it easier to understand.
  • CSS variables are dynamically injected into a <style> tag to allow the new dynamic colors to work
    • This happens even if the feature flag is disabled. As we port components to use dynamic colors, they will depend on these CSS variables, I think it makes sense to just force the theme to light mode rather than trying to keep the old coloring somehow as we port components over.
  • Added the feature flag to the feature flag settings, rewrote the feature flag section in TS to make it easier to expand on for future flags

Not included in this PR:

  • any visual changes besides the new UI components

🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.

## 📋 Pull Request Information **Original PR:** https://github.com/actualbudget/actual/pull/1367 **Author:** [@j-f1](https://github.com/j-f1) **Created:** 7/19/2023 **Status:** ✅ Merged **Merged:** 7/20/2023 **Merged by:** [@j-f1](https://github.com/j-f1) **Base:** `master` ← **Head:** `jed/semantic-colors` --- ### 📝 Commits (10+) - [`3fa6c10`](https://github.com/actualbudget/actual/commit/3fa6c10940d683640fc5f9a73c1fca2b340862f6) Move style.tsx to its own folder - [`faa7a5e`](https://github.com/actualbudget/actual/commit/faa7a5e41e6fdd9e10d92ae677a03a2655d2d5e3) Split style.tsx into separate files - [`0fc80b0`](https://github.com/actualbudget/actual/commit/0fc80b0058af9334a58222d7c0bb6dcfe15b2ddc) Add in color themes - [`96eb142`](https://github.com/actualbudget/actual/commit/96eb142b3408ec6644c485d1f6f845704905165a) Add ThemeStyle to App - [`891e5bd`](https://github.com/actualbudget/actual/commit/891e5bde8aec5fe7604cfeeb1c23a8063d8efc61) Add ThemeSelector component - [`fc37ef5`](https://github.com/actualbudget/actual/commit/fc37ef52cc452729a90d75857a0cd68a22314f9c) Port ThemeSelector to TS - [`5f4adf6`](https://github.com/actualbudget/actual/commit/5f4adf6eb7341db9b86e0ee8f717173b9176ead0) Add Sun and MoonStars icons - [`706868a`](https://github.com/actualbudget/actual/commit/706868a128500456f200da757b2ed5123c50f6f4) Add a theme picker in settings - [`e50827e`](https://github.com/actualbudget/actual/commit/e50827e44f49d984d61c6bbc4a56b4b40dcee05c) Rewrite ExperimentalFeatures settings component in TS - [`8c62d52`](https://github.com/actualbudget/actual/commit/8c62d5212044f324d7398be4b0f1ec1f9e91e62e) Gate the feature behind a feature flag ### 📊 Changes **23 files changed** (+788 additions, -185 deletions) <details> <summary>View changed files</summary> 📝 `packages/desktop-client/src/components/App.js` (+2 -1) ➕ `packages/desktop-client/src/components/ThemeSelector.tsx` (+33 -0) 📝 `packages/desktop-client/src/components/Titlebar.js` (+3 -0) ➖ `packages/desktop-client/src/components/settings/Experimental.js` (+0 -92) ➕ `packages/desktop-client/src/components/settings/Experimental.tsx` (+121 -0) ➕ `packages/desktop-client/src/components/settings/Themes.js` (+29 -0) 📝 `packages/desktop-client/src/components/settings/index.js` (+5 -1) 📝 `packages/desktop-client/src/hooks/useFeatureFlag.ts` (+1 -13) ➕ `packages/desktop-client/src/icons/v2/MoonStars.js` (+24 -0) ➕ `packages/desktop-client/src/icons/v2/Sun.js` (+20 -0) ➕ `packages/desktop-client/src/icons/v2/moon-stars.svg` (+4 -0) ➕ `packages/desktop-client/src/icons/v2/sun.svg` (+3 -0) ➕ `packages/desktop-client/src/style/colors.ts` (+70 -0) ➕ `packages/desktop-client/src/style/index.ts` (+3 -0) ➕ `packages/desktop-client/src/style/palette.ts` (+71 -0) 📝 `packages/desktop-client/src/style/styles.ts` (+2 -77) ➕ `packages/desktop-client/src/style/theme.tsx` (+33 -0) ➕ `packages/desktop-client/src/style/themes/dark.ts` (+115 -0) ➕ `packages/desktop-client/src/style/themes/development.ts` (+115 -0) ➕ `packages/desktop-client/src/style/themes/light.ts` (+115 -0) _...and 3 more files_ </details> ### 📄 Description This is extracted from #922. In this PR: - Feature flag for themes - Theme selector in the titlebar & settings when the flag is enabled - New color palette (used only for the theme/dynamic colors). ~QUESTION: should we use this palette or keep the existing one? (third option: keep the existing palette, but update the color names to match the new palette) [Compare them here](https://observablehq.com/d/1add1aaf4aee8d4e)~ (keeping existing palette for now) - reorganize the `styles.tsx` file a bit to make it easier to understand. - CSS variables are dynamically injected into a `<style>` tag to allow the new dynamic colors to work - This happens even if the feature flag is disabled. As we port components to use dynamic colors, they will depend on these CSS variables, I think it makes sense to just force the theme to light mode rather than trying to keep the old coloring somehow as we port components over. - Added the feature flag to the feature flag settings, rewrote the feature flag section in TS to make it easier to expand on for future flags Not included in this PR: - any visual changes besides the new UI components --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
GiteaMirror added the pull-request label 2026-04-16 16:40:26 -05:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
AI generated
API
bank sync
budgeting
bug
can’t replicate
dependencies
docker
documentation
electron
experimental feature
feature
feedback
goal templates
good first issue
help wanted
importers
maintenance
needs info
needs testing
needs triage
needs votes
openid
payees
pull-request
Mirrored from GitHub Pull Request
 regression
reports
responsive
rules
schedules
server
✨ merged
split transactions
tech debt
theme
transaction import
transaction reconciliation
transactions
translations
upstream
user interface
✅ approved
wontfix
No Label pull-request
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
GiteaMirror ninjasurge
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: github-starred/actual#22302
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?