Как динамически изменить тему в приложении - PullRequest
Новая
       10

Как динамически изменить тему в приложении

2 голосов
/ 28 апреля 2020

Я пытаюсь изменить тему моего приложения реакции со светлого на темное (и наоборот), используя кнопку или кнопку переключения (я решу это позже). Дело в том, что я импортирую темы '. css непосредственно из bootswatch (в настоящее время я использую "Minty" в качестве светлой темы и хочу использовать "Darkly" в качестве темной темы (https://bootswatch.com/ )). Пока я только обнаружил, что есть компонент ThemeProvider, но ему нужна тема в виде файла. js, в который вы должны экспортировать то, что хотите (и я не могу этого сделать, поскольку у меня есть только. css). Я также нашел ThemeSwitcher на github (https://github.com/raythree/react-bootstrap-theme-switcher), но, похоже, он использует bootstrap v3 и мне действительно нужен v4. В Reddit также есть ветка, предлагающая импортировать их в папку publi c и изменять их (https://www.reddit.com/r/reactjs/comments/9lzm8g/react_switching_themes_css/), но я не думаю, что это хорошая практика. Кто-нибудь может мне помочь?

edit: Я попробовал решение Reddit: теперь оно меняет тему, но на мгновение я определенно вижу некоторые чистые html вещи, которые мне совсем не нравятся. Это мой код 

import React, { useState } from "react";
import ReactDOM from "react-dom";
import Tabs from "./Tabs";
import "react-toastify/dist/ReactToastify.min.css";
import { Helmet } from "react-helmet"

export const Application = () =>{
    const [theme, setTheme] = useState(true)

    const changeThemeHandler = (event) => {
        event.preventDefault();
        setTheme(!theme)
    }

    return(
        <>
            <button onClick={(event) => changeThemeHandler(event)}>Change Theme</button>
            <Helmet>
                <link rel="stylesheet" href={`${process.env.PUBLIC_URL}/${theme ? 'lightbootstrap.min.css' : 'darkbootstrap.min.css'}`} />
            </Helmet>
            <Tabs />
        </>
    )
}

ReactDOM.render(<Application />, document.getElementById("root"));

Как я могу настроить его для плавного перехода от светлой темы к темной и наоборот?

...