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

Question

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)