themesberg / flowbite-react

Official React components built for Flowbite and Tailwind CSS
https://flowbite-react.com
MIT License
1.86k stars 416 forks source link

DarkModeToggle button doesn't show light theme button icon on switchin theme #1312

Closed Hann1bal closed 6 months ago

Hann1bal commented 6 months ago

Steps to reproduce

  1. Set <DarkThemeToggle iconLight={FaRegMoon} iconDark={IoSunny}/> to the navbar.
  2. Click on button
  3. DarkMode showing button icon but light not

Current behavior

image -at the light mode and image -at the dark mode.

Expected behavior

image - dark image - light

I think the svg needs to change the value of the dark: parameter because adding hidden before dark: has no effect and doesn't change the currently active svg. After playing around with the code I came to the conclusion that changing dark:hidden to dark:block changes the icon.

Context

browser chrome last release version node version >18 packages:


{
  "name": "graphedior",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "@microsoft/signalr": "^8.0.0",
    "autoprefixer": "^10.4.18",
    "axios": "^1.6.2",
    "flowbite-react": "^0.7.3",
    "mkcert": "^3.2.0",
    "mobx": "^6.12.0",
    "mobx-react-lite": "^4.0.5",
    "postcss": "^8.4.35",
    "react": "^18.2.0",
    "react-contexify": "^6.0.0",
    "react-dom": "^18.2.0",
    "react-icons": "^4.12.0",
    "react-notifications-component": "^4.0.1",
    "react-router": "^6.21.0",
    "react-router-dom": "^6.21.0",
    "react-select": "^5.8.0",
    "reactflow": "^11.10.1",
    "tailwindcss": "^3.4.1"
  },
  "devDependencies": {
    "@types/react": "^18.2.43",
    "@types/react-dom": "^18.2.17",
    "@typescript-eslint/eslint-plugin": "^6.14.0",
    "@typescript-eslint/parser": "^6.14.0",
    "@vitejs/plugin-react": "^4.2.1",
    "eslint": "^8.55.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.5",
    "typescript": "^5.2.2",
    "vite": "^5.0.8",
    "vite-plugin-mkcert": "^1.17.1"
  }
}```
Hann1bal commented 6 months ago

Sory, i found the error. first i modify

  1. tailwind config like that

    export default {
    content: [
    './src/**/*.{js,jsx,ts,tsx}',
    'node_modules/flowbite-react/**/*.{js,jsx,ts,tsx}',
    
    ],
    theme: {
    extend: {},
    },
    plugins: [
    // ...
    require('flowbite/plugin'),
    ],
    };
  2. Make tailwind cli css file from instruction on official tailwind docs

  3. Do not use cdn.tailwind in code because it broken some lib logic.