91614fa2a9
Just like we did with SCSS variables, we use the `--main-header` CSS variable and, if it isn't defined, we use the `--brand` CSS variable instead. Note that we're still using the `inverted-selection` mixin based on the default `$main-header` color, so it's possible that we get the inverted selection in the main header when using a dark color with `$main-header` but a light color with `--main-header`, which doesn't make much sense. Not sure whether there's anything we can do about it.
31 lines
1.2 KiB
SCSS
31 lines
1.2 KiB
SCSS
// If you're using multitenancy, you can override styles for a certain
|
|
// tenant by styling the `<html>` element with the class
|
|
// `tenant-<tenant_name>`. For example, to style the public (main)
|
|
// tenant without these styles affecting any other tenants, use the
|
|
// `.tenant-public` selector.
|
|
//
|
|
// You can use CSS variables to customize the colors. Here's an example
|
|
// changing the brand and main header colors for just the main tenant.
|
|
//
|
|
// .tenant-public {
|
|
// --brand: #153;
|
|
// --main-header: #351;
|
|
// }
|
|
//
|
|
// Some colors default to another color, so you don't have to change
|
|
// both colors if you'd like them to be the same. For instance, the
|
|
// `--main-header` color will use the `--brand` color if `--main-header`
|
|
// is not defined.
|
|
//
|
|
// If, for instance, you're using a light color for the main header when
|
|
// the default color is a dark one, you should also change the text
|
|
// color. You can do that with a variable ending in `-contrast`, like:
|
|
//
|
|
// .tenant-public {
|
|
// --main-header: #{$white};
|
|
// --main-header-contrast: #{$black};
|
|
// }
|
|
//
|
|
// NOTE: If you are **not** using mulitenancy, we recommend overwriting
|
|
// SCSS variables in the `_consul_custom_overrides.scss` file instead
|