Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add a feature to toggle on/off dark mode for application UI #685

Closed
Vresod opened this issue Jun 17, 2019 · 15 comments · Fixed by #736
Closed

Add a feature to toggle on/off dark mode for application UI #685

Vresod opened this issue Jun 17, 2019 · 15 comments · Fixed by #736
Assignees
Labels
Feature Issues that introduce new functionality to the project, instead of updating existing functionality
Milestone

Comments

@Vresod
Copy link

Vresod commented Jun 17, 2019

This could be put into the settings panel.

@gep13 gep13 added the Feature Issues that introduce new functionality to the project, instead of updating existing functionality label Jun 23, 2019
@gep13
Copy link
Member

gep13 commented Jun 23, 2019

@Vresod this is an interesting idea. This isn't something that I would be able to take on, as I am not a designer, so this would need some outside help in order for it to progress.

@lucknaumann
Copy link

lucknaumann commented Sep 10, 2019

@gep13 Even though you're not a designer, dark themes don't need to be difficult. If you want an idea go to DuckDuckGo search engine https://duckduckgo.com/ Settings - Themes and choose Dark or Terminal. The BG is simply a medium to dark gray and the text white to light gray. The Terminal version shows some colors for text (clicked and unclicked links, URLs, etc.). To see other colors used for certain searches: https://duckduckgo.com/?q=youtube-dl+how+to+download+audio+separate+youtube&t=ffab&ia=web&iax=qa

I used a web page since it's not a program you need to install or download but the same principals apply.

I did some screenshots just as an example. I basically just inverted the colors, which is really just the main principal of dark themes. White backgrounds to black or dark to medium gray and dark text would become white or light gray. While there could be colors (such as blue) there really doesn't have to be. It's a simple program so a simple grayscale theme would be fine. Don't forget the Settings pages and text boxes as well. =]

I hope this helps.

Edit: almost forgot to optimize the files for size.
ChocoInterface-BLK - Copy
ChocoInterface-Gray - Copy
ChocoLoading-Dark - Copy

@punker76 punker76 self-assigned this Sep 10, 2019
@punker76
Copy link
Member

@gep13 @lucknaumann MahApps provides also a dark theme, so it should be easy to convert the existing "light" theme to a dark theme.

@lucknaumann
Copy link

@punker76 Sounds great!

@AdmiringWorm
Copy link
Member

@gep13 @lucknaumann MahApps provides also a dark theme, so it should be easy to convert the existing "light" theme to a dark theme.

It sure do, and is pretty easy to change on the fly (would probably need to change how the styles are initially loaded though).

var appStyle = ThemeManager.DetectAppStyle(Application.Current);

ThemeManager.ChangeAppStyle(Application.Current,
                            appStyle.Item2,
                            ThemeManager.GetAppTheme("BaseDark")); // Or BaseLight

Reference: https://mahapps.com/guides/styles.html#thememanager

@lucknaumann
Copy link

@gep13 @AdmiringWorm Please excuse this question of ignorance but this is something can be implemented in Chocolatey GUI via Settings? If so, eagerly awaiting an update. Otherwise, I've no idea how to implement this.

@gep13
Copy link
Member

gep13 commented Sep 13, 2019

@lucknaumann said...
Please excuse this question of ignorance but this is something can be implemented in Chocolatey GUI via Settings? If so, eagerly awaiting an update. Otherwise, I've no idea how to implement this.

@punker76 has assigned himself this issue, so I think that this is something that he will be taking on. I don't know the details of the implementation, but I would suspect that modifying whether a dark/light theme is used is indeed something that would happen via the Settings screen.

@lucknaumann
Copy link

@gep13 Thanks for the info!

@Red-AM
Copy link

Red-AM commented Oct 28, 2019

Really hope this gets implemented. Every app should have a dark theme, it's just so much easier on the eyes.

@lucknaumann
Copy link

Hey, I just wanted to check-in and see how things were progressing. Any update on ETA for a dark theme? Thanks!

@JesFEREM
Copy link

JesFEREM commented Feb 8, 2020

bump.
Yeah dark mode should be as easy as turning the background black and the text white. That's what i recommend because MS literally does that

@AdmiringWorm
Copy link
Member

@JesFEREM unfortunately it is almost never as easy as that.

Creating a dark theme (even just changing the background to black and the text to white) requires implementing a completely new style, updating the already used colors for different controls (background, foreground, border, etc) and make sure they don't clash with anything else.

Implementing the ability to actually select the wanted style would also be needed.

@gregk-git
Copy link

@punker76 is this triaged?

@punker76
Copy link
Member

@gregkolodny

@punker76 is this triaged?

it’s on my todo list and will come soon

@gep13 gep13 changed the title Add a dark mode. Add a dark mode Apr 8, 2020
@gep13 gep13 added this to the 0.18.0 milestone Apr 12, 2020
punker76 added a commit to punker76/ChocolateyGUI that referenced this issue Mar 2, 2021
- MahApps.Metro.IconPacks to v3.5.0
- MahApps to latest alpha v2.0
punker76 added a commit to punker76/ChocolateyGUI that referenced this issue Mar 2, 2021
punker76 added a commit to punker76/ChocolateyGUI that referenced this issue Mar 2, 2021
The background should not be hard coded to white.
punker76 added a commit to punker76/ChocolateyGUI that referenced this issue Mar 2, 2021
- Update to latest MahApps.Metro and MahApps.Metro.IconPacks
- Reduced size by using only necessary IconPacks
punker76 added a commit to punker76/ChocolateyGUI that referenced this issue Mar 2, 2021
Implement BundledTheme which generates light and dark themes at runtime. The BundledTheme can also change the current theme via command.

- Dark accent is too dark :-D
- Extract code to ThemeAssist
punker76 added a commit to punker76/ChocolateyGUI that referenced this issue Mar 2, 2021
- Improve TabItem selection foreground
- Same DataGrid style in settings view
- Remove unused Flyout resource
- Use alternation row backgrounds
punker76 added a commit to punker76/ChocolateyGUI that referenced this issue Mar 2, 2021
punker76 added a commit to punker76/ChocolateyGUI that referenced this issue Mar 2, 2021
punker76 added a commit to punker76/ChocolateyGUI that referenced this issue Mar 2, 2021
punker76 added a commit to punker76/ChocolateyGUI that referenced this issue Mar 2, 2021
punker76 added a commit to punker76/ChocolateyGUI that referenced this issue Mar 2, 2021
punker76 added a commit to punker76/ChocolateyGUI that referenced this issue Mar 2, 2021
punker76 added a commit to punker76/ChocolateyGUI that referenced this issue Mar 2, 2021
Also introduce resource keys for chocolatey colors and brushes.
punker76 added a commit to punker76/ChocolateyGUI that referenced this issue Mar 2, 2021
Also fix ToggleSwtitch Caliburn event attachement.
punker76 added a commit to punker76/ChocolateyGUI that referenced this issue Mar 2, 2021
punker76 added a commit to punker76/ChocolateyGUI that referenced this issue Mar 2, 2021
With this it should be possible to implement a custom theme for ChocolateyGui.
punker76 added a commit to punker76/ChocolateyGUI that referenced this issue Mar 2, 2021
punker76 added a commit to punker76/ChocolateyGUI that referenced this issue Mar 2, 2021
punker76 added a commit to punker76/ChocolateyGUI that referenced this issue Mar 2, 2021
gep13 added a commit to punker76/ChocolateyGUI that referenced this issue Mar 2, 2021
This allows the ability to set a default selection for dark/light mode.
This still allows for toggling the current selection, similar to what
is done for the list/tile view.
punker76 added a commit to punker76/ChocolateyGUI that referenced this issue Mar 3, 2021
punker76 added a commit to punker76/ChocolateyGUI that referenced this issue Mar 3, 2021
Improve the standard remote view and detailed view. Also add the package icon to the detailed view.
punker76 added a commit to punker76/ChocolateyGUI that referenced this issue Mar 3, 2021
punker76 added a commit to punker76/ChocolateyGUI that referenced this issue Mar 3, 2021
punker76 added a commit to punker76/ChocolateyGUI that referenced this issue Mar 3, 2021
Improve the standard remote view and detailed view. Also add the package icon to the detailed view.

(chocolateyGH-685) Improve standard remote view
punker76 added a commit to punker76/ChocolateyGUI that referenced this issue Mar 3, 2021
punker76 added a commit to punker76/ChocolateyGUI that referenced this issue Mar 3, 2021
@gep13 gep13 closed this as completed in #736 Mar 5, 2021
gep13 added a commit that referenced this issue Mar 5, 2021
(GH-685) Update MahApps to latest source and introduce a dark mode
@gep13 gep13 changed the title Add a dark mode Add a feature to toggle on/off a dark mode Mar 8, 2021
@gep13 gep13 changed the title Add a feature to toggle on/off a dark mode Add a feature to toggle on/off dark mode for application UI Mar 8, 2021
gep13 added a commit that referenced this issue Mar 9, 2021
* release/0.18.0: (113 commits)
  (GH-821) Fix logic of IsShowOnlyPackagesWithUpdateEnabled when PreventAutomatedOutdatedPackages is not set
  (#820) Split default values for global and user
  (#741) Ensure all settings are included
  (maint) Remove unnecessary whitespace
  (#601) Change default for admin settings access
  (#820) Change default for tile view
  (#757) Allow buttons to be enabled/disabled
  (GH-685) Fix setting IsShowOnlyPackagesWithUpdateEnabled in local view
  (GH-685) Create converters only once
  (GH-685) Improve standard remote view
  (GH-685) Make converters more robust
  (GH-685) Add option to set default for dark mode
  (GH-685) Fix missing theme change in SyncTheme
  (GH-685) Update MahApps package
  (GH-685) Add ThemeMode and own ToggleSwitch with icons for dark and light mode
  (GH-685) Introduce IBundledThemeService
  (GH-685) Add better ScrollBar and ScrollViewer styles
  (GH-685) Improve progress dialog
  (GH-685) Add additional Chocolatey colors and brushes
  (GH-685) Remove obsolete unused styles
  ...
@choco-bot
Copy link

🎉 This issue has been resolved in version 0.18.0 🎉

The release is available on:

Your GitReleaseManager bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Feature Issues that introduce new functionality to the project, instead of updating existing functionality
Projects
None yet
Development

Successfully merging a pull request may close this issue.

9 participants