diff --git a/output/style.css b/output/style.css
index 6ce7d78..06657b8 100644
--- a/output/style.css
+++ b/output/style.css
@@ -220,4 +220,22 @@ ol li::before {
/* Element separation */
ol li + li {
border-top: var(--pico-contrast-focus) solid 1px;
+}
+
+.hidden {
+ display: none;
+}
+
+.inline {
+ display: inline;
+}
+
+:root:not([data-theme=dark]) .dark-inline,
+[data-theme=light] .dark-inline{
+ display: inline;
+}
+
+:root:not([data-theme=dark]) .dark-hidden,
+[data-theme=light] .dark-hidden {
+ display: none;
}
\ No newline at end of file
diff --git a/src/main.rs b/src/main.rs
index 9dc5202..2c375ec 100644
--- a/src/main.rs
+++ b/src/main.rs
@@ -124,6 +124,9 @@ fn main() {
let js = fs::read_to_string("templates/app.js").unwrap();
fs::write(&format!("output/app.js"), &js).expect("Unable to write file");
+ let js = fs::read_to_string("templates/toggle.js").unwrap();
+ fs::write(&format!("output/toggle.js"), &js).expect("Unable to write file");
+
let mut index = fs::read_to_string("templates/index.html").unwrap();
index = index.replace("{{content}}", &li_of_files);
fs::write(&format!("output/index.html"), &index).expect("Unable to write file");
diff --git a/templates/app.js b/templates/app.js
index cc7dc92..9d54501 100644
--- a/templates/app.js
+++ b/templates/app.js
@@ -1,21 +1,71 @@
document.addEventListener('DOMContentLoaded', function() {
- toggleSummary();
+ changeTheme();
+ initcolorTheme();
});
-function toggleSummary() {
- const openBtns = document.querySelectorAll('.open-js');
- const closeBtns = document.querySelectorAll('.close-js');
- const detailElements = document.querySelectorAll('details');
+function changeTheme() {
+ let toggleBtn = document.querySelector('#theme-toggle-js');
- openBtns.forEach(function(openBtn) {
- openBtn.addEventListener('click', function(){
- detailElements.forEach((detail) => detail.setAttribute("open", ""));
+ if(toggleBtn) {
+ toggleBtn.addEventListener('click', function() {
+ if(toggleBtn.dataset.theme === 'light') {
+ setTheme('dark', true);
+ } else {
+ setTheme('light', true);
+ }
});
- });
-
- closeBtns.forEach(function(closeBtn) {
- closeBtn.addEventListener('click', function(){
- detailElements.forEach((detail) => detail.removeAttribute("open", ""));
- });
- });
+ }
+}
+
+/***
+* init javascript
+* 1) detect native color scheme or use set theme in local storage
+* 2) detect view (desktop or responsive) if on mobile device with touch screen
+* 3) set base font size to 112.5% -> 18px
+*/
+function initcolorTheme() {
+ colorThemeWatcher();
+ let theme = localStorage.getItem('theme');
+ if (theme == null || theme === 'auto') {
+ if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+ setTheme('dark', false);
+ } else {
+ setTheme('light', false);
+ }
+ } else {
+ setTheme(theme)
+ }
+}
+
+/***
+* Listener operating system native color configuration
+*/
+function colorThemeWatcher() {
+ try {
+ window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
+ setTheme(e.matches ? 'dark' : 'light');
+ });
+ } catch {
+ console.warn('color theme watcher not supported');
+ }
+}
+
+/**
+* Define color scheme, colors without losing the base font size configuration
+* and add data-theme to html tag
+* @param theme
+*/
+function setTheme(theme, setLocalStorage = true) {
+ let toggleBtn = document.querySelector('#theme-toggle-js');
+
+ if (setLocalStorage) {
+ localStorage.setItem('theme', theme);
+ }
+ if (toggleBtn) toggleBtn.setAttribute('data-theme', theme);
+
+ if (document.documentElement.dataset.theme === 'dark' && theme === 'light') {
+ document.documentElement.dataset.theme = 'light';
+ } else if(document.documentElement.dataset.theme === 'light' && theme === 'dark'){
+ document.documentElement.dataset.theme = 'dark';
+ }
}
diff --git a/templates/index.html b/templates/index.html
index 023f198..4f3dc9d 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,4 +1,4 @@
-
+
@@ -20,17 +20,32 @@
+
diff --git a/templates/law.html b/templates/law.html
index 076e39b..e09836d 100644
--- a/templates/law.html
+++ b/templates/law.html
@@ -1,4 +1,4 @@
-
+
@@ -23,18 +23,33 @@
{{content}}
+
diff --git a/templates/style.css b/templates/style.css
index 6ce7d78..06657b8 100644
--- a/templates/style.css
+++ b/templates/style.css
@@ -220,4 +220,22 @@ ol li::before {
/* Element separation */
ol li + li {
border-top: var(--pico-contrast-focus) solid 1px;
+}
+
+.hidden {
+ display: none;
+}
+
+.inline {
+ display: inline;
+}
+
+:root:not([data-theme=dark]) .dark-inline,
+[data-theme=light] .dark-inline{
+ display: inline;
+}
+
+:root:not([data-theme=dark]) .dark-hidden,
+[data-theme=light] .dark-hidden {
+ display: none;
}
\ No newline at end of file
diff --git a/templates/toggle.js b/templates/toggle.js
new file mode 100644
index 0000000..cc7dc92
--- /dev/null
+++ b/templates/toggle.js
@@ -0,0 +1,21 @@
+document.addEventListener('DOMContentLoaded', function() {
+ toggleSummary();
+});
+
+function toggleSummary() {
+ const openBtns = document.querySelectorAll('.open-js');
+ const closeBtns = document.querySelectorAll('.close-js');
+ const detailElements = document.querySelectorAll('details');
+
+ openBtns.forEach(function(openBtn) {
+ openBtn.addEventListener('click', function(){
+ detailElements.forEach((detail) => detail.setAttribute("open", ""));
+ });
+ });
+
+ closeBtns.forEach(function(closeBtn) {
+ closeBtn.addEventListener('click', function(){
+ detailElements.forEach((detail) => detail.removeAttribute("open", ""));
+ });
+ });
+}