Theme
Theme is a collection of variables, functions and mixins all created to streamline colors across our apps.
Sass
// Include default styles without configuration
@forward '@miraidesigns/theme/styles';
// Configure appearance
@use '@miraidesigns/theme' with (
$variable: value
);
@include theme.styles();
Implementation
All of our colors get saved as CSS3 variables. The styles()
mixin takes care of that.
It creates a set of variables for each theme, a light and dark theme.
The $themes
map holds the values for both themes. The map keys and CSS3 variables share the same names for ease of access.
I recommend loading this module early in your load order.
Variables
Name | Default | Description |
---|---|---|
$brand |
blue |
Primary brand color |
$complementary |
orange |
Complementary to the brand color |
$theme |
light |
Default page theme: light or dark
|
$primary-light |
#000 |
Base text color for the light theme |
$background-light |
#fff |
Background color for the light theme |
$primary-dark |
#fff |
Base text color for the dark theme |
$background-dark |
#212121 |
Background color for the dark theme |
Color
The .color()
function is used to lookup values from our $colors
map.
a {
color: theme.color('red'); // #f44336 by default
}
Alternatively, if all you want to access is your $brand
or $complementary
color, use the function with the same name.
a.logo {
color: theme.brand(); // Brand color
}
a.links {
color: theme.complementary(); // Complementary color
}
Prop
The .prop()
function uses the $theme
variable as its default.
div {
background-color: theme.prop('background');
}
Otherwise you can supply a second string to lookup a specific theme like .prop('background', 'dark')
will try to get the background
value from the dark
theme.
div {
background-color: theme.prop('background', 'dark');
}
Color Contrast
The function .color-contrasted()
is used to determine if a given color needs light or dark text to meet contrast requirements.
It will take the supplied color like .color-contrasted('red')
and then return either white or black. That gets further modified by using our $colors-alpha
map and applies subtle opacity changes to make the text and background blend together better without sacrificing readability.
button {
background-color: theme.color('red');
color: theme.color-contrasted('red'); // This text will have proper contrast to match the background
}