Community icon indicating copy to clipboard operation
Community copied to clipboard

feat: A high-contrast dark theme

Open HubKing opened this issue 3 years ago • 15 comments

Feature description

Dark theme is common these days, but one problem of dark themes is that they often lack contrast. That is, they use light grey text on dark grey background. Or, when they use pure-black background, they lack borders, so UI elements are not discernable. For some users, this lack of contrast is not just a matter of aesthetics, but of accessibility.

Some applications, like JetBrain's IDE or VS Code, have high-contrast dark theme like below. The background is black and the text is white, so they are easy to read, and the UI elements have white borderlines, so they don't look all mingled together.

It seems there is no high-contrast dark theme in the presets, and I failed to make such a theme myself. How about adding a high-contrast dark theme in the presets?

Additional Context

JetBrains' IDE

image

VS Code

image

MS Windows 10

image

Did you read the Code of Conduct?

HubKing avatar Nov 12 '22 03:11 HubKing

Welcome on Gradience. 🥳 We really appreciate your contribution. The core team will review your issue as soon as possible. You can also join the matrix room https://matrix.to/#/#Gradience-space:envs.net or the discord server https://discord.com/invite/4njFDtfGEZ

GradienceBot avatar Nov 12 '22 03:11 GradienceBot

Libadwaita (and normal Gtk) applications already have high contrast versions, which you can enable in Accessibility page in GNOME Control Center. Screenshot from 2022-11-12 12-54-14

tfuxu avatar Nov 12 '22 11:11 tfuxu

Well, it could work for some people, but that is not exactly what I wanted. I am not visually-impaired, I just want black background + white general text, darker background + brighter-coloured text for special elements like buttons, and white borders. If I enable that accessibility feature, it would look like below. The icons look ugly, the background is still grey, not black, and the text is still dim, not white. It also, for some reason, makes some applications use light theme, not dark.

image

HubKing avatar Nov 13 '22 04:11 HubKing

Well, if you want it ASAP, you can always create it with Gradience and make a PR here with your theme file, so it could be added to our repository for others to download. You can also tell us how this theme should look exactly, and wait until someone from our team or some other interested contributor will create a PR for it.

tfuxu avatar Nov 13 '22 13:11 tfuxu

@tfuxu No, I do not need it urgently. I had tried to create one, but there were so many entries, so I did not know what exactly each of them were for and could not make a good-looking one. If I changed one thing and then another thing looked bad, and if I fixed that thing, then the previous one looked bad, etc.

HubKing avatar Nov 18 '22 16:11 HubKing

No, I do not need it urgently.

Alright then, we will create it at some point and notify you when PR will be available, so you could review it.

tfuxu avatar Nov 18 '22 22:11 tfuxu

I had tried to create one, but there were so many entries, so I did not know what exactly each of them were for and could not make a good-looking one.

Hmm, we should look into that. Maybe a visual representation (more than just Gradience window changing appearance) could help to understand some color sections.

tfuxu avatar Nov 18 '22 22:11 tfuxu

What about something like this?

high-contrast.zip

daudix avatar Nov 24 '22 21:11 daudix

What about something like this?

high-contrast.zip

How can I test it? I don't know how to import a ZIP file.

HubKing avatar Nov 26 '22 18:11 HubKing

Unzip it and import .json

daudix avatar Nov 26 '22 18:11 daudix

Unzip it and import .json

I figured it out, so I was trying to post delete that comment but you have already seen it.

Any way, the high-contrast theme looks good, but I have one question. Does Gnome theme allow customising window borders? I am not sure if it does, but if it does, I think a white window border would be helpful, because currently, when two windows are overlapping, I cannot easily distinguish them.

image

HubKing avatar Nov 26 '22 19:11 HubKing

I think there is option to do so ;)

daudix avatar Nov 26 '22 19:11 daudix

Figured out how to add outlune, looks pretty good

изображение

daudix avatar Nov 30 '22 15:11 daudix

But how? Are those border lines part of the preset in Gradience, or does it need a third-party tool?

HubKing avatar Dec 01 '22 16:12 HubKing

Daudix needed to override some CSS rules using Custom CSS editor in Advanced tab to customize window borders, because GTK doesn't expose them directly as @define-color variables. You don't need a third-party tool to do this, but you'll need some knowledge of CSS to customize those more hidden from customization elements in GTK.

tfuxu avatar Dec 01 '22 16:12 tfuxu