How to implement theme changing with styled-components without a thousand props?

Question

Typesetting

The base variables in the project are placed in a separate baseLayout.js file: Then they are imported into styles.js, individual for each component:
export const baseColor = { color: 'fff' }

export const Button = styled.button` background: ${ baseColor.color } `

В общем, ничего необычного. Можно ли как-то реализовать, например, ту же темую тему, не прописывая куче компонент пропсы и пробрасывая их в стили? Мб нечто подобное переопределению css-переменных, где мы трогаем лишь значение переменной?

Answer 1

I found the most optimal solution for myself, when you don’t have to operate with classes and css variables, but you really want something like that, but you can’t forward a bunch of props or change the structure of variables.
If suddenly someone once stumbles upon this question - it may be useful. The answer is the styled-theming package

import styled, {ThemeProvider} from 'styled-components';
import theme from 'styled-theming';

const backgroundColor = theme('mode', {
  light: '#f1c40f',
  dark: '#f39c12',
});

const Button = styled.div`
  background-color: ${backgroundColor};
`;

export default function App() {
  return (
    <ThemeProvider theme={{ mode: 'light' }}>
      <Button>
        Primary Button
      </Button>
    </ThemeProvider>
  );
}

Answer 2

I'll show you how I did it (vue):

export default {
  data() {
    return {
      actualColor: 'light'
    };
  },

  methods: {

    changeColorLight: function(event){
      if(event){
        if(this.actualColor === 'monokai') {
          this.actualColor = "light";
          this.changeColorClass();
        };
      };
    },

    changeColorMonokai: function(event){
      if(event){
        if(this.actualColor === 'light') {
          this.actualColor = "monokai";
          this.changeColorClass();
        };
      };
    },

    changeColorClass: function() {
      let html = document.documentElement;
      html.className = this.actualColor;
    }
}

/******************************************************************************
  Colorscheme variables
******************************************************************************/
html.light{
  --background:#ffffff;
  --background_nav:#f3f3f3;
  --foreground:#800000;
  --foreground_script:#000000;
  --foreground_brackets:#800000;
  --foreground_script-brackets:#000000;
  --foreground_cursor:#000000;
  --selection:#add6ff;
  --counter:#237893;
}
html.monokai{
  --background:#272822;
  --background_nav:#1e1f1c;
  --foreground:#f92672;
  --foreground_script:#a6e22e;
  --foreground_brackets:#f8f8f0;
  --foreground_script-brackets:#f8f8f0;
  --foreground_cursor:#f8f8f0;
  --selection:#575b61;
  --counter:#90908a;
}
.content{
  grid-column:content;
  grid-row:1;
  background-color:var(--background);
}
/* ну и т.д. */