Github User Search App

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.

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👌

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! 🙂