search

jsakamoto / BlazingStory

The clone of "Storybook" for Blazor, a frontend workshop for building UI components and pages in isolation.
https://jsakamoto.github.io/BlazingStory/
Mozilla Public License 2.0
319 stars 16 forks source link

Question about default theme #11

Open bitrott opened 1 year ago

bitrott commented 1 year ago

This is really great! Works well and is exactly what my project needs. Quick question though, the Storybook is running in "dark mode", but I need it to be "light" or at least customizable. Is there a way to do this, or am I missing something obvious? Thanks again!

jsakamoto commented 1 year ago

@bitrott Thank you for your feedback!

Unfortunately, there is no way to choose a dark or light theme manually or customize the style of the Blazing Story app screen smartly so far. I'll provide the ability to control custom theming in the future version. If you don't hesitate to write <style> tags inline on an index.html, you can override the Blazing Story app screen style as a workaround for the moment, like below.

<!-- This is a wwwroot/index.html in the Blazing Story app project -->
...
<body>
    <!-- 
    You can add a <style> tag as the first child of the <body> tag and 
    override CSS custom properties and any other styles, at that <style> tag. 
    Use the "body .color-scheme-container" selector to override CSS custom properties for the Blazing Story app screen.
    -->
    <style>
        body .color-scheme-container {
            --bs-back-color: blue;
            --bs-add-on-panel-back-color: darkblue;
            --bs-toolbar-back-color: royalblue;
            --bs-dimmed-text-color: #ccc;
        }
    </style>
   ....

image

And, you can see all of the CSS custom properties for the light theme from the link below.

https://github.com/jsakamoto/BlazingStory/blob/main/BlazingStory/wwwroot/css/styles.css#L9

bitrott commented 1 year ago

Yeah, no worries. I was planning to override if there wasn't a way to do it OOTB. Thanks for responding!

jsakamoto commented 1 year ago

Hi @bitrott,

Today, I released the new version of the "Blazing Story", preview 13. This version allows you to pin the color scheme to be "light" or "dark" by setting the BlazingStoryApp component's parameter.

@* 📄 App.razor *@
<BlazingStoryApp 
    Assemblies="new []{ typeof(App).Assembly }"  
    AvailableColorSchemes="AvailableColorSchemes.Light">
    @* This app will be displayed "light" mode only 👆*@
</BlazingStoryApp>

https://github.com/jsakamoto/BlazingStory/#%EF%B8%8F-configure-prefers-color-scheme

Please check it out.

bitrott commented 1 year ago

Awesome, thanks so much. I'd already created the overrides but this will be cleaner and easier to support. I prefer a dark theme, but the UX group I work with is used to light theme, now I just won't have to worry about it. 👍