Create Dark Mode // Light Mode Using HTML, CSS, and, JavaScript

on

 


Creating Dark Mode / Light Mode Using HTML, CSS, and JavaScript

Introduction:

In this tutorial, we will guide you through the process of implementing a Dark Mode and Light Mode feature using HTML, CSS, and JavaScript. Dark mode has gained popularity for its ability to provide a visually appealing and comfortable experience, especially in low-light environments. By offering users the option to switch between light and dark themes, you can enhance the accessibility and customization of your website.

Prerequisites:

To follow along with this tutorial, you should have a basic understanding of HTML, CSS, and JavaScript. Familiarity with CSS variables and JavaScript DOM manipulation will be helpful.

Step 1: Setting Up the Project:

Create a new folder for your project and set up the basic file structure. Create an HTML file (e.g., index.html) as the entry point for your website. Link your CSS and JavaScript files to the HTML file using the <link> and <script> tags.

Step 2: Designing the Layout:

Design your website layout using HTML and CSS. Ensure that your CSS is structured in a modular way for easier manipulation when switching between dark and light themes.

Step 3: Creating CSS Variables:

To facilitate the dynamic switching between themes, define CSS variables that will hold the values for your desired color schemes. For example, create variables for background color, text color, button color, etc. Set default values for the light theme.

Step 4: Styling for Light Mode:

Write the CSS rules for the light theme using the CSS variables you defined earlier. Apply the appropriate colors, fonts, and styles to achieve the desired look.

Step 5: Implementing Dark Mode:

Create a JavaScript function that will handle the switching between dark and light themes. Use the document.documentElement object to access the root element of the HTML document and modify the CSS variables accordingly. Update the values of the variables to reflect the dark theme.

Step 6: Adding a Toggle Button:

Create a toggle button on your webpage that will allow users to switch between dark and light modes. Use JavaScript to listen for the button click event and call the function you created in Step 5 to toggle between the themes.

Step 7: Persisting User Preference:

To provide a seamless user experience, store the user's preferred theme choice using JavaScript's localStorage or a cookie. Retrieve this preference when the website loads and apply the corresponding theme.

Step 8: Enhancing the Dark Mode:

Consider additional design tweaks to improve the dark mode experience, such as adjusting the contrast, modifying image colors, or using specific styling for different UI components.

Step 9: Testing and Deployment:

Test your dark mode/light mode feature thoroughly across different browsers and devices to ensure it functions as intended. Once you are satisfied with the results, deploy your website to a hosting server to make it accessible to users.

Conclusion:

By following these steps, you can create a Dark Mode/Light Mode feature for your website using HTML, CSS, and JavaScript. Offering this customization option enhances the user experience and accessibility of your site. Experiment with different color schemes and design elements to create a visually appealing and comfortable experience for your users.



HTML CODE


<div class="form-switch">
    <label class="switch">
        <span class="sun">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                <g fill="#ffd43b">
                    <circle r="5" cy="12" cx="12"></circle>
                    <path
d="m21 13h-1a1 1 0 0 1 0-2h1a1 1 0 0 1 0 2zm-17 0h-1a1 1 0 0 1 0-2h1a1 1 0 0 1 0 2zm13.66-5.66a1
1 0 0 1 -.66-.29 1 1 0 0 1 0-1.41l.71-.71a1 1 0 1 1 1.41 1.41l-.71.71a1 1 0 0 1 -.75.29zm-12.02
12.02a1 1 0 0 1 -.71-.29 1 1 0 0 1 0-1.41l.71-.66a1 1 0 0 1 1.41 1.41l-.71.71a1 1 0 0 1 -.7.24z
m6.36-14.36a1 1 0 0 1 -1-1v-1a1 1 0 0 1 2 0v1a1 1 0 0 1 -1 1zm0 17a1 1 0 0 1 -1-1v-1a1 1 0 0 1 2
0v1a1 1 0 0 1 -1 1zm-5.66-14.66a1 1 0 0 1 -.7-.29l-.71-.71a1 1 0 0 1 1.41-1.41l.71.71a1 1 0 0 1
0 1.41 1 1 0 0 1 -.71.29zm12.02 12.02a1 1 0 0 1 -.7-.29l-.66-.71a1 1 0 0 1 1.36-1.36l.71.71a1 1
0 0 1 0 1.41 1 1 0 0 1 -.71.24z">
                    </path>
                </g>
            </svg>
        </span>
        <span class="moon">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
                <path
                    d="m223.5 32c-123.5 0-223.5 100.3-223.5 224s100 224 223.5 224c60.6 0 115
.5-24.2 155.8-63.4 5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6-96.9
0-175.5-78.8-175.5-176 0-65.8 36-123.1 89.3-153.3 6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-
12.5c-6.3-.5-12.6-.8-19-.8z">
                </path>
            </svg>
        </span>
        <input type="checkbox" class="input" id="mode">
        <span class="slider"></span>
    </label>
</div>
<div class="cart">
    <div class="box">
        <div class="image">
            <div class="images-box" id="div1">
                <img src="iphone-5.jpg">
            </div>
            <div class="images-box" id="div2">
                <img src="iphone-1.jpg">
            </div>
            <div class="images-box" id="div3">
                <img src="iphone-3.jpg">
            </div>
            <div class="images-box" id="div4">
                <img src="iphone-4.jpg">
            </div>
            <div class="images-box" id="div5">
                <img src="iphone-6.jpg">
            </div>
        </div>
        <div class="cart-img">
            <div class="img-box" id="team_thumb1">
                <img src="iphone-5.jpg">
            </div>
            <div class="img-box" id="team_thumb2">
                <img src="iphone-1.jpg">
            </div>
            <div class="img-box" id="team_thumb3">
                <img src="iphone-3.jpg">
            </div>
            <div class="img-box" id="team_thumb4">
                <img src="iphone-4.jpg">
            </div>
            <div class="img-box" id="team_thumb5">
                <img src="iphone-6.jpg">
            </div>
        </div>
    </div>
    <div class="box box2">
        <h1>Apple iPhone 14 Pro Max (1 TB) - Space Black</h1>
        <ion-icon name="star"></ion-icon>
        <ion-icon name="star"></ion-icon>
        <ion-icon name="star"></ion-icon>
        <ion-icon name="star"></ion-icon>
        <ion-icon name="star-outline"></ion-icon>
        <h1>₹1,89,900/-</h1>
        <p>Inclusive of all taxes</p>
        <p>Details</p>
        <table>
            <tr>
                <th>Brand</th>
                <td>Apple</td>
            </tr>
            <tr>
                <th>Model Name</th>
                <td>iPhone</td>
            </tr>
            <tr>
                <th>Network Service Provider</th>
                <td>Unlocked for All Cattiers</td>
            </tr>
            <tr>
                <th>Operating System</th>
                <td>IOS</td>
            </tr>
            <tr>
                <th>Cellular Technology</th>
                <td>5G</td>
            </tr>
        </table>
        <button>Add to Cart</button>
        <button>Buy Now</button>
    </div>
</div>
<script src="iphone.js"></script>
<!--ion-icon online file link-->
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>

CSS CODE


@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap');
/*font-family: 'Roboto', sans-serif;*/
        * {
            font-family: 'Roboto', sans-serif;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            outline: none;
            border: none;
            text-decoration: none;
            transition: .3s linear;
        }

        html {
            font-size: 62.5%;
            overflow-x: hidden;
            scroll-padding-top: 9rem;
            scroll-behavior: smooth;
        }

        html::-webkit-scrollbar {
            width: .8rem;
        }

        html::-webkit-scrollbar-track {
            background: transparent;
        }

        html::-webkit-scrollbar-thumb {
            background: var(--main-color);
            border-radius: 4rem;
        }

        /* ================================ */
        :root,
        :root.light {
            --color-bg: #ffffff;
            --color-fg: #000000;
            --card-bg-color: #fafafa;
        }

        :root.dark {
            --color-bg: #000000;
            --color-fg: #ffffff;
            --card-bg-color: #000000;
        }

        body {
            background-color: var(--color-bg);
            color: var(--color-fg);
        }

        .card {
            background-color: var(--card-bg-color) !important;
        }

        .switch {
            font-size: 17px;
            position: relative;
            display: inline-block;
            width: 64px;
            height: 34px;
        }

        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .slider {
            position: absolute;
            cursor: pointer;
            inset: 0;
            background-color: #73C0FC;
            transition: .4s;
            border-radius: 30px;
        }

        .slider::before {
            position: absolute;
            content: "";
            height: 30px;
            width: 30px;
            border-radius: 20px;
            left: 2px;
            bottom: 2px;
            background: #e8e8e8;
            transition: .4s;
            z-index: 2;
        }

        .sun svg {
            position: absolute;
            top: 6px;
            left: 36px;
            z-index: 1;
            width: 24px;
            height: 24px;
        }

        .moon svg {
            fill: #73C0FC;
            position: absolute;
            top: 5px;
            z-index: 1;
            left: 5px;
            width: 24px;
            height: 24px;
        }

        .sun svg {
            animation: rotate 15s linear infinite;
        }

        @keyframes rotate {
            0% {
                transform: rotate(0);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        .moon svg {
            animation: tilt 5s linear infinite;
        }

        @keyframes tilt {
            0% {
                transform: rotate(0deg);
            }

            25% {
                transform: rotate(-10deg);
            }

            75% {
                transform: rotate(10deg);
            }

            100% {
                transform: rotate(0deg);
            }
        }

        .input:checked+.slider {
            background-color: #183153;
        }

        .input:checked+.slider {
            box-shadow: 0 0 1px #183153;
        }

        .input:checked+.slider::before {
            transform: translateX(30px);
        }

        .btn {
            position: absolute;
            top: 0;
            right: 20px;
            border: none;
        }

        .form-switch label {
            position: absolute;
            right: 40px;
            top: 40px;
        }

        .cart {
            width: 100%;
            height: 120vh;
            display: flex;
            justify-content: space-between;
        }

        .box {
            width: 50%;
            height: 100%;
            padding: 50px;
            /* background: red; */
        }

        .image {
            width: 100%;
            height: 80%;
            padding: 50px;
            overflow: hidden;
            /* background: green; */
        }

        .cart-img {
            width: 100%;
            height: 20%;
            padding: 10px;
            /* background: gray; */
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .img-box {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            /* background: #eee; */
            overflow: hidden;
        }

        .img-box img {
            width: 100%;
            height: 100%;
            cursor: pointer;
        }

        .image img {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        #div1 {
            display: block;
        }

        .image-box {
            width: 100%;
            height: 100%;
            display: none;
        }

        .box2 {
            padding: 100px;
        }

        .box2 h1 {
            font-size: 40px;
            font-weight: 400;
        }

        .box2 ion-icon {
            font-size: 20px;
            color: rgb(198, 198, 5);
            margin-top: 10px;
            margin-bottom: 10px;
        }

        .box2 p {
            font-size: 20px;
            padding: 10px 0 0 0;
            text-decoration: underline;
        }

        .box2 table {
            text-align: left;
            font-size: 20px;
        }

        .box2 table th,
        td {
            padding: 15px 15px 15px 0;
            font-weight: 300;
        }

        .box2 button {
            width: 45%;
            padding: 13px 10px;
            margin-top: 20px;
            margin-right: 10px;
            background: rgb(198, 198, 5);
            border-radius: 50px;
            font-weight: 600;
            font-size: 15px;
            cursor: pointer;
            position: relative;
        }

        .box2 button::before {
            content: " ";
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .3);
            position: absolute;
            inset: 0;
            border-radius: 50px;
            opacity: 0;
        }

        .box2 button:hover::before {
            opacity: 1;
        }

JAVASCRIPT CODE



        const modeBtn = document.getElementById('mode');
        modeBtn.onchange = (e) => {
            if (modeBtn.checked === true) {
                document.documentElement.classList.remove("light")
                document.documentElement.classList.add("dark")
                window.localStorage.setItem('mode', 'dark');
            } else {
                document.documentElement.classList.remove("dark")
                document.documentElement.classList.add("light")
                window.localStorage.setItem('mode', 'light');
            }
        }
        const mode = window.localStorage.getItem('mode');
        if (mode == 'dark') {
            modeBtn.checked = true;
            document.documentElement.classList.remove("light")
            document.documentElement.classList.add("dark")
        }

        if (mode == 'light') {
            modeBtn.checked = false;
            document.documentElement.classList.remove("dark")
            document.documentElement.classList.add("light")
        }

        // const modeBtn = document.getElementById('mode');
        modeBtn.onchange = (e) => {
            if (modeBtn.checked === true) {
                document.documentElement.classList.remove("light")
                document.documentElement.classList.add("dark")
                window.localStorage.setItem('mode', 'dark');
            } else {
                document.documentElement.classList.remove("dark")
                document.documentElement.classList.add("light")
                window.localStorage.setItem('mode', 'light');
            }
        }

        const mode1 = window.localStorage.getItem('mode');
        if (mode1 == 'dark') {
            modeBtn.checked = true;
            document.documentElement.classList.remove("light")
            document.documentElement.classList.add("dark")
        }

        if (mode1 == 'light') {
            modeBtn.checked = false;
            document.documentElement.classList.remove("dark")
            document.documentElement.classList.add("light")
        }
        // ====================================================================

        // Get a reference to the HTML element you want to add divs to
        var container = document.getElementById('myContainer');

        // Get a reference to the button that will trigger the addition of the div
        var addButton1 = document.getElementById('team_thumb1');
        var addButton2 = document.getElementById('team_thumb2');
        var addButton3 = document.getElementById('team_thumb3');
        var addButton4 = document.getElementById('team_thumb4');
        var addButton5 = document.getElementById('team_thumb5');

        // Set the maximum number of divs that can be added
        var divNo1 = document.getElementById('div1');
        var divNo2 = document.getElementById('div2');
        var divNo3 = document.getElementById('div3');
        var divNo4 = document.getElementById('div4');
        var divNo5 = document.getElementById('div5');

        // div no 1
        addButton1.addEventListener('click', function (event) {
            divNo1.style.display = "block";
            divNo2.style.display = "none";
            divNo3.style.display = "none";
            divNo4.style.display = "none";
            divNo5.style.display = "none";
        });
        addButton1.addEventListener('click', function (event) {
            divNo1.style.display = "none";
            divNo1.style.display = "block";
        });
        // div no 2
        addButton2.addEventListener('click', function (event) {
            divNo2.style.display = "block";
            divNo1.style.display = "none";
            divNo3.style.display = "none";
            divNo4.style.display = "none";
            divNo5.style.display = "none";
        })
        addButton2.addEventListener('click', function (event) {
            divNo2.style.display = "none";
            divNo2.style.display = "block";
        });
        // div no 3
        addButton3.addEventListener('click', function (event) {
            divNo3.style.display = "block";
            divNo2.style.display = "none";
            divNo2.style.display = "none";
            divNo4.style.display = "none";
            divNo5.style.display = "none";
        });
        addButton3.addEventListener('click', function (event) {
            divNo3.style.display = "none";
            divNo3.style.display = "block";
            divNo2.style.display = "none";
        });
        // div no 4
        addButton4.addEventListener('click', function (event) {
            divNo4.style.display = "block";
            divNo3.style.display = "none";
            divNo2.style.display = "none";
            divNo3.style.display = "none";
            divNo5.style.display = "none";
        });
        addButton4.addEventListener('click', function (event) {
            divNo4.style.display = "none";
            divNo4.style.display = "block";
            divNo3.style.display = "none";
        });
        // div no 5
        addButton5.addEventListener('click', function (event) {
            divNo5.style.display = "block";
            divNo4.style.display = "none";
            divNo2.style.display = "none";
            divNo3.style.display = "none";
            divNo4.style.display = "none";
        });
        addButton5.addEventListener('click', function (event) {
            divNo5.style.display = "none";
            divNo5.style.display = "block";
            divNo4.style.display = "none";
        });

Comments

Post a Comment