Dark theme - Githubissues

2E0PGS commented 6 years ago

I think it would be awesome to have a dark theme.

Perhaps I will see what the codebase is like and what GUI framework it uses then make a pull-request adding the feature.

bawldiggle commented 6 years ago

The default theme just blends in with all other windows, making it very difficult to "see" boundaries. I am using Cubic Explorer (abandoned by developer) with one of about 8 themes. CE's downfall is it defaults to Favorites folder after sleep and hibernation, other wise it is more convenient than Explorer++.

victor23d commented 6 years ago

Is it possible to customize background color ? I have read the document and find nothing related.

TeddJohnson commented 5 years ago

it would be amazing to have a dark theme. The light theme of even default explorer is way too bright

pbsinnett commented 5 years ago

I set everything dark, so having a dark theme for this program would be fantastic!

Sartek commented 5 years ago

There is a post on the forum asking for this feature as well. https://explorerplusplus.com/forum/viewtopic.php?f=4&t=2053

derceg commented 5 years ago

From a bit of Googling, it seems there isn't a direct way of doing this in Win32 apps. You can get part of the way there by using the undocumented AllowDarkModeForWindow function (see https://stackoverflow.com/questions/53501268/win10-dark-theme-how-to-use-in-winapi) and setting the appropriate background and text colors.

With a few basic changes, this gives the following result:

explorer dark

That's not really a complete result, since the other parts of the interface would need to be updated as well, but it might be possible without too much effort.

Sartek commented 5 years ago

The reason I want a dark theme is at night if I am doing some work the bright white space can be harsh on my eyes. Even though it is an incomplete result it is still a big improvement. Might be worth having a box in settings that says something like "Experimental: Dark mode [X]"

derceg commented 5 years ago

Some other implementation notes (since this doesn't really seem to be documented anywhere):

https://github.com/ysc3839/VCMPBrowser/blob/b83efe826abb7b2f7c4e82144c28811df4089612/DarkMode.h contains a functional implementation for dark mode.
In that file, AllowDarkModeForApp is called followed by FlushMenuThemes (which is the only reference I can find to that function).
When calling those functions within Explorer++, every menu becomes styled using the dark mode theme without any further work.
Those functions are seemingly not exported by name from uxtheme.dll. You can verify this by looking at the symbols exported by uxtheme.dll. To do this, open a Visual Studio command prompt and run:

dumpbin /exports uxtheme.dll

Ordinals 135 (AllowDarkModeForApp) and 136 (FlushMenuThemes) are listed as having no name.
If you obtain the symbols for uxtheme.dll (from the Microsoft symbol servers), you can verify that those ordinals map to functions with those names and signatures.
Because the functions are internal and undocumented, it's possible they'll be changed or removed in future. Would probably need to check for an exact Windows version number, as is done in the implementation referenced above.

derceg commented 5 years ago

Example of dark mode style menu after calling AllowDarkModeForApp and FlushMenuThemes:

explorer dark mode menu

mivanit commented 5 years ago

How would I go about changing the background color?

derceg commented 5 years ago

By using the application or by altering the code? There's no way to do it in the application at the moment. If you're looking at modifying the code, you can set the background color for the listview/treeview pretty simply.

derceg commented 5 years ago

Some of the relevant changes are already in the application - specifically the code that allows you to set the background + text colors for the listview/treeview. You can test that out by going through the following steps:

Copy the update_theme_colors folder into a "plugins" folder that's in the same directory as the Explorer++ executable.
Run Explorer++ with plugin support enabled:

explorer++.exe --enable-plugins

The listview and treeview should then be styled in a similar way to what's shown above.

I haven't committed the other changes (involving the dark mode functions exposed by uxtheme.dll) anywhere, but the changes are minor and I could commit them on a branch.

Snuupy commented 4 years ago

I spent ~20 mins fiddling around with the latest release on github until I tried the nightly version. If it wasn't already clear, only nightly supports the plugin system right now.

Is there any way to fix these white lines that show up if you set view to Details and sort by Type?

WildByDesign commented 4 years ago

Is there any way to fix these white lines that show up if you set view to Details and sort by Type?

@Snuupy Tools - Options - Window tab - uncheck "Show gridlines in details view"

Is this what you are looking for?

Snuupy commented 4 years ago

@WildByDesign Ooh, that fixed it. Thank you.

aborders75 commented 4 years ago

Some of the relevant changes are already in the application - specifically the code that allows you to set the background + text colors for the listview/treeview. You can test that out by going through the following steps:
1. Copy the update_theme_colors folder into a "plugins" folder that's in the same directory as the Explorer++ executable.

2. Run Explorer++ with plugin support enabled:
explorer++.exe --enable-plugins

The listview and treeview should then be styled in a similar way to what's shown above.

I haven't committed the other changes (involving the dark mode functions exposed by uxtheme.dll) anywhere, but the changes are minor and I could commit them on a branch.

@derceg

I follow these instructions with build 1.4.0.1436 (64 bit) and it does not switch to dark mode. All I did was copy the 2 files from the plug/update_theme_colors folder into the root plugin folder and for good measure copied them in the same folder as the exe is in.

I am using the install version so I searched the register for the command line and it was already using --enable-plugins %1.

I am running windows 10 version 1909 OS build 18363.693

What am I missing. Thank you!

gregk-git commented 4 years ago

This is both the most commented on and most upvoted issue out of all your issues, it would be nice if this came to fruition.

AlDollaz commented 4 years ago

Would love this feature, please.

MasterDriverRex commented 4 years ago

How do I set it to Dark Mode? With all those commits above?

derceg commented 4 years ago

explorer++.exe --enable-dark-mode

Some of the controls Windows offers have limited restyling capabilities, so I probably won't be able to update all of the controls the application uses. But still, I think the current work actually covers most of the application.

The command line option above should work on Windows 10 from 1809 onward, though I've only tested on 1909. I've also done some brief testing on 2004 and it seems to work ok there as well.

MasterDriverRex commented 4 years ago

explorer++.exe --enable-dark-mode

Some of the controls Windows offers have limited restyling capabilities, so I probably won't be able to update all of the controls the application uses. But still, I think the current work actually covers most of the application.

The command line option above should work on Windows 10 from 1809 onward, though I've only tested on 1909. I've also done some brief testing on 2004 and it seems to work ok there as well.

I tried this, on 1909, with both 1.4.0 beta and 1.3.5 (this one downloaded from the Explorer++ website), both x64. Result for 1.4.0 beta?

The following argument was not expected: --enable-dark-mode Run with --help for more information.

After checking with --help, only the following Options pop up:

-h,--help Print this help message and exit --clear-registry-settings Clear existing registry settings --enable-logging Enable logging --enable-plugins Enable the Lua plugin system --remove-as-default Excludes: --set-as-default Remove Explorer++ as the default file manager (requires administrator privileges) --set-as-default Excludes: --remove-as-default Set Explorer++ as the default file manager (requires administrator privileges) --language TEXT Allows you to select your desired language. Should be a two-letter language code (e.g. FR, RU, etc).

As for 1.3.5, it just opens the program; there are no Options or anything, not even --help.

WildByDesign commented 4 years ago

You need to download the latest build from Explorer++ AppVeyor page which is linked on Explorer++ Github page. After a handful of new commits come in, a new build is triggered and compiled on AppVeyor. I consider them like Nightly builds pretty much and use only those builds for the past year or so.

MasterDriverRex commented 4 years ago

You need to download the latest build from Explorer++ AppVeyor page which is linked on Explorer++ Github page. After a handful of new commits come in, a new build is triggered and compiled on AppVeyor. I consider them like Nightly builds pretty much and use only those builds for the past year or so.

That worked! Thank you!

WildByDesign commented 4 years ago

@derceg

So far this implementation of dark theme on Explorer++ is quite stunning and fantastic. I am really quite surprised with all of these recent changes. I greatly appreciate that you have continued developing Explorer++, share code as open source, and particularly thankful for this latest effort to bring dark theme to Explorer++ as well. Keep up the great work.

I think that once the dark theme code has settled, it would be great to push a Beta 2 release for those who are not as familiar with AppVeyor.

I just wanted to share what I have so far with the latest commits and running on latest Windows 10 (19041.329 / build 2004) and possibly share some feedback and suggestions.

explorerpp

The right side panel (listview) still shows scrollbars (horizontal and vertical) as light theme. The tree view side is showing correct dark theme scrollbars.
The X icon to "Hide the folder pane" is probably the main outstanding visual issue regarding your current implementation of dark theme. It seems to still have a light background of (f0f0f0) in dark mode and therefore stands out significantly. If you can't set dark mode to that section via API, possibly there is a more 'hacky' way to recolor that small section manually.
The menu bar is still showing as light theme, yet the drop down menus and all right-click menus correctly show dark theme.

Suggestion: Invert the 'Windows 10' icon theme included with Explorer++. By default, the 'Windows 10' icon theme included with Explorer++ are dark icons which look good with the default light theme but on dark theme need to be inverted to light icons. (my screenshot above is showing Color icon theme, not Windows 10 icon theme because it was too dark to see).

muscarina commented 4 years ago

For anyone looking for the AppVeyor link .

Click on the build you want to download and then open the "Artifacts" tab.

WildByDesign commented 4 years ago

@derceg Thank you for your continued efforts with your dark theme.

Is it possible to fix the double border lines around the different sections of the status bar?

Explorer++-StatusBar

I believe that it is a single border line in default mode. So if you could do either a single border for dark mode or even no border like in Windows Explorer, either would be greatly appreciated. This double border line in the status bar is the only thing left that really stands out to me.

Cheers!

WildByDesign commented 4 years ago

I have been playing around with Microsoft's brand new (https://github.com/microsoft/fluentui-system-icons) fluent system icons lately and converting them for use with Explorer++.

Example: Epp-fluentui-system-icons

I had to batch convert them from SVG to PNG using ImageMagick in which I also inverted the icons during the process. I compiled Explorer++ with the icons and the result was quite pleasing, I think.

Problem: It seems that, regardless, the smaller sized icons (16x16) seem to look really bad with the Dark theme. Whether it is with your inverted code within the program or me manually inverting all of these other icons, small (16x16) icons seem to look terrible in the toolbar using Dark theme. In that case, I just use large icons (24x24) in toolbar for the time being.

@derceg Do you want me to provide you with all of these (37) icons that I have picked out, renamed, and converted/inverted from Microsoft's fluent system icons repo?

My methods are much more manual and not at all programmatic like your abilities. I am happy to help and share if you would like.

derceg commented 4 years ago

@derceg Do you want me to provide you with all of these (37) icons that I have picked out, renamed, and converted/inverted from Microsoft's fluent system icons repo?

Sure, that would be good. Having a wider set of icon themes overall would be good, I think.

narcolepticinsomniac commented 4 years ago

Can anyone tell me what I'm doing wrong here? I'm downloading explorerpp_x64.zip from "latest builds", extracting, then making a shortcut and adding the --enable-dark-mode command line switch.

Every time I try to run it, I get "Explorer++ has stopped working". Never been the best at following directions, so I'm hoping I'm doing something wrong because this looks cool as hell, and it'd suck if it isn't compatible with Win 8.1 or something.

narcolepticinsomniac commented 4 years ago

Damn. Thought this was a simple enough question to get a response, for sure.

derceg commented 4 years ago

The functionality is Windows 10 only, unfortunately. There are some style changes that could be applied on earlier versions of Windows, but it wouldn't look as cohesive or complete as it does on Windows 10. For example, on earlier versions of Windows, the following items would still appear in their original colors:

Title bars
Menus
Buttons
The status bar

Other controls would be partially styled. Overall, it just wouldn't work as well as it does on Windows 10.

As for the crash, that's a bug (one which I've fixed locally). The command line flag is designed to have no effects on earlier versions of Windows.

narcolepticinsomniac commented 4 years ago

Aw man, I was so hyped to replace Explorer with a dark version with bonus features. Exactly what I didn't wanna hear, but at least I know now.

WildByDesign commented 4 years ago

@derceg Do you want me to provide you with all of these (37) icons that I have picked out, renamed, and converted/inverted from Microsoft's fluent system icons repo?

Sure, that would be good. Having a wider set of icon themes overall would be good, I think.

Sorry for the delay. I had some issues initially when converting the SVG images to PNG, particularly for the 32x32 and 48x48 sizes. I had to take some time to learn some more tricks regarding conversion quality when using ImageMagick.

I am still not 100% happy with the end results, but it is still nice and I use this icon theme daily now. I figured I might as well share it now and provide some quality fixes later or somebody else may help that has more experience with SVG and such.

Some icons were missing from the fluentui-system-icons set, such as Command Prompt and a few others. So I had to copy some over from the windows-10 icons8 set for the time being. I had to color match those (000000 to 212121) so that they would go together nicely.

fluentui-system-icons.zip

I don't know how to program the new fluentui-system-icons into Explorer++ properly, so that will be up to @derceg but for my own testing purposes, I just overwrote the icons in \Explorer++\Explorer++\res\icons\windows-10 with these icons from fluentui-system-icons and compiled Explorer++ binaries myself.

Explorer++

Anyway, I will work on these some more to figure out ways to sharpen up the SVG to PNG conversion process.

pseudo555 commented 4 years ago

First of all, thanks so much for implementing such nice feature.

I has just one request: on the tree part, is it possible to use a lighter grey for selected folder ? In my case, i set the luminosity of my screen to very low value, so differentiate the black background to the dark grey is really hard for me. In fact, i would like to swap the grey used in tree for selected folder and the one use by mouse over.

damithnh commented 4 years ago

Hi, Could someone please tell me how to configure Explore++ dark theme? Thank you

sean-e commented 4 years ago

run the .exe passing "--enable-dark-mode" on the command line: Explorer++.exe --enable-dark-mode

(assuming you are using a recent daily/nightly build)

pseudo555 commented 4 years ago

This only works on nightly build. even the beta one doesn't handle it.

On Fri, Sep 18, 2020 at 6:14 AM damithnh notifications@github.com wrote:

run the .exe passing "--enable-dark-mode" on the command line: Explorer++.exe --enable-dark-mode

(assuming you are using a recent daily build)

Hi, Thanks for your reply. I downloaded the latest release 1.4 and tried to run is as you described. But it says 'The following argument was not expected: --enable-dark-mode' It does run when I execute the command as 'Explorer++.exe'. Could you please tell me what's the issue here? Thank you

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/derceg/explorerplusplus/issues/115#issuecomment-694639635, or unsubscribe https://github.com/notifications/unsubscribe-auth/AEL7PVHZJ6YYA7P6STNWMKDSGLNDPANCNFSM4FDMRO5A .

TH3AL3X commented 4 years ago

Here is the dark version, https://ci.appveyor.com/api/projects/derceg/explorerplusplus/artifacts/explorerpp_x64.zip?branch=master&job=Platform%3A%20x64

Plus, if you don't want to open via batch everytime, just make a link of application and add the next line

kettenfett commented 4 years ago

I tried this on windows 10 (updated) and my menu bar and tab bar are not dark. grafik

Why is that?

Explorer++ version 1.4.0.1682 dev (64-bit build) Build date: Oct 15 2020 02:30:33

sean-e commented 4 years ago

The issue you are editing and leaving a comment in is still open. That means it is not finished.

mll0 commented 3 years ago

Great thread, I've been anticipating this a lot. For others who struggled to get it like me, here's the steps:

go to https://ci.appveyor.com/project/derceg/explorerplusplus/builds/37048139/job/ppd4ndc6y2v1xlaf/artifacts
download the flavour you like
launch Explorer++
Tools > Options > Advanced
Find the "Enable dark mode" row
Now, this is tricky (at least for me) : to change the value from false to true, point your mouse to the "false" and repetitively fiddle with your mouse buttons (left, right and middle) until you're be able to edit the value. I didn't find the proper way, sorry. Click on "false" and wait for a couple of seconds to be able to edit it

pseudo555 commented 3 years ago

just type "true" instead of "false"

On Thu, Jan 7, 2021 at 8:58 AM mll0 notifications@github.com wrote:

Great thread, I've been anticipating this a lot. For other who struggled to get it like me, here's the steps:

go to https://ci.appveyor.com/project/derceg/explorerplusplus/builds/37048139/job/ppd4ndc6y2v1xlaf/artifacts

download the flavour you like

launch Explorer++

Tools > Options > Advanced

Find the "Enable dark mode" row

Now, this is tricky (at least for me) : to change the value from false to true, point your mouse to the "false" and repetitively fiddle with your mouse buttons (left, right and middle) until you're be able to edit the value. I didn't find the proper way, sorry.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/derceg/explorerplusplus/issues/115#issuecomment-755951672, or unsubscribe https://github.com/notifications/unsubscribe-auth/AEL7PVDFYAI5CBFPJBITBX3SYVSQRANCNFSM4FDMRO5A .

anonymous1184 commented 3 years ago

Any way for the tabs and menu to match the whole dark theme?

20210403214530

Also empty folders display a "white" box:

20210403214857

AdamWHY2K commented 3 years ago

go to https://ci.appveyor.com/project/derceg/explorerplusplus/builds/37048139/job/ppd4ndc6y2v1xlaf/artifacts

This no longer works, and I can't find another download from appveyor. Could I get a new link please?

anonymous1184 commented 3 years ago

This is the link for the latest:

https://ci.appveyor.com/project/derceg/explorerplusplus/build/job/xefra9t0nxe087aw/artifacts

But you just need to go to:

https://ci.appveyor.com/project/derceg/explorerplusplus/

And navigate from there.

Slion commented 3 years ago

To get a build with that feature I needed to go there click the latest green build, select the artefacts tab and download the MSI installer. Then you can enable it as explained there. You will also probably want to do that.

T3chminator commented 2 years ago

I like the dark mode but there are a few things I would like to point out a few things which could be fixed/improved on. Maybe the options already exist which I am not aware of. So here they are:

When I hover the mouse over the Explorer++ icon in the task bar, it shows all the tabs. Not a biggie but a cleaner look and feel to just have one small window show up.
In 'This PC' where all the drives are listed, in the Windows 10 default file explorer it shows the total disk size, disk space consumed and free space remaining in a graphical format but this feature is not there in Explorer++ as I have tried switching to all view types.
The difference in 'large icons' & 'extra large icons' is HUGE. Also, irrespective of which folder view you use, it does not display picture previews even if you select the picture.
Finally, as someone pointed out, the menu bar is not dark and neither is there an option to make it dark.

kettenfett commented 2 years ago

1. When I hover the mouse over the Explorer++ icon in the task bar, it shows all the tabs. Not a biggie but a cleaner look and feel to just have one small window show up.
   ![multi-window](https://user-images.githubusercontent.com/49801393/146850237-bdcbaf1f-63d5-417f-8d5c-8d373aea9352.jpg)

Disable "Show Taskbar Thumbnails" in Settings.

2. In 'This PC' where all the drives are listed, in the Windows 10 default file explorer it shows the total disk size, disk space consumed and free space remaining in a graphical format but this feature is not there in Explorer++ as I have tried switching to all view types.
   ![no disk size info](https://user-images.githubusercontent.com/49801393/146850271-373a3370-307d-4564-8a65-e054b00b9d5f.jpg)

While there is no graphical display in E++ currently, you can at least get the free diskspace for each drive by right-clicking the comlumn header row and activating that column. It's not shown by default.

3. The difference in 'large icons' & 'extra large icons' is HUGE. Also, irrespective of which folder view you use, it does not display picture previews even if you select the picture.

I agree. Thumbnail generation seems to be broken. I only get thumbnails in "Thumbnail" view mode, none other.

rossunger commented 2 years ago

Also empty folders display a "white" box:

The "folder is empty" is an image in the res folder. If you modify the image you can change the color

T3chminator commented 2 years ago

How to modify it?

derceg / explorerplusplus

Dark theme #115