This is an automated email from the ASF dual-hosted git repository.
msciabarra pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/openserverless-site.git
The following commit(s) were added to refs/heads/main by this push:
new 40ec7ba dark mode (#57)
40ec7ba is described below
commit 40ec7ba2e0a8ce0e578394663e53eeffdcaff22f
Author: Bruno Salzano <[email protected]>
AuthorDate: Mon Mar 24 23:15:57 2025 +0100
dark mode (#57)
* chore(taskfile): improved task preview
added node_modules/.bin folder to the path to force use the hugo version
from npm. Added automatic opening of website in preview mode. Added the correct
baseUrl to preview
* feat: dark mode
This change introduces the ability for the user to set the dark theme
---
Taskfile.yaml | 6 ++--
assets/scss/_styles_project.scss | 66 ++++++++++++++++++++++++++++++++++++-
assets/scss/_variables_project.scss | 3 +-
hugo.yaml | 2 ++
layouts/partials/footer.html | 3 ++
layouts/partials/head.html | 9 +++++
layouts/partials/navbar.html | 12 +------
layouts/partials/theme-toggler.html | 57 ++++++++++++++++++++++++++++++++
8 files changed, 143 insertions(+), 15 deletions(-)
diff --git a/Taskfile.yaml b/Taskfile.yaml
index 59e2187..e457f42 100644
--- a/Taskfile.yaml
+++ b/Taskfile.yaml
@@ -44,11 +44,13 @@ tasks:
- rm -rf openserverless-task
preview:
+ silent: true
desc: preview the websites
cmds:
- - hugo server -O
+ - PATH="node_modules/.bin:$PATH" hugo server --baseURL
"http://localhost:1313/"; -O
debug:
+ silent: true
desc: debug the websites
cmds:
- - hugo server --ignoreCache --debug --disableFastRender
+ - PATH="node_modules/.bin:$PATH" hugo server --ignoreCache --debug
--disableFastRender
diff --git a/assets/scss/_styles_project.scss b/assets/scss/_styles_project.scss
index d528fa6..96678a2 100644
--- a/assets/scss/_styles_project.scss
+++ b/assets/scss/_styles_project.scss
@@ -26,6 +26,67 @@
url('/fonts/quattrocento-v23-latin-regular.ttf') format('truetype'); /*
Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
+:root {
+ --primary-color: #0073e6;
+ --background-light: #ffffff;
+ --text-light: #333333;
+ --border-light: #dddddd;
+ --link-light: #0056b3;
+ --code-bg-light: #f5f5f5;
+ --bs-secondary-color: #333333;
+ }
+
+ .dark-mode {
+ --background-light: #121212;
+ --text-light: #e0e0e0;
+ --border-light: #444444;
+ --link-light: #4a90e2;
+ --code-bg-light: #1e1e1e;
+ --bs-secondary-color: #e0e0e0;
+ --td-pre-bg: #1e1e1e;
+ }
+
+ body {
+ background-color: var(--background-light);
+ color: var(--text-light);
+ transition: background-color 0.3s ease, color 0.3s ease;
+ }
+
+ a {
+ color: var(--link-light);
+ transition: color 0.3s ease;
+ }
+
+ a:hover {
+ color: color-mix(in srgb, var(--link-light) 80%, white);
+ }
+
+ header, footer {
+ background-color: var(--background-light);
+ border-bottom: 1px solid var(--border-light);
+ }
+
+ pre, code {
+ background-color: var(--code-bg-light);
+ color: var(--text-light);
+ border-radius: 5px;
+ padding: 5px;
+ }
+
+ button.toggle-dark-mode {
+ background: var(--primary-color);
+ color: #fff;
+ border: none;
+ padding: 8px 12px;
+ border-radius: 5px;
+ cursor: pointer;
+ }
+
+ button.toggle-dark-mode:hover {
+ background: color-mix(in srgb, var(--primary-color) 80%, black);
+ }
+
+
p { font-family: "Quattrocento" !important;}
.navbar, aside, .quote-title {
@@ -36,6 +97,8 @@ h1, h2, h3 ,h4, h5, .lead {
font-family: "Baloo 2" !important;
}
+
+
div.td-content h1,
div.td-content h2,
div.td-content h3,
@@ -45,7 +108,7 @@ div.td-content h6 {
color: #265d85 !important;
}
-.td-sidebar-nav-active-item {
+.ttq,d-sidebar-nav-active-item {
color: #ff0000;
}
@@ -57,6 +120,7 @@ aside{
.text-default { color: black; }
.text-white { color: white; }
+
.center-image-container {
text-align: center;
}
diff --git a/assets/scss/_variables_project.scss
b/assets/scss/_variables_project.scss
index 418c6e0..e1fd815 100644
--- a/assets/scss/_variables_project.scss
+++ b/assets/scss/_variables_project.scss
@@ -1,4 +1,5 @@
$font-family-base: "Quattrocento";
$td-enable-google-fonts: false;
-$primary: #265d85 !default;
\ No newline at end of file
+$primary: #265d85 !default;
+
diff --git a/hugo.yaml b/hugo.yaml
index f7842ff..de86d52 100644
--- a/hugo.yaml
+++ b/hugo.yaml
@@ -193,6 +193,8 @@ params:
# add "hide_readingtime: true" to the page's front matter
readingtime:
enable: false
+
+ showLightDarkModeMenu: true
links:
# End user relevant links. These will show up on left side of footer and
in the community page if you have one.
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index 3f45e8c..d5c243c 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -50,3 +50,6 @@
</div>
</div>
</footer>
+{{ if .Site.Params.ui.showLightDarkModeMenu -}}
+{{ partial "theme-toggler" . }}
+{{ end -}}
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index 1998ba2..1e57e75 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -1,3 +1,12 @@
+<script>
+ // Applica immediatamente la modalità scura se salvata in localStorage
+ (function() {
+ const currentTheme = localStorage.getItem('theme');
+ if (currentTheme === 'dark') {
+ document.documentElement.classList.add('dark-mode');
+ }
+ })();
+ </script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,
shrink-to-fit=no">
{{ range .AlternativeOutputFormats -}}
diff --git a/layouts/partials/navbar.html b/layouts/partials/navbar.html
index 3a671d4..60e65c3 100644
--- a/layouts/partials/navbar.html
+++ b/layouts/partials/navbar.html
@@ -71,17 +71,7 @@
{{ partial "navbar-lang-selector.html" . -}}
</li>
{{ end -}}
- {{ if .Site.Params.ui.showLightDarkModeMenu -}}
- <li class="td-light-dark-menu nav-item dropdown">
- {{ partial "theme-toggler" . }}
- </li>
- {{ end -}}
</ul>
-
-
- </div>
- <div class="d-none d-lg-block">
- {{ partial "search-input.html" . }}
- </div>
+ </div>
</div>
</nav>
\ No newline at end of file
diff --git a/layouts/partials/theme-toggler.html
b/layouts/partials/theme-toggler.html
new file mode 100644
index 0000000..9c7f094
--- /dev/null
+++ b/layouts/partials/theme-toggler.html
@@ -0,0 +1,57 @@
+<div id="theme-toggler-container">
+ <button id="theme-toggler" class="btn btn-light-dark" aria-label="Toggle
theme">
+ <span id="theme-icon" class="fa fa-sun"></span>
+ </button>
+</div>
+
+<script>
+ // Gestione della modalità scura
+ const themeToggler = document.getElementById('theme-toggler');
+ const themeIcon = document.getElementById('theme-icon');
+ const currentTheme = localStorage.getItem('theme') || 'light';
+
+ // Cambia tema al clic
+ themeToggler.addEventListener('click', () => {
+ document.body.classList.toggle('dark-mode');
+ const isDarkMode = document.body.classList.contains('dark-mode');
+ localStorage.setItem('theme', isDarkMode ? 'dark' : 'light');
+ themeIcon.classList.toggle('fa-sun', !isDarkMode);
+ themeIcon.classList.toggle('fa-moon', isDarkMode);
+
+ });
+</script>
+
+<style>
+ /* Stili per il pulsante flottante */
+ #theme-toggler-container {
+ position: fixed;
+ bottom: 20px;
+ right: 20px;
+ z-index: 1000;
+ }
+
+ .btn-light-dark {
+ background: #ffffff;
+ border: 1px solid #ddd;
+ border-radius: 50%;
+ width: 50px;
+ height: 50px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+ cursor: pointer;
+ transition: background-color 0.3s, transform 0.2s;
+ }
+
+ .btn-light-dark:hover {
+ background: #f0f0f0;
+ transform: scale(1.1);
+ }
+
+ .dark-mode .btn-light-dark {
+ background: #333333;
+ color: #ffffff;
+ border-color: #444444;
+ }
+</style>
\ No newline at end of file
