feat: add support for multi-themes (#210)
* chore: update deps * wip * add themes * add matrix theme * add flexoki and spaceduck themes * . * simple theme change function * . * respect shadow and radius settings * add rose pine themes * toggle theme
This commit is contained in:
@@ -8,3 +8,10 @@ publish.workspace = true
|
||||
gpui.workspace = true
|
||||
anyhow.workspace = true
|
||||
log.workspace = true
|
||||
serde.workspace = true
|
||||
serde_json.workspace = true
|
||||
schemars.workspace = true
|
||||
smallvec.workspace = true
|
||||
|
||||
[dev-dependencies]
|
||||
tempfile = "3.10"
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,284 +1,31 @@
|
||||
use std::ops::{Deref, DerefMut};
|
||||
use std::rc::Rc;
|
||||
|
||||
use colors::{brand, hsl, neutral};
|
||||
use gpui::{px, App, Global, Hsla, Pixels, SharedString, Window, WindowAppearance};
|
||||
|
||||
use crate::colors::{danger, warning};
|
||||
use crate::platform_kind::PlatformKind;
|
||||
use crate::scrollbar_mode::ScrollBarMode;
|
||||
use gpui::{px, App, Global, Pixels, SharedString, Window};
|
||||
|
||||
mod colors;
|
||||
mod registry;
|
||||
mod scale;
|
||||
mod scrollbar_mode;
|
||||
mod theme;
|
||||
|
||||
pub mod platform_kind;
|
||||
pub mod scrollbar_mode;
|
||||
pub use colors::*;
|
||||
pub use registry::*;
|
||||
pub use scale::*;
|
||||
pub use scrollbar_mode::*;
|
||||
pub use theme::*;
|
||||
|
||||
/// Defines window border radius for platforms that use client side decorations.
|
||||
pub const CLIENT_SIDE_DECORATION_ROUNDING: Pixels = px(10.0);
|
||||
|
||||
/// Defines window shadow size for platforms that use client side decorations.
|
||||
pub const CLIENT_SIDE_DECORATION_SHADOW: Pixels = px(10.0);
|
||||
|
||||
pub fn init(cx: &mut App) {
|
||||
registry::init(cx);
|
||||
|
||||
Theme::sync_system_appearance(None, cx);
|
||||
}
|
||||
|
||||
#[derive(Debug, Clone, Copy, Default)]
|
||||
pub struct ThemeColor {
|
||||
// Surface colors
|
||||
pub background: Hsla,
|
||||
pub surface_background: Hsla,
|
||||
pub elevated_surface_background: Hsla,
|
||||
pub panel_background: Hsla,
|
||||
pub overlay: Hsla,
|
||||
pub title_bar: Hsla,
|
||||
pub title_bar_inactive: Hsla,
|
||||
pub window_border: Hsla,
|
||||
|
||||
// Border colors
|
||||
pub border: Hsla,
|
||||
pub border_variant: Hsla,
|
||||
pub border_focused: Hsla,
|
||||
pub border_selected: Hsla,
|
||||
pub border_transparent: Hsla,
|
||||
pub border_disabled: Hsla,
|
||||
pub ring: Hsla,
|
||||
|
||||
// Text colors
|
||||
pub text: Hsla,
|
||||
pub text_muted: Hsla,
|
||||
pub text_placeholder: Hsla,
|
||||
pub text_accent: Hsla,
|
||||
|
||||
// Icon colors
|
||||
pub icon: Hsla,
|
||||
pub icon_muted: Hsla,
|
||||
pub icon_accent: Hsla,
|
||||
|
||||
// Element colors
|
||||
pub element_foreground: Hsla,
|
||||
pub element_background: Hsla,
|
||||
pub element_hover: Hsla,
|
||||
pub element_active: Hsla,
|
||||
pub element_selected: Hsla,
|
||||
pub element_disabled: Hsla,
|
||||
|
||||
// Secondary element colors
|
||||
pub secondary_foreground: Hsla,
|
||||
pub secondary_background: Hsla,
|
||||
pub secondary_hover: Hsla,
|
||||
pub secondary_active: Hsla,
|
||||
pub secondary_selected: Hsla,
|
||||
pub secondary_disabled: Hsla,
|
||||
|
||||
// Danger element colors
|
||||
pub danger_foreground: Hsla,
|
||||
pub danger_background: Hsla,
|
||||
pub danger_hover: Hsla,
|
||||
pub danger_active: Hsla,
|
||||
pub danger_selected: Hsla,
|
||||
pub danger_disabled: Hsla,
|
||||
|
||||
// Warning element colors
|
||||
pub warning_foreground: Hsla,
|
||||
pub warning_background: Hsla,
|
||||
pub warning_hover: Hsla,
|
||||
pub warning_active: Hsla,
|
||||
pub warning_selected: Hsla,
|
||||
pub warning_disabled: Hsla,
|
||||
|
||||
// Ghost element colors
|
||||
pub ghost_element_background: Hsla,
|
||||
pub ghost_element_background_alt: Hsla,
|
||||
pub ghost_element_hover: Hsla,
|
||||
pub ghost_element_active: Hsla,
|
||||
pub ghost_element_selected: Hsla,
|
||||
pub ghost_element_disabled: Hsla,
|
||||
|
||||
// Tab colors
|
||||
pub tab_inactive_background: Hsla,
|
||||
pub tab_hover_background: Hsla,
|
||||
pub tab_active_background: Hsla,
|
||||
|
||||
// Scrollbar colors
|
||||
pub scrollbar_thumb_background: Hsla,
|
||||
pub scrollbar_thumb_hover_background: Hsla,
|
||||
pub scrollbar_thumb_border: Hsla,
|
||||
pub scrollbar_track_background: Hsla,
|
||||
pub scrollbar_track_border: Hsla,
|
||||
|
||||
// Interactive colors
|
||||
pub drop_target_background: Hsla,
|
||||
pub cursor: Hsla,
|
||||
pub selection: Hsla,
|
||||
}
|
||||
|
||||
/// The default colors for the theme.
|
||||
///
|
||||
/// Themes that do not specify all colors are refined off of these defaults.
|
||||
impl ThemeColor {
|
||||
/// Returns the default colors for light themes.
|
||||
///
|
||||
/// Themes that do not specify all colors are refined off of these defaults.
|
||||
pub fn light() -> Self {
|
||||
Self {
|
||||
background: neutral().light().step_1(),
|
||||
surface_background: neutral().light().step_2(),
|
||||
elevated_surface_background: neutral().light().step_3(),
|
||||
panel_background: gpui::white(),
|
||||
overlay: neutral().light_alpha().step_3(),
|
||||
title_bar: gpui::transparent_black(),
|
||||
title_bar_inactive: neutral().light().step_1(),
|
||||
window_border: hsl(240.0, 5.9, 78.0),
|
||||
|
||||
border: neutral().light().step_6(),
|
||||
border_variant: neutral().light().step_5(),
|
||||
border_focused: brand().light().step_7(),
|
||||
border_selected: brand().light().step_7(),
|
||||
border_transparent: gpui::transparent_black(),
|
||||
border_disabled: neutral().light().step_3(),
|
||||
ring: brand().light().step_8(),
|
||||
|
||||
text: neutral().light().step_12(),
|
||||
text_muted: neutral().light().step_11(),
|
||||
text_placeholder: neutral().light().step_10(),
|
||||
text_accent: brand().light().step_11(),
|
||||
|
||||
icon: neutral().light().step_11(),
|
||||
icon_muted: neutral().light().step_10(),
|
||||
icon_accent: brand().light().step_11(),
|
||||
|
||||
element_foreground: brand().light().step_12(),
|
||||
element_background: brand().light().step_9(),
|
||||
element_hover: brand().light_alpha().step_10(),
|
||||
element_active: brand().light().step_10(),
|
||||
element_selected: brand().light().step_11(),
|
||||
element_disabled: brand().light_alpha().step_3(),
|
||||
|
||||
secondary_foreground: brand().light().step_11(),
|
||||
secondary_background: brand().light().step_3(),
|
||||
secondary_hover: brand().light_alpha().step_4(),
|
||||
secondary_active: brand().light().step_5(),
|
||||
secondary_selected: brand().light().step_5(),
|
||||
secondary_disabled: brand().light_alpha().step_3(),
|
||||
|
||||
danger_foreground: danger().light().step_12(),
|
||||
danger_background: danger().light().step_3(),
|
||||
danger_hover: danger().light_alpha().step_4(),
|
||||
danger_active: danger().light().step_5(),
|
||||
danger_selected: danger().light().step_5(),
|
||||
danger_disabled: danger().light_alpha().step_3(),
|
||||
|
||||
warning_foreground: warning().light().step_12(),
|
||||
warning_background: warning().light().step_3(),
|
||||
warning_hover: warning().light_alpha().step_4(),
|
||||
warning_active: warning().light().step_5(),
|
||||
warning_selected: warning().light().step_5(),
|
||||
warning_disabled: warning().light_alpha().step_3(),
|
||||
|
||||
ghost_element_background: gpui::transparent_black(),
|
||||
ghost_element_background_alt: neutral().light().step_3(),
|
||||
ghost_element_hover: neutral().light_alpha().step_4(),
|
||||
ghost_element_active: neutral().light().step_5(),
|
||||
ghost_element_selected: neutral().light().step_5(),
|
||||
ghost_element_disabled: neutral().light_alpha().step_2(),
|
||||
|
||||
tab_inactive_background: neutral().light().step_3(),
|
||||
tab_hover_background: neutral().light().step_4(),
|
||||
tab_active_background: neutral().light().step_5(),
|
||||
|
||||
scrollbar_thumb_background: neutral().light_alpha().step_3(),
|
||||
scrollbar_thumb_hover_background: neutral().light_alpha().step_4(),
|
||||
scrollbar_thumb_border: gpui::transparent_black(),
|
||||
scrollbar_track_background: gpui::transparent_black(),
|
||||
scrollbar_track_border: neutral().light().step_5(),
|
||||
|
||||
drop_target_background: brand().light_alpha().step_2(),
|
||||
cursor: hsl(200., 100., 50.),
|
||||
selection: hsl(200., 100., 50.).alpha(0.25),
|
||||
}
|
||||
}
|
||||
|
||||
/// Returns the default colors for dark themes.
|
||||
///
|
||||
/// Themes that do not specify all colors are refined off of these defaults.
|
||||
pub fn dark() -> Self {
|
||||
Self {
|
||||
background: neutral().dark().step_1(),
|
||||
surface_background: neutral().dark().step_2(),
|
||||
elevated_surface_background: neutral().dark().step_3(),
|
||||
panel_background: gpui::black(),
|
||||
overlay: neutral().dark_alpha().step_3(),
|
||||
title_bar: gpui::transparent_black(),
|
||||
title_bar_inactive: neutral().dark().step_1(),
|
||||
window_border: hsl(240.0, 3.7, 28.0),
|
||||
|
||||
border: neutral().dark().step_6(),
|
||||
border_variant: neutral().dark().step_5(),
|
||||
border_focused: brand().dark().step_7(),
|
||||
border_selected: brand().dark().step_7(),
|
||||
border_transparent: gpui::transparent_black(),
|
||||
border_disabled: neutral().dark().step_3(),
|
||||
ring: brand().dark().step_8(),
|
||||
|
||||
text: neutral().dark().step_12(),
|
||||
text_muted: neutral().dark().step_11(),
|
||||
text_placeholder: neutral().dark().step_10(),
|
||||
text_accent: brand().dark().step_11(),
|
||||
|
||||
icon: neutral().dark().step_11(),
|
||||
icon_muted: neutral().dark().step_10(),
|
||||
icon_accent: brand().dark().step_11(),
|
||||
|
||||
element_foreground: brand().dark().step_1(),
|
||||
element_background: brand().dark().step_9(),
|
||||
element_hover: brand().dark_alpha().step_10(),
|
||||
element_active: brand().dark().step_10(),
|
||||
element_selected: brand().dark().step_11(),
|
||||
element_disabled: brand().dark_alpha().step_3(),
|
||||
|
||||
secondary_foreground: brand().dark().step_12(),
|
||||
secondary_background: brand().dark().step_3(),
|
||||
secondary_hover: brand().dark_alpha().step_4(),
|
||||
secondary_active: brand().dark().step_5(),
|
||||
secondary_selected: brand().dark().step_5(),
|
||||
secondary_disabled: brand().dark_alpha().step_3(),
|
||||
|
||||
danger_foreground: danger().dark().step_12(),
|
||||
danger_background: danger().dark().step_3(),
|
||||
danger_hover: danger().dark_alpha().step_4(),
|
||||
danger_active: danger().dark().step_5(),
|
||||
danger_selected: danger().dark().step_5(),
|
||||
danger_disabled: danger().dark_alpha().step_3(),
|
||||
|
||||
warning_foreground: warning().dark().step_12(),
|
||||
warning_background: warning().dark().step_3(),
|
||||
warning_hover: warning().dark_alpha().step_4(),
|
||||
warning_active: warning().dark().step_5(),
|
||||
warning_selected: warning().dark().step_5(),
|
||||
warning_disabled: warning().dark_alpha().step_3(),
|
||||
|
||||
ghost_element_background: gpui::transparent_black(),
|
||||
ghost_element_background_alt: neutral().dark().step_3(),
|
||||
ghost_element_hover: neutral().dark_alpha().step_4(),
|
||||
ghost_element_active: neutral().dark().step_5(),
|
||||
ghost_element_selected: neutral().dark().step_5(),
|
||||
ghost_element_disabled: neutral().dark_alpha().step_2(),
|
||||
|
||||
tab_inactive_background: neutral().dark().step_3(),
|
||||
tab_hover_background: neutral().dark().step_4(),
|
||||
tab_active_background: neutral().dark().step_5(),
|
||||
|
||||
scrollbar_thumb_background: neutral().dark_alpha().step_3(),
|
||||
scrollbar_thumb_hover_background: neutral().dark_alpha().step_4(),
|
||||
scrollbar_thumb_border: gpui::transparent_black(),
|
||||
scrollbar_track_background: gpui::transparent_black(),
|
||||
scrollbar_track_border: neutral().dark().step_5(),
|
||||
|
||||
drop_target_background: brand().dark_alpha().step_2(),
|
||||
cursor: hsl(200., 100., 50.),
|
||||
selection: hsl(200., 100., 50.).alpha(0.25),
|
||||
}
|
||||
}
|
||||
Theme::sync_scrollbar_appearance(cx);
|
||||
}
|
||||
|
||||
pub trait ActiveTheme {
|
||||
@@ -292,49 +39,38 @@ impl ActiveTheme for App {
|
||||
}
|
||||
}
|
||||
|
||||
#[derive(Debug, Clone, Copy, Default, PartialEq, PartialOrd, Eq, Hash)]
|
||||
pub enum ThemeMode {
|
||||
Light,
|
||||
#[default]
|
||||
Dark,
|
||||
}
|
||||
|
||||
impl ThemeMode {
|
||||
pub fn is_dark(&self) -> bool {
|
||||
matches!(self, Self::Dark)
|
||||
}
|
||||
|
||||
/// Return lower_case theme name: `light`, `dark`.
|
||||
pub fn name(&self) -> &'static str {
|
||||
match self {
|
||||
ThemeMode::Light => "light",
|
||||
ThemeMode::Dark => "dark",
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
impl From<WindowAppearance> for ThemeMode {
|
||||
fn from(appearance: WindowAppearance) -> Self {
|
||||
match appearance {
|
||||
WindowAppearance::Dark | WindowAppearance::VibrantDark => Self::Dark,
|
||||
WindowAppearance::Light | WindowAppearance::VibrantLight => Self::Light,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#[derive(Debug, Clone)]
|
||||
pub struct Theme {
|
||||
pub colors: ThemeColor,
|
||||
/// Theme colors
|
||||
pub colors: ThemeColors,
|
||||
|
||||
/// Theme family
|
||||
pub theme: Rc<ThemeFamily>,
|
||||
|
||||
/// The appearance of the theme (light or dark).
|
||||
pub mode: ThemeMode,
|
||||
|
||||
/// The font family for the application.
|
||||
pub font_family: SharedString,
|
||||
|
||||
/// The root font size for the application, default is 15px.
|
||||
pub font_size: Pixels,
|
||||
|
||||
/// Radius for the general elements.
|
||||
pub radius: Pixels,
|
||||
pub scrollbar_mode: ScrollBarMode,
|
||||
pub platform_kind: PlatformKind,
|
||||
|
||||
/// Radius for the large elements, e.g.: modal, notification.
|
||||
pub radius_lg: Pixels,
|
||||
|
||||
/// Enable shadow for the general elements. default is true
|
||||
pub shadow: bool,
|
||||
|
||||
/// Show the scrollbar mode, default: scrolling
|
||||
pub scrollbar_mode: ScrollbarMode,
|
||||
}
|
||||
|
||||
impl Deref for Theme {
|
||||
type Target = ThemeColor;
|
||||
type Target = ThemeColors;
|
||||
|
||||
fn deref(&self) -> &Self::Target {
|
||||
&self.colors
|
||||
@@ -375,42 +111,76 @@ impl Theme {
|
||||
Self::change(appearance, window, cx);
|
||||
}
|
||||
|
||||
/// Change the app's appearance
|
||||
pub fn change(mode: impl Into<ThemeMode>, window: Option<&mut Window>, cx: &mut App) {
|
||||
let mode = mode.into();
|
||||
let colors = match mode {
|
||||
ThemeMode::Light => ThemeColor::light(),
|
||||
ThemeMode::Dark => ThemeColor::dark(),
|
||||
/// Sync the Scrollbar showing behavior with the system
|
||||
pub fn sync_scrollbar_appearance(cx: &mut App) {
|
||||
Theme::global_mut(cx).scrollbar_mode = if cx.should_auto_hide_scrollbars() {
|
||||
ScrollbarMode::Scrolling
|
||||
} else {
|
||||
ScrollbarMode::Hover
|
||||
};
|
||||
}
|
||||
|
||||
/// Apply a new theme to the application.
|
||||
pub fn apply_theme(new_theme: Rc<ThemeFamily>, window: Option<&mut Window>, cx: &mut App) {
|
||||
let theme = cx.global_mut::<Theme>();
|
||||
let mode = theme.mode;
|
||||
// Update the theme
|
||||
theme.theme = new_theme;
|
||||
// Emit a theme change event
|
||||
Self::change(mode, window, cx);
|
||||
}
|
||||
|
||||
/// Change the app's appearance
|
||||
pub fn change<M>(mode: M, window: Option<&mut Window>, cx: &mut App)
|
||||
where
|
||||
M: Into<ThemeMode>,
|
||||
{
|
||||
if !cx.has_global::<Theme>() {
|
||||
let theme = Theme::from(colors);
|
||||
let default_theme = ThemeFamily::default();
|
||||
let theme = Theme::from(default_theme);
|
||||
|
||||
cx.set_global(theme);
|
||||
}
|
||||
|
||||
let mode = mode.into();
|
||||
let theme = cx.global_mut::<Theme>();
|
||||
|
||||
// Set the theme mode
|
||||
theme.mode = mode;
|
||||
theme.colors = colors;
|
||||
|
||||
// Set the theme colors
|
||||
if mode.is_dark() {
|
||||
theme.colors = *theme.theme.dark();
|
||||
} else {
|
||||
theme.colors = *theme.theme.light();
|
||||
}
|
||||
|
||||
// Refresh the window if available
|
||||
if let Some(window) = window {
|
||||
window.refresh();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
impl From<ThemeColor> for Theme {
|
||||
fn from(colors: ThemeColor) -> Self {
|
||||
impl From<ThemeFamily> for Theme {
|
||||
fn from(family: ThemeFamily) -> Self {
|
||||
let mode = ThemeMode::default();
|
||||
// Define the theme colors based on the appearance
|
||||
let colors = match mode {
|
||||
ThemeMode::Light => family.light(),
|
||||
ThemeMode::Dark => family.dark(),
|
||||
};
|
||||
|
||||
Theme {
|
||||
font_size: px(15.),
|
||||
font_family: ".SystemUIFont".into(),
|
||||
radius: px(5.),
|
||||
scrollbar_mode: ScrollBarMode::default(),
|
||||
platform_kind: PlatformKind::platform(),
|
||||
radius_lg: px(10.),
|
||||
shadow: true,
|
||||
scrollbar_mode: ScrollbarMode::default(),
|
||||
mode,
|
||||
colors,
|
||||
colors: *colors,
|
||||
theme: Rc::new(family),
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,30 +0,0 @@
|
||||
#[derive(Debug, PartialEq, Eq, PartialOrd, Ord, Hash, Clone, Copy)]
|
||||
pub enum PlatformKind {
|
||||
Mac,
|
||||
Linux,
|
||||
Windows,
|
||||
}
|
||||
|
||||
impl PlatformKind {
|
||||
pub const fn platform() -> Self {
|
||||
if cfg!(any(target_os = "linux", target_os = "freebsd")) {
|
||||
Self::Linux
|
||||
} else if cfg!(target_os = "windows") {
|
||||
Self::Windows
|
||||
} else {
|
||||
Self::Mac
|
||||
}
|
||||
}
|
||||
|
||||
pub fn is_linux(&self) -> bool {
|
||||
matches!(self, Self::Linux)
|
||||
}
|
||||
|
||||
pub fn is_windows(&self) -> bool {
|
||||
matches!(self, Self::Windows)
|
||||
}
|
||||
|
||||
pub fn is_mac(&self) -> bool {
|
||||
matches!(self, Self::Mac)
|
||||
}
|
||||
}
|
||||
70
crates/theme/src/registry.rs
Normal file
70
crates/theme/src/registry.rs
Normal file
@@ -0,0 +1,70 @@
|
||||
use std::collections::HashMap;
|
||||
use std::rc::Rc;
|
||||
use std::sync::Arc;
|
||||
|
||||
use anyhow::{Context as AnyhowContext, Error};
|
||||
use gpui::{App, AppContext, AssetSource, Context, Entity, Global, SharedString};
|
||||
|
||||
use crate::ThemeFamily;
|
||||
|
||||
pub fn init(cx: &mut App) {
|
||||
ThemeRegistry::set_global(cx.new(ThemeRegistry::new), cx);
|
||||
}
|
||||
|
||||
struct GlobalThemeRegistry(Entity<ThemeRegistry>);
|
||||
|
||||
impl Global for GlobalThemeRegistry {}
|
||||
|
||||
pub struct ThemeRegistry {
|
||||
/// Map of theme names to theme families
|
||||
themes: HashMap<SharedString, Rc<ThemeFamily>>,
|
||||
}
|
||||
|
||||
impl ThemeRegistry {
|
||||
/// Retrieve the global theme registry state
|
||||
pub fn global(cx: &App) -> Entity<Self> {
|
||||
cx.global::<GlobalThemeRegistry>().0.clone()
|
||||
}
|
||||
|
||||
/// Set the global theme registry instance
|
||||
pub(crate) fn set_global(state: Entity<Self>, cx: &mut App) {
|
||||
cx.set_global(GlobalThemeRegistry(state));
|
||||
}
|
||||
|
||||
/// Create a new theme registry instance
|
||||
pub(crate) fn new(cx: &mut Context<Self>) -> Self {
|
||||
let mut themes = HashMap::new();
|
||||
let asset = cx.asset_source();
|
||||
|
||||
if let Ok(paths) = asset.list("themes") {
|
||||
for path in paths.into_iter() {
|
||||
match Self::load(&path, asset) {
|
||||
Ok(theme) => {
|
||||
themes.insert(path, Rc::new(theme));
|
||||
}
|
||||
Err(e) => {
|
||||
log::error!("Failed to load theme: {path}. Error: {e}");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Self { themes }
|
||||
}
|
||||
|
||||
/// Load a theme from the asset source.
|
||||
fn load(path: &str, asset: &Arc<dyn AssetSource>) -> Result<ThemeFamily, Error> {
|
||||
// Load the theme file from the assets
|
||||
let content = asset.load(path)?.context("Theme not found")?;
|
||||
|
||||
// Parse the JSON content into a Theme Family struct
|
||||
let theme: ThemeFamily = serde_json::from_slice(&content)?;
|
||||
|
||||
Ok(theme)
|
||||
}
|
||||
|
||||
/// Returns a reference to the map of themes.
|
||||
pub fn themes(&self) -> &HashMap<SharedString, Rc<ThemeFamily>> {
|
||||
&self.themes
|
||||
}
|
||||
}
|
||||
@@ -1,12 +1,15 @@
|
||||
#[derive(Debug, Clone, Copy, PartialEq, Eq, Hash, Default)]
|
||||
pub enum ScrollBarMode {
|
||||
use schemars::JsonSchema;
|
||||
use serde::{Deserialize, Serialize};
|
||||
|
||||
#[derive(Debug, Clone, Copy, PartialEq, Eq, Hash, Default, Serialize, Deserialize, JsonSchema)]
|
||||
pub enum ScrollbarMode {
|
||||
#[default]
|
||||
Scrolling,
|
||||
Hover,
|
||||
Always,
|
||||
}
|
||||
|
||||
impl ScrollBarMode {
|
||||
impl ScrollbarMode {
|
||||
pub fn is_scrolling(&self) -> bool {
|
||||
matches!(self, Self::Scrolling)
|
||||
}
|
||||
|
||||
359
crates/theme/src/theme.rs
Normal file
359
crates/theme/src/theme.rs
Normal file
@@ -0,0 +1,359 @@
|
||||
use std::path::Path;
|
||||
|
||||
use gpui::{SharedString, WindowAppearance};
|
||||
use schemars::JsonSchema;
|
||||
use serde::{Deserialize, Serialize};
|
||||
|
||||
use crate::ThemeColors;
|
||||
|
||||
#[derive(Debug, Clone, Copy, Default, PartialEq, PartialOrd, Eq, Hash)]
|
||||
pub enum ThemeMode {
|
||||
#[default]
|
||||
Light,
|
||||
Dark,
|
||||
}
|
||||
|
||||
impl ThemeMode {
|
||||
pub fn is_dark(&self) -> bool {
|
||||
matches!(self, Self::Dark)
|
||||
}
|
||||
|
||||
/// Return lower_case theme name: `light`, `dark`.
|
||||
pub fn name(&self) -> &'static str {
|
||||
match self {
|
||||
ThemeMode::Light => "light",
|
||||
ThemeMode::Dark => "dark",
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
impl From<WindowAppearance> for ThemeMode {
|
||||
fn from(appearance: WindowAppearance) -> Self {
|
||||
match appearance {
|
||||
WindowAppearance::Dark | WindowAppearance::VibrantDark => Self::Dark,
|
||||
WindowAppearance::Light | WindowAppearance::VibrantLight => Self::Light,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/// Theme family
|
||||
#[derive(Clone, Debug, PartialEq, Deserialize, Serialize, JsonSchema)]
|
||||
pub struct ThemeFamily {
|
||||
/// The unique identifier for the theme.
|
||||
pub id: String,
|
||||
|
||||
/// The name of the theme.
|
||||
pub name: SharedString,
|
||||
|
||||
/// The author of the theme.
|
||||
pub author: SharedString,
|
||||
|
||||
/// The URL of the theme.
|
||||
pub url: String,
|
||||
|
||||
/// The light colors for the theme.
|
||||
pub light: ThemeColors,
|
||||
|
||||
/// The dark colors for the theme.
|
||||
pub dark: ThemeColors,
|
||||
}
|
||||
|
||||
impl Default for ThemeFamily {
|
||||
fn default() -> Self {
|
||||
ThemeFamily {
|
||||
id: "coop".into(),
|
||||
name: "Coop Default Theme".into(),
|
||||
author: "Coop".into(),
|
||||
url: "https://github.com/lumehq/coop".into(),
|
||||
light: ThemeColors::light(),
|
||||
dark: ThemeColors::dark(),
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
impl ThemeFamily {
|
||||
/// Returns the light colors for the theme.
|
||||
#[inline(always)]
|
||||
pub fn light(&self) -> &ThemeColors {
|
||||
&self.light
|
||||
}
|
||||
|
||||
/// Returns the dark colors for the theme.
|
||||
#[inline(always)]
|
||||
pub fn dark(&self) -> &ThemeColors {
|
||||
&self.dark
|
||||
}
|
||||
|
||||
/// Load a theme family from a JSON file.
|
||||
///
|
||||
/// # Arguments
|
||||
///
|
||||
/// * `path` - Path to the JSON file containing the theme family. This can be
|
||||
/// an absolute path or a path relative to the current working directory.
|
||||
///
|
||||
/// # Returns
|
||||
///
|
||||
/// Returns `Ok(ThemeFamily)` if the file was successfully loaded and parsed,
|
||||
/// or `Err(anyhow::Error)` if there was an error reading or parsing the file.
|
||||
///
|
||||
/// # Errors
|
||||
///
|
||||
/// This function will return an error if:
|
||||
/// - The file cannot be read (permission issues, file doesn't exist, etc.)
|
||||
/// - The file contains invalid JSON
|
||||
/// - The JSON structure doesn't match the `ThemeFamily` schema
|
||||
///
|
||||
/// # Example
|
||||
///
|
||||
/// ```no_run
|
||||
/// use theme::ThemeFamily;
|
||||
///
|
||||
/// # fn main() -> anyhow::Result<()> {
|
||||
/// // Load from a relative path
|
||||
/// let theme = ThemeFamily::from_file("assets/themes/my-theme.json")?;
|
||||
///
|
||||
/// // Load from an absolute path
|
||||
/// let theme = ThemeFamily::from_file("/path/to/themes/my-theme.json")?;
|
||||
/// # Ok(())
|
||||
/// # }
|
||||
/// ```
|
||||
pub fn from_file<P: AsRef<Path>>(path: P) -> anyhow::Result<Self> {
|
||||
let json_data = std::fs::read(path)?;
|
||||
let theme_family = serde_json::from_slice(&json_data)?;
|
||||
|
||||
Ok(theme_family)
|
||||
}
|
||||
|
||||
/// Load a theme family from a JSON file in the assets/themes directory.
|
||||
///
|
||||
/// This function looks for the file at `assets/themes/{name}.json` relative
|
||||
/// to the current working directory. This is useful for loading themes
|
||||
/// from the standard theme directory in the project structure.
|
||||
///
|
||||
/// # Arguments
|
||||
///
|
||||
/// * `name` - Name of the theme file (without the .json extension)
|
||||
///
|
||||
/// # Returns
|
||||
///
|
||||
/// Returns `Ok(ThemeFamily)` if the file was successfully loaded and parsed,
|
||||
/// or `Err(anyhow::Error)` if there was an error reading or parsing the file.
|
||||
///
|
||||
/// # Errors
|
||||
///
|
||||
/// This function will return an error if:
|
||||
/// - The file cannot be read (permission issues, file doesn't exist, etc.)
|
||||
/// - The file contains invalid JSON
|
||||
/// - The JSON structure doesn't match the `ThemeFamily` schema
|
||||
///
|
||||
/// # Example
|
||||
///
|
||||
/// ```no_run
|
||||
/// use theme::ThemeFamily;
|
||||
///
|
||||
/// # fn main() -> anyhow::Result<()> {
|
||||
/// // Assuming the file exists at `assets/themes/my-theme.json`
|
||||
/// let theme = ThemeFamily::from_assets("my-theme")?;
|
||||
///
|
||||
/// println!("Loaded theme: {}", theme.name);
|
||||
/// # Ok(())
|
||||
/// # }
|
||||
/// ```
|
||||
pub fn from_assets(name: &str) -> anyhow::Result<Self> {
|
||||
let path = format!("assets/themes/{}.json", name);
|
||||
Self::from_file(path)
|
||||
}
|
||||
}
|
||||
|
||||
#[cfg(test)]
|
||||
mod tests {
|
||||
use std::fs;
|
||||
|
||||
use tempfile::tempdir;
|
||||
|
||||
use super::*;
|
||||
|
||||
#[test]
|
||||
fn test_from_file() {
|
||||
// Create a temporary directory for our test
|
||||
let dir = tempdir().unwrap();
|
||||
let file_path = dir.path().join("test-theme.json");
|
||||
|
||||
// Create a minimal valid theme JSON with hex colors
|
||||
// Using simple hex colors that Hsla can parse
|
||||
// Note: We need to escape the # characters in the raw string
|
||||
let json_data = r##"{
|
||||
"id": "test-theme",
|
||||
"name": "Test Theme",
|
||||
"author": "Coop",
|
||||
"url": "https://github.com/lumehq/coop",
|
||||
"light": {
|
||||
"background": "#ffffff",
|
||||
"surface_background": "#fafafa",
|
||||
"elevated_surface_background": "#f5f5f5",
|
||||
"panel_background": "#ffffff",
|
||||
"overlay": "#0000001a",
|
||||
"title_bar": "#00000000",
|
||||
"title_bar_inactive": "#ffffff",
|
||||
"window_border": "#c7c7cf",
|
||||
"border": "#dbdbdb",
|
||||
"border_variant": "#d1d1d1",
|
||||
"border_focused": "#3366cc",
|
||||
"border_selected": "#3366cc",
|
||||
"border_transparent": "#00000000",
|
||||
"border_disabled": "#e6e6e6",
|
||||
"ring": "#4d79d6",
|
||||
"text": "#1a1a1a",
|
||||
"text_muted": "#4d4d4d",
|
||||
"text_placeholder": "#808080",
|
||||
"text_accent": "#3366cc",
|
||||
"icon": "#4d4d4d",
|
||||
"icon_muted": "#808080",
|
||||
"icon_accent": "#3366cc",
|
||||
"element_foreground": "#ffffff",
|
||||
"element_background": "#3366cc",
|
||||
"element_hover": "#3366cce6",
|
||||
"element_active": "#2e5cb8",
|
||||
"element_selected": "#2952a3",
|
||||
"element_disabled": "#3366cc4d",
|
||||
"secondary_foreground": "#2952a3",
|
||||
"secondary_background": "#e6ecf5",
|
||||
"secondary_hover": "#3366cc1a",
|
||||
"secondary_active": "#d9e2f0",
|
||||
"secondary_selected": "#d9e2f0",
|
||||
"secondary_disabled": "#3366cc4d",
|
||||
"danger_foreground": "#ffffff",
|
||||
"danger_background": "#f5e6e6",
|
||||
"danger_hover": "#cc33331a",
|
||||
"danger_active": "#f0d9d9",
|
||||
"danger_selected": "#f0d9d9",
|
||||
"danger_disabled": "#cc33334d",
|
||||
"warning_foreground": "#1a1a1a",
|
||||
"warning_background": "#f5f0e6",
|
||||
"warning_hover": "#cc99331a",
|
||||
"warning_active": "#f0ead9",
|
||||
"warning_selected": "#f0ead9",
|
||||
"warning_disabled": "#cc99334d",
|
||||
"ghost_element_background": "#00000000",
|
||||
"ghost_element_background_alt": "#e6e6e6",
|
||||
"ghost_element_hover": "#0000001a",
|
||||
"ghost_element_active": "#d9d9d9",
|
||||
"ghost_element_selected": "#d9d9d9",
|
||||
"ghost_element_disabled": "#0000000d",
|
||||
"tab_inactive_background": "#e6e6e6",
|
||||
"tab_hover_background": "#e0e0e0",
|
||||
"tab_active_background": "#d9d9d9",
|
||||
"scrollbar_thumb_background": "#00000033",
|
||||
"scrollbar_thumb_hover_background": "#0000004d",
|
||||
"scrollbar_thumb_border": "#00000000",
|
||||
"scrollbar_track_background": "#00000000",
|
||||
"scrollbar_track_border": "#d9d9d9",
|
||||
"drop_target_background": "#3366cc1a",
|
||||
"cursor": "#3399ff",
|
||||
"selection": "#3399ff40"
|
||||
},
|
||||
"dark": {
|
||||
"background": "#1a1a1a",
|
||||
"surface_background": "#1f1f1f",
|
||||
"elevated_surface_background": "#242424",
|
||||
"panel_background": "#262626",
|
||||
"overlay": "#ffffff1a",
|
||||
"title_bar": "#00000000",
|
||||
"title_bar_inactive": "#1a1a1a",
|
||||
"window_border": "#404046",
|
||||
"border": "#404040",
|
||||
"border_variant": "#383838",
|
||||
"border_focused": "#4d79d6",
|
||||
"border_selected": "#4d79d6",
|
||||
"border_transparent": "#00000000",
|
||||
"border_disabled": "#2e2e2e",
|
||||
"ring": "#668cdf",
|
||||
"text": "#f2f2f2",
|
||||
"text_muted": "#b3b3b3",
|
||||
"text_placeholder": "#808080",
|
||||
"text_accent": "#668cdf",
|
||||
"icon": "#b3b3b3",
|
||||
"icon_muted": "#808080",
|
||||
"icon_accent": "#668cdf",
|
||||
"element_foreground": "#ffffff",
|
||||
"element_background": "#4d79d6",
|
||||
"element_hover": "#4d79d6e6",
|
||||
"element_active": "#456dc1",
|
||||
"element_selected": "#3e62ac",
|
||||
"element_disabled": "#4d79d64d",
|
||||
"secondary_foreground": "#3e62ac",
|
||||
"secondary_background": "#2a3652",
|
||||
"secondary_hover": "#4d79d61a",
|
||||
"secondary_active": "#303d5c",
|
||||
"secondary_selected": "#303d5c",
|
||||
"secondary_disabled": "#4d79d64d",
|
||||
"danger_foreground": "#ffffff",
|
||||
"danger_background": "#522a2a",
|
||||
"danger_hover": "#d64d4d1a",
|
||||
"danger_active": "#5c3030",
|
||||
"danger_selected": "#5c3030",
|
||||
"danger_disabled": "#d64d4d4d",
|
||||
"warning_foreground": "#f2f2f2",
|
||||
"warning_background": "#52482a",
|
||||
"warning_hover": "#d6b34d1a",
|
||||
"warning_active": "#5c5430",
|
||||
"warning_selected": "#5c5430",
|
||||
"warning_disabled": "#d6b34d4d",
|
||||
"ghost_element_background": "#00000000",
|
||||
"ghost_element_background_alt": "#2e2e2e",
|
||||
"ghost_element_hover": "#ffffff1a",
|
||||
"ghost_element_active": "#383838",
|
||||
"ghost_element_selected": "#383838",
|
||||
"ghost_element_disabled": "#ffffff0d",
|
||||
"tab_inactive_background": "#2e2e2e",
|
||||
"tab_hover_background": "#333333",
|
||||
"tab_active_background": "#383838",
|
||||
"scrollbar_thumb_background": "#ffffff33",
|
||||
"scrollbar_thumb_hover_background": "#ffffff4d",
|
||||
"scrollbar_thumb_border": "#00000000",
|
||||
"scrollbar_track_background": "#00000000",
|
||||
"scrollbar_track_border": "#383838",
|
||||
"drop_target_background": "#4d79d61a",
|
||||
"cursor": "#4db3ff",
|
||||
"selection": "#4db3ff40"
|
||||
}
|
||||
}"##;
|
||||
|
||||
// Write the JSON to the file
|
||||
fs::write(&file_path, json_data).unwrap();
|
||||
|
||||
// Test loading the theme from file
|
||||
let theme = ThemeFamily::from_file(&file_path).unwrap();
|
||||
|
||||
// Verify the loaded theme
|
||||
assert_eq!(theme.id, "test-theme");
|
||||
assert_eq!(theme.name, "Test Theme");
|
||||
|
||||
// Clean up
|
||||
dir.close().unwrap();
|
||||
}
|
||||
|
||||
#[test]
|
||||
fn test_from_file_nonexistent() {
|
||||
// Test that loading a non-existent file returns an error
|
||||
let result = ThemeFamily::from_file("non-existent-file.json");
|
||||
assert!(result.is_err());
|
||||
}
|
||||
|
||||
#[test]
|
||||
fn test_from_file_invalid_json() {
|
||||
// Create a temporary directory for our test
|
||||
let dir = tempdir().unwrap();
|
||||
let file_path = dir.path().join("invalid-theme.json");
|
||||
|
||||
// Write invalid JSON
|
||||
fs::write(&file_path, "invalid json").unwrap();
|
||||
|
||||
// Test that loading invalid JSON returns an error
|
||||
let result = ThemeFamily::from_file(&file_path);
|
||||
assert!(result.is_err());
|
||||
|
||||
// Clean up
|
||||
dir.close().unwrap();
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user