From 3ac8d9d4ef6ea044753ff9e204b13c64f39899e2 Mon Sep 17 00:00:00 2001 From: Kai Wagner Date: Wed, 25 Mar 2026 11:50:49 +0100 Subject: [PATCH] move theme button to top level menu again and make it available at all times, without the need to register Signed-off-by: Kai Wagner --- .../stylesheets/components/navigation.css | 34 +++++++++---------- .../controllers/theme_controller.js | 4 ++- app/views/layouts/application.html.slim | 3 ++ app/views/settings/profiles/show.html.slim | 13 ------- app/views/shared/_theme_control.html.slim | 5 +++ 5 files changed, 28 insertions(+), 31 deletions(-) create mode 100644 app/views/shared/_theme_control.html.slim diff --git a/app/assets/stylesheets/components/navigation.css b/app/assets/stylesheets/components/navigation.css index 513e285..e54fd6c 100644 --- a/app/assets/stylesheets/components/navigation.css +++ b/app/assets/stylesheets/components/navigation.css @@ -184,16 +184,11 @@ } .theme-toggle { - border-color: var(--color-border); - background: var(--color-bg-card); - color: var(--color-text-secondary); cursor: pointer; - box-shadow: var(--shadow-sm); - border-radius: 999px; - - &:hover { - background: var(--color-bg-hover); - } + appearance: none; + font: inherit; + line-height: inherit; + margin: 0; } .nav-overflow-dropdown { @@ -367,15 +362,20 @@ display: none; } - .mobile-nav-menu .nav-link { - width: 100%; - justify-content: space-between; - } +.mobile-nav-menu .nav-link { + width: 100%; + justify-content: space-between; +} - .mobile-nav-menu .nav-user { - display: block; - padding: 0 var(--spacing-2); - } +.mobile-nav-theme-control { + width: 100%; + justify-content: space-between; +} + +.mobile-nav-menu .nav-user { + display: block; + padding: 0 var(--spacing-2); +} .mobile-nav-menu { position: fixed; diff --git a/app/javascript/controllers/theme_controller.js b/app/javascript/controllers/theme_controller.js index 2ad6768..b17cf90 100644 --- a/app/javascript/controllers/theme_controller.js +++ b/app/javascript/controllers/theme_controller.js @@ -49,11 +49,13 @@ export default class extends Controller { } if (this.hasIconTarget) { - this.iconTarget.classList.remove("fa-moon", "fa-sun") + this.iconTarget.classList.remove("fa-regular", "fa-solid", "fa-moon", "fa-sun") + this.iconTarget.classList.add("fa-solid") this.iconTarget.classList.add(theme === "dark" ? "fa-sun" : "fa-moon") } this.element.setAttribute("aria-pressed", theme === "dark") + this.element.setAttribute("aria-label", `Switch to ${theme === "dark" ? "light" : "dark"} mode`) this.element.setAttribute("title", `Switch to ${theme === "dark" ? "light" : "dark"} mode`) if (this.hasButtonTarget) { diff --git a/app/views/layouts/application.html.slim b/app/views/layouts/application.html.slim index 7e77223..e019f4d 100644 --- a/app/views/layouts/application.html.slim +++ b/app/views/layouts/application.html.slim @@ -56,6 +56,7 @@ html data-theme="light" span.mobile-nav-label Menu i.fa-solid.fa-caret-down .mobile-nav-menu data-action="click->sidebar#closeMenuOnNavigate" + = render "shared/theme_control", extra_class: "mobile-nav-theme-control", show_label: true = link_to "Topics", topics_path, class: "nav-link" - if user_signed_in? - icon_class = starred_active ? "fa-solid fa-star" : "fa-regular fa-star" @@ -101,6 +102,7 @@ html data-theme="light" - if user_signed_in? - if current_user&.person&.default_alias = link_to current_user.person.default_alias.name, person_path(current_user.person.default_alias.email), class: "nav-link nav-user" + = render "shared/theme_control", extra_class: "nav-theme-control", show_label: false - unread = activity_unread_count = link_to activities_path, class: "nav-link nav-link-activity", title: "Activity" do i.fa-regular.fa-bell @@ -109,6 +111,7 @@ html data-theme="light" - else = link_to "Sign in", new_session_path, class: "nav-link" = link_to "Register", new_registration_path, class: "nav-link" + = render "shared/theme_control", extra_class: "nav-theme-control", show_label: false details.nav-overflow-dropdown data-controller="nav-dropdown" summary.nav-link.nav-overflow-toggle aria-label="Menu" data-action="click->sidebar#closeMenuOnNavigate" i.fa-solid.fa-bars diff --git a/app/views/settings/profiles/show.html.slim b/app/views/settings/profiles/show.html.slim index 4f71450..0eedff6 100644 --- a/app/views/settings/profiles/show.html.slim +++ b/app/views/settings/profiles/show.html.slim @@ -11,19 +11,6 @@ = f.text_field :username, placeholder: "your_name", value: current_user.username = f.submit "Save username", class: "button-primary" - .settings-section - h2 Appearance - p.settings-hint Choose your preferred theme. - .theme-choice data-controller="theme" - span.theme-choice-label Theme - .theme-choice-buttons - button.theme-choice-button type="button" data-theme-value="light" data-theme-target="button" data-action="click->theme#select" - i.fa-solid.fa-sun aria-hidden="true" - span Light - button.theme-choice-button type="button" data-theme-value="dark" data-theme-target="button" data-action="click->theme#select" - i.fa-regular.fa-moon aria-hidden="true" - span Dark - .settings-section h2 Mention Settings p.settings-hint Control who can @mention you in notes. diff --git a/app/views/shared/_theme_control.html.slim b/app/views/shared/_theme_control.html.slim new file mode 100644 index 0000000..f6fcee2 --- /dev/null +++ b/app/views/shared/_theme_control.html.slim @@ -0,0 +1,5 @@ +- classes = ["nav-link", "theme-toggle", local_assigns[:extra_class]].compact.join(" ") +button class=classes type="button" data-controller="theme" data-action="click->theme#toggle" aria-label="Toggle theme" + i.fa-regular.fa-moon data-theme-target="icon" aria-hidden="true" + - if local_assigns.fetch(:show_label, true) + span Theme