{"id":1458,"date":"2021-12-02T01:33:19","date_gmt":"2021-12-02T00:33:19","guid":{"rendered":"https:\/\/nguenkam.com\/blog\/?p=1458"},"modified":"2021-12-06T14:55:39","modified_gmt":"2021-12-06T13:55:39","slug":"how-to-build-dynamic-theme-with-css-variables","status":"publish","type":"post","link":"https:\/\/nguenkam.com\/blog\/index.php\/2021\/12\/02\/how-to-build-dynamic-theme-with-css-variables\/","title":{"rendered":"How to build dynamic theme with CSS Variables ?"},"content":{"rendered":"\n
\"\"<\/figure>\n\n\n\n

The above gif is the challenge we are going to conquer. Main tasks are:<\/p>\n\n\n\n

  1. Have two squares, one reflecting primary color, the other reflecting secondary color.<\/li>
  2. Title text \u201cangular-dynamic-theme-example\u201d has primary color, and secondary color on hover.<\/li>
  3. Have two inputs and one save button to dynamically change the two colors.<\/li><\/ol>\n\n\n\n

    Approach of solution: Put color variables in JS and bind with ngStyle<\/h4>\n\n\n\n
    1. Have two JS variables primaryColor<\/span><\/em><\/code> and secondaryColor<\/span><\/em><\/code> and update the two variables when save button is hit.<\/li>
    2. Bind the two variables to the template through ngStyle<\/em><\/span><\/code><\/li><\/ol>\n\n\n\n

      Big problem of this solution \u2014 Scss files not have access to color variables, leading to:<\/strong><\/p>\n\n\n\n

      Colors can\u2019t be applied to pseudo class or pseudo element (such as h1::before<\/code> div::after<\/code> p::first-line<\/code> a:active<\/code> input:disabled<\/code> button:hover<\/code> etc.), so task 2 can\u2019t be done.<\/p>\n\n\n\n

      SCSS<\/code> is compiled to CSS<\/code> during compile time, and SCSS variables are replaced with resolved value during compile time, which means there is no way to change the variable during run time. So,  If you have your design system implemented with scss variables like $primary-color<\/code> and $secondary-color<\/code> and they are applied everywhere. You will have to deprecate them and do a big refactoring.<\/p>\n\n\n\n

      <\/div>\n\n\n\n

      CSS Variables to the Rescue<\/span><\/h4>\n\n\n\n

      “CSS-Variable<\/em>” is a standard which enables you to have variables in CSS. <\/p>\n\n\n\n

      :root {\n  --first-color: #488cff;\n  --second-color: #ffff8c;\n} \n\ndiv {\n  background-color: var(--first-color);\n  color: var(--second-color);\n}<\/code><\/pre>\n\n\n\n
      Difference between CSS variables and SCSS variables<\/strong><\/h4>\n\n\n\n
      SCSS is compiled to CSS during compile time, and SCSS variables are replaced with resolved value during compile time, which means there is no way to change the variable during run time. However, CSS variables just sits there during run time, and you can dynamically CRUD them during run time with JavaScript (Web API).<\/strong><\/p>\n\n\n\n
      Example: <\/h5>\n\n\n\n
      \/\/app.component.scss\n\n$dynamic-colour: var(--dynamic-colour);\n\n:root{\n   --dynamic-colour: #5260ff;\n}\n\nh1 {\n  color: $dynamic-colour;\n}\n\n\n.block {\n  width: 100px;\n  height: 100px;\n}\n\n.primary-background {\n  background-color: $dynamic-colour;\n}<\/code><\/pre>\n\n\n\n
      Then we can change the color dynamicaly that way :  ( With Javascript).<\/p>\n\n\n\n
      \/\/app.component.ts\n  changeColor(color:string){\n   document.documentElement.style.setProperty('--dynamic-colour', color);\n}<\/code><\/pre>\n\n\n\n
      As you can see, we can use Web API document.documentElement.style.setProperty<\/code> to set CSS variables.<\/p>\n\n\n\n
      <\/div>\n\n\n\n
      <\/div>\n\n\n\n
      Setting up the themes<\/h4>\n\n\n\n
      Let us create a\u00a0theme.config.ts<\/strong><\/em><\/code>\u00a0file  where we will set all the themes. We can make a static config like this or maybe get the config from an API response. The latter is the better approach if you make changes to your themes often.<\/p>\n\n\n\n
      \r\nexport const THEMES = {\r\n  default: {\r\n    primaryColor: 'hsl(185, 57%, 35%)',\r\n    secondaryColor: 'hsl(0, 0%, 22%)',\r\n    textOnPrimary: 'hsl(0, 0%, 100%)',\r\n    textOnSecondary: 'hsl(0, 0%, 90%)',\r\n    background: 'hsl(0, 0%, 100%)',\r\n  },\r\n  dark: {\r\n    primaryColor: 'hsl(168deg 100% 29%)',\r\n    secondaryColor: 'hsl(161deg 94% 13%)',\r\n    textOnPrimary: 'hsl(0, 0%, 100%)',\r\n    textOnSecondary: 'hsl(0, 0%, 100%)',\r\n    background: 'hsl(0, 0%, 10%)',\r\n  },\r\n  netflix: {\r\n    primaryColor: 'hsl(357, 92%, 47%)',\r\n    secondaryColor: 'hsl(0, 0%, 8%)',\r\n    textOnPrimary: 'hsl(0, 0%, 100%)',\r\n    textOnSecondary: 'hsl(0, 0%, 100%)',\r\n    background: 'hsl(0deg 0% 33%)',\r\n  },\r\n  spotify: {\r\n    primaryColor: 'hsl(132, 65%, 55%)',\r\n    secondaryColor: 'hsl(0, 0%, 0%)',\r\n    textOnPrimary: 'hsl(229, 61%, 42%)',\r\n    textOnSecondary: 'hsl(0, 0%, 100%)',\r\n    background: 'hsl(0, 0%, 100%)',\r\n  },\r\n};<\/code><\/pre>\n\n\n\n
      Theming service<\/h4>\n\n\n\n
      We create a service and call it\u00a0ThemeService<\/em><\/code>. The logic for updating the themes will be handled by this service. We can inject the service into the application and then change the theme using a function we expose from the service.<\/p>\n\n\n\n
      COPY\r\nimport { DOCUMENT } from '@angular\/common';\r\nimport { Inject, Injectable } from '@angular\/core';\r\nimport { THEMES } from '..\/config\/theme.config';\r\n\r\n@Injectable({\r\n  providedIn: 'root',\r\n})\r\nexport class ThemeService {\r\n  constructor(@Inject(DOCUMENT) private document: Document) {}\r\n\r\n  setTheme(name = 'default') {\r\n    const theme = THEMES[name];\r\n    Object.keys(theme).forEach((key) => {\r\n      this.document.documentElement.style.setProperty(`--${key}`, theme[key]);\r\n    });\r\n  }\r\n}<\/code><\/pre>\n\n\n\n
      How this works is basically by overriding the CSS variable values that we have defined in the\u00a0styles.scss<\/code>\u00a0file.<\/p>\n\n\n\n
      The function takes the name of the theme to apply. What it does it, get the theme variables for the selected theme from our config file and then loop through it wherein we apply the new values to the variables.<\/p>\n\n\n\n
      <\/div>\n\n\n\n
      Summary<\/span><\/h4>\n\n\n\n
      1. CSS itself has its variable mechanism to enable you write CSS value by reference.<\/li>
      2. CSS variable is just there during run time while Sass variable is replaced by resolved value during compile time.<\/li>
      3. CSS variable can be dynamically CRUD\u2019ed during run time with JavaScript Web API. It can also be defined initially in CSS\/SCSS<\/li><\/ol>\n\n\n\n
        <\/div>\n\n\n\n
        Additional notes<\/strong><\/h4>\n\n\n\n
        1. CSS variable is not natively supported by IE , but polyfill<\/a> is available.<\/li>
        2. You can set fallback value in case the variable is not define<\/li><\/ol>\n\n\n\n
          .header {\n  color: var(--header-color, blue); \n\/* if header-color isn\u2019t set, fall back to blue*\/\n}<\/code><\/pre>\n\n\n\n
          3. CSS variable can be directly referred by SASS variable, but SASS variable cannot be directly referred by CSS variable. e.g.<\/p>\n\n\n\n
          \/\/ RIGHT, CSS variable can be directly referred by SASS variable\n$primary-color: var(--my-primary-color);\n\n\n$accent-color: #fbbc04;\n\n:root {\n  \/\/ WRONG, will not work in recent Sass versions.\n  --accent-color-wrong: $accent-color;\n\n  \/\/ RIGHT, will work in all Sass versions.\n  --accent-color-right: #{$accent-color};\n}<\/code><\/pre>\n\n\n\n
          <\/div>\n\n\n\n
          Reference:<\/h5>\n\n\n\n
          https:\/\/medium.com\/angular-in-depth<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
          The above gif is the challenge we are going to conquer. Main tasks are: Have two squares, one reflecting primary color, the other reflecting secondary color. Title text \u201cangular-dynamic-theme-example\u201d has primary color, and secondary color on hover. Have two inputs and one save button to dynamically change the two colors. Approach of solution: Put color […]<\/p>\n","protected":false},"author":1,"featured_media":1460,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[37,89],"tags":[410,330,409,411,407,408,138],"_links":{"self":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/1458"}],"collection":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/comments?post=1458"}],"version-history":[{"count":4,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/1458\/revisions"}],"predecessor-version":[{"id":1467,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/1458\/revisions\/1467"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/media\/1460"}],"wp:attachment":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=1458"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=1458"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=1458"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}