如何使用 Switch 和 withStyles() 动态更改主题的调色板类型（暗/亮）

Question

我正在尝试创建一个可以更改网站暗模式的开关。它在某种程度上适用于更改文本颜色。但是，即使使用 CssBaseline，背景和其他一切都保持不变

这里是重要的代码：

App.tsx

class App extends React.Component<Props, State> {
  curTheme: Theme;
  constructor(props: Props) {
    super(props);

    this.state = {
      theme: ThemeManagerInstance
    };

    this.curTheme = createMuiTheme(this.state.theme.getTheme);
  }


  render() {
    const classes = this.props.classes;
    this.curTheme = createMuiTheme(this.state.theme.getTheme);

    console.log("Dark status: " + (this.isDark()));

    return (
      <div className={classes.root}>
        <MuiThemeProvider theme={this.getTheme()}>
          <CssBaseline />
                 <FormControlLabel
                    control={
                      <Switch
                        checked={this.isDark()}
                        onChange={() => {
                          this.setState(state => {
                            this.state.theme.useDarkMode(
                              !this.isDark()
                            );
                            //   this.state.theme.getTheme().palette.type === // if (
                            //   "dark"
                            // ) {
                            //   this.state.theme.getTheme().palette.type =
                            //     "light";
                            // } else {
                            //   this.state.theme.getTheme().palette.type = "dark";
                            // }

                            console.log(this.getTheme().palette.type);

                            return state;
                          });
                        }}
                        color="primary"
                        value="dynamic-class-name"
                      />
                    }
                    label="Dark Mode"
                  />
          {/* code goes here */}
        </MuiThemeProvider>
      </div>
    );
  }



  getTheme() {
    return this.curTheme;
  }

  isDark() {
    return this.getTheme().palette.type === "dark"
  }
}

// export default App;

export default withStyles(
  styleJSON(createMuiTheme(ThemeManagerInstance.getTheme))
)(App);

主题.tsx

import blue from "@material-ui/core/colors/blue";
import createMuiTheme, {
  Theme,
  ThemeOptions
} from "@material-ui/core/styles/createMuiTheme";
import { PaletteOptions } from "@material-ui/core/styles/createPalette";
import { PaletteType } from "@material-ui/core";

const palette: PaletteOptions = {
  primary: {
    main: "#1976D2"
  },
  type: "light"
};

const defaultTheme = {
  palette: palette
};

export class ThemeManager {
  constructor(private theme: ThemeOptions) {
    this.useDarkMode(true);

    console.log(this.getTheme);
  }

  getThemePalette(): PaletteOptions | undefined {
    return this.theme.palette;
  }

  get getTheme() {
    return this.theme;
  }

  useDarkMode(dark: boolean) {
    const typeColor: PaletteType = dark ? "dark" : "light";

    const updatedTheme: ThemeOptions = {
      ...this.theme,
      palette: {
        ...this.theme.palette,
        type: typeColor
      }
    };

    this.theme = updatedTheme;
  }
}

const themeInstance = new ThemeManager(defaultTheme);

export default themeInstance;

index.js

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

如果听起来我在要求 sponefeeding 代码，请原谅，但老实说，我很困惑，因为我不明白如何处理来自 withStyles() 的重新加载样式信息

Answer 1

可以试试这个 https://github.com/bluelovers/ws-react/tree/master/packages/material-ui-theme-state

import { useTheme, createTheme } from 'material-ui-theme-state/esm/global';

创建主题

let bool = prefersLightMode();
let theme: ThemeOptions | Theme;
    let setTheme: IThemeExtra["setTheme"];

    ([theme, setTheme] = useState({
        palette: {
            type: bool ? 'light': 'dark',
        },
        //direction: 'rtl'
    }));
const muiTheme = createTheme(theme, {
        setTheme,
    }).theme;

    return (<MuiThemeProvider theme={muiTheme}>{props.children}</MuiThemeProvider>)

任何其他你想改变的主题

const { theme, setTheme } = useTheme();

setTheme(theme => {

                theme.palette.type = (theme.palette.type !== 'light') ? 'light' : 'dark';

            return theme;
        }, true)

现场演示 https://tpl-next-app.now.sh/