LogalDeveloper/owncast
0
Fork 0
Code Activity

Support color customization from the admin (#2338)

Browse Source 
* Add user-customizable theming. Closes #1915

* Prettified Code!

* Add user-customizable theming. Closes #1915

* Add explicit color for page content background

* Prettified Code!

Co-authored-by: gabek <gabek@users.noreply.github.com>
This commit is contained in:
Gabe Kangas
2022-11-12 20:26:55 -08:00
committed by GitHub
parent 5bbf9db84a
commit 813f8692f0
33 changed files with 499 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
web/styles/theme.less
View File

@@ -1,6 +1,6 @@
// Do not edit directly
// Generated on Mon, 10 Oct 2022 23:54:14 GMT
// Generated on Sun, 13 Nov 2022 04:09:55 GMT
//
// How to edit these values:
// Edit the corresponding token file under the style-definitions directory
@@ -58,12 +58,12 @@
@theme-color-palette-12: var(--color-owncast-palette-12); // Fun color 2
@theme-color-palette-13: var(--color-owncast-palette-13); // Fun color 3
@theme-color-palette-14: var(--color-owncast-palette-14); // Light background
@theme-color-palette-15: var(--color-owncast-palette-15); // Lighter background
@theme-color-palette-error: var(--color-owncast-palette-error); // Error
@theme-color-palette-warning: var(--color-owncast-palette-warning); // Warning
@theme-color-background-main: var(--theme-color-palette-3); // Light primary
@theme-color-background-light: var(--theme-color-palette-14); // Light background
@theme-color-background-light: var(--theme-color-palette-3); // Light primary
@theme-color-background-header: var(--theme-color-palette-0); // Dark primary
@theme-color-background-chat: var(--theme-color-palette-14); // Light background
@theme-color-action: var(--theme-color-palette-6); // Text link/secondary light text
@theme-color-action-hover: var(--theme-color-palette-7); // Text link hover
@theme-color-action-disabled: var(--theme-color-palette-8); // Disabled background
@@ -83,8 +83,9 @@
@theme-color-components-secondary-button-text-disabled: var(--theme-color-action-disabled); // Disabled background
@theme-color-components-secondary-button-border: var(--theme-color-action); // Text link/secondary light text
@theme-color-components-secondary-button-border-disabled: var(--theme-color-action-disabled); // Disabled background
@theme-color-components-chat-background: var(--theme-color-palette-1); // Dark secondary
@theme-color-components-chat-text: var(--theme-color-palette-3); // Light primary
@theme-color-components-chat-background: var(--theme-color-palette-4); // Light secondary
@theme-color-components-chat-text: var(--theme-color-palette-2); // Dark alternate
@theme-color-components-content-background: var(--theme-color-palette-15); // Lighter background
@theme-color-components-modal-header-background: var(--theme-color-palette-1); // Dark secondary
@theme-color-components-modal-header-text: var(--theme-color-palette-3); // Light primary
@theme-color-components-modal-content-background: var(--theme-color-palette-3); // Light primary
@@ -126,6 +127,7 @@
@color-owncast-palette-12: #da9eff; // Fun color 2
@color-owncast-palette-13: #42bea6; // Fun color 3
@color-owncast-palette-14: #f0f3f8; // Light background
@color-owncast-palette-15: #eff1f4; // Lighter background
@color-owncast-palette-error: #ff4b39; // Error
@color-owncast-palette-warning: #ffc655; // Warning
@font-owncast-body: 'Open Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';