Added the ability to apply custom opacity to all elements. (#140)

* Added the ability to apply custom opacity to all elements.

* Apply menu opacity to settings menu
This commit is contained in:
Jas Singh
2024-08-16 22:50:05 -07:00
committed by GitHub
parent b3b397d479
commit 0bcbe05a0b
19 changed files with 61 additions and 30 deletions

View File

@@ -14,6 +14,8 @@ export const BarTheme = () => {
Header('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.opacity, title: 'Background Opacity', type: 'number', increment: 5, min: 0, max: 100 }),
Option({ opt: options.theme.bar.buttons.opacity, title: 'Button 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.hover, title: 'Button Hover', type: 'color' }),

View File

@@ -27,6 +27,7 @@ export const MenuTheme = () => {
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: options.wallpaper.image.bind("value"), 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' }),

View File

@@ -14,6 +14,7 @@ export const NotificationsTheme = () => {
children: [
Header('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' }),

View File

@@ -13,6 +13,7 @@ export const OsdTheme = () => {
vertical: true,
children: [
Header('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' }),