Poor visibility of UI when using dark UI theme

[Zmuogs]

I using KDE Plasma 5.16.5 in Linux. When UI theme is dark (f.e. "Breeze Dark" in this case) then most of icons, some labels in LibreCAD is poorly visible (black on dark background). See attached pictures.
UI should adapt to dark UI theme.

LibreCAD:
Version: 2.1.3
Compiler: GNU GCC 8.2.0
Compiled on: Sep 17 2018
Qt Version: 5.12.2
Boost Version: 1.67.0
System: Ubuntu 19.04

[Zmuogs]

Note on black label "Command:" in attached screenshot: when LibreCAD is started fresh then that label is white, but mouseclick in edit field of that "Command:" ("Commant:" turns blus) and then hit ESC -> "Command:" turns black.

[natrius]

Jumping in, its hard to see anything. I'm using "Starcraft" and, well...

I tried to search for a setting to change the theme just for this program back to breeze default so i can work with it, but i could not find anything. I think another program had it, but unfortunately i cannot remember :(

[MikePryadko]

I have the same situation:

Version: 2.1.2
Compiler: GNU GCC 6.2.0
Compiled on: Sep 17 2016
Qt Version: 5.9.5
Boost Version: 1.62.0
System: Ubuntu 18.04.4 LTS

My DE is Xfce (theme adwaita-dark), so I use qt5-style-plugins for applying GTK theme to Qt

[kevinsmia1939]

Same issue here on KDE Plasma 5
LibreCAD 2.1.3
Operating System: openSUSE Tumbleweed 20200227
KDE Plasma Version: 5.18.1
KDE Frameworks Version: 5.67.0
Qt Version: 5.14.1
Kernel Version: 5.5.6-1-default
OS Type: 64-bit
Processors: 8 × Intel® Core™ i7-3770 CPU @ 3.40GHz
Memory: 7.5 GiB of RAM

[deric]

A workaround:

1. Install qt5ct
   Debian/Ubuntu: sudo apt install qt5ct

2. Export ENV variable and run librecad

$ QT_QPA_PLATFORMTHEME=qt5ct librecad

3. Go to Options > Widget Options and set Style to qt5-ct-style.

4. Run qt5ct in order to adjust Qt5 theme.

To persist the settings, add this line to ~/.profile and logout (and after starting new sessions qt5ct theme should work withou exporting ENV variable):

export QT_QPA_PLATFORMTHEME=qt5ct

Proper solution would require adding new set of icons. And supporting e.g. Breeze Dark

[deric]

When you go to Options > Widget Options > Toolbar and check "Use Themed Icons" you should see that some icons are adjusted to your theme:

Some icons can be loaded from desktop theme, the set of icons is limited and given by the freedesktop icons specification:

    if (using_theme)
        action->setIcon(QIcon::fromTheme("document-new", QIcon(":/icons/new.svg")));
    else
        action->setIcon(QIcon(":/icons/new.svg"));

LibreCAD icons could be easily converted to dark theme icons using simple bash script. Just go to icons directory:

cd librecad/librecad/res/icons

and run this script to replace black color in SVG files:

#!/bin/sh
# convert light colors to dark-theme colors

find -name "*.svg" | while read i;
do
        fname=$( basename "$i")
        fdir=$( dirname "$i")
        sed -i -e 's/#000000/#f2f2f2/g' "$i"
done

And recompile LibreCAD.

This way you'll get an UI that looks more usable, although not ideal:

In order to make this work, the code needs to be refactored. Replace:

action->setIcon(QIcon(":/icons/select_intersected_entities.svg"));

with something like:

    if (using_theme)
        action->setIcon(QIcon::fromTheme("select-intersected-entities", QIcon(":/icons/select_intersected_entities.svg")));
    else
        action->setIcon(QIcon(":/icons/select_intersected_entities.svg"));

• create default icons theme
• add index.theme file
• reorganize icons directory
• create dark theme icons

Anyone willing to help with this?

[Nikita-Presnov]

Is it life?

[James4Ever0]

+1

[ghost]

LibreCAD icons could be easily converted to dark theme icons using simple bash script. Just go to icons directory and run this script to replace black color in SVG file

As icons are SVG, and parsed by Qt during each launch, could it be solved internally by dynamically replacing colors during parsing icons SVG files? Then there would be no needs to create separate "dark icons" set.

• https://stackoverflow.com/questions/15123544/change-the-color-of-an-svg-in-qt
  • https://forum.qt.io/topic/91444/dynamically-change-svg-color-or-replace-a-color-by-another-one
    • https://doc.qt.io/qt-5/qtxml-index.html
  • https://forum.qt.io/topic/75115/qml-svg-change-color/6

It should be implemented as an option "Icons: Light / Dark" (drop-down toggle) into "Widget Options" window, and take effects on-the-fly (or after restart app).

Even more, as LibreCAD icons has a limited set to 6 colors ("black" & "light gray" edges + "green", "dark grey", "light gray" & "white" fills) it might be possible create "Icons Colors" preferences list in "Widget Options", similar to "Application Preferences > Graphic Colors" preferences list.

[flywire]

https://wiki.inkscape.org/wiki/Creating_a_multicolor_icon

Search "stroke:" (1107 hits in 207 files of 226 searched)
stroke:none
stroke:#000000 - Black
stroke:#00ff7f - SpringGreen - 15 files
stroke:#969696 - Nobel (Gray) - 3 files, invisible.svg, noconstruction.svg, noprint.svg
stroke:#c8c8c8 - Tint of Very Light Gray - 1 file, unlocked.svg
stroke:#ffffff - White- 9 files

Search "fill:" (430 hits in 148 files of 226 searched)
fill:none
fill:#000000 - Black
fill:#00ff7f - SpringGreen
fill:#808080 - Tint of Gray - 2 files, invisible.svg, noprint.svg
fill:#969696 - Nobel (Gray) - 3 files - 3 files, invisible.svg, noconstruction.svg, noprint.svg
fill:#c8c8c8 - Tint of Very Light Gray - 1 file, unlocked.svg
fill:#cccccc - Tint of Very Light Gray - 2 files, invisible.svg, noprint.svg
fill:#ffffff - White

Suggest:

1. review grays, selecting named colors and only one very light grey
2. unlocked.svg should be identical to locked.svg except for color

[fa201]

For record purpose, I add also the Forum issue

[mangelba]

I modified the icons so that they look good in the dark theme. Maybe it will be useful to someone.
https://github.com/mangelba/LibreCAD-with-dark-icons/tree/dark-icons/librecad/res/icons

[flywire]

What did you change? How about a screen shot of the two sets a comparison?

The editor changed every icon even where there is no change to the appearance of the icon.

[mangelba]

What did you change? How about a screen shot of the two sets a comparison?

The editor changed every icon even where there is no change to the appearance of the icon.

With dark icons:

Original icons:

[MikePryadko]

@mangelba

I modified the icons so that they look good in the dark theme. Maybe it will be useful to someone. https://github.com/mangelba/LibreCAD-with-dark-icons/tree/dark-icons/librecad/res/icons

Looks good!
Sorry for dummy question, but how regular users should use your icons?) (how to install it?)

[mangelba]

Looks good! Sorry for dummy question, but how regular users should use your icons?) (how to install it?)

It is not easy. It is necessary to compile the source code.

First download de source code cloning from github:
$ git clone https://github.com/mangelba/LibreCAD-with-dark-icons.git
and go to the dark-icons branch:
$ git checkout dark-icons

Or directly downlad in dark-icons branch:
$ git clone --branch dark-icons https://github.com/mangelba/LibreCAD-with-dark-icons.git

and then compile Librecad: https://github.com/LibreCAD/LibreCAD/wiki/Build-from-source

for me in linux works:
$ qmake -r
$ make

I have seen that I will also have to edit the icons that are in png format.

Sorry if I can't explain it well but my knowledge of git is very little (and of the English language too).