Components with multiple themes

4 thoughts on “Components with multiple themes”

1. You can use Local scoped CSS or “CSS Modules” (experimental) for that.

   Just give your component a theme property and use the styles from this.

   Example using CSS Modules:

   import baseStyle from "./baseStyle.css"
   class Component {
     render() {
       var { theme } = this.props;
       return <div className={theme.main + " " + baseStyle.main}>
         <div className={theme.inner + " " + baseStyle.main}></div>
       </div>;
     }
     // ...
   }

   /* themeA.css */
   .main {
     background: black;
   }
   .inner {
     color: white;
   }

   /* themeB.css */
   .main {
     background: white;
   }
   .inner {
     color: blue;
   }

   Useage:

   import themeA from "component/themeA.css";
   import themeB from "component/themeB.css";
   import customTheme from "./customThemeForComponent.css";
   import Component from "component";
   
   <Component theme={themeA} />
   <Component theme={themeB} />
   <Component theme={customTheme} />

   CSS Module mode: https://github.com/webpack/css-loader#module-mode

2. I realize that this thread is fairly old, but it has the most information about this problem so I’m hoping someone here might be able to help.

   I’m working with a whitelabeled website that has multiple customer domains pointing to the same set of servers. The backend returns a different CSS bundle based on the domain with custom branding. I’d like to be able to do the following:

   • Define a different set of brand_1_theme.css, brand_2_theme.css, files with custom colors, etc.
   • Require a theme file in my CSS code. Seems like postcss-theme might be the best option here, but I’m open to anything.
   • Have ExtractTextPlugin output a different set of CSS files for each theme, and have ManifestPlugin output a manifest file with mappings for all themes.
   • It’d be great if we didn’t have to build the CSS files for all themes in one go, rather than having to run the whole build pipeline for every theme.

   Has anyone done anything similar to this? What has been there approach?

3. import() works:

   if (this.context.theme === 'theme-a') {
       import('./theme-a.css').then(() => {
           /* ... */
       });
   else (this.context.theme === 'theme-b') {
       import('./theme-b.css').then(() => {
           /* ... */
       });
   }

   OR

   import(`./${this.context.theme}.css`).then(() => {
       /* ... */
   });

4. I’m dealing with the same problem currently, I try to figure it out without any invasive of codes. Then I write a webpack plugin themes-switch to do that. Maybe it can help you.
   Now I just use variables to define different colors and dimensions, then webpack would generate themes for me, and the style formats can be less, postcss and sass. Then I can make a realtime-switch in my app.

   theme-a.less

   @color-main: #0A6EFA;
   @color-text: #000;
   

   theme-b.less

   @color-main: #222A42;
   @color-text: #FFF;
   

   default.less

   @import 'theme-a.less';
   

   main.less

   @import 'default.less';
   .main {
     background: @color-main;
   }
   

   In use

   changeTheme('theme-b', 'theme-b-123456.css')

Comments are closed.