deep-jade
deep-jade11mo ago

How do I make the header light mode by default?

How do I make the header light mode by default?
3 Replies
kapa.ai
kapa.ai11mo 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
kapa.ai11mo ago
<@185746765356597257> kapa.ai is still learning and improving, please let us know how it did by reacting below
absent-sapphire
absent-sapphire11mo ago
which UI provider are u using ?