[feat] customizable theme #481
Conversation
- Introduced CustomThemeVariable interface for managing theme variables. - Added customThemeVariablesAtom for state management of custom theme variables. - Updated ThemeSection to include ThemeCustomizer for enhanced theme customization options.
- Replaced useAtom with useSetAtom for managing theme state. - Integrated functionality to generate and save theme.css with updated color values. - Added useLoadTheme hook in RouteComponent to load custom themes on app initialization.
👷 Deploy request for lumen-notes pending review.Visit the deploys page to approve it
|
✅ Deploy Preview for lumen-storybook ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
…m global state management
There was a problem hiding this comment.
Thanks for your work on this, but I'm hesitant to support theming like this for a couple reasons:
-
It exposes the underlying theming API which will make it more difficult to add/remove/rename variables in the future.
-
With this approach, it will be difficult for users to make a theme that looks nice and easy for them to make themes that look bad. I'd rather having a theming system that makes it easy to make good looking themes and hard to make bad looking themes. Does that make sense?
In practice, that might look like allowing users to choose a primary and secondary accent color and generating a theme based on those values.
Gotcha! like a middle ground between Apple's closeness and Android openness (in terms of UX/DX). I agree, opening up all the vars could lead to crazy designs that could degrade the design ethos of Lumen. I'll play around to find the 1 or 2 vars that can be used as accent/primary. On a different note, I'm excited about the possibilities of having lumen files in the repo to persist things. Like the |
Totally. I think we can use use a |
|
Lumen uses Radix Colors so we could allow people to choose their base+accent color scales. As an example, here I've swapped the base "sand" color scale for "cyan": 
|
|
Oh yes that's definitly the best approach! Screenity.video.-.Apr.11.2025.mp4I'm getting the colors from radix-colors.css, I'll just make sure everything is fine and I'll push |
|
✅ use radix colors |
Closes #190
The user can customize the theme however they like in the settings. And when they click save changes it will save a
theme.cssfile in the repo which will persist anytime they connect that same repo.just a crazy sample
