Activate Dark Theme

To activate the dark-theme functionality you will have to:

• Go to fractal.config.js, located at the root of the project, find fractal.set('darktheme', false); and set it to true.
• Go to assets/css/framework/_custom-variables.scss, find the $enable-dark-theme variable and set it to true.

  	
  /*
   Dark Theme
   Activate or deactivate dark theme mode for component templates
   inactive by default
  */
  fractal.set('darktheme', false);
  
  /*
    Project theme(s)
  */
  fractal.set('theme', {
  	'Light Theme': 'light-theme',
  	'Dark Theme':'dark-theme'
  });
  	
  

• Use the custom-prop-color-fallback @mixin located in assets/css/styles/tools/mixins/_color-mixins.scss to apply color to elements.

  	
  // replace this
  color: map-deep-get($token-color-brand-map,"primary","100");
  //with this
  @include customPropColorFallback("color", primary-100, other-fallback-variable-for-dark-theme);
  	
  

• Find the assets/css/base-styles/tools/mixins/theme-custom-properties/ folder and use the _dark and _light mixins to define your theme dependent custom properties.