Skip to content

Commit 1bbcd5e

Browse files
WasiqBWasiqB
authored
fix: 🐛 fixed dark mode issue with Data Table (#435)
* fix: 🐛 fixed dark mode issue with Data Table * fix: 🐛 fixed issue with dark mode when refreshing the page
1 parent b910211 commit 1bbcd5e

File tree

7 files changed

+54
-57
lines changed

7 files changed

+54
-57
lines changed

‎examples/cypress/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
"@bahmutov/cypress-esbuild-preprocessor": "^2.2.4",
1919
"@types/node": "^22.13.4",
2020
"cypress": "^14.0.3",
21-
"multiple-cucumber-html-reporter": "3.9.1",
21+
"multiple-cucumber-html-reporter": "3.9.2",
2222
"typescript": "^5.7.3"
2323
},
2424
"dependencies": {

‎examples/cypress/pnpm-lock.yaml‎

Lines changed: 12 additions & 6 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@
3838
"lodash": "^4.17.21",
3939
"luxon": "^3.5.0",
4040
"open": "^8.4.2",
41-
"uuid": "^11.0.5"
41+
"uuid": "^11.1.0"
4242
},
4343
"devDependencies": {
4444
"jasmine": "^5.6.0",

‎pnpm-lock.yaml‎

Lines changed: 5 additions & 5 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎templates/assets/js/darkmode.js‎

Lines changed: 23 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,36 @@
1-
var darkMode = 'darkmode'
1+
var darkMode = "darkmode";
22

33
function applyDarkMode() {
4-
document.getElementById('features-table').classList.toggle('table-striped');
5-
applyFontStyle();
4+
applyFontStyle();
5+
document
6+
.querySelector("html")
7+
.setAttribute("data-bs-theme", isDarkModeOn() ? "dark" : "light");
8+
document.getElementById("features-table").classList.toggle("table-striped");
69
}
710

811
function saveState() {
9-
if(isDarkModeOn()) {
10-
window.localStorage['darkmode'] = 'on';
11-
} else {
12-
window.localStorage['darkmode'] = 'off';
13-
}
12+
if (isDarkModeOn()) {
13+
window.localStorage["darkmode"] = "on";
14+
} else {
15+
window.localStorage["darkmode"] = "off";
16+
}
1417
}
1518

1619
function applyFontStyle() {
17-
document.body.classList.toggle(darkMode);
20+
document.body.classList.toggle(darkMode);
1821
}
1922

20-
2123
function isDarkModeOn() {
22-
var toggle = document.getElementById('darkCheck');
23-
return toggle.checked;
24+
var toggle = document.getElementById("darkCheck");
25+
return toggle.checked;
2426
}
2527

26-
window.onload = function() {
27-
if(window.localStorage['darkmode'] === 'on') {
28-
applyDarkMode();
29-
document.getElementById('darkCheck').checked = true;
30-
}
31-
}
28+
window.onload = function () {
29+
if (window.localStorage["darkmode"] === "on") {
30+
applyDarkMode();
31+
document.getElementById("darkCheck").checked = true;
32+
document
33+
.querySelector("html")
34+
.setAttribute("data-bs-theme", isDarkModeOn() ? "dark" : "light");
35+
}
36+
};

‎templates/feature-overview.index.tmpl‎

Lines changed: 6 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4+
<script src="../assets/js/darkmode.js"></script>
45
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
56
<!-- Meta, title, CSS, favicons, etc. -->
67
<meta charset="utf-8">
@@ -40,10 +41,6 @@
4041

4142
<link href="../assets/css/font-awesome.min.css" rel="stylesheet">
4243
<% } %>
43-
<!-- Darkmode -->
44-
<script>
45-
<%= darkmodeScript %>
46-
</script>
4744

4845
<!-- Custom Theme Style -->
4946
<style type="text/css">
@@ -52,13 +49,6 @@
5249
</style>
5350
</head>
5451
<body>
55-
<script type="text/javascript">
56-
window.onload = function() {
57-
if(window.localStorage['darkmode'] === 'on') {
58-
applyFontStyle();
59-
}
60-
}
61-
</script>
6252
<nav class="navbar">
6353
<div class="container-fluid">
6454

@@ -156,11 +146,11 @@
156146

157147
<% if (!pageFooter) { %>
158148
<div class="created-by">
159-
<p>Created by wswebcreation. Find me on:</p>
160-
<a href="http://www.wswebcreation.nl/" target="_blank"><i class="fa fa-rss-square fa-2x"></i></a>
161-
<a href="https://github.com/wswebcreation/" target="_blank"><i class="fa fa-github-square fa-2x"></i></a>
162-
<a href="http://nl.linkedin.com/in/wimselles" target="_blank"><i class="fa fa-linkedin-square fa-2x"></i></a>
163-
<a href="http://stackoverflow.com/users/5911978/wswebcreation" target="_blank"><i class="fa fa-stack-overflow fa-2x"></i></a>
149+
<p>Maintained by Wasiq Bhamla. Find me on:</p>
150+
<a href="https://www.youtube.com/@WasiqBhamla" target="_blank"><i class="fa fa-rss-square fa-2x"></i></a>
151+
<a href="https://github.com/WasiqB/" target="_blank"><i class="fa fa-github-square fa-2x"></i></a>
152+
<a href="https://www.linkedin.com/in/wasiqbhamla/" target="_blank"><i class="fa fa-linkedin-square fa-2x"></i></a>
153+
<a href="https://stackoverflow.com/users/5320558/wasiq-bhamla" target="_blank"><i class="fa fa-stack-overflow fa-2x"></i></a>
164154
</div>
165155
<% } else { %>
166156
<%= pageFooter %>

‎templates/features-overview.index.tmpl‎

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4+
<script src="assets/js/darkmode.js"></script>
45
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
56
<!-- Meta, title, CSS, favicons, etc. -->
67
<meta charset="utf-8">
@@ -89,11 +90,11 @@
8990
</div>
9091
<% if (!pageFooter) { %>
9192
<div class="created-by">
92-
<p>Created by wswebcreation. Find me on:</p>
93-
<a href="http://www.wswebcreation.nl/" target="_blank"><i class="fa fa-rss-square fa-2x"></i></a>
94-
<a href="https://github.com/wswebcreation/" target="_blank"><i class="fa fa-github-square fa-2x"></i></a>
95-
<a href="http://nl.linkedin.com/in/wimselles" target="_blank"><i class="fa fa-linkedin-square fa-2x"></i></a>
96-
<a href="http://stackoverflow.com/users/5911978/wswebcreation" target="_blank"><i class="fa fa-stack-overflow fa-2x"></i></a>
93+
<p>Maintained by Wasiq Bhamla. Find me on:</p>
94+
<a href="https://www.youtube.com/@WasiqBhamla" target="_blank"><i class="fa fa-rss-square fa-2x"></i></a>
95+
<a href="https://github.com/WasiqB/" target="_blank"><i class="fa fa-github-square fa-2x"></i></a>
96+
<a href="https://www.linkedin.com/in/wasiqbhamla/" target="_blank"><i class="fa fa-linkedin-square fa-2x"></i></a>
97+
<a href="https://stackoverflow.com/users/5320558/wasiq-bhamla" target="_blank"><i class="fa fa-stack-overflow fa-2x"></i></a>
9798
</div>
9899
<% } else { %>
99100
<%= pageFooter %>
@@ -122,11 +123,6 @@
122123
<script src="assets/js/responsive.bootstrap5.js"></script>
123124
<% } %>
124125

125-
<!-- Darkmode -->
126-
<script>
127-
<%= darkmodeScript %>
128-
</script>
129-
130126
<!-- Custom -->
131127
<script>
132128
$(document).ready(function () {

0 commit comments

Comments
 (0)