├── scripts
└── script.js
├── README.md
├── index.html
└── styles
├── light-mode.css
└── dark-mode.css
/scripts/script.js:
--------------------------------------------------------------------------------
1 | // Function that swaps the stylesheet.
2 | function changeTheme() {
3 | let theme = document.getElementById("theme");
4 | let lightTheme = "styles/light-mode.css";
5 | let darkTheme = "styles/dark-mode.css";
6 | // Checking what stylesheet the link tag has.
7 | if (theme.getAttribute("href") == lightTheme) {
8 | theme.href = darkTheme;
9 | } else {
10 | theme.href = lightTheme;
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Dark Mode For Web
2 | This example shows how you can achieve dark mode for your website by changing the entire style sheet on a click.
3 |
4 | ## Original Article:
5 | https://dev.to/zxcodes/the-best-way-to-dark-mode-your-website-1g7f
6 |
7 | 
8 | 
9 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Dark Mode Demo
8 |
9 |
10 |
11 |
12 |
13 |
Dark Mode by changing the style sheet.
14 |
15 |
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/styles/light-mode.css:
--------------------------------------------------------------------------------
1 | * {
2 | font-family: "Segoe UI";
3 | box-sizing: border-box;
4 | padding: 0;
5 | margin: 0;
6 | }
7 | body {
8 | transition: 1s;
9 | }
10 |
11 | h1 {
12 | text-align: center;
13 | font-weight: 300;
14 | color: #4d4d4d;
15 | padding: 20px;
16 | }
17 | .wrapper {
18 | height: 100vh;
19 | width: 100%;
20 | display: flex;
21 | flex-direction: column;
22 | justify-content: center;
23 | align-items: center;
24 | }
25 | button {
26 | padding: 13px 10px;
27 | background-color: rgb(43, 43, 43);
28 | color: #fff;
29 | border: none;
30 | border-radius: 4px;
31 | font-size: 1em;
32 | outline: none;
33 | cursor: pointer;
34 | }
35 | button:hover {
36 | background: rgb(45, 50, 102);
37 | color: rgb(255, 255, 255);
38 | }
39 |
--------------------------------------------------------------------------------
/styles/dark-mode.css:
--------------------------------------------------------------------------------
1 | * {
2 | font-family: "Segoe UI";
3 | box-sizing: border-box;
4 | padding: 0;
5 | margin: 0;
6 | }
7 | body {
8 | background: rgb(29, 29, 29);
9 | transition: 1s;
10 | }
11 | .wrapper {
12 | height: 100vh;
13 | width: 100%;
14 | display: flex;
15 | flex-direction: column;
16 | justify-content: center;
17 | align-items: center;
18 | }
19 | h1 {
20 | color: #fff;
21 | text-align: center;
22 | font-weight: 200;
23 | padding: 20px;
24 | }
25 |
26 | button {
27 | padding: 13px 10px;
28 | background-color: rgb(255, 255, 255);
29 | color: rgb(0, 0, 0);
30 | border: none;
31 | border-radius: 4px;
32 | font-size: 1em;
33 | outline: none;
34 | font-weight: 400;
35 | cursor: pointer;
36 | }
37 | button:hover {
38 | background: rgb(45, 50, 102);
39 | color: rgb(255, 255, 255);
40 | }
41 |
--------------------------------------------------------------------------------