Jika/deckui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Change default theme to Onedark

Browse Source
This commit is contained in:
jika
2023-08-06 10:39:54 +02:00
parent 83a9ce23dd
commit 59a0cf8292
7 changed files with 58 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
remote/src/main.rs
View File

@@ -15,6 +15,8 @@ fn main() -> Result<(), slint::PlatformError> {
let app = App::new()?;
app.global::<ColorReload>().invoke_reload_color();
media::init(&app, messages_to_server, message_from_server);
virtual_keyboard::init(&app);

2
remote/ui/app-manager.slint
View File

@@ -4,4 +4,6 @@
export global AppManager {
in-out property <bool> keyboard-enabled: true;
in-out property <bool> widgets-enabled: true;
in-out property <bool> debug: false;
}

2
remote/ui/app.slint
View File

@@ -3,11 +3,13 @@ import { MediaPage , SettingsPage } from "pages/pages.slint";
import { AppManager } from "app-manager.slint";
import { SideBarView } from "side-bar-view.slint";
import { MediaControls, MediaLogic } from "widgets/mediacontrols.slint";
import { ColorReload } from "pages/settings-page.slint";
export { VirtualKeyboardHandler }
export { AppManager }
export { Palette }
export { MediaLogic }
export { ColorReload }
export component App inherits CoopWindow {
// preferred-width: 600px;

60
remote/ui/pages/settings-page.slint
View File

@@ -1,19 +1,33 @@
import { Page } from "page.slint";
import { AppManager } from "../app-manager.slint";
import { ComboBox, Switch, Palette, ColorTheme, Icons, ColorVariant, CheckBox } from "../_imports/coop-widgets.slint";
import { ThemeSwitcher, ColorPalette,Settings } from "../themes/palettes.slint";
import { ComboBox, Switch, Palette, Icons, ColorVariant, CheckBox, ColorTheme } from "../_imports/coop-widgets.slint";
import { ColorPalette, ThemeSettings, ThemeSwitcher } from "../themes/palettes.slint";
import { Onedark } from "../themes/onedark.slint";
import { BrushesPage } from "brushes-page.slint";
export global ColorReload {
public function reload_color() {
ThemeSettings.built-in-theme = true;
if (ThemeSettings.color-index == 0) {
Palette.set-color-theme(ColorTheme.Coop);
return;
} else if (ThemeSettings.color-index == 1) {
Palette.set-color-theme(ColorTheme.Cosmic);
return;
} else if (ThemeSettings.color-index == 2){
ThemeSettings.color-palette = Onedark.palette;
}
ThemeSettings.built-in-theme = false;
ThemeSwitcher.switch(ThemeSettings.color-palette);
}
}
export component SettingsPage inherits Page {
title: "Settings";
in-out property <bool> keyboard_check_box: true;
in-out property <bool> disabled_check_box: true;
in-out property <ColorPalette> color_palette;
in-out property <bool> built-in-theme: true;
in-out property <int> color_index;
in-out property <bool> debug: false;
Flickable {
VerticalLayout {
alignment: start;
@@ -30,26 +44,11 @@ export component SettingsPage inherits Page {
checked <=> AppManager.widgets_enabled;
}
function reload_color() {
root.built-in-theme = true;
if (root.color-index == 0) {
Palette.set-color-theme(ColorTheme.Coop);
return;
} else if (root.color-index == 1) {
Palette.set-color-theme(ColorTheme.Cosmic);
return;
} else if (root.color-index == 2){
root.color-palette = Onedark.palette;
}
root.built-in-theme = false;
ThemeSwitcher.switch(root.color-palette);
}
ComboBox {
width: 128px;
height: 40px;
placeholder-text: @tr("Select theme:");
current-index: root.color-index;
current-index: ThemeSettings.color-index;
model: [
{ text: "Coop" },
@@ -58,8 +57,8 @@ export component SettingsPage inherits Page {
];
selected (index) => {
root.color-index=index;
reload-color();
ThemeSettings.color-index=index;
ColorReload.reload-color();
}
}
@@ -70,20 +69,19 @@ export component SettingsPage inherits Page {
height: 48px;
on_icon: Icons.mode-night;
off_icon: Icons.light-mode;
checked: !Palette.dark-color-scheme;
checked: !ThemeSettings.dark-color-scheme;
toggled(checked) => {
Settings.dark-color-scheme = !checked;
if (root.built-in-theme){
ThemeSettings.dark-color-scheme = !checked;
if (ThemeSettings.built-in-theme){
Palette.set-color-variant(checked ? ColorVariant.Light : ColorVariant.Dark);
} else {
// ThemeSwitcher.switch(root.color-palette);
reload-color();
ColorReload.reload-color();
}
}
}
}
if root.debug : BrushesPage { }
if AppManager.debug : BrushesPage { }
}
}
}

30
remote/ui/themes/onedark.slint
View File

@@ -1,4 +1,4 @@
import { ColorPalette, Settings } from "palettes.slint";
import { ColorPalette, ThemeSettings } from "palettes.slint";
struct ColorPalette_ {
black : color,
@@ -92,20 +92,20 @@ export global Onedark {
out property <ColorPalette> palette: {
background: Settings.dark-color-scheme ? darker.bg0: light.bg0,
background-alt: Settings.dark-color-scheme ? darker.bg1: light.bg1,
foreground: Settings.dark-color-scheme ? darker.fg: light.fg,
foreground-disabled: Settings.dark-color-scheme ? darker.bg2: light.bg2,
surface: Settings.dark-color-scheme ? darker.bg3: light.bg3,
surface-disabled: Settings.dark-color-scheme ? darker.bg1: light.bg1,
on-surface: Settings.dark-color-scheme ? darker.bg-d: light.bg-d,
primary: Settings.dark-color-scheme ? darker.dark-purple: light.dark-purple,
on-primary: Settings.dark-color-scheme ? darker.bg-d: light.bg-d,
border: Settings.dark-color-scheme ? darker.bg2: light.bg2,
border-disabled: Settings.dark-color-scheme ? darker.bg3: light.bg3,
shadow: Settings.dark-color-scheme ? #00000052 : #00000014,
background: ThemeSettings.dark-color-scheme ? darker.bg0: light.bg0,
background-alt: ThemeSettings.dark-color-scheme ? darker.bg1: light.bg1,
foreground: ThemeSettings.dark-color-scheme ? darker.fg: light.fg,
foreground-disabled: ThemeSettings.dark-color-scheme ? darker.bg2: light.bg2,
surface: ThemeSettings.dark-color-scheme ? darker.bg3: light.bg3,
surface-disabled: ThemeSettings.dark-color-scheme ? darker.bg1: light.bg1,
on-surface: ThemeSettings.dark-color-scheme ? darker.bg-d: light.bg-d,
primary: ThemeSettings.dark-color-scheme ? darker.dark-purple: light.dark-purple,
on-primary: ThemeSettings.dark-color-scheme ? darker.bg-d: light.bg-d,
border: ThemeSettings.dark-color-scheme ? darker.bg2: light.bg2,
border-disabled: ThemeSettings.dark-color-scheme ? darker.bg3: light.bg3,
shadow: ThemeSettings.dark-color-scheme ? #00000052 : #00000014,
error: darker.dark-red,
accent: Settings.dark-color-scheme ? darker.dark-purple: light.dark-purple,
on-accent: Settings.dark-color-scheme ? darker.bg-d: light.bg-d,
accent: ThemeSettings.dark-color-scheme ? darker.dark-purple: light.dark-purple,
on-accent: ThemeSettings.dark-color-scheme ? darker.bg-d: light.bg-d,
};
}

10
remote/ui/themes/palettes.slint
View File

@@ -1,9 +1,6 @@
import { Palette } from "../_imports/coop-widgets.slint";
import { StyleMetrics } from "std-widgets.slint";
export global Settings {
in-out property <bool> dark-color-scheme: StyleMetrics.dark-color-scheme;
}
export struct ColorPalette {
background: brush,
background-alt: brush,
@@ -22,6 +19,13 @@ export struct ColorPalette {
on-accent: brush,
}
export global ThemeSettings {
in-out property <bool> dark-color-scheme: StyleMetrics.dark-color-scheme;
in-out property <ColorPalette> color_palette;
in-out property <bool> built-in-theme;
in-out property <int> color_index: 2;
}
export global ThemeSwitcher {
public function switch(palette: ColorPalette) {
Palette.background = palette.background;

3
remote/ui/widgets/clickable.slint
View File

@@ -4,11 +4,10 @@ export component Clickable inherits TouchArea {
in property <image> icon;
callback action;
Image {
width: 128px;
height: 128px;
colorize: root.pressed ? Palette.foreground-disabled: Palette.foreground;
colorize: root.pressed ? Palette.accent: Palette.foreground;
source: icon;
}