question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Docs not applying base theme in manager.js

See original GitHub issue

Describe the bug Migrating to manager.js has caused Docs to not apply my theme which has a base of ‘dark’

To Reproduce Steps to reproduce the behavior:

  1. Create a theme in manager.js and set the base to ‘dark’.

Expected behavior Docs would have a base theme of ‘dark’ as in 5.2.

Screenshots Canvas: Screen Shot 2020-01-16 at 12 54 14 PM

Docs: Screen Shot 2020-01-16 at 12 54 20 PM

Code snippets manager.js

import {addons} from '@storybook/addons';
import {create} from '@storybook/theming/create';
import {APP_COLORS as color} from '../src/styles/colors';

const theme = create({
  base: 'dark',
  colorPrimary: color.SW_SKY_BLUE,
  colorSecondary: color.SW_SKY_BLUE,
});

addons.setConfig({
  theme,
});

System: Environment Info:

System: OS: macOS 10.15.2 CPU: (8) x64 Intel® Core™ i7-7820HQ CPU @ 2.90GHz Binaries: Node: 10.16.0 - /usr/local/bin/node Yarn: 1.13.0 - ~/.yarn/bin/yarn npm: 6.13.6 - /usr/local/bin/npm Browsers: Chrome: 79.0.3945.117 Firefox: 70.0.1 Safari: 13.0.4 npmPackages: @storybook/addon-actions: ^5.3.4 => 5.3.4 @storybook/addon-centered: ^5.3.4 => 5.3.4 @storybook/addon-docs: ^5.3.4 => 5.3.4 @storybook/addon-jest: ^5.3.4 => 5.3.4 @storybook/addon-knobs: ^5.3.4 => 5.3.4 @storybook/addon-links: ^5.3.4 => 5.3.4 @storybook/addon-storysource: ^5.3.4 => 5.3.4 @storybook/addons: ^5.3.4 => 5.3.4 @storybook/react: ^5.3.4 => 5.3.4 npmGlobalPackages: @storybook/cli: 3.4.4

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:4
  • Comments:8 (7 by maintainers)

github_iconTop GitHub Comments

1reaction
shilmancommented, Jan 25, 2020

@palashkaria if you use addParameters on options.theme I’d expect it to work in docs without having to do any other workarounds.

0reactions
ndelangencommented, Jan 28, 2020

I’ll open a new issue for https://github.com/storybookjs/storybook/issues/9498#issuecomment-575600598

Allow specifying manager/preview/(docs?) themes in main.js and recommend that

Read more comments on GitHub >

github_iconTop Results From Across the Web

Configuring Storybook: 6 Tips You Can't Miss | by Zheng Li
The manager.js is to control the behaviour of Storybook's UI. You can set UI options and configure Storybook's theme. It is optional and...
Read more >
Theming - Storybook
The theme is replaced, not combined. Theming docs. Storybook Docs uses the same theme system as Storybook's UI but is themed independently from...
Read more >
Creating and applying themes for embedded dashboards and ...
Creating a custom theme. To create a custom theme, click Add Theme: Next, add style and color specifications for each desired setting on...
Read more >
How to customize both dark and light themes in Storybook 6.0
First click will make it remain light theme, but now it will use YOUR light theme. The solution to this is to initialize...
Read more >
Override Flex UI themes, branding and styling - Twilio
Then set your custom theme inside the Flex Configuration colorTheme property and apply it during plugin initialization. ThemePlugin.js. import { FlexPlugin } ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found