Themes

Hello folks, Let's see the journey of mine with the Themes. Whenever we create a new theme, we have to deal with CSS. So again we are going to write the same CSS with different colors and it makes the code repetitive like the following Script.

Light Theme

product .light-theme {
   background-color: white;
   color: blue;
}
product .light-theme:hover {
   background-color: blue;
   color: white;
}

Dark Theme

product .dark-theme {
   background-color: black;
   color: white;
}
product .dark-theme:hover {
   background-color: white;
   color: black;
}

For the optimization, Custom Properties play a major role in this CSS. Interesting..?

So what is Custom Properties ?

Custom Property is a pre-defined variable and it stores the value of the CSS property.

Okay, Then how it gonna be optimized?

Whenever we update the variable (Custom Property) within the scope, it automatically update the values of property which used the same variable (Custom Property).

Pretty Cool ?

Lets see the code,

:root{
  --libg : white;
  --licolor : black;
  --borderleft : blue;
  --libghover : #e1e1e8;
  --lihovercolor : blue;
}
.sidebar {
  width: 220px;
  .light {
    li {
      background-color : var(--libg);
      color : var(--licolor);
      border-left : 5px solid var(--borderleft);
      &:hover {
        background-color : var(--libghover);
        color : var(--lihovercolor);
      }
    }
  }
}

Dark theme made by Custom Variable

.sidebar {
  .dark {
  --libg : #151f2a;
  --licolor : white;
  --borderleft : blue;
  --libghover : black;
  --lihovercolor : white;
  }
}

Final Thoughts

1. Redundant CSS reduced.
2. Easy to customize.
3. No need to track the CSS properties.

Hope you figure out the concept well. Let's see you on another journey. Thanks for reading.