This is how you do it with vanilla CSS Modules

// vars.css
:root {
  --color-black: #222;
}


// myComponent.module.css
@import './vars.css';

.component {
  color: var(--color-black);
}

I would just use the default color vars on the element/body/whatever, then put the alternate theme colors in another class, and toggle the theme class via JS. Here's a demo.

$("button").on("click", function() {
  $("body").toggleClass("foo");
});

body {
  --red: red;
  --blue: blue;
  --yellow: yellow;
  background: #ccc;
  text-align: center;
  font-size: 5em;
}

.foo {
  --red: #ce1126;
  --blue: #68bfe5;
  --yellow: #ffd100;
}

.red {
  color: var(--red);
}

.blue {
  color: var(--blue);
}

.yellow {
  color: var(--yellow);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="red">RED</span> <span class="blue">BLUE</span> <span class="yellow">YELLOW</span>
<br>
<button>click me</button>

The way I'm using now looks pretty clean. So, I'm sharing it to all.

Use sass-resources-loader

This will include the @import to all your .scss files making the variables and mixins available across all the scss files while using css modules.

The [email protected] config

...
    module: {
      rules: [
        {
          test: /\.scss$/,
          loaders: [
            'style-loader',
            'css-loader?modules&importLoaders=1&localIdentName=[path][name]__[local]__[hash:base64:10]',
            'sass-loader',
            'sass-resources-loader',
            'import-glob-loader',
            'postcss-loader',
          ],
        },
     },
     plugins: [
       new webpack.LoaderOptionsPlugin({
        options: {
          postcss: [
            autoprefixer(),
          ],
          sassResources: [
            './app/constants/_style-variables.scss', //include your scss imports here
          ],
          context: path.resolve(__dirname, '../../')
        }
      })
     ]
...

Are you using CRA? If so, you can. You just have to make sure that you are using postcss and the postcss-modules-values plugin. NOTE: Haven't tested this without Create React App (yet), so if anyone has, it would help to know.

Now, all you need is create a stylesheet (or simply use the index.css, your choice), and do this:

@value blue: #0c77f8;
@value red: #ff0000;
@value green: #aaf200;

And now, from your component-scoped css file, just import and use (almost JS-like):

/* import your colors... */
@value colors: "./colors.css";
@value blue, red, green from colors;

.button {
  color: blue;
  display: inline-block;
}

Source(docs).