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/>

Answer 1

import { useThemeMode } from "flowbite-react";

function YourComponent() {
  const { mode } = useThemeMode();
  
  const isDarkMode = mode === 'dark';

  // Now you can use isDarkMode as a boolean
  return (
    <CartesianGrid
      strokeDasharray="3 3"
      horizontal={true}
      vertical={false}
      stroke={isDarkMode ? "#374151" : "#e5e7eb"}
    />
  );
}

In this example, useThemeMode() returns an object with a mode property. We check if this mode is 'dark' and store the result in isDarkMode, which will be a boolean value. You can then use isDarkMode anywhere in your component to conditionally render or style elements based on the current theme mode.

Answer 2

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;

Answer 3

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();