social-media-dashboard-with-theme-switcher-master

Community feedback

• 

  Layla Wakily•200

  @LaylawakilyPosted 3 months ago

  great job

  Marked as helpful

  1
• 

  Mahmood•2,130

  @MahmoodHashemPosted 3 months ago

  You’ve done an excellent job; the design looks perfect!🎉

  However,

  For implementing dark mode, you’ve worked hard, though Tailwind CSS makes creating a dark mode toggler quite simple. Here’s how you can streamline the process:

  1. First of all, always configure the tailwind.config.js file to align with your project’s style(define a custom color palette and font family). Add all the necessary colors and fonts to the extend object under the theme section. This allows you to use these custom values throughout your project by referencing their names, such as text-navy or bg-light-grey.

  Example:

  /** @type {import('tailwindcss').Config} */
  export default {
    content: [
      "./index.html",
      "./src/**/*.{js,ts,jsx,tsx}",
    ],
    darkMode: "class", 
    theme: {
      extend: {
        colors: {
          "custom-purple": "#A729F5",
          "dark-navy": "#313E51",
          "navy": "#3B4D66",
          "grey-navy": "#626C7F",
          "light-bluish": "#626C7F",
          "light-grey": "#F4F6FA",
          "custom-green": "#26D782",
          'custom-red': "#EE5454",
          "yellow-200": "rgb(255, 241, 233)"
        },
        width: {
          "toggle-width": "35px", 
          "circle-size": "15px"
        },
        height:{
          'circle-size': "15px"
        },
        fontFamily: {
          rubik: "Rubik, sans-serif",
        },
        boxShadow: {
          sm: "0px 16px 40px 0px rgba(143, 160, 193, 0.14)",
        },
      },
    },
    plugins: [],
  }
  

  2. To enable dark mode, set darkMode to "class" in the Tailwind configuration. This allows you to toggle between light and dark themes using class variants. For example, you can apply a dark mode background color like this: bg-light-bluish dark:bg-navy.

  3. In your root component (e.g., App), create a state to manage theme toggling. Use a function to switch between light and dark themes by updating the className on the body element. This ensures the dark and light mode styles are applied dynamically.

  Example:

    const [theme, setTheme] = useState('light')
  
    function handleTheme() {
      setTheme(prev => prev === 'dark' ? 'light' : 'dark')
    }
  
  
    useEffect(() => {
      if (theme === 'light') {
        document.querySelector('body').className = 'light'
      } else {
        document.querySelector('body').className = 'dark'
      }
    }, [theme])
  
  

  👆 With this setup, you can easily switch between dark and light colors across your project.

  To learn more about Dark Mode with Tailwind, check out this guide from Tailwind CSS here.

  Marked as helpful

  0

  ---

  

  khaduj || خدوج•670

  @khaduj03Posted 3 months ago

  @MahmoodHashem Bro, Thank you so much. Your suggestions have really helped me.

  Jazakallahu Khairan 😊

  1

  

  Mahmood•2,130

  @MahmoodHashemPosted 3 months ago

  @khaduj03 و ایاکم

  1
• 

  Yacoub AlDweik•2,830

  @YacoubDweikPosted 3 months ago

  Hey! good job!

  Just few notes if u don't mind:

  I wish I could click on that toggle switch to switch the theme instead of exactly clicking on the circle inside it.

  Also the effect when I hover on any card is not smooth, I couldn't recognize the problem bcuz all of these tailwind styles.

  Keep it up Khadija

  Marked as helpful

  0

  ---

  

  khaduj || خدوج•670

  @khaduj03Posted 3 months ago

  @YacoubDweik Yeah, great suggestion! Thank u bro, I'll try to fix that And also, I made that animation like that with motion, but it seems it is not user-friendly??!!! 🤔

  By the way, seems like you're Arab.😁

  0

  

  Yacoub AlDweik•2,830

  @YacoubDweikPosted 3 months ago

  @khaduj03 It's like when I hover the background gets darker then there's a delay then I get the black box shadow.

  No I am Japanese :P yeah Arab

  0

  

  khaduj || خدوج•670

  @khaduj03Posted 3 months ago

  @YacoubDweik نعم أنا صنعته بهذا الشكل ، ولكن هل يبدو غير جيد🤔!!!؟

  😂نعم، فهمتُ يا أخي الياباني

  0

  

  Yacoub AlDweik•2,830

  @YacoubDweikPosted 3 months ago

  @khaduj03 آسف اتحدث اليابانية فقط لا اعرف هذه اللغة؟ هل هي لغة الفضائيين؟

  نعم لم يعجبني مع الاسف ذوقي صعب ومتميز وراقي

  0

  

  khaduj || خدوج•670

  @khaduj03Posted 3 months ago

  @YacoubDweik مفهوم😁 أحاول أن أغيره شكرا کثیرا😊

  لا لا 😅هذه اللغة أجمل لغة في العالم، أعتذر لو كتبت خطاء لأنني لا أعرف كثيرا هذه اللغة

  0

  

  Yacoub AlDweik•2,830

  @YacoubDweikPosted 3 months ago

  @khaduj03 مفهوم أنتِ الجميلة :P

  1