LESA/custum-hyprpanel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Upgrade to Agsv2 + Astal (#533)

Browse Source 
* migrate to astal

* Reorganize project structure.

* progress

* Migrate Dashboard and Window Title modules.

* Migrate clock and notification bar modules.

* Remove unused code

* Media menu

* Rework network and volume modules

* Finish custom modules.

* Migrate battery bar module.

* Update battery module and organize helpers.

* Migrate workspace module.

* Wrap up bar modules.

* Checkpoint before I inevitbly blow something up.

* Updates

* Fix event propagation logic.

* Type fixes

* More type fixes

* Fix padding for event boxes.

* Migrate volume menu and refactor scroll event handlers.

* network module WIP

* Migrate network service.

* Migrate bluetooth menu

* Updates

* Migrate notifications

* Update scrolling behavior for custom modules.

* Improve popup notifications and add timer functionality.

* Migration notifications menu header/controls.

* Migrate notifications menu and consolidate notifications menu code.

* Migrate power menu.

* Dashboard progress

* Migrate dashboard

* Migrate media menu.

* Reduce media menu nesting.

* Finish updating media menu bindings to navigate active player.

* Migrate battery menu

* Consolidate code

* Migrate calendar menu

* Fix workspace logic to update on client add/change/remove and consolidate code.

* Migrate osd

* Consolidate hyprland service connections.

* Implement startup dropdown menu position allocation.

* Migrate settings menu (WIP)

* Settings dialo menu fixes

* Finish Dashboard menu

* Type updates

* update submoldule for types

* update github ci

* ci

* Submodule update

* Ci updates

* Remove type checking for now.

* ci fix

* Fix a bunch of stuff, losing track... need rest. Brb coffee

* Validate dropdown menu before render.

* Consolidate code and add auto-hide functionality.

* Improve auto-hide behavior.

* Consolidate audio menu code

* Organize bluetooth code

* Improve active player logic

* Properly dismiss a notification on action button resolution.

* Implement CLI command engine and migrate CLI commands.

* Handle variable disposal

* Bar component fixes and add hyprland startup rules.

* Handle potentially null bindings network and bluetooth bindings.

* Handle potentially null wired adapter.

* Fix GPU stats

* Handle poller for GPU

* Fix gpu bar logic.

* Clean up logic for stat bars.

* Handle wifi and wired bar icon bindings.

* Fix battery percentages

* Fix switch behavior

* Wifi staging fixes

* Reduce redundant hyprland service calls.

* Code cleanup

* Document the option code and reduce redundant calls to optimize performance.

* Remove outdated comment.

* Add JSDocs

* Add meson to build hyprpanel

* Consistency updates

* Organize commands

* Fix images not showing up on notifications.

* Remove todo

* Move hyprpanel configuration to the ~/.config/hyprpanel directory and add utility commands.

* Handle SRC directory for the bundled/built hyprpanel.

* Add namespaces to all windows

* Migrate systray

* systray updates

* Update meson to include ts, tsx and scss files.

* Remove log from meson

* Fix file choose path and make it float.

* Added a command to check the dependency status

* Update dep names.

* Get scale directly from env

* Add todo
This commit is contained in:
Jas Singh
2024-12-20 18:10:10 -08:00
committed by GitHub
parent 955eed6c60
commit 2ffd602910
605 changed files with 19543 additions and 15999 deletions
Download Patch File Download Diff File Expand all files Collapse all files

151
src/components/settings/pages/theme/bar/index.tsx Normal file
View File

@@ -0,0 +1,151 @@
import { Option } from 'src/components/settings/shared/Option';
import { Header } from 'src/components/settings/shared/Header';
import options from 'src/options';
import { Gtk } from 'astal/gtk3';
export const BarTheme = (): JSX.Element => {
return (
<scrollable
name={'Bar'}
className="bar-theme-page paged-container"
vscroll={Gtk.PolicyType.ALWAYS}
hscroll={Gtk.PolicyType.AUTOMATIC}
vexpand={false}
>
<box vertical>
{/* General Section */}
<Header title="General" />
<Option opt={options.theme.bar.transparent} title="Transparent" type="boolean" />
<Option opt={options.theme.bar.background} title="Background Color" type="color" />
<Option
opt={options.theme.bar.buttons.style}
title="Button Style"
type="enum"
enums={['default', 'split', 'wave', 'wave2']}
/>
<Option
opt={options.theme.bar.opacity}
title="Background Opacity"
type="number"
increment={5}
min={0}
max={100}
/>
<Option opt={options.theme.bar.border.color} title="Bar Border Color" type="color" />
<Option
opt={options.theme.bar.buttons.opacity}
title="Button Opacity"
type="number"
increment={5}
min={0}
max={100}
/>
<Option
opt={options.theme.bar.buttons.background_opacity}
title="Button Background Opacity"
type="number"
increment={5}
min={0}
max={100}
/>
<Option
opt={options.theme.bar.buttons.background_hover_opacity}
title="Button Background Hover Opacity"
type="number"
increment={5}
min={0}
max={100}
/>
<Option
opt={options.theme.bar.buttons.monochrome}
title="Use Global Colors"
type="boolean"
disabledBinding={options.theme.matugen}
/>
<Option opt={options.theme.bar.buttons.background} title="Button Background" type="color" />
<Option opt={options.theme.bar.buttons.borderColor} title="Button Border" type="color" />
<Option opt={options.theme.bar.buttons.text} title="Button Text" type="color" />
<Option opt={options.theme.bar.buttons.icon} title="Button Icon" type="color" />
<Option
opt={options.theme.bar.buttons.icon_background}
title="Button Icon Background"
subtitle="Applies a background color to the icon section of the button.\nRequires 'split' button styling."
type="color"
/>
{/* Dashboard Button Section */}
<Header title="Dashboard Button" />
<Option opt={options.theme.bar.buttons.dashboard.background} title="Background" type="color" />
<Option opt={options.theme.bar.buttons.dashboard.icon} title="Icon" type="color" />
<Option opt={options.theme.bar.buttons.dashboard.border} title="Border" type="color" />
{/* Workspaces Section */}
<Header title="Workspaces" />
<Option opt={options.theme.bar.buttons.workspaces.background} title="Background" type="color" />
<Option opt={options.theme.bar.buttons.workspaces.hover} title="Workspace Hover Color" type="color" />
<Option
opt={options.theme.bar.buttons.workspaces.available}
title="Workspace Available Color"
type="color"
/>
<Option
opt={options.theme.bar.buttons.workspaces.occupied}
title="Workspace Occupied Color"
type="color"
/>
<Option opt={options.theme.bar.buttons.workspaces.active} title="Workspace Active Color" type="color" />
<Option
opt={options.theme.bar.buttons.workspaces.numbered_active_highlighted_text_color}
title="Highlighted Workspace Text Color"
type="color"
/>
<Option
opt={options.theme.bar.buttons.workspaces.numbered_active_underline_color}
title="Workspace Underline Color"
type="color"
/>
<Option opt={options.theme.bar.buttons.workspaces.border} title="Border" type="color" />
{/* Window Title Section */}
<Header title="Window Title" />
<Option opt={options.theme.bar.buttons.windowtitle.background} title="Background" type="color" />
<Option opt={options.theme.bar.buttons.windowtitle.text} title="Text" type="color" />
<Option opt={options.theme.bar.buttons.windowtitle.icon} title="Icon" type="color" />
<Option
opt={options.theme.bar.buttons.windowtitle.icon_background}
title="Button Icon Background"
subtitle="Applies a background color to the icon section of the button.\nRequires 'split' button styling."
type="color"
/>
<Option opt={options.theme.bar.buttons.windowtitle.border} title="Border" type="color" />
{/* Media Section */}
<Header title="Media" />
<Option opt={options.theme.bar.buttons.media.background} title="Background" type="color" />
<Option opt={options.theme.bar.buttons.media.text} title="Text" type="color" />
<Option opt={options.theme.bar.buttons.media.icon} title="Icon" type="color" />
<Option
opt={options.theme.bar.buttons.media.icon_background}
title="Button Icon Background"
subtitle="Applies a background color to the icon section of the button.\nRequires 'split' button styling."
type="color"
/>
<Option opt={options.theme.bar.buttons.media.border} title="Border" type="color" />
{/* Volume Section */}
<Header title="Volume" />
<Option opt={options.theme.bar.buttons.volume.background} title="Background" type="color" />
<Option opt={options.theme.bar.buttons.volume.text} title="Text" type="color" />
<Option opt={options.theme.bar.buttons.volume.icon} title="Icon" type="color" />
<Option
opt={options.theme.bar.buttons.volume.icon_background}
title="Button Icon Background"
subtitle="Applies a background color to the icon section of the button.\nRequires 'split' button styling."
type="color"
/>
<Option opt={options.theme.bar.buttons.volume.border} title="Border" type="color" />
</box>
</scrollable>
);
};

85
src/components/settings/pages/theme/index.tsx Normal file
View File

@@ -0,0 +1,85 @@
import options from 'src/options';
import { bind, Variable } from 'astal';
import { Gtk } from 'astal/gtk3';
import { isPrimaryClick } from 'src/lib/utils';
import { StackTransitionMap } from 'src/lib/constants/options';
import { MenuTheme } from './menus';
import { Matugen } from './menus/matugen';
import { BarTheme } from './bar';
import { NotificationsTheme } from './notifications';
import { OsdTheme } from './osd';
import { BatteryMenuTheme } from './menus/battery';
import { BluetoothMenuTheme } from './menus/bluetooth';
import { ClockMenuTheme } from './menus/clock';
import { DashboardMenuTheme } from './menus/dashboard';
import { MediaMenuTheme } from './menus/media';
import { NetworkMenuTheme } from './menus/network';
import { NotificationsMenuTheme } from './menus/notifications';
import { SystrayMenuTheme } from './menus/systray';
import { VolumeMenuTheme } from './menus/volume';
import { PowerMenuTheme } from './menus/power';
import { CustomModuleTheme } from 'src/components/bar/settings/theme';
import { ThemePage, themePages } from '../../helpers';
const { transition, transitionTime } = options.menus;
const CurrentPage = Variable<ThemePage>('General Settings');
export const ThemesMenu = (): JSX.Element => {
return (
<box name={'Theming'} halign={Gtk.Align.FILL} hexpand vertical>
<box className="option-pages-container" halign={Gtk.Align.CENTER} hexpand vertical>
{[0, 1, 2].map((section) => {
return (
<box>
{themePages.map((page, index) => {
if (index >= section * 6 && index < section * 6 + 6) {
return (
<button
className={bind(CurrentPage).as(
(pg) => `pager-button ${pg === page ? 'active' : ''}`,
)}
label={page}
onClick={(_, event) => {
if (isPrimaryClick(event)) {
CurrentPage.set(page as ThemePage);
}
}}
halign={Gtk.Align.CENTER}
/>
);
}
return <box />;
})}
</box>
);
})}
</box>
<stack
className="themes-menu-stack"
transitionType={bind(transition).as((transitionType) => StackTransitionMap[transitionType])}
transitionDuration={bind(transitionTime)}
shown={bind(CurrentPage)}
vexpand={false}
>
<MenuTheme />
<Matugen />
<BarTheme />
<NotificationsTheme />
<OsdTheme />
<BatteryMenuTheme />
<BluetoothMenuTheme />
<ClockMenuTheme />
<DashboardMenuTheme />
<MediaMenuTheme />
<NetworkMenuTheme />
<NotificationsMenuTheme />
<SystrayMenuTheme />
<VolumeMenuTheme />
<PowerMenuTheme />
<CustomModuleTheme />
</stack>
</box>
);
};

60
src/components/settings/pages/theme/menus/battery.tsx Normal file
View File

@@ -0,0 +1,60 @@
import { Option } from 'src/components/settings/shared/Option';
import { Header } from 'src/components/settings/shared/Header';
import options from 'src/options';
import { Gtk } from 'astal/gtk3';
export const BatteryMenuTheme = (): JSX.Element => {
return (
<scrollable
name={'Battery Menu'}
className="menu-theme-page battery paged-container"
vscroll={Gtk.PolicyType.AUTOMATIC}
hscroll={Gtk.PolicyType.AUTOMATIC}
vexpand={true}
>
<box vertical>
{/* Battery Menu Theme Settings Section */}
<Header title="Battery Menu Theme Settings" />
<Option opt={options.theme.bar.menus.menu.battery.text} title="Text" type="color" />
{/* Card Section */}
<Header title="Card" />
<Option opt={options.theme.bar.menus.menu.battery.card.color} title="Card" type="color" />
{/* Background Section */}
<Header title="Background" />
<Option opt={options.theme.bar.menus.menu.battery.background.color} title="Background" type="color" />
{/* Border Section */}
<Header title="Border" />
<Option opt={options.theme.bar.menus.menu.battery.border.color} title="Border" type="color" />
{/* Label Section */}
<Header title="Label" />
<Option opt={options.theme.bar.menus.menu.battery.label.color} title="Label" type="color" />
{/* List Items Section */}
<Header title="List Items" />
<Option opt={options.theme.bar.menus.menu.battery.listitems.active} title="Active/Hover" type="color" />
<Option opt={options.theme.bar.menus.menu.battery.listitems.passive} title="Passive" type="color" />
{/* Icons Section */}
<Header title="Icons" />
<Option opt={options.theme.bar.menus.menu.battery.icons.active} title="Active" type="color" />
<Option opt={options.theme.bar.menus.menu.battery.icons.passive} title="Passive" type="color" />
{/* Slider Section */}
<Header title="Slider" />
<Option opt={options.theme.bar.menus.menu.battery.slider.primary} title="Primary" type="color" />
<Option opt={options.theme.bar.menus.menu.battery.slider.background} title="Background" type="color" />
<Option
opt={options.theme.bar.menus.menu.battery.slider.backgroundhover}
title="Background (Hover)"
type="color"
/>
<Option opt={options.theme.bar.menus.menu.battery.slider.puck} title="Puck" type="color" />
</box>
</scrollable>
);
};

76
src/components/settings/pages/theme/menus/bluetooth.tsx Normal file
View File

@@ -0,0 +1,76 @@
import { Option } from 'src/components/settings/shared/Option';
import { Header } from 'src/components/settings/shared/Header';
import options from 'src/options';
import { Gtk } from 'astal/gtk3';
export const BluetoothMenuTheme = (): JSX.Element => {
return (
<scrollable
name={'Bluetooth Menu'}
className="menu-theme-page bluetooth paged-container"
vscroll={Gtk.PolicyType.AUTOMATIC}
hscroll={Gtk.PolicyType.AUTOMATIC}
vexpand={true}
>
<box vertical>
{/* Bluetooth Menu Theme Settings Section */}
<Header title="Bluetooth Menu Theme Settings" />
<Option opt={options.theme.bar.menus.menu.bluetooth.text} title="Text" type="color" />
{/* Card Section */}
<Header title="Card" />
<Option opt={options.theme.bar.menus.menu.bluetooth.card.color} title="Card" type="color" />
{/* Background Section */}
<Header title="Background" />
<Option opt={options.theme.bar.menus.menu.bluetooth.background.color} title="Background" type="color" />
{/* Border Section */}
<Header title="Border" />
<Option opt={options.theme.bar.menus.menu.bluetooth.border.color} title="Border" type="color" />
{/* Label Section */}
<Header title="Label" />
<Option opt={options.theme.bar.menus.menu.bluetooth.label.color} title="Label" type="color" />
{/* Status Section */}
<Header title="Status" />
<Option opt={options.theme.bar.menus.menu.bluetooth.status} title="Connection Status" type="color" />
{/* List Items Section */}
<Header title="List Items" />
<Option
opt={options.theme.bar.menus.menu.bluetooth.listitems.active}
title="Active/Hover"
type="color"
/>
<Option opt={options.theme.bar.menus.menu.bluetooth.listitems.passive} title="Passive" type="color" />
{/* Icons Section */}
<Header title="Icons" />
<Option opt={options.theme.bar.menus.menu.bluetooth.icons.active} title="Active" type="color" />
<Option opt={options.theme.bar.menus.menu.bluetooth.icons.passive} title="Passive" type="color" />
{/* Icon Buttons Section */}
<Header title="Icon Buttons" />
<Option opt={options.theme.bar.menus.menu.bluetooth.iconbutton.active} title="Active" type="color" />
<Option opt={options.theme.bar.menus.menu.bluetooth.iconbutton.passive} title="Passive" type="color" />
{/* Switch Section */}
<Header title="Switch" />
<Option opt={options.theme.bar.menus.menu.bluetooth.switch.enabled} title="Enabled" type="color" />
<Option opt={options.theme.bar.menus.menu.bluetooth.switch.disabled} title="Disabled" type="color" />
<Option opt={options.theme.bar.menus.menu.bluetooth.switch.puck} title="Puck" type="color" />
{/* Switch Divider Section */}
<Header title="Switch Divider" />
<Option
opt={options.theme.bar.menus.menu.bluetooth.switch_divider}
title="Switch Divider"
type="color"
/>
</box>
</scrollable>
);
};

117
src/components/settings/pages/theme/menus/clock.tsx Normal file
View File

@@ -0,0 +1,117 @@
import { Option } from 'src/components/settings/shared/Option';
import { Header } from 'src/components/settings/shared/Header';
import options from 'src/options';
import { Gtk } from 'astal/gtk3';
export const ClockMenuTheme = (): JSX.Element => {
return (
<scrollable
name={'Clock Menu'}
className="menu-theme-page clock paged-container"
vscroll={Gtk.PolicyType.AUTOMATIC}
hscroll={Gtk.PolicyType.AUTOMATIC}
vexpand={true}
>
<box vertical>
{/* Clock Menu Theme Settings Section */}
<Header title="Clock Menu Theme Settings" />
<Option opt={options.theme.bar.menus.menu.clock.text} title="Text" type="color" />
{/* Card Section */}
<Header title="Card" />
<Option opt={options.theme.bar.menus.menu.clock.card.color} title="Card" type="color" />
{/* Background Section */}
<Header title="Background" />
<Option opt={options.theme.bar.menus.menu.clock.background.color} title="Background" type="color" />
{/* Border Section */}
<Header title="Border" />
<Option opt={options.theme.bar.menus.menu.clock.border.color} title="Border" type="color" />
{/* Time Section */}
<Header title="Time" />
<Option opt={options.theme.bar.menus.menu.clock.time.time} title="Time" type="color" />
<Option
opt={options.theme.bar.menus.menu.clock.time.timeperiod}
title="Period"
subtitle="AM/PM"
type="color"
/>
{/* Calendar Section */}
<Header title="Calendar" />
<Option opt={options.theme.bar.menus.menu.clock.calendar.yearmonth} title="Year/Month" type="color" />
<Option opt={options.theme.bar.menus.menu.clock.calendar.weekdays} title="Weekdays" type="color" />
<Option
opt={options.theme.bar.menus.menu.clock.calendar.paginator}
title="Navigation Arrows (Hover)"
type="color"
/>
<Option opt={options.theme.bar.menus.menu.clock.calendar.currentday} title="Current Day" type="color" />
<Option opt={options.theme.bar.menus.menu.clock.calendar.days} title="Days" type="color" />
<Option
opt={options.theme.bar.menus.menu.clock.calendar.contextdays}
title="Trailing/Leading Days"
type="color"
/>
{/* Weather Section */}
<Header title="Weather" />
<Option
opt={options.theme.bar.menus.menu.clock.weather.icon}
title="Current Weather Icon"
type="color"
/>
<Option
opt={options.theme.bar.menus.menu.clock.weather.temperature}
title="Current Temperature"
type="color"
/>
<Option opt={options.theme.bar.menus.menu.clock.weather.status} title="Current Status" type="color" />
<Option opt={options.theme.bar.menus.menu.clock.weather.stats} title="Current Stats" type="color" />
<Option
opt={options.theme.bar.menus.menu.clock.weather.thermometer.extremelyhot}
title="Thermometer - Extremely Hot"
type="color"
/>
<Option
opt={options.theme.bar.menus.menu.clock.weather.thermometer.hot}
title="Thermometer - Hot"
type="color"
/>
<Option
opt={options.theme.bar.menus.menu.clock.weather.thermometer.moderate}
title="Thermometer - Moderate"
type="color"
/>
<Option
opt={options.theme.bar.menus.menu.clock.weather.thermometer.cold}
title="Thermometer - Cold"
type="color"
/>
<Option
opt={options.theme.bar.menus.menu.clock.weather.thermometer.extremelycold}
title="Thermometer - Extremely Cold"
type="color"
/>
<Option
opt={options.theme.bar.menus.menu.clock.weather.hourly.time}
title="Hourly Weather Time"
type="color"
/>
<Option
opt={options.theme.bar.menus.menu.clock.weather.hourly.icon}
title="Hourly Weather Icon"
type="color"
/>
<Option
opt={options.theme.bar.menus.menu.clock.weather.hourly.temperature}
title="Hourly Weather Temperature"
type="color"
/>
</box>
</scrollable>
);
};

229
src/components/settings/pages/theme/menus/dashboard.tsx Normal file
View File

@@ -0,0 +1,229 @@
import { Option } from 'src/components/settings/shared/Option';
import { Header } from 'src/components/settings/shared/Header';
import options from 'src/options';
import { Gtk } from 'astal/gtk3';
export const DashboardMenuTheme = (): JSX.Element => {
return (
<scrollable
name={'Dashboard Menu'}
className="menu-theme-page dashboard paged-container"
vscroll={Gtk.PolicyType.ALWAYS}
hscroll={Gtk.PolicyType.AUTOMATIC}
vexpand={true}
>
<box vertical>
{/* Card Section */}
<Header title="Card" />
<Option opt={options.theme.bar.menus.menu.dashboard.card.color} title="Card" type="color" />
{/* Background Section */}
<Header title="Background" />
<Option opt={options.theme.bar.menus.menu.dashboard.background.color} title="Background" type="color" />
{/* Border Section */}
<Header title="Border" />
<Option opt={options.theme.bar.menus.menu.dashboard.border.color} title="Border" type="color" />
{/* Profile Section */}
<Header title="Profile" />
<Option opt={options.theme.bar.menus.menu.dashboard.profile.name} title="Profile Name" type="color" />
{/* Power Menu Section */}
<Header title="Power Menu" />
<Option opt={options.theme.bar.menus.menu.dashboard.powermenu.shutdown} title="Shutdown" type="color" />
<Option opt={options.theme.bar.menus.menu.dashboard.powermenu.restart} title="Restart" type="color" />
<Option opt={options.theme.bar.menus.menu.dashboard.powermenu.logout} title="Log Out" type="color" />
<Option opt={options.theme.bar.menus.menu.dashboard.powermenu.sleep} title="Sleep" type="color" />
<Option
opt={options.theme.bar.menus.menu.dashboard.powermenu.confirmation.card}
title="Confirmation Dialog Card"
type="color"
/>
<Option
opt={options.theme.bar.menus.menu.dashboard.powermenu.confirmation.background}
title="Confirmation Dialog Background"
type="color"
/>
<Option
opt={options.theme.bar.menus.menu.dashboard.powermenu.confirmation.border}
title="Confirmation Dialog Border"
type="color"
/>
<Option
opt={options.theme.bar.menus.menu.dashboard.powermenu.confirmation.label}
title="Confirmation Dialog Label"
type="color"
/>
<Option
opt={options.theme.bar.menus.menu.dashboard.powermenu.confirmation.body}
title="Confirmation Dialog Description"
type="color"
/>
<Option
opt={options.theme.bar.menus.menu.dashboard.powermenu.confirmation.confirm}
title="Confirmation Dialog Confirm Button"
type="color"
/>
<Option
opt={options.theme.bar.menus.menu.dashboard.powermenu.confirmation.deny}
title="Confirmation Dialog Cancel Button"
type="color"
/>
<Option
opt={options.theme.bar.menus.menu.dashboard.powermenu.confirmation.button_text}
title="Confirmation Dialog Button Text"
type="color"
/>
{/* Shortcuts Section */}
<Header title="Shortcuts" />
<Option
opt={options.theme.bar.menus.menu.dashboard.shortcuts.background}
title="Primary"
type="color"
/>
<Option opt={options.theme.bar.menus.menu.dashboard.shortcuts.text} title="Text" type="color" />
<Option
opt={options.theme.bar.menus.menu.dashboard.shortcuts.recording}
title="Recording"
subtitle="Color of the Record button when recording is in progress"
type="color"
/>
{/* Controls Section */}
<Header title="Controls" />
<Option
opt={options.theme.bar.menus.menu.dashboard.controls.disabled}
title="Module Off"
subtitle="Button color when element is disabled"
type="color"
/>
<Option
opt={options.theme.bar.menus.menu.dashboard.controls.wifi.background}
title="Wifi Button"
type="color"
/>
<Option
opt={options.theme.bar.menus.menu.dashboard.controls.wifi.text}
title="Wifi Button Text"
type="color"
/>
<Option
opt={options.theme.bar.menus.menu.dashboard.controls.bluetooth.background}
title="Bluetooth Button"
type="color"
/>
<Option
opt={options.theme.bar.menus.menu.dashboard.controls.bluetooth.text}
title="Bluetooth Button Text"
type="color"
/>
<Option
opt={options.theme.bar.menus.menu.dashboard.controls.notifications.background}
title="Notifications Button"
type="color"
/>
<Option
opt={options.theme.bar.menus.menu.dashboard.controls.notifications.text}
title="Notifications Button Text"
type="color"
/>
<Option
opt={options.theme.bar.menus.menu.dashboard.controls.volume.background}
title="Volume Button"
type="color"
/>
<Option
opt={options.theme.bar.menus.menu.dashboard.controls.volume.text}
title="Volume Button Text"
type="color"
/>
<Option
opt={options.theme.bar.menus.menu.dashboard.controls.input.background}
title="Input Button"
type="color"
/>
<Option
opt={options.theme.bar.menus.menu.dashboard.controls.input.text}
title="Input Button Text"
type="color"
/>
{/* Directories Section */}
<Header title="Directories" />
<Option
opt={options.theme.bar.menus.menu.dashboard.directories.left.top.color}
title="Directory: Left - Top"
type="color"
/>
<Option
opt={options.theme.bar.menus.menu.dashboard.directories.left.middle.color}
title="Directory: Left - Middle"
type="color"
/>
<Option
opt={options.theme.bar.menus.menu.dashboard.directories.left.bottom.color}
title="Directory: Left - Bottom"
type="color"
/>
<Option
opt={options.theme.bar.menus.menu.dashboard.directories.right.top.color}
title="Directory: Right - Top"
type="color"
/>
<Option
opt={options.theme.bar.menus.menu.dashboard.directories.right.middle.color}
title="Directory: Right - Middle"
type="color"
/>
<Option
opt={options.theme.bar.menus.menu.dashboard.directories.right.bottom.color}
title="Directory: Right - Bottom"
type="color"
/>
{/* System Stats Section */}
<Header title="System Stats" />
<Option
opt={options.theme.bar.menus.menu.dashboard.monitors.bar_background}
title="Bar Background"
type="color"
/>
<Option opt={options.theme.bar.menus.menu.dashboard.monitors.cpu.icon} title="CPU Icon" type="color" />
<Option opt={options.theme.bar.menus.menu.dashboard.monitors.cpu.bar} title="CPU Bar" type="color" />
<Option
opt={options.theme.bar.menus.menu.dashboard.monitors.cpu.label}
title="CPU Label"
type="color"
/>
<Option opt={options.theme.bar.menus.menu.dashboard.monitors.ram.icon} title="RAM Icon" type="color" />
<Option opt={options.theme.bar.menus.menu.dashboard.monitors.ram.bar} title="RAM Bar" type="color" />
<Option
opt={options.theme.bar.menus.menu.dashboard.monitors.ram.label}
title="RAM Label"
type="color"
/>
<Option opt={options.theme.bar.menus.menu.dashboard.monitors.gpu.icon} title="GPU Icon" type="color" />
<Option opt={options.theme.bar.menus.menu.dashboard.monitors.gpu.bar} title="GPU Bar" type="color" />
<Option
opt={options.theme.bar.menus.menu.dashboard.monitors.gpu.label}
title="GPU Label"
type="color"
/>
<Option
opt={options.theme.bar.menus.menu.dashboard.monitors.disk.icon}
title="Disk Icon"
type="color"
/>
<Option opt={options.theme.bar.menus.menu.dashboard.monitors.disk.bar} title="Disk Bar" type="color" />
<Option
opt={options.theme.bar.menus.menu.dashboard.monitors.disk.label}
title="Disk Label"
type="color"
/>
</box>
</scrollable>
);
};

156
src/components/settings/pages/theme/menus/index.tsx Normal file
View File

@@ -0,0 +1,156 @@
import { Option } from 'src/components/settings/shared/Option';
import { Header } from 'src/components/settings/shared/Header';
import options from 'src/options';
import { Gtk } from 'astal/gtk3';
import { bind } from 'astal';
export const MenuTheme = (): JSX.Element => {
return (
<scrollable
name={'General Settings'}
className="menu-theme-page paged-container"
vscroll={Gtk.PolicyType.AUTOMATIC}
hscroll={Gtk.PolicyType.AUTOMATIC}
vexpand
>
<box vertical>
{/* General Section */}
<Header title="General" />
<Option
opt={options.dummy}
title="Theme"
subtitle="WARNING: Importing a theme will replace your current theme color settings."
type="config_import"
exportData={{ filePath: CONFIG, themeOnly: true }}
/>
<Option
opt={options.theme.bar.menus.monochrome}
title="Use Global Colors"
type="boolean"
disabledBinding={options.theme.matugen}
/>
<Option
opt={options.wallpaper.pywal}
title="Generate Pywal Colors"
subtitle="Whether to also generate pywal colors with chosen wallpaper"
type="boolean"
/>
<Option
opt={options.wallpaper.enable}
title="Apply Wallpapers"
subtitle="Whether to apply the wallpaper or to only use it for Matugen color generation."
type="boolean"
/>
<Option
opt={options.wallpaper.image}
title="Wallpaper"
subtitle={bind(options.wallpaper.image).as((wallpaper) => wallpaper || 'No Wallpaper Selected')}
type="wallpaper"
/>
<Option opt={options.theme.bar.menus.background} title="Background Color" type="color" />
<Option
opt={options.theme.bar.menus.opacity}
title="Menu Opacity"
type="number"
increment={5}
min={0}
max={100}
/>
<Option opt={options.theme.bar.menus.cards} title="Cards" type="color" />
<Option opt={options.theme.bar.menus.card_radius} title="Card Radius" type="string" />
<Option opt={options.theme.bar.menus.text} title="Primary Text" type="color" />
<Option opt={options.theme.bar.menus.dimtext} title="Dim Text" type="color" />
<Option opt={options.theme.bar.menus.feinttext} title="Feint Text" type="color" />
<Option opt={options.theme.bar.menus.label} title="Label Color" type="color" />
{/* Border Section */}
<Header title="Border" />
<Option opt={options.theme.bar.menus.border.size} title="Border Width" type="string" />
<Option opt={options.theme.bar.menus.border.radius} title="Border Radius" type="string" />
<Option opt={options.theme.bar.menus.border.color} title="Border Color" type="color" />
{/* Popover Section */}
<Header title="Popover" />
<Option opt={options.theme.bar.menus.popover.radius} title="Popover Radius" type="string" />
<Option opt={options.theme.bar.menus.popover.text} title="Text" type="color" />
<Option opt={options.theme.bar.menus.popover.background} title="Background" type="color" />
{/* List Items Section */}
<Header title="List Items" />
<Option
opt={options.theme.bar.menus.listitems.active}
title="Active"
subtitle={
'Items of a list (network name, bluetooth device name, ' +
'playback device, etc.) when active or hovered.'
}
type="color"
/>
<Option opt={options.theme.bar.menus.listitems.passive} title="Passive" type="color" />
{/* Icons Section */}
<Header title="Icons" />
<Option opt={options.theme.bar.menus.icons.active} title="Active" type="color" />
<Option opt={options.theme.bar.menus.icons.passive} title="Passive" type="color" />
{/* Switch Section */}
<Header title="Switch" />
<Option opt={options.theme.bar.menus.switch.enabled} title="Enabled" type="color" />
<Option opt={options.theme.bar.menus.switch.disabled} title="Disabled" type="color" />
<Option opt={options.theme.bar.menus.switch.radius} title="Switch Radius" type="string" />
<Option opt={options.theme.bar.menus.switch.slider_radius} title="Switch Puck Radius" type="string" />
<Option opt={options.theme.bar.menus.switch.puck} title="Puck" type="color" />
{/* Check/Radio Buttons Section */}
<Header title="Check/Radio Buttons" />
<Option opt={options.theme.bar.menus.check_radio_button.background} title="Background" type="color" />
<Option opt={options.theme.bar.menus.check_radio_button.active} title="Active" type="color" />
{/* Buttons Section */}
<Header title="Buttons" />
<Option opt={options.theme.bar.menus.buttons.radius} title="Button Radius" type="string" />
<Option opt={options.theme.bar.menus.buttons.default} title="Primary" type="color" />
<Option opt={options.theme.bar.menus.buttons.active} title="Active" type="color" />
<Option opt={options.theme.bar.menus.buttons.disabled} title="Disabled" type="color" />
<Option opt={options.theme.bar.menus.buttons.text} title="Text" type="color" />
{/* Icon Buttons Section */}
<Header title="Icon Buttons" />
<Option opt={options.theme.bar.menus.iconbuttons.passive} title="Primary" type="color" />
<Option opt={options.theme.bar.menus.iconbuttons.active} title="Active/Hovered" type="color" />
{/* Progress Bar Section */}
<Header title="Progress Bar" />
<Option opt={options.theme.bar.menus.progressbar.radius} title="Progress Bar Radius" type="string" />
<Option opt={options.theme.bar.menus.progressbar.foreground} title="Primary" type="color" />
<Option opt={options.theme.bar.menus.progressbar.background} title="Background" type="color" />
{/* Slider Section */}
<Header title="Slider" />
<Option opt={options.theme.bar.menus.slider.primary} title="Primary" type="color" />
<Option opt={options.theme.bar.menus.slider.background} title="Background" type="color" />
<Option opt={options.theme.bar.menus.slider.backgroundhover} title="Background (Hover)" type="color" />
<Option opt={options.theme.bar.menus.slider.slider_radius} title="Slider Puck Radius" type="string" />
<Option
opt={options.theme.bar.menus.slider.progress_radius}
title="Slider/Progress Bar Radius"
type="string"
/>
<Option opt={options.theme.bar.menus.slider.puck} title="Puck" type="color" />
{/* Dropdown Menu Section */}
<Header title="Dropdown Menu" />
<Option opt={options.theme.bar.menus.dropdownmenu.background} title="Background" type="color" />
<Option opt={options.theme.bar.menus.dropdownmenu.text} title="Text" type="color" />
<Option opt={options.theme.bar.menus.dropdownmenu.divider} title="Divider" type="color" />
{/* Tooltips Section */}
<Header title="Tooltips" />
<Option opt={options.theme.bar.menus.tooltip.radius} title="Tooltip Radius" type="string" />
<Option opt={options.theme.bar.menus.tooltip.background} title="Background" type="color" />
<Option opt={options.theme.bar.menus.tooltip.text} title="Text" type="color" />
</box>
</scrollable>
);
};

71
src/components/settings/pages/theme/menus/matugen.tsx Normal file
View File

@@ -0,0 +1,71 @@
import { Option } from 'src/components/settings/shared/Option';
import { Header } from 'src/components/settings/shared/Header';
import options from 'src/options';
import { Gtk } from 'astal/gtk3';
export const Matugen = (): JSX.Element => {
return (
<scrollable
name={'Matugen Settings'}
className="menu-theme-page paged-container"
vscroll={Gtk.PolicyType.AUTOMATIC}
hscroll={Gtk.PolicyType.AUTOMATIC}
vexpand={true}
>
<box vertical>
{/* Matugen Settings Section */}
<Header title="Matugen Settings" />
<Option
opt={options.theme.matugen}
title="Enable Matugen"
type="boolean"
dependencies={['matugen', 'swww']}
/>
<Option
opt={options.theme.matugen_settings.mode}
title="Matugen Theme"
type="enum"
enums={['light', 'dark']}
/>
<Option
opt={options.theme.matugen_settings.scheme_type}
title="Matugen Scheme"
type="enum"
enums={[
'content',
'expressive',
'fidelity',
'fruit-salad',
'monochrome',
'neutral',
'rainbow',
'tonal-spot',
]}
/>
<Option
opt={options.theme.matugen_settings.variation}
title="Matugen Variation"
type="enum"
enums={[
'standard_1',
'standard_2',
'standard_3',
'monochrome_1',
'monochrome_2',
'monochrome_3',
'vivid_1',
'vivid_2',
'vivid_3',
]}
/>
<Option
opt={options.theme.matugen_settings.contrast}
title="Contrast"
subtitle="Range: -1 to 1 (Default: 0)"
type="float"
/>
</box>
</scrollable>
);
};

74
src/components/settings/pages/theme/menus/media.tsx Normal file
View File

@@ -0,0 +1,74 @@
import { Option } from 'src/components/settings/shared/Option';
import { Header } from 'src/components/settings/shared/Header';
import options from 'src/options';
import { Gtk } from 'astal/gtk3';
export const MediaMenuTheme = (): JSX.Element => {
return (
<scrollable
name={'Media Menu'}
className="menu-theme-page media paged-container"
vscroll={Gtk.PolicyType.AUTOMATIC}
hscroll={Gtk.PolicyType.AUTOMATIC}
vexpand={true}
>
<box vertical>
{/* Media Menu Theme Settings Section */}
<Header title="Media Menu Theme Settings" />
<Option opt={options.theme.bar.menus.menu.media.song} title="Song" type="color" />
<Option opt={options.theme.bar.menus.menu.media.artist} title="Artist" type="color" />
<Option opt={options.theme.bar.menus.menu.media.album} title="Album" type="color" />
<Option opt={options.theme.bar.menus.menu.media.timestamp} title="Time Stamp" type="color" />
{/* Background Section */}
<Header title="Background" />
<Option opt={options.theme.bar.menus.menu.media.background.color} title="Background" type="color" />
{/* Border Section */}
<Header title="Border" />
<Option opt={options.theme.bar.menus.menu.media.border.color} title="Border" type="color" />
{/* Card/Album Art Section */}
<Header title="Card/Album Art" />
<Option opt={options.theme.bar.menus.menu.media.card.color} title="Color" type="color" />
<Option
opt={options.theme.bar.menus.menu.media.card.tint}
title="Tint"
type="number"
increment={5}
min={0}
max={100}
/>
{/* Buttons Section */}
<Header title="Buttons" />
<Option
opt={options.theme.bar.menus.menu.media.buttons.inactive}
title="Unavailable"
subtitle="Disabled button when media control isn't available."
type="color"
/>
<Option
opt={options.theme.bar.menus.menu.media.buttons.enabled}
title="Enabled"
subtitle="Ex: Button color when shuffle/loop is enabled."
type="color"
/>
<Option opt={options.theme.bar.menus.menu.media.buttons.background} title="Background" type="color" />
<Option opt={options.theme.bar.menus.menu.media.buttons.text} title="Text" type="color" />
{/* Slider Section */}
<Header title="Slider" />
<Option opt={options.theme.bar.menus.menu.media.slider.primary} title="Primary Color" type="color" />
<Option opt={options.theme.bar.menus.menu.media.slider.background} title="Background" type="color" />
<Option
opt={options.theme.bar.menus.menu.media.slider.backgroundhover}
title="Background (Hover)"
type="color"
/>
<Option opt={options.theme.bar.menus.menu.media.slider.puck} title="Puck" type="color" />
</box>
</scrollable>
);
};

68
src/components/settings/pages/theme/menus/network.tsx Normal file
View File

@@ -0,0 +1,68 @@
import { Option } from 'src/components/settings/shared/Option';
import { Header } from 'src/components/settings/shared/Header';
import options from 'src/options';
import { Gtk } from 'astal/gtk3';
export const NetworkMenuTheme = (): JSX.Element => {
return (
<scrollable
name={'Network Menu'}
className="menu-theme-page network paged-container"
vscroll={Gtk.PolicyType.AUTOMATIC}
hscroll={Gtk.PolicyType.AUTOMATIC}
vexpand={true}
>
<box vertical>
{/* Network Menu Theme Settings Section */}
<Header title="Network Menu Theme Settings" />
<Option opt={options.theme.bar.menus.menu.network.text} title="Text" type="color" />
{/* Card Section */}
<Header title="Card" />
<Option opt={options.theme.bar.menus.menu.network.card.color} title="Card" type="color" />
{/* Background Section */}
<Header title="Background" />
<Option opt={options.theme.bar.menus.menu.network.background.color} title="Background" type="color" />
{/* Border Section */}
<Header title="Border" />
<Option opt={options.theme.bar.menus.menu.network.border.color} title="Border" type="color" />
{/* Label Section */}
<Header title="Label" />
<Option opt={options.theme.bar.menus.menu.network.label.color} title="Label" type="color" />
{/* Status Section */}
<Header title="Status" />
<Option
opt={options.theme.bar.menus.menu.network.status.color}
title="Connection Status"
type="color"
/>
{/* Switch Section */}
<Header title="Switch" />
<Option opt={options.theme.bar.menus.menu.network.switch.enabled} title="Enabled" type="color" />
<Option opt={options.theme.bar.menus.menu.network.switch.disabled} title="Disabled" type="color" />
<Option opt={options.theme.bar.menus.menu.network.switch.puck} title="Puck" type="color" />
{/* List Items Section */}
<Header title="List Items" />
<Option opt={options.theme.bar.menus.menu.network.listitems.active} title="Active/Hover" type="color" />
<Option opt={options.theme.bar.menus.menu.network.listitems.passive} title="Passive" type="color" />
{/* Icons Section */}
<Header title="Icons" />
<Option opt={options.theme.bar.menus.menu.network.icons.active} title="Active" type="color" />
<Option opt={options.theme.bar.menus.menu.network.icons.passive} title="Passive" type="color" />
{/* Icon Buttons Section */}
<Header title="Icon Buttons" />
<Option opt={options.theme.bar.menus.menu.network.iconbuttons.active} title="Active" type="color" />
<Option opt={options.theme.bar.menus.menu.network.iconbuttons.passive} title="Passive" type="color" />
</box>
</scrollable>
);
};

77
src/components/settings/pages/theme/menus/notifications.tsx Normal file
View File

@@ -0,0 +1,77 @@
import { Option } from 'src/components/settings/shared/Option';
import { Header } from 'src/components/settings/shared/Header';
import options from 'src/options';
import { Gtk } from 'astal/gtk3';
export const NotificationsMenuTheme = (): JSX.Element => {
return (
<scrollable
name={'Notifications Menu'}
className="menu-theme-page notifications paged-container"
vscroll={Gtk.PolicyType.AUTOMATIC}
hscroll={Gtk.PolicyType.AUTOMATIC}
vexpand={true}
>
<box vertical>
{/* Notifications Menu Theme Settings Section */}
<Header title="Notifications Menu Theme Settings" />
<Option opt={options.theme.bar.menus.menu.notifications.label} title="Menu Label" type="color" />
<Option opt={options.theme.bar.menus.menu.notifications.card} title="Card" type="color" />
<Option opt={options.theme.bar.menus.menu.notifications.background} title="Background" type="color" />
<Option
opt={options.theme.bar.menus.menu.notifications.no_notifications_label}
title="Empty Notifications Backdrop"
type="color"
/>
<Option opt={options.theme.bar.menus.menu.notifications.border} title="Border" type="color" />
<Option
opt={options.theme.bar.menus.menu.notifications.switch_divider}
title="Switch Divider"
type="color"
/>
<Option
opt={options.theme.bar.menus.menu.notifications.clear}
title="Clear Notifications Button"
type="color"
/>
{/* Switch Section */}
<Header title="Switch" />
<Option opt={options.theme.bar.menus.menu.notifications.switch.enabled} title="Enabled" type="color" />
<Option
opt={options.theme.bar.menus.menu.notifications.switch.disabled}
title="Disabled"
type="color"
/>
<Option opt={options.theme.bar.menus.menu.notifications.switch.puck} title="Puck" type="color" />
{/* Scrollbar Section */}
<Header title="Scrollbar" />
<Option
opt={options.theme.bar.menus.menu.notifications.scrollbar.color}
title="Scrollbar Color"
type="color"
/>
{/* Pagination Section */}
<Header title="Pagination" />
<Option
opt={options.theme.bar.menus.menu.notifications.pager.background}
title="Pager Footer Background"
type="color"
/>
<Option
opt={options.theme.bar.menus.menu.notifications.pager.button}
title="Pager Button Color"
type="color"
/>
<Option
opt={options.theme.bar.menus.menu.notifications.pager.label}
title="Pager Label Color"
type="color"
/>
</box>
</scrollable>
);
};

91
src/components/settings/pages/theme/menus/power.tsx Normal file
View File

@@ -0,0 +1,91 @@
import { Option } from 'src/components/settings/shared/Option';
import { Header } from 'src/components/settings/shared/Header';
import options from 'src/options';
import { Gtk } from 'astal/gtk3';
export const PowerMenuTheme = (): JSX.Element => {
return (
<scrollable
name={'Power Menu'}
className="menu-theme-page power paged-container"
vscroll={Gtk.PolicyType.AUTOMATIC}
hscroll={Gtk.PolicyType.AUTOMATIC}
vexpand={true}
>
<box vertical>
{/* Background Section */}
<Header title="Background" />
<Option opt={options.theme.bar.menus.menu.power.background.color} title="Background" type="color" />
{/* Border Section */}
<Header title="Border" />
<Option opt={options.theme.bar.menus.menu.power.border.color} title="Border" type="color" />
{/* Shutdown Button Section */}
<Header title="Shutdown Button" />
<Option
opt={options.theme.bar.menus.menu.power.buttons.shutdown.background}
title="Label Background"
type="color"
/>
<Option
opt={options.theme.bar.menus.menu.power.buttons.shutdown.icon_background}
title="Icon Background"
type="color"
/>
<Option
opt={options.theme.bar.menus.menu.power.buttons.shutdown.text}
title="Label Text"
type="color"
/>
<Option opt={options.theme.bar.menus.menu.power.buttons.shutdown.icon} title="Icon" type="color" />
{/* Reboot Button Section */}
<Header title="Reboot Button" />
<Option
opt={options.theme.bar.menus.menu.power.buttons.restart.background}
title="Label Background"
type="color"
/>
<Option
opt={options.theme.bar.menus.menu.power.buttons.restart.icon_background}
title="Icon Background"
type="color"
/>
<Option opt={options.theme.bar.menus.menu.power.buttons.restart.text} title="Label Text" type="color" />
<Option opt={options.theme.bar.menus.menu.power.buttons.restart.icon} title="Icon" type="color" />
{/* Logout Button Section */}
<Header title="Logout Button" />
<Option
opt={options.theme.bar.menus.menu.power.buttons.logout.background}
title="Label Background"
type="color"
/>
<Option
opt={options.theme.bar.menus.menu.power.buttons.logout.icon_background}
title="Icon Background"
type="color"
/>
<Option opt={options.theme.bar.menus.menu.power.buttons.logout.text} title="Label Text" type="color" />
<Option opt={options.theme.bar.menus.menu.power.buttons.logout.icon} title="Icon" type="color" />
{/* Sleep Button Section */}
<Header title="Sleep Button" />
<Option
opt={options.theme.bar.menus.menu.power.buttons.sleep.background}
title="Label Background"
type="color"
/>
<Option
opt={options.theme.bar.menus.menu.power.buttons.sleep.icon_background}
title="Icon Background"
type="color"
/>
<Option opt={options.theme.bar.menus.menu.power.buttons.sleep.text} title="Label Text" type="color" />
<Option opt={options.theme.bar.menus.menu.power.buttons.sleep.icon} title="Icon" type="color" />
</box>
</scrollable>
);
};

33
src/components/settings/pages/theme/menus/systray.tsx Normal file
View File

@@ -0,0 +1,33 @@
import { Option } from 'src/components/settings/shared/Option';
import { Header } from 'src/components/settings/shared/Header';
import options from 'src/options';
import { Gtk } from 'astal/gtk3';
export const SystrayMenuTheme = (): JSX.Element => {
return (
<scrollable
name={'System Tray'}
className="menu-theme-page systray paged-container"
vscroll={Gtk.PolicyType.AUTOMATIC}
hscroll={Gtk.PolicyType.AUTOMATIC}
vexpand={true}
>
<box vertical>
{/* Dropdown Menu Section */}
<Header title="Dropdown Menu" />
<Option
opt={options.theme.bar.menus.menu.systray.dropdownmenu.background}
title="Background"
type="color"
/>
<Option opt={options.theme.bar.menus.menu.systray.dropdownmenu.text} title="Text" type="color" />
<Option
opt={options.theme.bar.menus.menu.systray.dropdownmenu.divider}
title="Section Divider"
type="color"
/>
</box>
</scrollable>
);
};

79
src/components/settings/pages/theme/menus/volume.tsx Normal file
View File

@@ -0,0 +1,79 @@
import { Option } from 'src/components/settings/shared/Option';
import { Header } from 'src/components/settings/shared/Header';
import options from 'src/options';
import { Gtk } from 'astal/gtk3';
export const VolumeMenuTheme = (): JSX.Element => {
return (
<scrollable
name={'Volume Menu'}
className="menu-theme-page volume paged-container"
vscroll={Gtk.PolicyType.AUTOMATIC}
hscroll={Gtk.PolicyType.AUTOMATIC}
vexpand={true}
>
<box vertical>
{/* Volume Menu Theme Settings Section */}
<Header title="Volume Menu Theme Settings" />
<Option opt={options.theme.bar.menus.menu.volume.text} title="Text" type="color" />
{/* Card Section */}
<Header title="Card" />
<Option opt={options.theme.bar.menus.menu.volume.card.color} title="Card" type="color" />
{/* Background Section */}
<Header title="Background" />
<Option opt={options.theme.bar.menus.menu.volume.background.color} title="Background" type="color" />
{/* Border Section */}
<Header title="Border" />
<Option opt={options.theme.bar.menus.menu.volume.border.color} title="Border" type="color" />
{/* Label Section */}
<Header title="Label" />
<Option opt={options.theme.bar.menus.menu.volume.label.color} title="Label" type="color" />
{/* List Items Section */}
<Header title="List Items" />
<Option opt={options.theme.bar.menus.menu.volume.listitems.active} title="Active/Hover" type="color" />
<Option opt={options.theme.bar.menus.menu.volume.listitems.passive} title="Passive" type="color" />
{/* Icon Button Section */}
<Header title="Icon Button" />
<Option opt={options.theme.bar.menus.menu.volume.iconbutton.active} title="Active/Hover" type="color" />
<Option opt={options.theme.bar.menus.menu.volume.iconbutton.passive} title="Passive" type="color" />
{/* Audio Slider Section */}
<Header title="Audio Slider" />
<Option opt={options.theme.bar.menus.menu.volume.audio_slider.primary} title="Primary" type="color" />
<Option
opt={options.theme.bar.menus.menu.volume.audio_slider.background}
title="Background"
type="color"
/>
<Option
opt={options.theme.bar.menus.menu.volume.audio_slider.backgroundhover}
title="Background (Hover)"
type="color"
/>
<Option opt={options.theme.bar.menus.menu.volume.audio_slider.puck} title="Puck" type="color" />
{/* Input Slider Section */}
<Header title="Input Slider" />
<Option opt={options.theme.bar.menus.menu.volume.input_slider.primary} title="Primary" type="color" />
<Option
opt={options.theme.bar.menus.menu.volume.input_slider.background}
title="Background"
type="color"
/>
<Option
opt={options.theme.bar.menus.menu.volume.input_slider.backgroundhover}
title="Background (Hover)"
type="color"
/>
<Option opt={options.theme.bar.menus.menu.volume.input_slider.puck} title="Puck" type="color" />
</box>
</scrollable>
);
};

50
src/components/settings/pages/theme/notifications/index.tsx Normal file
View File

@@ -0,0 +1,50 @@
import { Option } from 'src/components/settings/shared/Option';
import { Header } from 'src/components/settings/shared/Header';
import options from 'src/options';
import { Gtk } from 'astal/gtk3';
export const NotificationsTheme = (): JSX.Element => {
return (
<scrollable
name={'Notifications'}
className="notifications-theme-page paged-container"
vscroll={Gtk.PolicyType.AUTOMATIC}
hscroll={Gtk.PolicyType.AUTOMATIC}
vexpand={true}
>
<box vertical>
{/* Notifications Theme Settings Section */}
<Header title="Notifications Theme Settings" />
<Option opt={options.theme.notification.background} title="Notification Background" type="color" />
<Option
opt={options.theme.notification.opacity}
title="Notification Opacity"
type="number"
increment={5}
min={0}
max={100}
/>
<Option
opt={options.theme.notification.actions.background}
title="Action Button Background"
subtitle="Buttons that perform actions within a notification"
type="color"
/>
<Option opt={options.theme.notification.actions.text} title="Action Button Text Color" type="color" />
<Option opt={options.theme.notification.label} title="Label" type="color" />
<Option opt={options.theme.notification.border} title="Border" type="color" />
<Option opt={options.theme.notification.time} title="Time Stamp" type="color" />
<Option opt={options.theme.notification.text} title="Body Text" type="color" />
<Option
opt={options.theme.notification.labelicon}
title="Label Icon"
subtitle="Icon that accompanies the label. Doesn't apply if icon is an app icon."
type="color"
/>
<Option opt={options.theme.notification.close_button.background} title="Dismiss Button" type="color" />
<Option opt={options.theme.notification.close_button.label} title="Dismiss Button Text" type="color" />
</box>
</scrollable>
);
};

42
src/components/settings/pages/theme/osd/index.tsx Normal file
View File

@@ -0,0 +1,42 @@
import { Option } from 'src/components/settings/shared/Option';
import { Header } from 'src/components/settings/shared/Header';
import options from 'src/options';
import { Gtk } from 'astal/gtk3';
export const OsdTheme = (): JSX.Element => {
return (
<scrollable
name={'OSD'}
className="osd-theme-page paged-container"
vscroll={Gtk.PolicyType.AUTOMATIC}
hscroll={Gtk.PolicyType.AUTOMATIC}
vexpand={true}
>
<box vertical>
{/* On Screen Display Settings Section */}
<Header title="On Screen Display Settings" />
<Option
opt={options.theme.osd.opacity}
title="OSD Opacity"
type="number"
increment={5}
min={0}
max={100}
/>
<Option opt={options.theme.osd.bar_color} title="Bar" type="color" />
<Option
opt={options.theme.osd.bar_overflow_color}
title="Bar Overflow"
subtitle="Overflow color is for when the volume goes over a 100"
type="color"
/>
<Option opt={options.theme.osd.bar_empty_color} title="Bar Background" type="color" />
<Option opt={options.theme.osd.bar_container} title="Bar Container" type="color" />
<Option opt={options.theme.osd.icon} title="Icon" type="color" />
<Option opt={options.theme.osd.icon_container} title="Icon Container" type="color" />
<Option opt={options.theme.osd.label} title="Value Text" type="color" />
</box>
</scrollable>
);
};