React ant design cannot switch to dark style manually without using Setting Drawer-CodePudding

I am trying to put a Switch component in navigation bar where I can switch website to dark style which is in the settings drawer in ant design pro layout.

 <SettingDrawer
            pathname={location.pathname}
            enableDarkTheme
            getContainer={() => document.getElementById('test-pro-layout')}
            settings={settings}
            onSettingChange={(changeSetting) => {
              setSetting(changeSetting);
            }}
            disableUrlParams={false}
/>

As you SettingDrawer has a property enableDarkTheme, but this is for the functionality and not for the switching. Is there any way to attach dark style to state change? enter image description here

I have tryed to change the css file as I saw it in other stackoverflow questions but it only changed the color of the components it did not enable the dark style(which is in beta)

CodePudding user response：

In the Ant Design Pro layout, the SettingDrawer component is used to manage settings for the layout, including the ability to enable a dark theme. The enableDarkTheme property of the SettingDrawer component is a boolean value that indicates whether the dark theme should be enabled.

To attach the dark style to a state change, you can use the onSettingChange property of the SettingDrawer component to handle changes to the settings object. This property takes a callback function as its value, and this function will be called whenever the settings are changed.

E.g. using the onSettingChange property to attach the dark style to a state change:

<SettingDrawer
  pathname={location.pathname}
  enableDarkTheme
  getContainer={() => document.getElementById('test-pro-layout')}
  settings={settings}
  onSettingChange={(changeSetting) => {
    // Update the settings object with the new values
    setSetting({ ...settings, ...changeSetting });

    // If the "enableDarkTheme" setting is true, apply the dark style
    if (changeSetting.enableDarkTheme) {
      // Apply the dark style here
    }
  }}
  disableUrlParams={false}
/>

In the code above, the onSettingChange callback function is used to update the settings object with the new values, and then check if the enableDarkTheme setting is true. If it is, the dark style can be applied by adding the necessary CSS styles.

CodePudding user response：

To switch between dark and light styles in Ant Design Pro without using the SettingDrawer component, you can use the useContext hook to access the global settings context. This context contains the current settings for the layout, including the enableDarkTheme property. You can use this property to toggle between dark and light styles in your navigation bar.

Here is an example of how you could use the useContext hook and the global settings context to switch between dark and light styles in your navigation bar:

import { Switch } from 'antd';
import { SettingsContext } from '@ant-design/pro-layout';

const MyNavigationBar = () => {
  const { settings, setSetting } = useContext(SettingsContext);

  return (
    <Switch
      checked={settings.enableDarkTheme}
      onChange={(value) => {
        setSetting({ ...settings, enableDarkTheme: value });
      }}
    />
  );
};

In this example, the useContext hook is used to access the global settings context and the settings and setSetting functions that are provided by the context. The Switch component is then used to toggle the enableDarkTheme property in the settings object. When the Switch component is toggled, the onChange callback function is called, and the enableDarkTheme property is updated in the settings object using the setSetting function. This will trigger a re-render of the layout, and the dark or light style will be applied based on the new value of the enableDarkTheme property.

Note that the SettingsContext object is only available if the ProLayout component is used in your project. If you are not using the ProLayout component, you will need to use a different approach to switch between dark and light styles.

One alternative approach is to use the useState hook to manage the enableDarkTheme state in your component, and then use this state to toggle between dark and light styles. You can use the setTheme method provided by the Ant Design ThemeProvider component to apply the dark or light style based on the value of the enableDarkTheme state.

Here is an example of how you could use the useState hook and the setTheme method to switch between dark and light styles in your navigation bar:

import { Switch } from 'antd';
import { ThemeProvider, setTheme } from 'antd/lib/index';

const MyNavigationBar = () => {
  const [enableDarkTheme, setEnableDarkTheme] = useState(false);

  return (
    <ThemeProvider
      theme={(currentTheme) => {
        if (enableDarkTheme) {
          setTheme('dark');
        } else {
          setTheme(currentTheme);
        }
        return currentTheme;
      }}
    >
      <Switch
        checked={enableDarkTheme}
        onChange={(value) => {
          setEnableDarkTheme(value);
        }}
      />
    </ThemeProvider>
  );
};

In this example, the useState hook is used to manage the enableDarkTheme state in the MyNavigationBar component. The Switch component is then used to toggle the enableDarkTheme state. When the Switch component is togg