I'm starting to integrate storybook to our application, and one of the things I would like to achieve is this: We have a dark and light theme, which via sass changes a css variables accordingly:

.dark-theme {
  @include theme-colors(true);
}

and: 
@mixin theme-colors($dark-theme) {
  --wc-black-to-white-alpha-7: #{if($dark-theme, $white-alpha-7, $black)};

Normaly, we have a service which responsible of this logic, but the UI component does not inject it by itself. Now I was wondering if there's a way to use a function, which is not part of the specific component, to do something like that. I've tried looking at "storybook-dark-mode" (https://storybook.js.org/addons/storybook-dark-mode) which got me the point where I can add a "dark-theme" class to the document of storybook, but not in the app itself (inside the iframe). Is it possible doing something like this:

import { CommonModule } from '@angular/common';
import { componentWrapperDecorator, Meta, moduleMetadata, Story } from '@storybook/angular';
import { chipStyles } from '@wc/wc-models/src/lib/enums/general';
import { WcChipComponent } from './wc-chip.component';

const styleValues = Object.values(chipStyles);

function toggleDarkTheme() {
 add the .dark-theme class here.
}

export default {
  title: 'wc-chip',
  component: WcChipComponent,
  argTypes: {
    style: {
      options: styleValues,
      control: { type: 'select' },
    },
    _chipClicked: { action: 'clicked' },
  },
 ..........

and use toggleDarkTheme in the story somehow?