THEME_README.md

Theming

Theming is the ability of our components to change their appearance according to the user's request for example - dark, light theme are pretty common but there are more advanced themes such as two tone and or color blind themes.

Key Guidelines for supporting themes

1. When styling a component you should be theme agnostic - you should not be aware of the current theme.
2. You should not import colors by their name (snow_white, basic_blue...), you should import colors by their theme name - (primaryHoverColor, primaryTextColor...)
3. Use the theme-prop helper mixin to use a theme. (theme-prop is our mixing for supporting ie11)

How we implemented themes

Our theme mechanism is based on CSS variables, CSS variables are a very powerful tool to create dynamic css variables (it is not supported on ie11 - we have a fallback for it). We define our initial styling at the body/root element level - doing so we are exposing our css variables (colors) to all child elements. When we want to apply a specific theme we simply add the theme class to a common ancestor (body for example) and all the components should change their appearance.

Creating a theme.

We extracted our css variables to a different repo (@mondaydotcomorg/monday-ui-style) In order to create a new theme you need to override all of the keys (the list of keys can be found in the monday-ui-style repo)

Adding a new variable to a theme

Adding a key should be done in the @mondaydotcomorg/monday-ui-style repo

IE11 support

As IE 11 is at it's final breath we don't want to invest too much time to support it but we do have around 3% usage in ie so in order to do so we will show the default theme when using ie 11. In order to achive that please use the theme-prop

Theme example:

body {  
  --primary-text-color: var(--color-mud_black);  
  --positive-color: var(--color-success);  
  --negative-color: var(--color-error);  
  --primary-border-color: var(--color-explosive);  
  --placeholder-color: var(--color-explosive);  
  --icon-color: var(--color-explosive);  
  --icon-color-hover: var(--color-blackish);  
  --primary-active-color: var(--color-basic_blue);  
}  
  
.compass-color-blind0theme {  
  --primary-text-color: white;  
  --positive-color: green;  
  --negative-color: red;  
  --primary-border-color: black;  
  --placeholder-color: black;  
  --icon-color: black;  
  --icon-color-hover: grey;  
  --primary-active-color: blue;  
}