Light dark logo switch

Question

So i'm currently using Flowbite's components to build my website but having issues with a light/dark switch. The problem doesent lie on the actual switch itself, that i have working but the issue is that in my navbar i would like to have my logo, which is in SVG format, both for the light and then dark verison of the theme. My problem is that there's only these two links explaining how the dark / light theme actually work. Here are the links:

https://flowbite-react.com/theme https://flowbite.com/docs/customize/dark-mode/

I have currently tried this code but it doesent work:

import React from "react";

const LogoSwitch = () => {
  const theme = useThemeMode().theme.;

  return (
    <div>
      {theme === "dark" ? (
        <a href="./">
          <img
            className="block h-8 w-auto"
            src={window.location.origin + "/images/logo-dark.svg"}
            alt="Tribeto logo"
          />
        </a>
      ) : (
        <a href="./">
          <img
            className="block h-8 w-auto"
            src={window.location.origin + "/Assets/logo-light.svg"}
            alt="Tribeto logo"
          />
        </a>
      )}
    </div>
  );
};

export default LogoSwitch;

I would like to create this as a seperate component such that i can make a import in the navbar like:

import Logo from "./logoSwitch"

And then add it where i has to go with

<Logo/>

One thing I just noticed now is that your `const theme = useThemeMode().theme.;` has an extra dot at the end. — Rafael Monteiro, Jul 04 '23 at 23:06

score 0 · Answer 1 · answered Jul 04 '23 at 20:22

Try this (worked here using Next.js):

import { useThemeMode } from "flowbite-react";

Then, in the component:

const [ mode ] = useThemeMode();

Now you can use mode just like you used theme on your example.

NOTE: You can also import setMode and toggleMode to change the mode:

const [ mode, setMode, toggleMode ] = useThemeMode();

score 0 · Answer 2 · answered Jul 04 '23 at 20:55

You are using flowbite, which means you are using tailwind under the hood, so you receive dark mode support because of the dark:{*} class variant directly in the element so your code will look like below:

import React from "react";

const LogoSwitch = () => {


return (
  <div>

      <a href="./">
        <img
          className="hidden dark:block h-8 w-auto"
          src={window.location.origin + "/images/logo-dark.svg"}
          alt="Tribeto logo"
        />
     </a>
   
    <a href="./">
      <img
        className="block dark:hidden h-8 w-auto"
        src={window.location.origin + "/Assets/logo-light.svg"}
        alt="Tribeto logo"
      />
    </a>

   </div>
     );
};

export default LogoSwitch;

Light dark logo switch

2 Answers2