Skip to content

Latest commit

 

History

History
34 lines (24 loc) · 1.17 KB

README.md

File metadata and controls

34 lines (24 loc) · 1.17 KB

CSS-Theming

A 5-minute approach to implement themes/dark mode in your front-end

This repository is an example of a framework/library agnostic way to implement themes using CSS and some Javascript. I've used React along with Semantic UI in this example.

You know the drill:

$ git clone https://github.com/bearded-impala/CSS-Theming.git
$ yarn
$ yarn start

OR

$ git clone https://github.com/bearded-impala/CSS-Theming.git
$ npm
$ npm start

Overview

Here's what we are doing:

  • Writing a CSS mixin containing classes of the DOM elements we want to style as a part of our theme
  • Including our mixin in the stylesheet meant to be imported in the entry javascript(index.js) or the topmost component(App.js) along with color variables as its arguments.
  • Writing a short script to change the class of the "body element" using a dropdown in our App component