Improve Dark Mode

[userzzzq]

The fewer issues I have to read, the more new features I will have time to implement, so I ask that you please try these things first

• [X] Check out all the menus and keyboard shortcuts. Maybe the feature already exists?
• [X] Try with the newest version from GitHub
• [X] Read the documentation and FAQ, Known issues, Troubleshooting to see if the feature already exists
• [X] See if someone already suggested this under Issues or Discussions

Description

some UI still use white background, such as the Merge Files page, the scrollbar of "batch files" pannel (at left). please improve the dark mode.

[mifi]

related #733

[ac615223s5]

also an option to use the system theme

[Igetin]

also an option to use the system theme

Yeah, I would appreciate an option to synchronize the UI to the system theme. For reference, Electron's native-theme API should work fine for this and supports Linux/Windows/macOS.

[XCanG]

@mifi I have a little suggestion: add style color-scheme

You can use color-scheme: light dark; to support both themes, even right now it would improve scroll bars, an example if you add this to html element styles via devtools:

• Default styles:
• With color-scheme and dark system theme:

Another screen example:

• Default:
• With:

Additionally there is light-dark() function that will allow you to style freely between both themes, like that:

.selector {
    background-color: light-dark(var(--light-background), var(--dark-background));
    color: light-dark(var(--light-text), var(--dark-text));
}

Currently lossless-cut use Chrome version 118, so it is not supported.

But if you upgrade Electron with a Chrome version 123 or newer, you can easily use it.

[XCanG]

Well, it is also possible to manually restyle scrollbars with CSS instead of relying on color-scheme like that (Chrome-only):

*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background-color: transparent;
}

*::-webkit-scrollbar-thumb {
    background-color: #8888;
}

*::-webkit-scrollbar:hover {
    background-color: #8883;
}

[mifi]

I've now added color-scheme according to the user's dark/light setting in the app