javascriptangularstorybookthemingangular-storybook

Storybook: can't change theming color on UI

I'm trying to create my own theme in Storybook, and I'm following this: https://storybook.js.org/docs/angular/configure/theming

For now I copied the the files from the sites, and that works, but I can't seem to change the colors to my preference. When I for example change color on appBg to green, it still stays as hotpink. Can someone help, have I missed a step?

manager.js

// .storybook/manager.js

import { addons } from '@storybook/addons';
import yourTheme from './YourTheme';

addons.setConfig({
 theme: yourTheme,
});

YourTheme.js


import { create } from '@storybook/theming';

export default create({
  base: 'light',

  colorPrimary: 'hotpink',
  colorSecondary: 'deepskyblue',

  // UI
  appBg: 'white',
  appContentBg: 'silver',
  appBorderColor: 'grey',
  appBorderRadius: 4,

  // Typography
  fontBase: '"Open Sans", sans-serif',
  fontCode: 'monospace',

  // Text colors
  textColor: 'black',
  textInverseColor: 'rgba(255,255,255,0.9)',

  // Toolbar default and active colors
  barTextColor: 'silver',
  barSelectedColor: 'black',
  barBg: 'hotpink',

  // Form colors
  inputBg: 'white',
  inputBorder: 'silver',
  inputTextColor: 'black',
  inputBorderRadius: 4,

  brandTitle: 'My custom storybook',
  brandUrl: 'https://example.com',
  brandImage: 'https://place-hold.it/350x150',
});
Solution

  • I solved the problem! I had to update to the latest Storybook version and run with --no-manager-cache