Как реализовать смену цвета в React?

Question

[Oversec]

На сайте есть переключатель цвета и две темы, тёмная и светлая. Как это возможно реализовать с помощью react? Знаю как прост ос помощью css, но так как использую webpack всё немного сложнее. Может есть возможность это реализовать на react`e?

Comments

[Максим]

Oversec, не совсем понятно, как webpack вам мешает реализовать это на css?

Answer 1

[Vlad Feninets]

просто хранишь стейт с выбранной темой в компоненте и вешаешь обработчики для смены стейта

class MyComponent extends Component {
	constructor() {
		super()

		this.state = {
			currentTheme: "dark"
		}
	}

	changeTheme(themeName) {
		this.setState({
			currentTheme: themeName
		})
	}

	render() {
		return (
			<div>
				...

				<button onClick={() => this.changeTheme("dark").bind(this)}> {/* байнд для доступа к this внутри ф-и */}
					I wanna dark!
				}
				</button>

				<button onClick={() => this.changeTheme("light").bind(this)}>
					I wanna light!
				</button>
			</div>
		)
	}
}

можешь это все хранить в корневом компоненте, тогда просто вызываешь callback, который дойдет до самого верха и поменяет стейт, а дальше передаешь это как props дочерним компонентам и в зависимости от выбранной темы рендеришь что нужно.

onClick={() => this.props.goDark()} /* например это вызов из ребенка, который очень глубоко */


/* в это уже самый верхний (корневой) компонент */

goDark() { ... }
goLight() { ... }

<RootComponent>
	<Child currentTheme={this.state.currentTheme} />
</RootComponent>

можешь это еще дополнительно куда-то в локалсторадж писать и при инициализации читать оттуда.

------------------

ну а по поводу цсс, просто в зависимости от значения в переменной currentTheme - загружаешь нужную css, либо же в самом рендере навешиваешь разные стили/классы

<div className={ this.props.currentTheme === 'dark' ? 'dark-wrapper' : 'light-wrapper' }>
	<button className={this.props.currentTheme === 'dark' ? 'btn-primary-yellow' : 'btn-primary-blue' }></button>
</div>

Comments

[Islam Ibakaev]

не надо биндить в твоём случае

[Oversec]

Я просто думал это через react + scss. Благо в проекте у меня все цвета в переменных и думал как лучше подключать те или иные переменные от выбранной темы?

.dark-theme {
    $background-color: #000;
}

.light-theme {
    $background-color: #fff
}

У меня была только такая идея

Answer 2

[Islam Ibakaev]

можно так попробовать codepen.io/dagman/pen/KWbXRg

class App extends React.Component {
	
	toggle() {
		this.page.classList.toggle('dark');
	}
	
	render() {
		return (
			<div 
				className="page" 
				ref={page => this.page = page}
			>
				<button 
					className=" center toggler"
					onClick={this.toggle.bind(this)}
				>
					Toggle
				</button>
			</div>
		);
	}
}

ReactDOM.render(
	<App />,
	document.getElementById('root')
);