Create "light mode" theme #2959
Conversation
…e, and the new checkbox, along with styles.
…browser and light mode yet.
…browser and light mode yet.
…browser and light mode yet.
|
If I may propose a solution-could we set it up so that adding something like "itch-light kitch-light" to the user agent would produce the same functionality minus the forced dark_theme class getting added to the body? For what it's worth, this does not appear to affect whether or not games can be installed, just whether games are filtered to the user's OS by default and whether "install app" shows up on the home page.
|
There was a problem hiding this comment.
I couldn't test the version because I don't seem to get after the captcha when logging into kitch. But this is the same for the master branch in the upstream repo.
I don't understand why this hasn't been yet integrated into the main repo. Or at least been commented on. It seems rather complete, with translations and all.
Only one file still contains some commented out code raising questions 😃.
| @@ -14,6 +14,12 @@ const PreferencesDiv = styled.div` | |||
| ${styles.meat}; | |||
| `; | |||
|
|
|||
| const expTextColor = global.ReduxStore.getState().preferences.lightMode | |||
There was a problem hiding this comment.
If memory serves, this is attached to explanatory text in the preferences menu. I'll have to get to the other comments and suggestions as the week goes, just happy to hear back about this!
| src="about:blank" | ||
| ref={this.gotWebview} | ||
| partition={partition} | ||
| useragent="Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.5359.215 Electron/22.3.14 Safari/537.36" |
There was a problem hiding this comment.
Good point. This is a somewhat hacky solution I landed on and didn't readdress-I'll see about using some string methods to remove instances of itch/kitch instead while not having to use something as gross as hardcoding.
There was a problem hiding this comment.
@3ter After doing some experimenting, I'm struggling to find a way that isn't annoying to address this programmatically so I'll just remove the version numbers for now. If you have any tips on accomplishing this via other means I am very open to them!
| if (sleepy && !visible) { | ||
| return null; | ||
| } | ||
|
|
||
| //Changes based on the bright mode checkbox |
There was a problem hiding this comment.
Shoul be called light instead of bright for consistency
There was a problem hiding this comment.
That's fair. Does keeping the "bright" nomenclature for user-facing purposes make sense though? I found it to be probably the most reliably translatable way to communicate the functionality across the different languages that itch majorly supports.
There was a problem hiding this comment.
Light mode seems much more common as a term for this feature (e.g. Google search for app light/bright mode 😅 ). I can only speak for English though.
| @@ -20,11 +20,21 @@ export const FilterGroup = styled.div` | |||
|
|
|||
| // const inactiveBg = `linear-gradient(to top,hsla(355, 43%, 25%, 1),hsla(355, 43%, 17%, 1))`; | |||
| // const activeBg = `linear-gradient(to top, hsla(355, 43%, 50%, 1), hsla(355, 43%, 37%, 1));`; | |||
| const inactiveBg = `linear-gradient(to top,hsla(355, 43%, 17%, 1),hsla(355, 43%, 11%, 1))`; | |||
| const inactiveBg = `linear-gradient(to top, hsla(355, 48%, 38%, 1), hsla(355, 48%, 27%, 1));`; | |||
There was a problem hiding this comment.
It is unclear if these changes are intended for both dark and light mode. The comment below should be deleted or replace the current definition.
| const borderColor = `#843442`; | ||
| const borderRadius = `4px`; | ||
|
|
||
| //color: ${(props) => props.theme.baseText}; |
There was a problem hiding this comment.
I like the way the switch in the settings is working.
One observation I made was this:
It would be cool for them to be in sync, but the PR is already big enough for my taste.
I unfortunately don't have time to look as deep into it as I would like to but what I saw is of good quality! I really appreciate your contribution!
| @@ -20,11 +20,21 @@ export const FilterGroup = styled.div` | |||
|
|
|||
| // const inactiveBg = `linear-gradient(to top,hsla(355, 43%, 25%, 1),hsla(355, 43%, 17%, 1))`; | |||
| // const activeBg = `linear-gradient(to top, hsla(355, 43%, 50%, 1), hsla(355, 43%, 37%, 1));`; | |||
| const inactiveBg = `linear-gradient(to top,hsla(355, 43%, 17%, 1),hsla(355, 43%, 11%, 1))`; | |||
| const inactiveBg = `linear-gradient(to top, hsla(355, 48%, 38%, 1), hsla(355, 48%, 27%, 1));`; | |||
| @@ -35,7 +34,7 @@ const optionButtonLike = css` | |||
| margin: 0; | |||
| border: 1px solid ${borderColor}; | |||
| border-left: none; | |||
| color: ${(props) => props.theme.baseText}; | |||
| color: #fffff0; | |||
There was a problem hiding this comment.
Why is this not depending on the theme anymore? It's more an observation, but I found that e.g. in src\renderer\modal-widgets\PlanInstall\index.tsx there's still a
color: ${(props) => props.theme.baseText};There was a problem hiding this comment.
Hmm, don't know that this was intended. I've reverted, thank you for pointing this out.
There was a problem hiding this comment.
@3ter Pushed the final bit into the pull request-had missed the "game management" modal window. Should be no more changes from here, unless something's off that I didn't see.
…nts colors in line with theme
|
Is anyone on macos able to see why this is failing? |
|
There we are, merged the latest changes from master and everything seems to be up to snuff. Let me know if anything else is needed here. Should also address #2852. |
Hopefully resolves #164 . Implements a number of changes in color scheme and adds a couple new logo .svgs for use in the top left and login screen of the app. Can be toggled by the "light mode" (now changed from "bright mode") checkbox that's now in the preferences menu.
The reason this says -hopefully- is because part of the changes includes changing the user agent used to render the webview (in /src/renderer/pages/BrowserPage/index.tsx). Rather than {useragent.userAgent()}, I changed it to that string returned by the function but removed all mention of kitch and itch when the bright mode checkbox is selected. While this prevents the need for JS injection and consequent theme flashing, it does seem to affect what shows up on the home "explore" screen as a result. I'd love to explore some ways to get this working if possible.