https://github.com/helleworldgit/sass-light-dark-theme
This is an example of how to create a Light/Dark theme project in SASS.
https://github.com/helleworldgit/sass-light-dark-theme
css dark light mode sass scss scss-directives
Last synced: 8 months ago
JSON representation
This is an example of how to create a Light/Dark theme project in SASS.
- Host: GitHub
- URL: https://github.com/helleworldgit/sass-light-dark-theme
- Owner: helleworldGIT
- License: mit
- Created: 2019-09-16T10:19:29.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2019-09-16T11:02:32.000Z (almost 7 years ago)
- Last Synced: 2024-11-14T15:20:58.643Z (over 1 year ago)
- Topics: css, dark, light, mode, sass, scss, scss-directives
- Language: CSS
- Size: 158 KB
- Stars: 5
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# SASS-Light-Dark-theme
This is an example of how to create a Light/Dark theme project in SASS using @if SASS directive.
## How it works
First of all use your console inside the 'css' folder in the project. Type
```
sass main.scss:main.css --watch
```
now SASS will be looking for changes!
Inside the main.scss file you will find a key variable named "$theme". This variable only allows 2 values: dark, light.
Depending in which one you use, the color variables will change to display a 'Light mode' or a 'Dark mode'.
## How it is structured
This project has 2 level-design-styles as I call them. First level include positions, fonts, font-sizes, etc., every style that doesn't need a color variable. These styles are global and inside mixins.
Second level design styles involve only color variables and they are the key why Light/Dark mode work.
## The @if directive in SASS
You can use this directive for any purpose you have in mind. I used it to build this easy-and-fast project of a Dark/Light theme. It usually depends in the value of a variable. It is **a must** to define the allowed values of the variables you'll be using in the @if directive condition.
>For example, as I defined it in my project:
```scss
// Theme variable. Allowed values: 'dark', 'light'. Light by default.
$theme: light;
```
Keep in mind that this is a fast way to show your clients a live light/dark mode demonstration of their product.
### You will find me also in
[Twitter](https://twitter.com/helleworld_) [Behance](https://www.behance.net/desiremcarmona)