Github User Search App

Community feedback

• 

  Elaine•11,360

  @elaineleung

  Posted almost 3 years ago

  Hi Andrew, about the light/dark mode, you can check out Adam Argyle's post here, which helped me a lot when I was building my calculator with 3 themes: https://web.dev/building-a-theme-switch-component/. This is useful if you want to use prefers-color-scheme before the page loads. His tutorial also shows how the icon can be changed, so that might help you out as well! Also, if you're interested, here is the calculator app I built using his tutorial.

  00

  Marked as helpful
• 

  Md5 dalton•1,430

  @md5dalton

  Posted almost 3 years ago

  Hello Andrew. Congratulations on finishing the challenge.

  Here is one of multiple ways you can achieve switching between light and dark mode.

  • First let's setup some CSS custom properties for colors

  :root {
      --color-bg: #FFFFFF;
      --color-text: #222731;
  }
  body.dark {
      --color-bg: #141d2f;
      --color-text: #FFFFFF;
  }
  body {
      background-color: var(--color-bg);
      color: var(--color-text);
  }
  

  • Second let's write a JavaScript class to handle the logic:

  // Helper fn for getting DOM Element
  const getDOM = selector => document.querySelector(selector)
  
  class ThemeToggler
  {
      defaultTheme = "light"
      altTheme = "dark"
  
      theme = ""
  
      constructor (elm) {
          this.getTheme()
          this.updateUI()
          elm.addEventListener("click", () => this.toggleTheme())
      }
  
      getTheme () {
          this.theme = localStorage.getItem("theme") || this.defaultTheme
      }
  
      setTheme (theme) {
          this.theme = theme
          localStorage.setItem("theme", theme)
      }
  
      toggleTheme () {
  
          this.getTheme()
  
          const newTheme = this.theme !== this.defaultTheme ? this.defaultTheme : this.altTheme  
          
          this.setTheme(newTheme)
          this.updateUI()
  
      }
  
      updateUI () {
          document.body.classList.remove(this.defaultTheme, this.altTheme)
          document.body.classList.add(this.theme)
  
          const span = getDOM(".toggle span")
          const icon = getDOM(".toggle img")
  
          span.innerText = this.theme
          icon.src = `./assets/icon-${this.theme === this.altTheme ? "sun" : "moon"}.svg`
  
      }
  }
  
  new ThemeToggler(getDOM(".toggle"))
  

  • Lastly modify your HTML a bit by removing the 2 spans and replace them with just one <span></span>. The same goes for the icon image tags: <img alt="theme icon" />

  You may check the original code on my GitHub repo: Theme Toggler

  I hope that helps👌

  00

  Marked as helpful
• 

  Vanza Setia•27,715

  @vanzasetia

  Posted almost 3 years ago

  Hello, Andrew Simons! 👋

  Congratulations on completing this challenge! 🎉

  Before diving into JavaScript, we need to get the HTML right first for the theme switcher.

  • First, it is not a link (anchor tag). It should be either a button or a checkbox input. Remember that, anchor tags are for navigation. For doing an action (like in this case switching theme), use the button element (or checkbox input).
  • Second, the users should be able to click the text content to switch the theme. The icon itself is a very small target to click or touch (for mobile users).
  • Lastly, I recommend reading the inclusive component article about Toggle Buttons to help create an accessible theme switcher.

  I notice that the value for the office is the GitHub URL of the user's profile. It should be the company value. So, I would recommend fixing this. 🙂

  Hope this helps! 🙂

  11