github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-05-22 07:01:20 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

DEV: Let themes extend color definitions (#10429)

Browse Source 
Themes can now declare custom colors that get compiled in core's color definitions stylesheet, thus allowing themes to better support dark/light color schemes. 

For example, if you need your theme to use tertiary for an element in a light color scheme and quaternary in a dark scheme, you can add the following SCSS to your theme's `color_definitions.scss` file: 

```
:root {
  --mytheme-tertiary-or-quaternary: #{dark-light-choose($tertiary, $quaternary)};
}
```

And then use the `--mytheme-tertiary-or-quaternary` variable as the color property of that element. You can also use this file to add color variables that use SCSS color transformation functions (lighten, darken, saturate, etc.) without compromising your theme's compatibility with different color schemes.
This commit is contained in:
Penar Musaraj
2020-08-18 13:02:13 -04:00
committed by GitHub
parent 16e7744ab5
commit 882b0aac19
15 changed files with 101 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
spec/models/remote_theme_spec.rb
View File

@ -60,6 +60,7 @@ describe RemoteTheme do
"common/header.html" => "I AM HEADER",
"common/random.html" => "I AM SILLY",
"common/embedded.scss" => "EMBED",
"common/color_definitions.scss" => ":root{--color-var: red}",
"assets/font.woff2" => "FAKE FONT",
"settings.yaml" => "boolean_setting: true",
"locales/en.yml" => "sometranslations"
@ -90,12 +91,14 @@ describe RemoteTheme do
expect(@theme.theme_modifier_set.serialize_topic_excerpts).to eq(true)
expect(@theme.theme_fields.length).to eq(9)
expect(@theme.theme_fields.length).to eq(10)
mapped = Hash[*@theme.theme_fields.map { |f| ["#{f.target_id}-#{f.name}", f.value] }.flatten]
expect(mapped["0-header"]).to eq("I AM HEADER")
expect(mapped["1-scss"]).to eq(scss_data)
expect(mapped["0-embedded_scss"]).to eq("EMBED")
expect(mapped["0-color_definitions"]).to eq(":root{--color-var: red}")
expect(mapped["0-font"]).to eq("")
@ -103,7 +106,7 @@ describe RemoteTheme do
expect(mapped["4-en"]).to eq("sometranslations")
expect(mapped.length).to eq(9)
expect(mapped.length).to eq(10)
expect(@theme.settings.length).to eq(1)
expect(@theme.settings.first.value).to eq(true)