DEV: Plugins can extend color definitions (PR #10383)

Since https://github.com/discourse/discourse/commit/c937afc75ec1fdf4fa2a5a3d76161c40272d0518, core uses CSS custom properties for colors. This PR allows plugins to add their own variations to the color definition stylesheets, therefore allowing for custom color variations that adjust correctly when switching to dark mode.

Here is an example of a plugin with a custom color variation:

.element {
  background: dark-light-choose(lighten($tertiary, 55%), darken($tertiary, 25%));
}

To properly support color scheme switching, the plugin should include a new SCSS file at assets/stylesheets/colors.scss with the following contents:

:root {
  --custom-tertiary: #{dark-light-choose(
      lighten($tertiary, 55%),
      darken($tertiary, 25%)
    )};
}

It should register that stylesheet in plugin.rb via:

register_asset "stylesheets/colors.scss", :color_definitions

and then in the original stylesheet, it should replace the SCSS variable with the newly declared custom property:

.element {
  background: var(--custom-tertiary);
}

GitHub

The title of this pull request changed from “FEATURE: Plugins can extend color definitions” to "DEV: Plugins can extend color definitions

Looks like there’s a spec failure in github actions. But apart from that, looks good :+1:

1 Like