Skip to content
Submitted almost 2 years ago

Fylo Landing Page w/HTML SCSS JS

Abula•150
@Abula28
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Fylo landing page with two column layout
  • HTML
  • CSS
2junior

Design comparison

SolutionDesign

Solution retrospective

I wanted to add dark mode but I failed. If someone know any solution I would like to listen you.

Community feedback

  • Joshua Dail•290
    @joshdailPosted almost 2 years ago

    Hi Abula,

    Here's what I've found helpful as far as adding a dark mode into a project.

    On the <body> tag in the html, I add a data attribute for light mode or dark mode. I use the data attribute to define the color schemes and switch between them. You could also use a class instead of a data attribute if you want.

    <body data-display="light">

    CSS custom properties are very helpful for adding a dark mode or other settings. What I do is define my basic color scheme with properties on the :root element at the beginning of my file. It takes some time to set up, but it will really help later on. Here's an example from a different project I did:

    :root {
  --clr-text-placeholder: hsl(184, 14%, 56%);
  --clr-background-body: hsl(185, 41%, 84%);
  --clr-background-input: hsl(189, 41%, 97%);
  --clr-text-alert: hsl(9, 31%, 58%);
  --clr-text-dark: hsl(183, 100%, 15%);
  --clr-text-faded: hsl(186, 14%, 43%);
}

    Then, I add CSS rules that will replace the original colors if the mode is changed to dark. This is just a small example, but you can understand the idea:

    body[data-display="dark"] {
  --clr-background-body: hsl(185, 41%, 4%);
  --clr-background-calculator: hsl(184, 27%, 22%);
  --clr-background-input: hsl(189, 41%, 7%);
  --clr-text-alert: hsl(45, 87%, 59%);
  --clr-text-dark: hsl(183, 60%, 10%);
  --clr-text-faded: hsl(0, 0%, 100%);
}

    Then, in my CSS rules, I use the custom properties. So when I set background color, instead of using the actual value I use my custom property.

    .alert {
  color: var(--clr-text-alert);
}

.input {
  background-color: var(--clr-background-input);
  color: var(--clr-text-dark);
}

    To switch themes, I'll usually have a button on the page. You can set up an event listener on the button that will switch the data-attribute (or class) on the body tag when the button is pressed. Here's a snippet from a script I wrote for a project.

    displayBtn.addEventListener("click", e => {
  body.getAttribute("data-display") === "dark"
    ? setDisplayMode("light")
    : setDisplayMode("dark")
  displayBtn.blur()
})

function setDisplayMode(displayMode) {
  sessionStorage.setItem("SPLITTER_DISPLAY_MODE", displayMode)
  body.setAttribute("data-display", displayMode)
}

    The session storage code will make sure it stays in light or dark mode if the page is refreshed, but it won't save the light/dark mode setting if the browser window closes. You'd have to use something like local storage for that.

    This is just one solution, there are other ways you can add dark mode as well.

    This article on CSS Tricks has some good info on adding dark mode: CSS Tricks: A Complete Guide to Dark Mode on the Web

    You can also look on Youtube for Kevin Powell, he has some videos on making a light and dark mode or different color schemes. I've found his videos very helpful in my own learning.

    Kind regards,

    Josh Dail

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord