How can I change the theme-css file depending on what theme is selected?

[rough ocean]

I have 2 css file, for light and dark theme:

import "src/styles/themes/kendo-dark.scss";
import "src/styles/themes/kendo-light.scss";

but I havent seen any documentation on how to switch the css files depending on selection, i've only seen specific overwrites in the examples.

Could someone tell me how I can accomplish the above?

[covert kelp]

Hey Please try it :
Using Decorators: Storybook allows the use of decorators that essentially wrap stories with extra markup or components. You can utilize a decorator to switch between different styles:

import { withCssResources } from '@storybook/addon-cssresources';

export default {
title: 'Your Story',
decorators: [withCssResources],
parameters: {
cssresources: [{
id: dark,
code: <style>${require('!to-string-loader!css-loader!sass-loader!src/styles/themes/kendo-dark.scss')}</style>,
picked: true,
},
{
id: light,
code: <style>${require('!to-string-loader!css-loader!sass-loader!src/styles/themes/kendo-light.scss')}</style>,
picked: false,
}],
}
}

Then, you can switch between the two styles using the CSS Resources addon panel.

Note: To use the CSS Resources addon, you'll need to install it with npm install @storybook/addon-cssresources and add it to your addons list in .storybook/main.js:

module.exports = {
addons: ['@storybook/addon-cssresources/register'],
};

Switching themes using parameters: If you'd like to switch the entire theme of your Storybook based on parameters, you could use something like:

export default {
title: 'Your Story',
parameters: {
themes: {
default: 'light',
list: [
{ name: 'light', class: 'kendo-light', color: '#ffffff' },
{ name: 'dark', class: 'kendo-dark', color: '#000000' },
],
Decorator: Story => {
const themeClass = document.querySelector('body').getAttribute('class');
require(src/styles/themes/${themeClass}.scss);
return <Story />;
},
},
},
};

This method may require custom webpack configuration to ensure that the require statement correctly processes the SCSS files.

might be helpful to check this link: https://storybook.js.org/docs/angular/configure/features-and-behavior

[rough ocean]

This looks very promising, Thank you very much. Ill report back once I tried it!

[rough ocean]

When I tried to run npm install @storybook/addon-cssresources I am seeing a react dependency error...is there an equivalent for angular ?

[covert kelp]

did you try with sudo ?

[rough ocean]

sudo npm install?

[covert kelp]

yes

if you have mac

[rough ocean]

I dont think that would work for the server deployment (azure)

[covert kelp]

or if you have windows try administrator

aha!

I dont have experince in Azure

[rough ocean]

for completeness, that is the error...

but, this is not a react project.

[covert kelp]

I see

let me search more about this issue on angular

[covert kelp]

please follow this guide :

Part 1
create dark mode and light mode with toggle button
To enable Dark and Light mode with your own style in Angular Storybook 7, you need to follow these steps:

1. Set up two sets of styles: Create two CSS or SCSS files, one for the dark theme and one for the light theme. You can put your custom color schemes, background colors, text colors, etc. in these files.

2. Create a Service to manage theme changes: Create an Angular service (e.g., ThemeService) that can keep track of the current theme and provide methods to switch the theme. It can use localStorage to remember the user's theme preference between sessions.

3. Apply the theme in the Angular components: In your Angular components, use the ThemeService to apply the correct CSS class depending on the current theme. You can use Angular's Renderer2 class to manipulate the DOM and apply the appropriate CSS class.

4. Create a toggle button: Create a button in your Storybook that toggles the theme. This button should call the method in the ThemeService that switches the theme.

part 2

Here's a simple example of how you might implement this:

1. Theme Service:

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class ThemeService {
  private darkThemeValue: boolean;

  constructor() {
    this.darkThemeValue = localStorage.getItem('darkTheme') === 'true';
  }

  set darkTheme(val: boolean) {
    this.darkThemeValue = val;
    localStorage.setItem('darkTheme', val.toString());
  }

  get darkTheme() {
    return this.darkThemeValue;
  }
}

2. Applying the theme in a component:

import { Component, Renderer2, Inject } from '@angular/core';
import { ThemeService } from './theme.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  constructor(private renderer: Renderer2, private themeService: ThemeService, @Inject(DOCUMENT) private document: Document) {
    this.themeService.darkTheme ? this.renderer.addClass(this.document.body, 'dark-theme') : this.renderer.removeClass(this.document.body, 'dark-theme');
  }

  toggleTheme() {
    this.themeService.darkTheme = !this.themeService.darkTheme;
    this.themeService.darkTheme ? this.renderer.addClass(this.document.body, 'dark-theme') : this.renderer.removeClass(this.document.body, 'dark-theme');
  }
}