Change the $colors variable in Ionic 3 for Dark Mode

[SimonIoa]

Hello i want to be able to change the primary, secondary etc $colors variables in Ionic 3 in order to implemeny dark mode.

variable.scss

$primary-color: #333!default;

.dark-theme {
   $primary-color: whitesmoke ;
 }

 $colors: (
  primary:$primary-color,
 )

So using Sass !default is like adding an “unless this is already assigned” qualifier to your variable assignments. I guess i want the opposite of this. To redefine a scss variable Any Ideas?

[AndreRet]

You will use something like this -

$colors: (
  primary:    #488aff,
  secondary:  #32db64,
  danger:     #f53d3d,
  light:      #f4f4f4,
  dark:       #222
);

More information on their documents here

[SimonIoa]

I have that Andre i want to change the $colors when in dark mode.

$colors: (
  primary: $primary-color,
  secondary: whitesmoke,
  white:  #fff,
  gold: #ab9333,
  darkGrey:     #333,
  danger:     #333,
  lightGrey:      #666,
  dark:       #000,
  grey : #4b4b4b,
  topMenu : #000,
  navbar: rgba(51, 51, 51, 0.1),
  video: #e94335,
  audio: #33a802,
  picture: #fabb04,
  text: #4284f3,
  twitter: #1da1f4, google: #dc4a38, vimeo: #23b6ea, facebook: #3b5998
);

i want to change that when

.dark-theme
{
//variables here?
}

[AndreRet]

If I look at the documentation. you can use -

dark: (
    base: #55acee,
    contrast: #ffffff
  )