Skip to content

Latest commit

 

History

History
39 lines (36 loc) · 1.06 KB

DarkMode.md

File metadata and controls

39 lines (36 loc) · 1.06 KB

To add Dark Mode to any new pages

Step 1

Replace the following code:

<header>
        <h1>BeeDev Services Helper Website</h1>
        <nav-component></nav-component>
</header>

with the following

<!-- dark mode switch -->
        <div id="darkModeStyling">
            <h1>BeeDev Services Helper Website</h1>
            <p>
                <img id="darkModeIcon" src="./images/darkLightIcons/moon-first-quarter-new.jpg" alt="dark-mode-icon" >
            </p>
        </div>
        <header>
            <!-- nav bar start here -->
            <nav-component></nav-component>
        </header>

Make sure to map the image correctly depending on where your file is located

Step 2

Add the following to the head tag:

<link rel="stylesheet" type='text/css' href="./css/dark-mode-styling/darkmode.css" />

Again please remember to map the href correctly and it should be the last link tag

Step 3

Add the following as the last script scr

<script src="js/components/darkmode.js"></script>

Again please remember to map the href correctly