How do I make the header light mode by default?

3 Replies

kapa.ai•13mo ago

Hi @dakaalim. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To make the header light mode by default, you need to set the default theme to "light" in your application's main component (usually App.tsx or App.js). Here is an example of how to do this using the ThemeSwitcherProvider from the react-css-theme-switcher package:

import { ThemeSwitcherProvider } from "react-css-theme-switcher";

function App() {
  const currThemes = {
    dark: `${process.env.PUBLIC_URL}/antd.dark-theme.css`,
    light: `${process.env.PUBLIC_URL}/antd.light-theme.css`,
  };

  return (
    <ThemeSwitcherProvider themeMap={currThemes} defaultTheme="light">
      {/* ... rest of your app */}
    </ThemeSwitcherProvider>
  );
}

export default App;

import { ThemeSwitcherProvider } from "react-css-theme-switcher";

function App() {
  const currThemes = {
    dark: `${process.env.PUBLIC_URL}/antd.dark-theme.css`,
    light: `${process.env.PUBLIC_URL}/antd.light-theme.css`,
  };

  return (
    <ThemeSwitcherProvider themeMap={currThemes} defaultTheme="light">
      {/* ... rest of your app */}
    </ThemeSwitcherProvider>
  );
}

export default App;

In this example, the defaultTheme prop is set to "light", which means the light theme will be used when the application first loads. You can find more details about this in the refine blog post (https://refine.dev/blog/how-to-add-darkmode-in-ant-design) from which this extract was taken. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•13mo ago

<@185746765356597257> kapa.ai is still learning and improving, please let us know how it did by reacting below

genetic-orange•13mo ago

which UI provider are u using ?