dark-light

by marusti

HTML

<html lang="en" data-theme="light">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/main.css">
    <title>Adding dark theme to your site</title>
</head>
<body>
    <!-- container -->
    <div class="container">
        <!-- heading -->
        <h1>Section Engineering Education</h1>
        <!-- toggle switch contaner -->
        <div class="toggle-container">
            <input type="checkbox" id="switch" name="theme" /><label for="switch">Toggle</label>
        </div>
            <!-- close toggle switch container -->
            <!-- paragraph -->
        <p>Section partners with university students in Computer Science related fields of study to research and write about topics that are relevant to engineers in the modern technology landscape. You can find more information and program guidelines in the GitHub repository. If you're currently enrolled in a Computer Science related field of study and are interested in participating in the program, please complete <a href="https://docs.google.com/forms/d/e/1FAIpQLSfTbj3kqvEJEb5RLjqJurfbHa8ckzQx0CjRzaizblue9ZOK5A/viewform">this form </a></p>
            <!-- close paragraph -->
    </div>
       <!-- close container -->

</body>
</html>

CSS

/* default styling variables - making background color as white */
html{
    --bg: #fff;
    --bg-panel: #ebebeb;
    --color-heading: rgb(27, 168, 14); 
    --color-text: #333333;
}
/* dark theme styling - Here, we set data-them as "dark"*/
html[data-theme='dark'] {
    --bg: #333333;
    --bg-panel: #434343;
    --color-heading: #0077ff; 
    --color-text: #B5B5B5;
}
body { 
    background-color: var(--bg); /* background color variable */
}

.container {
  background-color: var(--bg-panel); /* background panel color variable */
  margin: 5em;
  padding: 5em;
  border-radius: 15px;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 80% auto;
      grid-template-columns: 80% auto;
  -ms-grid-rows: auto auto;
      grid-template-rows: auto auto;
      grid-template-areas: "title switch"
 "content content";
}

.container h1 {
  margin: 0;
  color: var(--color-heading); /* heading 1 background color variable */
}

.container p {
  color: var(--color-text); /* text-color variable */
  -ms-grid-column-span: 2;
  grid-area: content;
  font-size: 1.1em;
  line-height: 1.8em;
  margin-top: 2em;
}

input[type=checkbox] { /* styling for input element */
    height: 0;
    width: 0;
    visibility: hidden;
}

label { /* styling for labels */
    cursor: pointer;
    text-indent: -9999px;
    width: 52px;
    height: 27px;
    background: #1ba80e;
    float: right;
    border-radius: 100px;
    position: relative;
}

label:after { /* styling for labels - on toggle */
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 90px;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

input:checked + label { /* conditional check while toggling */
    background: var(--color-heading);
}

input:checked + label:after {
    left: calc(100% - 5px);
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
}

label:active:after {
    width: 45px;
}

JavaScript

// Change theme to dark by adding the `dark` classname to html element.
const changeThemeToDark = () => {
    document.documentElement.setAttribute("data-theme", "dark")//set theme to light
}
// Reset the html class to default
const changeThemeToDark = () => {
    document.documentElement.setAttribute("data-theme", "light"); //set theme to light
}
let theme = localStorage.getItem('data-theme');
const changeThemeToDark = () => {
    document.documentElement.setAttribute("data-theme", "dark") // set theme to dark
    localStorage.setItem("data-theme", "dark") // save theme to local storage
}

const changeThemeToLight = () => {
    document.documentElement.setAttribute("data-theme", "light") // set theme light
    localStorage.setItem("data-theme", 'light') // save theme to local storage
}
// Get the element based on ID
const checkbox = document.getElementById("switch");
// Apply retrived them to the website
checkbox.addEventListener('change', () => {
    let theme = localStorage.getItem('data-theme'); // Retrieve saved them from local storage
    if (theme ==='dark'){
        changeThemeToLight()
    }else{
        changeThemeToDark()
    }   
});