Improve Dark Mode about lossless-cut HOT 6 OPEN

related #733

from lossless-cut.

also an option to use the system theme

from lossless-cut.

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.

from lossless-cut.

@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.

from lossless-cut.

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;
}

from lossless-cut.

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

from lossless-cut.