Issue
I've been set the task of adding a toggle on an angular web application which will allow users to switch from the default light mode theme to a dark mode theme. I can't find a way to successfully implement this.
When I got the task there was a _variables.scss
file in the styles directory. This contained variables for colours, fonts, sizing and spacing. The colours were in maps and then each shade was assigned to a variable using the map-get()
method e.g $shade-0: map-get($shades, 'shade-0')
.
Initially I thought that I could create a themes.scss
file and import it alongside _variables.scss
. This file would then link to 2 further scss files lightTheme.scss
and darkTheme.scss
. Each theme file would hold a list of colour variables similar to the original ones in variables.scss
. I can get this to work for 1 theme or the other, but I can't switch between theme files.
darkTheme.scss
$shades: (
'shade-6': #f5f5f5,
'shade-5': #BDBDBD,
'shade-4': #9E9E9E,
'shade-3': #757575,
'shade-2': #616161,
'shade-1': #303437,
'shade-0': #404447,
);
$shade-0: map-get($shades, 'shade-0');
$shade-1: map-get($shades, 'shade-1');
$shade-2: map-get($shades, 'shade-2');
$shade-3: map-get($shades, 'shade-3');
$shade-4: map-get($shades, 'shade-4');
$shade-5: map-get($shades, 'shade-5');
$shade-6: map-get($shades, 'shade-6');
$colors: (
'forest': #239F28CC,
'aqua': #8ab4f8,
'ruby': #C93939CC,
'zing': #20CAC3CC,
'carrot': #E9853ECC,
'grape': #7542F2CC,
'midnight': #433F5CCC,
'slate': #657786CC,
);
$forest: map-get($colors, 'forest');
$aqua: map-get($colors, 'aqua');
$ruby: map-get($colors, 'ruby');
$zing: map-get($colors, 'zing');
$carrot: map-get($colors, 'carrot');
$grape: map-get($colors, 'grape');
$midnight: map-get($colors, 'midnight');
$slate: map-get($colors, 'slate');
$bg-color: map-get($shades, 'shade-1');
$border-color: map-get($shades, 'shade-2');
$border-dark-color: map-get($shades, 'shade-3');
$text-color: map-get($shades, 'shade-6');
$muted: map-get($colors, 'slate');
$subtle: map-get($shades, 'shade-4');
lightTheme.scss
$colors: (
'forest': #239F28,
'aqua': #186EEF,
'ruby': #C93939,
'zing': #20CAC3,
'carrot': #E9853E,
'grape': #7542F2,
'midnight': #433F5C,
'slate': #657786,
);
$shades: (
'shade-0': #ffffff,
'shade-1': #f5f5f5,
'shade-2': #d8d8d8,
'shade-3': #bbbbbb,
'shade-4': #979797,
'shade-5': #535353,
'shade-6': #0c0c0c,
);
$shade-0: map-get($shades, 'shade-0');
$shade-1: map-get($shades, 'shade-1');
$shade-2: map-get($shades, 'shade-2');
$shade-3: map-get($shades, 'shade-3');
$shade-4: map-get($shades, 'shade-4');
$shade-5: map-get($shades, 'shade-5');
$shade-6: map-get($shades, 'shade-6');
$forest: map-get($colors, 'forest');
$aqua: map-get($colors, 'aqua');
$ruby: map-get($colors, 'ruby');
$zing: map-get($colors, 'zing');
$carrot: map-get($colors, 'carrot');
$grape: map-get($colors, 'grape');
$midnight: map-get($colors, 'midnight');
$slate: map-get($colors, 'slate');
$bg-color: map-get($shades, 'shade-1');
$border-color: map-get($shades, 'shade-2');
$border-dark-color: map-get($shades, 'shade-3');
$text-color: map-get($shades, 'shade-6');
$muted: map-get($colors, 'slate');
$subtle: map-get($shades, 'shade-4');
themes.scss
@import 'global/lightTheme';
@import 'global/darkTheme';
I did try changing the variables from scss variables to css variables and use them with var()
but I ran into difficulties as certain component use darken()
, lighten()
and mix()
and therefore don't compile. Is there a way to get this working?
Solution
I prepared a CodePen to demonstrate theme switching with CSS variables.
I define the color variables depending on the app container's class (.light
or .dark
). Simply toggling those classes will then change the site's theme.
Bear in mind, that CSS variables are not fully supported in all browsers (94% globally).
Read more about CSS variables.
Answered By - Barthy
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.