Автор оригинала: James Ugbanu.
Я получил запрос на запись на тему света/темного режима в приложении React. В настоящее время тема коммутации – это такая функция, которую теперь у большинства приложений, и это интересно, используя эту функцию, как некоторые (включая меня) предпочитают темный режим, а не в режиме света. Хотя я знаю, что несколько других также предпочитают легкий режим. Поэтому темирование очень важно, чтобы удовлетворить пользователей своим предпочтением.
В этом руководстве я буду использовать некоторые библиотеки для достижения этого, но до этого мы должны загрузить наше приложение;
npx create-react-app my-app cd my-app npm start
Читать дальше здесь Если вы не можете начать это.
Теперь мы можем перейти к структуре проекта. Мы устанавливаем материал UI, который является библиотекой пользовательского интерфейса и реагировать на перо для значков. До этого мы создадим четыре (4) файла;
Home.js theme.js topnav.js constants.js
Ваша папка SRC должна выглядеть как выше. Чтобы установить материал интерфейса и реагировать на перью –
npm install @material-ui/core react-feather - save
Я не собираюсь использовать какие-либо государственные библиотеки управления, такие как API redux или Context, потому что я хочу, чтобы вы понять основы, а затем применить его к своему собственному проекту с любым государственным управлением по вашему выбору. Кроме того, я не буду хранить значение состояния в LocalStrage, поэтому мы потеряем последние настройки на обновлении.
Очистить App.js , на Topnav.js , Theme.js и constants.js вставьте код ниже;
Constants.js
export const THEMES = {
LIGHT: 'LIGHT',
DARK: 'DARK'
};
Constants.js Держит в темных и легких значениях режима. Это помогает нам легко изменить значения темы в одном месте, а также избегать ошибок опечатки при повторении на разных компонентах.
Theme.js.
import { colors, createMuiTheme } from '@material-ui/core';
import { THEMES } from './constants';
const themesOptions = [
{
name: THEMES.LIGHT,
palette: {
type: 'light',
background: {
default:'#008FE6',
dark: '#f4f6f8',
paper: colors.common.white
},
primary: {
main: '#008FE6'
},
secondary: {
main: '#0000'
},
text: {
primary: colors.blueGrey[900],
secondary: colors.blueGrey[600]
}
}
},
{
name: THEMES.DARK,
palette: {
type: 'dark',
background: {
default: '#282C34',
dark: '#1c2025',
paper: '#282C34'
},
primary: {
main: '#3EA7E5'
},
secondary: {
main: '#00609A'
},
text: {
primary: '#e6e5e8',
secondary: '#adb0bb'
}
}
}
];
export const createTheme = (config = {}) => {
const themeOptions = themesOptions.find((theme) => theme.name === config.theme);
const theme = createMuiTheme(themeOptions);
return theme;
};
В Theme.js Мы используем CreateMuitheMe, которая является функцией из материала UI для создания темы приложения. Хотя мы прошли Тематические тематики В качестве параметра, который содержит правильный параметр для выбранной темы. Не волнуйтесь, я объясню, что в App.js.
Topnav.js.
import React from 'react';
import {
AppBar,
Box,
Hidden,
IconButton,
Toolbar,
Tooltip,
makeStyles,
} from '@material-ui/core';
import { Menu as MenuIcon, Sun as LightIcon, Moon as DarkIcon } from 'react-feather';
import { THEMES } from './constants';
const useStyles = makeStyles((theme) => ({
root: {
zIndex: theme.zIndex.drawer + 100,
...theme.name === THEMES.LIGHT ? {
boxShadow: 'none',
backgroundColor: theme.palette.primary.main
} : {},
...theme.name === THEMES.DARK ? {
backgroundColor: theme.palette.background.default
} : {},
color: '#fff'
},
toolbar: {
minHeight: 75,
},
}));
const TopNav = ({ toggle, themeState }) => {
const classes = useStyles();
return (
s
{themeState.mode === 'LIGHT' ?
);
};
export default TopNav;
Мы выполнили условный чек в Makestyles. Он проверяет цвет темы с постоянным цветом, затем устанавливает соответствующий цвет фона. Я объясню значение реквизита в App.js Отказ
Добавьте этот код ниже на Home.js.
Home.js.
import React from 'react';
import { makeStyles } from '@material-ui/core';
const useStyles = makeStyles((theme) => ({
root: {
backgroundColor: theme.palette.background.dark,
display: 'flex',
height: '100vh',
overflow: 'hidden',
width: '100%'
},
}));
const Home = ({className, ...rest}) => {
const classes = useStyles();
return (
);
};
export default Home;
Давайте импортируем весь компонент, который мы создали для App.js.
App.js.
import React, { useState } from 'react';
import { ThemeProvider } from '@material-ui/core';
import TopNav from './TopNav';
import { createTheme } from './Theme';
import Home from './Home';
import { THEMES } from './constants';
const App = () => {
const [themeState, setThemeState] = useState({
mode: 'LIGHT'
});
const toggle = () => {
const mode = themeState.mode === THEMES.LIGHT ? THEMES.DARK : THEMES.LIGHT;
setThemeState({ ...themeState, mode: mode });
};
const theme = createTheme({ theme: themeState.mode });
return (
);
};
export default App;
Во-первых, ThemeProvider – это функция из материала UI, которую мы используем для обертывания наших вариантов цвета, поэтому его можно пропустить все через приложение. Мы создаем функцию Toggle для переключения между состояниями, а затем передавать его в компонент TopnaV в качестве реквизита. Мы используем React Cooks Уместите хранить текущую тему.
Это оно!!! Теперь вы можете переключаться между каждым режимом темы.
Полный код здесь – github.com/jamesugbanu/react-theme-change.