Accent Colors, Color Ramps and other improvements to theming.
Open, Needs TriagePublic

Description

Goal:
Design an accent color system and related components for the Plasma desktop and reiterate on the Appearance/Colors UX.

Motivation:
While Plasma makes it possible to change the color scheme, it's not presented in the most accessible way. Especially compared to how easy some other OSes make it to easily change the accent color.

Prior Art:
kcm-colorful:

Windows:




OSX:


Zorin OS:

AlphaBlack Control:

@Zren explained how AlphaBlack Control could be adapted in this comment:

In T8755#186648, @Zren wrote:

The widget basically switches to breeze-dark by editing ~/.config/plasmarc, waits a few seconds, then switches back to breeze-alphablack.

https://github.com/Zren/breeze-alphablack/blob/master/desktoptheme.py#L176

Ideally, a dbus signal would be created to force the current desktop theme to reload without needing to switch to a 2nd theme. You'd have to make sure it notify's plasmashell, krunner, latte-dock, etc as they all use plasma theme SVGs. We need the QML Plasma SVG to re-generate the stylesheet injected into the SVG.

To have a separate accent color for the panel we would need to create a new desktop theme in ~/.local/share/plasma/desktoptheme/. We'd need to first create:

  • .../desktoptheme/BreezeCustom/metadata.desktop which should inherit default, just like like Breeze Dark.
  • .../desktoptheme/BreezeCustom/colors which is generated from our accent color.

    Then switch to BreezeCustom if we're not already using it.

Worth looking into:
This article Designing Systematic Colors (and comment) explores some of the challenges with generating related colors. I'll include an example of some color ramps which are generated from one color each, along with some information about the colors including their accessibility ratings according to the WCAG standard.

There is also this implementation of the algorithm based on the aforementioned article:

Also interesting is Adobe Color:

and IRIX Web Tools / Iris:

We've been discussing this in some recent tasks (T10046, T8755) so I thought I would just open up the discussion.

+1, I think this "accent color" thing is a nice UX improvement, and basically everyone else already has it. We have all the necessary backend support ready to go via the color scheme's "highlight" color; we'd just need to add this as a new UI element on the colors KCM.

Don't forget to add VDG as a subscriber or else nobody will see it (Phab doesn't send notifications for tags on tasks, only subscribers).

ndavis added a subscriber: ndavis.Jun 10 2019, 10:51 PM
mglb added a subscriber: mglb.Jun 10 2019, 10:54 PM

Yes yes yes!

HSLuv (optionally with a ramp) works nicely for things like this. I'm using it in reimplementation of Konsole's "random background" feature (WIP: D20263, stalled a bit for now).

lavender updated the task description. (Show Details)Jul 16 2019, 3:51 PM

@mglb maybe the konsole code could be adapted to kcm-colorful? It has a lot of the features we want

mglb added a comment.Aug 2 2019, 2:32 PM

@mglb maybe the konsole code could be adapted to kcm-colorful? It has a lot of the features we want

hsluv has an external lib (actually used in mentioned Konsole diff), it would be easy to use.