From 48eb815f52bc73adaa047b0ab615b807d460ee2d Mon Sep 17 00:00:00 2001 From: mik-tf Date: Fri, 13 Sep 2024 11:33:11 -0400 Subject: [PATCH] put light and dark icons into one, made sure the top bar follows the theme --- examples/heroweb_example_base/css/heroweb.css | 112 +++++++++++------- examples/heroweb_example_base/js/heroweb.js | 99 ++++++++-------- 2 files changed, 119 insertions(+), 92 deletions(-) diff --git a/examples/heroweb_example_base/css/heroweb.css b/examples/heroweb_example_base/css/heroweb.css index fe1a924..85a65ae 100644 --- a/examples/heroweb_example_base/css/heroweb.css +++ b/examples/heroweb_example_base/css/heroweb.css @@ -1,3 +1,22 @@ +/* Custom properties for theming */ +:root { + --nav-background: #f1f3f5; + --nav-text: #495057; + --nav-hover: #1971c2; + --nav-input-border: #ced4da; + --nav-input-background: #f8f9fa; + --theme-icon-hover: #e9ecef; +} + +[data-theme="dark"] { + --nav-background: #1a1e24; + --nav-text: #e0e0e0; + --nav-hover: #4dabf7; + --nav-input-border: #495057; + --nav-input-background: #2a2e33; + --theme-icon-hover: #2a2e33; +} + /* Custom styles to enhance the nav bar */ body > main { display: flex; @@ -6,10 +25,12 @@ body > main { height: 100vh; overflow: hidden; } + nav { - background-color: #f1f3f5; + background-color: var(--nav-background); padding: 0rem 1rem; } + nav ul { margin: 0; padding: 0; @@ -18,59 +39,71 @@ nav ul { justify-content: space-between; align-items: center; } + nav ul li { margin: 0 0.5rem; } + nav ul li a { text-decoration: none; - color: #495057; + color: var(--nav-text); font-weight: 500; transition: color 0.3s ease; } + nav ul li a:hover { - color: #1971c2; + color: var(--nav-hover); } + .brand { font-size: 1rem; font-weight: bold; } + navbar-right { display: flex; align-items: center; margin-left: 30%; } + navbar-right a { margin-left: 1rem; } + navbar-right input[type="search"] { padding: 0.2rem 0.5rem; - border: 1px solid #ced4da; + border: 1px solid var(--nav-input-border); border-radius: 1rem; - background-color: #f8f9fa; + background-color: var(--nav-input-background); + color: var(--nav-text); font-size: 0.8rem; line-height: 1; height: 2rem; width: 300px; margin: 0; } -/* New styles for theme icons */ + +/* Styles for theme icons */ .theme-icons { display: flex; align-items: center; } + .theme-icon { cursor: pointer; padding: 5px; border-radius: 50%; margin-left: 0.5rem; } + .theme-icon svg { width: 20px; height: 20px; - fill: currentColor; + fill: var(--nav-text); } + .theme-icon:hover { - background-color: #e9ecef; + background-color: var(--theme-icon-hover); } mynav, @@ -78,68 +111,80 @@ docnav { flex: 1; min-width: 200px; max-width: 250px; - overflow-y: auto; /* Enable scrolling for nav and docnav */ + overflow-y: auto; + color: var(--nav-text); } + mynav ul { list-style-type: none; padding-left: 0; } + mynav ul ul { - list-style-type: none; /* Remove bullets */ + list-style-type: none; padding-left: 0; margin-left: 0.2rem; - display: none; /* Hide nested lists by default */ + display: none; } + mynav ul li { margin-left: 0.5rem; padding-left: 0.3rem; - cursor: pointer; /* Indicate that items are clickable */ - list-style-type: none; /* Remove bullets */ + cursor: pointer; + list-style-type: none; } + mynav ul li a { text-decoration: none; color: inherit; } + mynav ul li.open > ul { - display: block; /* Show nested lists when parent is open */ + display: block; } + .arrow { - font-size: 0.8rem; /* Reduce the font size of the arrows */ - margin-right: 0.2rem; /* Adjust the space between the arrow and the text */ + font-size: 0.8rem; + margin-right: 0.2rem; } article { flex: 4; min-width: 200px; max-width: 1200px; - overflow-y: auto; /* Enable scrolling for article */ + overflow-y: auto; height: 100%; scrollbar-width: none; -ms-overflow-style: none; } + article textarea { line-height: 1.2; } + article md { line-height: 1.2; } + docnav { flex: 1; min-width: 200px; font-size: 0.9rem; } + docnav ul { list-style-type: none; padding-left: 0; } + docnav ul li { margin-left: 0.4rem; padding-left: 0rem; - cursor: pointer; /* Indicate that items are clickable */ - white-space: nowrap; /* Prevent text from wrapping */ - overflow: hidden; /* Hide overflow text */ - text-overflow: ellipsis; /* Add ellipses for overflow text */ - max-width: 40ch; /* Limit length of item to 40 characters */ + cursor: pointer; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 40ch; } @media (max-width: 768px) { @@ -168,25 +213,4 @@ docnav ul li { .theme-icons { margin-top: 0.5rem; } -} - -/* [data-theme="dark"] { - --background-color: #333; - --text-color: #fff; -} -[data-theme="dark"] body { - background-color: var(--background-color); - color: var(--text-color); -} -[data-theme="dark"] nav { - background-color: #444; -} -[data-theme="dark"] nav ul li a { - color: #ddd; -} -[data-theme="dark"] nav ul li a:hover { - color: #fff; -} -[data-theme="dark"] .theme-icon:hover { - background-color: #555; -} */ +} \ No newline at end of file diff --git a/examples/heroweb_example_base/js/heroweb.js b/examples/heroweb_example_base/js/heroweb.js index 64c0bc8..131b49a 100644 --- a/examples/heroweb_example_base/js/heroweb.js +++ b/examples/heroweb_example_base/js/heroweb.js @@ -79,38 +79,74 @@ function addNavEventListeners() { }); } -// function settypes() { -// const navInputs = document.querySelectorAll("search-inpu"); -// navInputs.forEach((input) => { -// input.setAttribute("type", "text"); -// }); -// } - // Call the initialization function when the DOM is loaded document.addEventListener("DOMContentLoaded", () => { createThemeIcons(); initializeMarkdownConverter("markdown-input", "markdown-output", "content-pointers"); initializeMarkdownConverter("markdown-nav", "mynav"); addNavEventListeners(); - //settypes(); }); function setTheme(theme) { document.documentElement.setAttribute("data-theme", theme); localStorage.setItem("theme", theme); console.log(`Theme set to: ${theme}`); + updateThemeIcon(theme); } function getSystemTheme() { return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; } -document.querySelectorAll(".theme-icon").forEach((icon) => { - icon.addEventListener("click", () => { - const theme = icon.getAttribute("data-theme-switcher"); - setTheme(theme); - }); -}); +function toggleTheme() { + const currentTheme = document.documentElement.getAttribute("data-theme") || "light"; + const newTheme = currentTheme === "light" ? "dark" : "light"; + setTheme(newTheme); +} + +function updateThemeIcon(theme) { + const themeIcon = document.querySelector(".theme-icon"); + if (themeIcon) { + themeIcon.innerHTML = theme === "light" ? getLightIconSVG() : getDarkIconSVG(); + themeIcon.setAttribute("title", `Switch to ${theme === "light" ? "dark" : "light"} theme`); + } +} + +function createThemeIcons() { + const themeIconsHTML = ` +
+ + ${getLightIconSVG()} + +
+ `; + + const placeholder = document.getElementById("theme-switcher-icons"); + if (placeholder) { + placeholder.innerHTML = themeIconsHTML; + } + + // Add event listener for theme switching + const themeIcon = document.querySelector(".theme-icon"); + if (themeIcon) { + themeIcon.addEventListener("click", toggleTheme); + } + + // Set initial icon based on current theme + updateThemeIcon(document.documentElement.getAttribute("data-theme") || "light"); +} + +function getLightIconSVG() { + return ` + + `; +} + +function getDarkIconSVG() { + return ` + + `; +} // Check for saved theme preference or use system theme const savedTheme = localStorage.getItem("theme"); @@ -123,37 +159,4 @@ if (savedTheme) { // Listen for system theme changes window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", (e) => { setTheme(e.matches ? "dark" : "light"); -}); - -function createThemeIcons() { - const themeIconsHTML = ` -
- - - - - - - - - - -
- `; - - const placeholder = document.getElementById("theme-switcher-icons"); - if (placeholder) { - placeholder.innerHTML = themeIconsHTML; - } - // Add event listeners for theme switching - document.querySelectorAll(".theme-icon").forEach((icon) => { - icon.addEventListener("click", () => { - const theme = icon.getAttribute("data-theme-switcher"); - setTheme(theme); - }); - }); -} +}); \ No newline at end of file