Custom theme not applied

[dividgithub]

I'm trying to apply a custom theme using react-toolbox-themr, but none of the changes I make are being applied to the components.. Here's my config:

App.js:

...
import Layout from 'react-toolbox/lib/layout/Layout';
import Button from 'react-toolbox/lib/button/Button';
...
import custom from '../assets/theme/theme.js';
import ThemeProvider from 'react-toolbox/lib/ThemeProvider';
...
<ThemeProvider theme={custom}>
  <Layout>
      <NavDrawer active={this.state.drawerActive}
          pinned={this.state.drawerPinned} permanentAt='xxxl'
          onOverlayClick={ this.toggleDrawerActive }>
      <Menu />
      </NavDrawer>
      <Panel bodyScroll={ true }>
          <AppBar leftIcon='menu' onLeftIconClick={ this.toggleDrawerActive } className={ styles.header }/>
          <div style={{ flex: 1, overflowY: 'auto', padding: '1.8rem' }} className={ styles.content }>
              { this.props.children }
              <Button>Hello</Button>
          </div>
      </Panel>
      <Sidebar pinned={ this.state.sidebarPinned } width={ 5 }>
          <div><IconButton icon='close' onClick={ this.toggleSidebar }/></div>
          <div style={{ flex: 1 }}>
              <p>Supplemental content goes here.</p>
          </div>
      </Sidebar>
  </Layout>
</ThemeProvider>

webpack.config.js

module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /(node_modules|bower_components)/,
        include: resolve(__dirname, 'src'),
        use: 'babel-loader'
      },
      {
        test: /\.css$/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              modules: true,
              sourceMap: true,
              importLoaders: 1,
              localIdentName: "[name]--[local]--[hash:base64:8]"
            }
          },
          "postcss-loader"
        ]
      }
    ]
  },
...

postcss.config.js

module.exports = {
  plugins: {
    'postcss-import': {
      root: __dirname,
    },
    'postcss-mixins': {},
    'postcss-each': {},
    'postcss-cssnext': {
      features: {
          customProperties: {
            variables: {
              'background-color': '#000' // for example
            },
          },
        }
    },
    'postcss-reporter': {
      clearMessages: true
    }
  },
};

package.json

"reactToolbox": {
    "include": [
      "BUTTON",
      "LAYOUT"
    ],
    "customProperties": {
      "color-primary": "var(--palette-pink-700)"
    },
    "output": "src/assets/theme"
  }

I'm running react-toolbox-themr and the assets are being generated, although no custom styles are included. Classes are also applied to the components as far as I can see, but again, components look the same no matter what I do.. The generated CSS file is included in my index' head, of course.

I'm pretty sure I'm missing something obvious here..

[mattzuba]

I believe your webpack config and postcss config are pointless here because react-toolbox-themr doesn't use them. Why aren't you adding the background-color variable to your customProperties of reactToolbox in package.json?

[dividgithub]

Thanks for looking into this. Thing is, not even "color-primary": "var(--palette-pink-700)" is being used/evaluated by react-toolbox-themr ..

[icd2k3]

Same problem here, no matter what I try I can't seem to make the theme take effect:

import theme from 'rttheme';
import ThemeProvider from 'react-toolbox/lib/ThemeProvider';

const CoreLayout = () => (
  <ThemeProvider theme={theme}>
    <REACT_TOOLBOX_ELEMENTS />
  </ThemeProvider>
);

I can confirm that rttheme is a big javascript object of the elements I want themed:

But they never take effect... here is my theme prefs:

{
  "include": [
    "AUTOCOMPLETE",
    "AVATAR",
    "BUTTON",
    "CARD",
    "CHECKBOX",
    "CHIP",
    "DATE_PICKER",
    "DIALOG",
    "DRAWER",
    "DROPDOWN",
    "INPUT",
    "LAYOUT",
    "LINK",
    "LIST",
    "MENU",
    "NAVIGATION",
    "OVERLAY",
    "PROGRESS_BAR",
    "RADIO",
    "RIPPLE",
    "SLIDER",
    "SNACKBAR",
    "SWITCH",
    "TABLE",
    "TABS",
    "TIME_PICKER",
    "TOOLTIP"
  ],
  "customProperties": {
   "animation-duration": "0.25s",
    "color-text": "var(--palette-red-50)",
    "color-background": "var(--palette-red-50)",
    "color-primary": "var(--palette-red-50)",
    "color-accent": "var(--palette-red-50)",
    "color-accent-dark": "var(--palette-red-50)",
    "color-primary-contrast": "var(--palette-red-50)",
    "color-accent-contrast": "var(---palette-red-50)"
  }
}

Note that I'm just setting everything to red to test if it works...

• react-toolbox v 2.0.0-beta.6
• react-toolbox-themr v 1.0.2

[icd2k3]

Edit: I've also tried importing raw RT components as outlined here

import Input from 'react-toolbox/lib/input/Input';
import Button from 'react-toolbox/lib/button/Button';

but then I end up with no styles at all!

[MarkGalloway]

@icd2k3 You need to import the css file generated by themr to style your raw components eg/ import '../../../assets/react-toolbox/theme.css';

[csalvato]

Having same issue here. Trying to change the typeface but running into issues. My files...

package.json

{
  "name": "movementa-ui",
  "version": "0.1.0",
  "private": true,
  "engines": {
    "node": "6.10.0",
    "npm": "3.10.10"
  },
  "dependencies": {
    "flexboxgrid": "^6.3.1",
    "flexboxgrid-helpers": "^1.1.1",
    "history": "^3.0.0",
    "material-design-icons-iconfont": "^3.0.3",
    "postcss": "^5.2.15",
    "postcss-cssnext": "^2.9.0",
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "react-redux": "^5.0.3",
    "react-router": "^3.0.2",
    "react-toolbox": "^2.0.0-beta.6",
    "react-toolbox-themr": "^1.0.2",
    "redux": "^3.6.0",
    "roboto-fontface": "^0.7.0",
    "typeface-jura": "0.0.22"
  },
  "devDependencies": {
    "@kadira/storybook": "^2.21.0",
    "eslint": "^3.17.0",
    "postcss-loader": "^1.3.3",
    "react-scripts": "0.9.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "toolbox": "react-toolbox-themr",
    "storybook": "start-storybook -p 9009 -s public",
    "build-storybook": "build-storybook -s public"
  },
  "reactToolbox": {
        "include": [
            "AUTOCOMPLETE",
            "AVATAR",
            "BUTTON",
            "CARD",
            "CHECKBOX",
            "CHIP",
            "DATE_PICKER",
            "DIALOG",
            "DRAWER",
            "DROPDOWN",
            "INPUT",
            "LAYOUT",
            "LINK",
            "LIST",
            "MENU",
            "NAVIGATION",
            "OVERLAY",
            "PROGRESS_BAR",
            "RADIO",
            "RIPPLE",
            "SLIDER",
            "SNACKBAR",
            "SWITCH",
            "TABLE",
            "TABS",
            "TIME_PICKER",
            "TOOLTIP"
        ],
    "customProperties": {
      "variables": {
        "preferred-font": "'Jura', sans-serif;"
      }
    },
        "output": "src/toolbox"
    }
}

Styles in Chrome

No matter what custom property I try to set, none of them take hold.

The default theme is being applied though, because the components are styled, but just not with the updated properties:

Using create-react-app, if that makes a difference.

Wondering what I can do to get this to work?

[darklilium]

Having the same issue. I just downloaded the lib and im having troubles on getting the custom theme on red-500 for all the components.

I have my package.json:

...
  "scripts": {
    "sturto": "node_modules/.bin/cross-env NODE_ENV=development node_modules/.bin/webpack-dev-server --colors --config webpack.config.js",
    "start": "start npm run dev:server & start npm run gulp",
    "dev:server": "webpack-dev-server --history-api-fallback",
    "build": "node_modules/.bin/cross-env NODE_ENV=production UV_THREADPOOL_SIZE=100 webpack --config webpack.config.js",
    "deploy": "gh-pages -d build",
    "gulp": "gulp",
    "prod:build": "webpack --optimize-minimize --progress --colors",
    "toolbox": "react-toolbox-themr"
  },
  "reactToolbox":{
    "include": [
      "BUTTON",
      "DATE_PICKER",
      "INPUT"
    ],
    "customProperties": {
      "color-primary": "var(--palette-red-500)",
      "color-primary-dark": "var(--palette-red-700)",
      "color-accent": "var(--palette-pink-a200)",
      "color-accent-dark": "var(--palette-pink-700)",
      "color-primary-contrast": "var(--color-dark-contrast)",
      "color-accent-contrast": "var(--color-dark-contrast)"
    },
    "output": "src/css/toolbox"
  },
...

My webpack config (using version 2):

const path = require('path');
const webpack = require('webpack');

const settings = {
  entry: {
    bundle: [
      "react-hot-loader/patch",
      "./src/index.js"
    ]
  },
  output: {
    filename: "[name].js",
    publicPath: "/",
    path: path.join(path.join(__dirname, 'dist'), 'js'),
    libraryTarget: "amd",
  },
  resolve: {
    //extensions: [".js", ".json", ".css"]
    extensions: ['.scss', '.css', '.js', '.json','.webpack.js', '.web.js', '.js', '.jsx']

  },
  //devtool: 'inline-source-map',
  devtool: 'source-map',
  module: {
    rules: [
      {
        //test: /\.js?$/,
         test: /(\.js|\.jsx)$/,
        loader: 'babel-loader',
        options: {
          presets: [
            ["es2015", { modules: false }],
            "stage-2", "stage-1",
            "react"
          ],
          plugins: [
            "transform-node-env-inline"
          ],
          env: {
            development: {
              plugins: ["react-hot-loader/babel"]
            }
          }
        }
      },
      {
      //  test: /\.css$/,
      test: /(\.scss|\.css)$/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              modules: true,
              sourceMap: true,
              importLoaders: 1,
              localIdentName: "[name]--[local]--[hash:base64:8]"
            }
          },
          "postcss-loader" // has separate config, see postcss.config.js nearby
        ]
      }
    ]
  },
  externals: [
      function(context, request, callback) {
          if (/^dojo/.test(request) ||
              /^dojox/.test(request) ||
              /^dijit/.test(request) ||
              /^esri/.test(request)
          ) {
              return callback(null, "amd " + request);
          }
          callback();
      }
  ],
  devServer: {
  //  contentBase: path.resolve("src/www"),
  //  publicPath: "http://localhost:8080/", // full URL is necessary for Hot Module Replacement if additional path will be added.
  /*  quiet: false,
    hot: true,
    port: 443,
    host: "127.0.0.1",

    historyApiFallback: true,
    inline: true
    */

    inline: true,
    port: 443,
    host: "127.0.0.1",
    historyApiFallback: true

  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin(),
    new webpack.LoaderOptionsPlugin({
      debug: true
    }),
  ],
};

module.exports = settings;

[danielmichaelni]

I had this problem as well, and I realized I forgot to link the generated css in my html file.

[KevinDanikowski]

@danielmichaelni I know this is a bit late, but do you mind showing your code? Not sure where exactly the import is supposed to come from. Thank you!

[mienaikoe]

To follow up with what @danielmichaelni said, it's important to note that react-toolbox-themr creates two files, a css file and a js file. The js file is used to create a provider, which is in turn used to apply the classNames that get set.

The css file is used for expressing the styles. It's up to you for where to stick it, but there are a few options:

1) Stick it directly in your html: In my case, I literally put it in my public folder, and added: <link rel="stylesheet" href="/react-toolbox/theme.css" />

2) Stick it in a css import if you're using webpack. I've identified a potential bug on this. react-toolbox-themr uses only the local name for applying classNames to toolbox components, while most react-toolbox documentation tells you to use the pattern [name]--[local]--[hash:base64:8]

As a workaround for webpack: change config->module->rules->[your css rule]->use->style-loader->options->localIdentName from [name]--[local]--[hash:base64:8] to [local] and import your css somewhere (you don't need to use it in your code.

EDIT: This breaks some styles on react-toolbox itself. Would not recommend.

EDIT 2: I've tried making this work for hours. It is impossible.

[usmansc]

Well after many years I have encountered the same issue. Were you able to solve it?