Make topbar moon button actually toggle theme
The Moon icon previously navigated to ely://settings/appearance, which is misleading for a button visually framed as a one-tap theme control. Add cycle_theme_mode (System → Light → Dark → System) and swap the icon between Sun and Moon to mirror the active state.
This commit is contained in:
@@ -1,6 +1,6 @@
|
|||||||
use ely_browser_core::BrowserSnapshot;
|
use ely_browser_core::BrowserSnapshot;
|
||||||
use ely_design_system::{colors, spacing};
|
use ely_design_system::{colors, spacing};
|
||||||
use ely_domain::BrowserTab;
|
use ely_domain::{BrowserTab, ThemeMode};
|
||||||
use gpui::{
|
use gpui::{
|
||||||
AnyElement, BoxShadow, Context, FontWeight, InteractiveElement, IntoElement, ParentElement,
|
AnyElement, BoxShadow, Context, FontWeight, InteractiveElement, IntoElement, ParentElement,
|
||||||
SharedString, StatefulInteractiveElement, Styled, div, hsla, point,
|
SharedString, StatefulInteractiveElement, Styled, div, hsla, point,
|
||||||
@@ -47,9 +47,9 @@ pub(crate) fn render_topbar(
|
|||||||
))
|
))
|
||||||
.child(render_topbar_action(
|
.child(render_topbar_action(
|
||||||
"toggle-theme",
|
"toggle-theme",
|
||||||
IconName::Moon,
|
theme_mode_icon(snapshot.appearance.theme_mode()),
|
||||||
cx,
|
cx,
|
||||||
|shell, window, cx| shell.open_internal_tab("ely://settings/appearance", window, cx),
|
|shell, _window, cx| shell.cycle_theme_mode(cx),
|
||||||
))
|
))
|
||||||
.child(render_topbar_action(
|
.child(render_topbar_action(
|
||||||
"open-menu",
|
"open-menu",
|
||||||
@@ -249,6 +249,18 @@ where
|
|||||||
const OMNIBAR_BG: u32 = 0xffffff8c;
|
const OMNIBAR_BG: u32 = 0xffffff8c;
|
||||||
const CHIP_HOVER_BG: u32 = 0xffffffd9;
|
const CHIP_HOVER_BG: u32 = 0xffffffd9;
|
||||||
|
|
||||||
|
/// Topbar quick-toggle icon for the current theme mode. The button
|
||||||
|
/// cycles System → Light → Dark → System, and the icon previews the
|
||||||
|
/// state the user is in: sun for light, moon for dark. System falls
|
||||||
|
/// back to moon since the bundled icon set has no combined sun-moon
|
||||||
|
/// glyph and the OS-driven mode visually leans neutral.
|
||||||
|
fn theme_mode_icon(mode: ThemeMode) -> IconName {
|
||||||
|
match mode {
|
||||||
|
ThemeMode::Light => IconName::Sun,
|
||||||
|
ThemeMode::System | ThemeMode::Dark => IconName::Moon,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
fn soft_shadow() -> Vec<BoxShadow> {
|
fn soft_shadow() -> Vec<BoxShadow> {
|
||||||
vec![
|
vec![
|
||||||
BoxShadow {
|
BoxShadow {
|
||||||
|
|||||||
@@ -72,6 +72,23 @@ impl ElyShell {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/// Cycle the theme mode for the topbar's quick-toggle button:
|
||||||
|
/// System → Light → Dark → System. Mirrors the segmented control
|
||||||
|
/// in the appearance settings page so the topbar toggle reaches
|
||||||
|
/// every state without spawning a settings page.
|
||||||
|
pub(super) fn cycle_theme_mode(&mut self, cx: &mut Context<Self>) {
|
||||||
|
let ShellState::Ready(core) = &mut self.state else {
|
||||||
|
return;
|
||||||
|
};
|
||||||
|
let next = match core.appearance().theme_mode() {
|
||||||
|
ThemeMode::System => ThemeMode::Light,
|
||||||
|
ThemeMode::Light => ThemeMode::Dark,
|
||||||
|
ThemeMode::Dark => ThemeMode::System,
|
||||||
|
};
|
||||||
|
core.set_theme_mode(next);
|
||||||
|
cx.notify();
|
||||||
|
}
|
||||||
|
|
||||||
pub(super) fn toggle_reduce_motion(&mut self, cx: &mut Context<Self>) {
|
pub(super) fn toggle_reduce_motion(&mut self, cx: &mut Context<Self>) {
|
||||||
if let ShellState::Ready(core) = &mut self.state {
|
if let ShellState::Ready(core) = &mut self.state {
|
||||||
let next = !core.appearance().reduce_motion();
|
let next = !core.appearance().reduce_motion();
|
||||||
|
|||||||
Reference in New Issue
Block a user