[stable25] New theming, how to make your app compatible

[skjnldsv]

With #31751 we decided to drop scss variables.

Not everything is compatible with css variables and you can not do colors computation anymore
Prior to 25, the theming app was providing an imperative approach with a set of css rules hacks to mitigate those dark/bright discrepancies.

With 25, we now moved to a declarative approach. There are multiple things you can/have to consider when designing an app to make sure you have a minimalistic work to do to fulfill said compatibility

1. If your app is made with vue, migrate away from icon-class to vue material design icons https://www.npmjs.com/package/vue-material-design-icons
2. If you're using icon-classes
   1. Plan your app to look proper with the default theme.
      That means the icons should be dark if they are over the main background and white if they are over the primary background colour
   2. Make sure to use dedicated div/span for the icon only
   3. And finally, use the following css rule on said icon element
      --primary-invert-if-bright if the icon is over the primary background colour
      --background-invert-if-dark if the icon is over the background colour
      This will automatically invert the icon colour if necessary.
3. Do not use body[theme-xxx] selector to create custom rules. We now also use media queries (1, 2) to match the browser preferences. That means you have to let the Theming do its job and not try to do it yourself

Removal of SVG colour api

With 25 we remove the support of the icon-color and icon-black-white scss mixins.
We move to a static generated icons colour approach #31918

While we still ask you to migrate to inline svg that automatically reflect the font colour and are compatible with any themes (like the vue material design icons), if you wtill need to use the old icons classes, you can keep doing so (until removal in the future)

• You can find the list of classes in the icons.css file and the source file
• Each class is linked to an icon with css variable, this variable is automatically inverted from dark to white and vice-versa if one of the activated theme is a dark theme.
• You can use the css class like .icon-more like before or also use the css variable straight away:
  • background-image: var(--icon-more-dark); or background-image: var(--icon-more-white);
    for automatic colour invert
  • background-image: var(--original-icon-more-white);
    to force a specific colour

[szaimen]

This should be planned well. Otherwise it will slip through.

[skjnldsv]

This is still a wip, I also have another idea regarding icons, so we'll have to check if it works.

[szaimen]

Okay

[ankit715]

How to make hacking app