diff --git a/main.js b/main.js
index f40e689..03c3dcb 100644
--- a/main.js
+++ b/main.js
@@ -178,3 +178,43 @@ getPublicMembers().then((members) => {
const appender = appendMember(membersContainer, observer)
members.forEach(appender)
})
+
+// darkmode switch
+document.querySelectorAll('input[type="checkbox"]').forEach((data) => {
+ data.addEventListener('change', (event) => {
+ bgSwitch(event)
+ })
+})
+
+const html = document.querySelector('html')
+const toggle = document.querySelectorAll("input[type='checkbox']")
+const imgNav = document.getElementById('navImg')
+if (
+ localStorage.theme === 'dark' ||
+ (!('theme' in localStorage) &&
+ window.matchMedia('(prefers-color-scheme: dark)').matches)
+) {
+ html.classList.add('dark')
+ imgNav.setAttribute('src', '/nav-logo-dark.png')
+ toggle.forEach((data) => {
+ data.checked = true
+ })
+} else {
+ html.classList.remove('dark')
+ imgNav.setAttribute('src', '/nav-logo-light2.png')
+ toggle.forEach((data) => {
+ data.checked = false
+ })
+}
+
+const bgSwitch = (event) => {
+ if (event.target.checked) {
+ html.classList.add('dark')
+ imgNav.setAttribute('src', '/nav-logo-dark.png')
+ localStorage.theme = 'dark'
+ } else {
+ html.classList.remove('dark')
+ imgNav.setAttribute('src', '/nav-logo-light2.png')
+ localStorage.theme = 'light'
+ }
+}
diff --git a/package.json b/package.json
index e58e1af..9a8c107 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
"husky": "^7.0.0",
"js-tokens": "^7.0.0",
"lint-staged": "^11.1.2",
+ "postcss": "^8.3.11",
"prettier": "^2.4.1",
"stylelint": "^13.13.1",
"stylelint-config-standard": "^22.0.0",
diff --git a/public/nav-logo-dark.png b/public/nav-logo-dark.png
new file mode 100644
index 0000000..3a416f0
Binary files /dev/null and b/public/nav-logo-dark.png differ
diff --git a/public/nav-logo-light2.png b/public/nav-logo-light2.png
new file mode 100644
index 0000000..befb55a
Binary files /dev/null and b/public/nav-logo-light2.png differ
diff --git a/src/css/style.css b/src/css/style.css
index 647cc48..c19204d 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -182,7 +182,7 @@ html {
}
.modal__content {
- @apply p-8 text-gray-600 leading-6;
+ @apply p-8 text-gray-600 dark:text-white leading-6;
}
/* [data-modal-state='closed'] .modal-wrapper, */
@@ -227,3 +227,45 @@ html {
.group {
scroll-margin-top: 100px;
}
+
+input:checked ~ .dot {
+ transform: translateX(100%);
+}
+
+input:checked ~ #line {
+ background-color: lightskyblue;
+}
+
+input:checked ~ #line::before {
+ content: '\01F31E';
+ margin-top: 5px !important;
+ position: absolute;
+}
+
+input:not(:checked) ~ #line::before {
+ content: '\01F319';
+ transform: translateX(100%);
+ position: absolute;
+ margin-top: 5px;
+ margin-left: 5px;
+}
+
+.doticon {
+ width: 40px;
+ height: 40px;
+ font-size: 30px;
+}
+
+input:not(:checked) ~ .doticon::after {
+ width: 35px !important;
+ height: 35px !important;
+ content: '\01F319';
+ font-size: 30px;
+}
+
+input:checked ~ .doticon::after {
+ content: '\01F31E';
+ width: 35px !important;
+ height: 35px !important;
+ font-size: 30px;
+}
diff --git a/src/js/appendMember.js b/src/js/appendMember.js
index 42176cf..9e0c411 100644
--- a/src/js/appendMember.js
+++ b/src/js/appendMember.js
@@ -21,7 +21,7 @@ const appendMember = (membersContainer, observer) => (res) => {