Zeal: Dark Theme

[trollixx]

Provide a dark mode similarly to Dash.

Related to #268

[vgturtle127]

:+1:

[rgulle4]

:+1:

[pawelkuras]

:+1:

[anephew]

:+1:

[Dieterbe]

Yes please !

[johackim]

:+1:

[trollixx]

@Kapeli How's Dash implementing this? Is there a class I should add to some element, or everything is overridden by an external CSS? Thanks!

[Kapeli]

This is the CSS Dash uses for dark mode:

iframe {
    -webkit-filter: invert()
}
html {
    -webkit-filter: invert() contrast(80%) brightness(120%) contrast(85%);
}
html img[src*=\"jpg\"], html img[src*=\"jpeg\"], html img[src*=\"jpg\"], html img[src*=\"jpeg\"] { 
    -webkit-filter: brightness(100%) contrast(100%); 
}

Adding a hue-rotate makes it a lot nicer as it preserves the colors, but it causes performance issues on OS X so I don't use it.

html { 
    -webkit-filter: invert() hue-rotate(180deg) contrast(80%) brightness(120%) contrast(85%); 
}

[fgrosbellet]

:thumbsup:

[vgturtle127]

@trollixx
Thanks, buddy!

[oblitum]

Nice! Really looking forward to get 0.4.0 coming.

[rebeccaloran]

I can't seem to get dark_mode to work in ~/.conf/Zeal/Zeal.conf
I am setting the css file included in this issue thread. Still no difference.

I run Archlinux running the version 0,3,1 from the community repos.

[trollixx]

@areckx 0.3.1 doesn't have this feature. Either get zeal-git from the AUR, or wait for 0.4.0 which I am trying to release right at this moment...

[oblitum]

@trollixx great!

[oblitum]

I've just flagged the ArchLinux community package as out of date. Hopping for an update soon :)

[rebeccaloran]

That would certainly explain it!

[oblitum]

Just arrived in Arch repos, though, just main content area (not widgets) gets dark using the dark mode checkbox :(. Would a custom CSS do anything in that regard? Or is there an option?

[trollixx]

The app should follow your system theme. Alternatively it's possible to use a custom QSS file via -stylesheet argument.

[oblitum]

@trollixx sadly it didn't follow it, I use all dark and zeal is the one that's failing to catch that. I'll check that option thanks!

[trollixx]

Unless you're on KDE (or other Qt-based DE), most likely Qt just doesn't follow your GTK theme. Check out this wiki page.

[oblitum]

Ah OK, I'm on Gnome.

[oblitum]

The wiki page can be a bit confuse to follow, so I'll describe what I've opted to do on ArchLinux/Gnome3 (both GTK3 and GTK2 are installed) for reference:

• pacman -S breeze-gtk
• pacman -S qt5-styleplugins
• export QT_QPA_PLATFORMTHEME=gtk2 saved both on .zprofile (zsh) and .xprofile.

I'm now using Breeze-Dark as my GTK+ theme, it looks good, and it supports Qt applications as well. I have Global Dark Theme enabled on Tweak Tool. With this Zeal starts with dark widget theme, and I can set the dark theme for the main pane on Zeal menu settings.

[ryukinix]

@oblitum, if you don't care about other users on your system, you can just put that definition on /etc/environment.

[abers]

For those of us unfortunately stuck using Windows are there any options for changing the widget theme?

[trollixx]

@abers Qt Style Sheets

[eromoe]

Only main window is dark , can we make a full dark theme ? At least left sidebar looks too shining in dark mode.

[trollixx]

@eromoe See my answer above. You can find some dark styles on the Internet (for example, QDarkStyleSheet). Zeal tries to look as native as possible, implementing support for built-in look and feel is possible, but it's also quite easy to by just using Qt Style and Qt Style Sheets. So, for now I don't think it's a high priority task. Feel free to create a separate ticket for that.

[oblitum]

To illustrate how it's for me on ArchLinux/Gnome:

[jeroldhaas]

Documentation on style sheets for the Qt library is focused on application code. Considering how much time was spent on finding the proper information I've posted an explicit example here to save everyone else's time:

zeal.exe -stylesheet=qdarkstylesheet.qss

Modify your application link with this option and save it. Done.

[eromoe]

Note:
qdarkstylesheet.qss is https://raw.githubusercontent.com/ColinDuquesnoy/QDarkStyleSheet/master/qdarkstyle/style.qss

And it doesn't look good on windows:

lost checkbox

[jotaf98]

Hi, following @jeroldhaas 's suggestion does make the theme dark but unfortunately slows down the UI to the point that it's unusable.

Most icons are missing, others are styled badly (default black-on-white). This is probably due to missing resources.

I tried to fix this by putting the icons in the same path and modifying the qss file's paths to point to them, but no luck -- icons are still missing, and the interface is still unusably slow. Any ideas?

[jotaf98]

As a follow-up, it's still not as fast as the vanilla docs, but selecting a custom CSS with simple color inversion instead of the "dark mode" option is a lot faster:

body {
    -webkit-filter: invert();
    filter: invert();
}

This seems to indicate that the problem is just that webkit's implementation of CSS filters is slow (at least on my Windows 10 machine).

Of course, this is for the main docs display; I still couldn't get Zeal's UI to show up as dark without graphical glitches and slowness.

[JARVIS-AI]

As you know in Linux OS (Have dual boot Win/Linux) when we set Zeal to dark most of UI elements are fine cause our OS elements and UI/GUI and theme are dark too
But for windows we have different case

Menu - List and generally Main window of Zeal still white even dark option is On
For custom CSS, I tried it but have glitches and Not good looking UI elements such as Checkbox ☑ - Text input - scroll bar and some other

As referenced to pull request post, still we have this issue but have good source for dark QT

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for a related request.