Как реализовать смену темы с помощью styled-components без тысячи пропсов?

Question

[F1eX]

Базовые переменные в проекте вынесены в отдельный файл baseLayout.js:
export const baseColor = { color: 'fff' }
Затем они импортируются уже в индивидуальный для каждой компоненты styles.js:

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

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

Comments

[WbICHA]

Как вариант можно в baseColor и аналогах хранить var(--some-color), а значения переменным задавать в одном месте и при необходимости менять стайлд компоненты с этими переменными в корневом компоненте.

Answer 1

[F1eX]

Нашел для себя наиболее оптимальное решение, когда оперировать классами и css-переменными не приходится, но что-то подобное очень хочется, а пробрасывать кучу пропсов или менять структуру переменных - нельзя.
Если вдруг кто-то когда-то наткнется на этот вопрос - может будет полезным. Ответ - пакет styled-theming

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

[Spaceoddity]

Покажу как у меня сделано (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);
}
/* ну и т.д. */