Windows 10 Dark Theme on Ubuntu GNOME (devel branch)

[brandleesee]

I am opening a new issue because I do not know if the following images go in here or here.

Thus, the best way to explain my plight is pictorial.

GNOME Shell 3.20.3

Download used.

Issues

The following images are a comparison between Numix & Windows 10 v0.9.9.

• There are no 'bars' that encompass each drop-down menu to distinguish one menu from another.
• The lack of highlighting when about to select an option makes the experience a little confusing.
• When I deselect the Global Dark Theme, Windows 10 Dark becomes White/Light/Bright.

  Gnome Tweak

Note what happens when I switch off the Global Dark Theme

Selection Menu

Note what happens when I switch off the Global Dark Theme

[Elbullazul]

Can you post the link to the page where you got the download from?

Also, try the dark theme from here : https://github.com/Elbullazul/Windows-10/releases/tag/v0.9.9

[brandleesee]

From the same link you submitted. The 4th download link.

[Elbullazul]

Mmm, I think github didn't handle the code as I expected. Use the dark theme link.

[brandleesee]

Just used the dark theme link. No change whatsoever. So those screenshots apply also for the first (i.e. dark) download link.

[Elbullazul]

Can you post the theme's gtk.css file content?

It's in gtk-3.20

[brandleesee]

Sure, here it is:

/* search for rgba value important! 46, 52, 54 */

/* default color scheme */ @define-color bg_color #ffffff; @define-color fg_color #4c4c4c; @define-color base_color #ffffff; @define-color text_color #4c4c4c; @define-color selected_bg_color #cce8ff; @define-color selected_fg_color #262626; @define-color tooltip_bg_color #ffffff; @define-color tooltip_fg_color #4c4c4c; @define-color progressbar_color #06B025;

@define-color outline_color rgba(46,52,54,0.3); @define-color txt_shadow rgba(255, 255, 255, 0.76923);

/* OSD colors */ @define-color osd_bg_color #f1f1f1; @define-color osd_fg_color #ffffff; @define-color osd_borders #8c8c8c; @define-color osd_outline #eeeeec; @define-color osd_txt_shadow rgba(255,255,255,0.1);

/* widget text/foreground color _/ @define-color theme_fgcolor #2e3436; / text color for entries, views and content in general _/ @define-color theme_textcolor black; / widget base background color _/ @define-color theme_bgcolor #ffffff; / text widgets and the like base background color _/ @define-color theme_basecolor #ffffff; / base background color of selections _/ @define-color theme_selected_bgcolor #cce8ff; / text/foreground color of selections _/ @define-color theme_selected_fgcolor #262626; / base background color of insensitive widgets _/ @define-color insensitive_bgcolor #fcfcfc; / text foreground color of insensitive widgets _/ @define-color insensitive_fgcolor #8c8c8c; / insensitive text widgets and the like base background color _/ @define-color insensitive_basecolor #ffffff; / widget text/foreground color on backdrop windows _/ @define-color theme_unfocused_fgcolor #8c8c8c; / text color for entries, views and content in general on backdrop windows _/ @define-color theme_unfocused_textcolor black; / widget base background color on backdrop windows _/ @define-color theme_unfocused_bgcolor #fcfcfc; / text widgets and the like base background color on backdrop windows _/ @define-color theme_unfocused_basecolor #fcfcfc; / base background color of selections on backdrop windows _/ @define-color theme_unfocused_selected_bgcolor #d1d1d1; / text/foreground color of selections on backdrop windows _/ @define-color theme_unfocused_selected_fgcolor #000000; / widgets main borders color / @define-color borders #aaaaaa; / widgets main borders color on backdrop windows _/ @define-color unfocusedborders #8c8c8c; / these are pretty self explicative _/ @define-color warning_color #f57900; @define-color error_color #cc0000; @define-color successcolor #73d216; / these colors are exported for the window manager and shouldn't be used in applications, read if you used those and something break with a version upgrade you're on your own... */ @define-color wm_title shade(#2e3436, 1.8); @define-color wm_unfocused_title #8b8e8f; @define-color wm_highlight rgba(255, 255, 255, 0.8); @define-color wm_borders_edge rgba(255, 255, 255, 0.8); @define-color wm_bg_a shade(#e8e8e7, 1.2); @define-color wm_bg_b #e8e8e7; @define-color wm_shadow alpha(black, 0.35); @define-color wm_border alpha(black, 0.18); @define-color wm_button_hover_color_a shade(#e8e8e7, 1.3); @define-color wm_button_hover_color_b #e8e8e7; @define-color wm_button_active_color_a shade(#e8e8e7, 0.85); @define-color wm_button_active_color_b shade(#e8e8e7, 0.89); @define-color wm_button_active_color_c shade(#e8e8e7, 0.9); @define-color content_view_bg #ffffff;

@import url("gtk-contained.css");

[Elbullazul]

Try this one: https://github.com/Elbullazul/Windows-10/files/318531/Windows.10.Dark.zip

[brandleesee]

After replacing with your download, I then did not have an option 'Windows 10 Dark' in Gnome-Tweak.

So, I re-downloaded the dark theme - first option - from here : https://github.com/Elbullazul/Windows-10/releases/tag/v0.9.9 and also your modified .zip file. Extracted both and poured the contents of your modified .zip file in the other (replacing).

The result was a white theme whether the Global Dark Theme was on or off.

I also noticed that the gtk.css is mostly #ffffff.

[Elbullazul]

@brandleesee I'm a very sorry, it's a packaging error from my part. I've been very busy, so last packages were fast compression without checking.

Corrected package coming soon...

[Elbullazul]

also, I wonder how the hell github replaced a file i uploaded with another (2nd link i posted)

[Elbullazul]

https://github.com/Elbullazul/Windows-10/releases/download/v0.9.9/Windows.10.Dark.v0.9.9.tar.gz

It's shure to work now

[brandleesee]

Bless you, brother!

This is the result I wanted to achieve.

Thank you.

Some screenshots have comments because there are some minute things that I believe can be improved.

Squashed Menu

Can the menus have some padding in between?

Focus Inconsistencies

When the window is focused the switches are dark grey/blue and the area is dark-ish.

When not in focus the switches spring to life and become vibrant. The same goes for the window itself.

The 'Remove' buttons remain brightly coloured regardless of the focus. When not in focus, the text disappears....

I think when not in focus, everything becomes dark-ish but when focused, the window sort of brightens. In short, the reverse of the screenshots.

'Minus' button has a 'Close' symbol

White line

All windows have a white line at the very top. The best way to reproduce it was with the above picture where two white lines are visible. One for each window.

[Elbullazul]

taking good note on the issues

thanks for your feedback :)

[Zerophase]

Yeah, I think the best thing that could be done for the dark theme is using different shades of grey / black for the different parts of the menu.

[brandleesee]

I hope you do not mind if I add some more issues that I have noticed.

Just to be clear, this has become my default theme, so I can only post these issues once I encounter them. I am not hunting them down. Only reporting them when I notice them.

This time, however, I am including screenshots of the Adwaita (default) theme and also Numix. This only to better illustrate my point. I do not expect nor want Windows 10 Dark theme to just be a black version of the mentioned two themes.

Terminal Menus

Menus look squashed as, I believe, the horizontal rules <hr> are not present. Toggle Indicators and associated spaces are also missing (very good sign & empty placeholder).

Hovering

Points to note:

• The Global Dark Theme for both Numix and Adwaita (default) were ON and applications duly restarted, but both simply did not darken.
• The Adwaita (default) theme did not render/display all tool options....
• To illustrate my point I used the Pinta package.

Can Windows Dark 10 have the buttons become a little more evident when hovered on, as presently it does not. Also, the currently selected tool (Paintbrush) is not evident.

Excessive space in Dash/Dock

Points to note:

• I use the Dash-To-Dock Gnome extension installed manually.
• Adwaita (default) and Numix do not have Shell themes by default, hence the lack of comparative screenshots.
• I can only provide the system default screenshot:

Can the excessive space be shrunken?

The above screenshot is the options I presently have from the Dash-To-Dock extension. This applies to both Default and Windows 10 Dark themes.

[Elbullazul]

phew, I didn't know we had so many inconsistencies in the theme!

thanks again for pointing these out

[brandleesee]

I'm feeling guilty now!

Also, I now have this when I run sudo nautilus:

Just in case the following might be helpful, I am running a system with the following:

Distributor ID: Ubuntu
Description: Ubuntu Yakkety Yak (development branch)
Release: 16.10
Codename: yakkety

GNOME Shell 3.20.3

GNOME nautilus 3.20.2

[Elbullazul]

the error list is shure long! thank you again

unfortunately my OS went down (for the nth time) so it may be a couple of days till everything gets back in order and i can get those errors a look

[brandleesee]

welcome! sooner or later that's what I'm expecting from mine maybe I should switch to a proper rolling distro....

[Elbullazul]

@brandleesee all bugs fixed, except the minus icon with the latest release : https://github.com/Elbullazul/Windows-10/releases/tag/v0.9.9-AU

[brandleesee]

@Elbullazul testing as we speak (I write!) screenshots coming shortly!

[brandleesee]

Lovely! Oh boy!

Only a couple of issues and requests at the end of this post.

[Request]

Can the default grey background match the black(ness) of the shell?

If this is beyond the scope of your aims then please guide me on which instances of the css to change or whatever is required.

---

Little change in selected tool and hovering

Nearly invisible black font color

Extension used: System Monitor

---

Downloaded v0.5 icons pack, thanks.

Seemingly unrelated request: I recently had to install Kdenlive and was unhappy that by default it required the installation of the oxygen icon pack. Can the required icons be created with a Windows-style spin so I can deplete oxygen?

---

[Elbullazul]

@brandleesee you can activate "global dark theme" to have a full black theme

I'll investigate those icons, thanks for the suggestion :)

[Elbullazul]

found it, corrections coming in next release or, if you want to change it now:

.popup-menu .popup-menu-item:insensitive {

and change color to :

color: rgba(255,255,255,0.2)

[brandleesee]

Oh, you're right. Blackness mode activated! Thank you! Thanks for checking the oxygen thing, too. As for your fix, mine is already color: rgba(255,255,255,0.2) in fact:

        .popup-menu .popup-menu-item:insensitive {
            color: rgba(255,255,255,0.2); }

Shall I provide the css file or screenshots?

[Elbullazul]

it must be one of the nodes in that sector thas has color: rgba(0,0,0,X)

it's really close to that one, so you can check. I already forgot which line it was :/

[brandleesee]

Cheers! It was this one: .popup-menu .popup-inactive-menu-item:insensitive {

On another note: sudo nautilus produces the following:

[Elbullazul]

more work for the developer! :smile:

probably will fix them tomorrow, and released with the next version (hopefully 1.0.0...)

[brandleesee]

hahaha, he/you won't be happy because I'm gonna pile some more: (for the sake of 1.0.0 I noticed something else)

Scenario 1 - Common selection and mouse operations

Here all good

Here all good

On right-clicking the thumbnail disappears completely

Scenario 2 - Opening a non-maximised application

Here all good

If the focus switches to a non-maximised application (whether the file is selected or not), the thumbnail disappears completely

[Elbullazul]

does it happen with adwaita/numix?

[brandleesee]

Adwaita

Numix

Possibly, a simple solution would be to brighten the selected thumbnail when right-clicked.

As for the out-of-focus darkenning, well that might be a bug... systemwide? If it can be tackled by W10D, well..... :D

[Elbullazul]

@brandleesee it's strange because my code is a fork from adwaita's source code. it shouldn't happen, unless GNOME intentionnally left the bug in the source code... which I don't think they would.

it should be something with view:backdrop class, I'll investigate and post updates

[brandleesee]

Thank you. If there is any way that I can be of help please do tell.

[brandleesee]

Btw, I don't know if this helps but I had referenced it here as well: NoobsLab. This was about 20 days ago so this was already present in the non-anniversary update. This is also another reason to think that it might not really be from W10D as we have both speculated. I might be wrong.

[Elbullazul]

@brandleesee my guess is that it's a bug in the code. Adwaita and Numix both use SCSS, and their code range covers pretty much all possible nodes (even some that are very unlikely, as :focus:hover:selected:insensitive:backdrop), which isn't the case with my code, since I use CSS still, because it's cleanier and also more easy for people to understand than SCSS who almost looks like a mix of CSS with shell scripts!

[brandleesee]

I'd rather have a simple theme that I can customise with limited knowledge, so, yeah, I understand why yours is in CSS. So in this case, I guess it's 'happy hunting' then.

[Elbullazul]

yeah, except I know where the fish are bitin' :D

[brandleesee]

now we're talking!

[Elbullazul]

strange, I get:

[brandleesee]

Something with the Global Dark Theme switch, then?

[Elbullazul]

or somewhere the engine tries to "darken" the black color (impossible!) so it just fills the picture with black...

[Elbullazul]

here's the corrected file : http://pastebin.com/1xE9Ci70

just overwrite all the gtk-contained-dark.css file. I had to add a dirty hex value, but at least you won't get that annoying bug :

[Elbullazul]

...and I fixed the pinta thing, a class in gtk2 called "toolbutton"...

gtkrc file code : http://pastebin.com/VqDCWbwV

[brandleesee]

Ole! All good. Thank you.

I noticed that the close button - depending on the application - gets a blue border onclick (besides becoming red).

onhover does not reproduce this bug.

Applications that do this are: Nautilus & Gnome-Tweak

Applications that do not do this are: Terminal & Pinta

This proved difficult to produce in screenshots, including .gif, hence, YT.

[Elbullazul]

yeah, I saw it too sometimes, but I was busy fixing pinta

I'll check this today if I have time...

[Elbullazul]

fixed

[brandleesee]

I know I said otherwise (email) but consider this as my only issue with the latest Win 10 Dark build: The best way to explain it is that because there is no border I am at times unable to identify where a window starts and stops.

Otherwise, you can see here that I use W10D for my own projects.

[Elbullazul]

ok, will add to the to-do list

making an all-black theme seems to be harder than anything else :/