Simple Dictionary

Community feedback

• 

  Kushil Perera•130

  @kushil9Posted 4 months ago

  Wowzer! I just checked out your dictionary web app, and it’s awesome! It’s super easy to use, like a cozy little book that knows all the words.👊😊

  0

  ---

  

  Zeyu Long•260

  @ZoeLong98Posted 4 months ago

  Thank you for the feedback! Figma do help a lot🤓

  0
• 

  Dylan Heslop•2,360

  @dylan-dot-cPosted 4 months ago

  This is cool one issue seems to be that my phone is set to dark mode in system but it seems because of that I can't switch to light mode as it's fixed on dark mode.

  0

  ---

  

  Zeyu Long•260

  @ZoeLong98Posted 4 months ago

  interesting🧐 The mode you see initially is determined by your system theme, but I don't understand why it can't be changed.

  if you are interested, here's the corresponding code. I simply add "dark:" in className to enable dark mode

  useEffect(() => { // Check if the user has a preferred theme const storedTheme = localStorage.getItem("theme"); const preferredTheme = storedTheme || (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"); setTheme(preferredTheme as "light" | "dark"); document.documentElement.classList.add(preferredTheme); }, []);

  const toggleTheme = () => { const newTheme = theme === "light" ? "dark" : "light"; setTheme(newTheme); localStorage.setItem("theme", newTheme); document.documentElement.classList.remove(theme); document.documentElement.classList.add(newTheme); };

  0

  

  Dylan Heslop•2,360

  @dylan-dot-cPosted 4 months ago

  @ZoeLong98 I'm looking at the code and the code is alright, could be a bit better but I dont think thats the issue with the dark mode not functioning properly... I'm thinking its how you implemented the darkmode via tailwind. One weird thing I realized was that the search input changes bgcolor when theme has changed and it's the only one that does so.

  So I think that with the elements that you used you might explicitly need to tell them which color it needs to be when on dark mode... for the searchinput you have bg-custom-lighter dark:bg-custom-darker the dark: class is what helps tailwind to know that when its on dark mode it must use these colors. I think one way to solve this is to explicitly write what colors it needs to be on dark vs light... or you could format your html code to use reusable classNames for text that changes color per theme and group them together example

  .text-custom-medium {
      @apply text-grey dark:text-white;
  }
  

  I think the latter is better as you already have reuseable classes throughout your code.

  0

  

  Dylan Heslop•2,360

  @dylan-dot-cPosted 4 months ago

  @ZoeLong98 On the more functional side now, you could also implement localStorage for the font-family, so a user don't have to select their favorite font everytime, if its not the default.

  const getPreferredTheme = () => {
      const storedTheme = localStorage.getItem("theme");
      const preferredTheme =
        storedTheme ||
        (window.matchMedia("(prefers-color-scheme: dark)").matches
          ? "dark"
          : "light");
      return preferredTheme
  }
  
  

  you could use getPreferredTheme as a function in the useState so you dont have to set it as "light" when it might change to dark. const [theme, setTheme] = useState<"light" | "dark">(getPreferredTheme());

  you could then use the useEffect with a theme dependency to change the class on the document element and update local storage thus cleaning up the toggleTheme function and making your code more modular.

  This should be it, all the best and take care

  Marked as helpful

  0

  

  Zeyu Long•260

  @ZoeLong98Posted 4 months ago

  @dylan-dot-c Thank you for your advice😃 I've refined that part to make it more concise and effective.

  1