From f316aa1178e69808fdd83afdafc750badc442334 Mon Sep 17 00:00:00 2001 From: QuickMythril Date: Fri, 23 Feb 2024 11:42:50 -0500 Subject: [PATCH] Move hardcoded colors to theme --- core/font/switch-theme.css | 14 +++++++++++++ .../login-view/create-account-section.js | 8 ++++---- .../components/login-view/login-section.js | 8 ++++---- .../src/components/login-view/welcome-page.js | 4 ++-- core/src/components/show-plugin.js | 20 +++++++++---------- .../functional-components/settings-page.js | 6 +++--- .../core/components/ChatScroller-css.js | 6 +++--- 7 files changed, 40 insertions(+), 26 deletions(-) diff --git a/core/font/switch-theme.css b/core/font/switch-theme.css index b7a342ba..3b3a468e 100644 --- a/core/font/switch-theme.css +++ b/core/font/switch-theme.css @@ -66,6 +66,13 @@ html { --app-hr: rgba(0, 0, 0, .3); --code-block-text-color: #008fd5; --noavatar: url("/img/noavatar_light.png"); + --login-border: rgba(0, 167, 245); + --login-border-50pct: rgba(0, 167, 245, 0.5); + --login-border-10pct: rgba(0, 167, 245, 0.1); + --login-button: rgb(3, 169, 244); + --accent-color: #03a9f4; + --qchat-name: #03a9f4; + --qchat-my-name: #05be0e; } html[theme="dark"] { @@ -136,4 +143,11 @@ html[theme="dark"] { --app-hr: rgba(255, 255, 255, .3); --code-block-text-color: #008fd5; --noavatar: url("/img/noavatar_dark.png"); + --login-border: rgba(0, 167, 245); + --login-border-50pct: rgba(0, 167, 245, 0.5); + --login-border-10pct: rgba(0, 167, 245, 0.1); + --login-button: rgb(3, 169, 244); + --accent-color: #03a9f4; + --qchat-name: #03a9f4; + --qchat-my-name: #05be0e; } \ No newline at end of file diff --git a/core/src/components/login-view/create-account-section.js b/core/src/components/login-view/create-account-section.js index e9409fa1..822b71df 100644 --- a/core/src/components/login-view/create-account-section.js +++ b/core/src/components/login-view/create-account-section.js @@ -57,15 +57,15 @@ class CreateAccountSection extends connect(store)(LitElement) { return [ css` * { - --mdc-theme-primary: rgb(3, 169, 244); + --mdc-theme-primary: var(--login-button); --mdc-theme-secondary: var(--mdc-theme-primary); --paper-input-container-focus-color: var(--mdc-theme-primary); --mdc-theme-surface: var(--white); --mdc-dialog-content-ink-color: var(--black); --mdc-checkbox-unchecked-color: var(--black); - --lumo-primary-text-color: rgb(0, 167, 245); - --lumo-primary-color-50pct: rgba(0, 167, 245, 0.5); - --lumo-primary-color-10pct: rgba(0, 167, 245, 0.1); + --lumo-primary-text-color: var(--login-border); + --lumo-primary-color-50pct: var(--login-border-50pct); + --lumo-primary-color-10pct: var(--login-border-10pct); --lumo-primary-color: hsl(199, 100%, 48%); --lumo-base-color: var(--white); --lumo-body-text-color: var(--black); diff --git a/core/src/components/login-view/login-section.js b/core/src/components/login-view/login-section.js index 547a9034..af178f4e 100644 --- a/core/src/components/login-view/login-section.js +++ b/core/src/components/login-view/login-section.js @@ -53,15 +53,15 @@ class LoginSection extends connect(store)(LitElement) { return [ css` * { - --mdc-theme-primary: rgb(3, 169, 244); + --mdc-theme-primary: var(--login-button); --mdc-theme-secondary: var(--mdc-theme-primary); --paper-input-container-focus-color: var(--mdc-theme-primary); --mdc-theme-surface: var(--white); --mdc-dialog-content-ink-color: var(--black); --mdc-checkbox-unchecked-color: var(--black); - --lumo-primary-text-color: rgb(0, 167, 245); - --lumo-primary-color-50pct: rgba(0, 167, 245, 0.5); - --lumo-primary-color-10pct: rgba(0, 167, 245, 0.1); + --lumo-primary-text-color: var(--login-border); + --lumo-primary-color-50pct: var(--login-border-50pct); + --lumo-primary-color-10pct: var(--login-border-10pct); --lumo-primary-color: hsl(199, 100%, 48%); --lumo-base-color: var(--white); --lumo-body-text-color: var(--black); diff --git a/core/src/components/login-view/welcome-page.js b/core/src/components/login-view/welcome-page.js index 575e8ef6..856704fc 100644 --- a/core/src/components/login-view/welcome-page.js +++ b/core/src/components/login-view/welcome-page.js @@ -21,9 +21,9 @@ class WelcomePage extends LitElement { return [ css` * { - --mdc-theme-primary: rgb(3, 169, 244); + --mdc-theme-primary: var(--login-button); --mdc-theme-secondary: var(--mdc-theme-primary); - --mdc-button-outline-color: #03a9f4; + --mdc-button-outline-color: var(--accent-color); } mwc-button { diff --git a/core/src/components/show-plugin.js b/core/src/components/show-plugin.js index 824da3ab..fa9fc125 100644 --- a/core/src/components/show-plugin.js +++ b/core/src/components/show-plugin.js @@ -211,7 +211,7 @@ class ShowPlugin extends connect(store)(LitElement) { font-weight: bold; background: none; border: none; - color: #03a9f4; + color: var(--accent-color); font-size: 2em; cursor: pointer; transition: color 0.3s; @@ -229,7 +229,7 @@ class ShowPlugin extends connect(store)(LitElement) { max-height: 28px; padding: 5px 5px; font-size: 14px; - background-color: #03a9f4; + background-color: var(--accent-color); color: white; border: 1px solid transparent; border-radius: 3px; @@ -248,7 +248,7 @@ class ShowPlugin extends connect(store)(LitElement) { .iconActive { position: absolute; top: 5px; - color: #03a9f4; + color: var(--accent-color); --mdc-icon-size: 24px; } @@ -260,7 +260,7 @@ class ShowPlugin extends connect(store)(LitElement) { } .tab:hover .iconInactive { - color: #03a9f4; + color: var(--accent-color); } .count { @@ -1078,7 +1078,7 @@ class NavBar extends connect(store)(LitElement) { } .resetIcon:hover { - color: #03a9f4; + color: var(--accent-color); font-weight: bold; } @@ -1092,7 +1092,7 @@ class NavBar extends connect(store)(LitElement) { } .searchIcon:hover { - color: #03a9f4; + color: var(--accent-color); font-weight: bold; } @@ -1106,7 +1106,7 @@ class NavBar extends connect(store)(LitElement) { } .importIcon:hover { - color: #03a9f4; + color: var(--accent-color); font-weight: bold; } @@ -1120,7 +1120,7 @@ class NavBar extends connect(store)(LitElement) { } .exportIcon:hover { - color: #03a9f4; + color: var(--accent-color); font-weight: bold; } @@ -1141,7 +1141,7 @@ class NavBar extends connect(store)(LitElement) { paper-dialog button { padding: 5px 10px; font-size: 18px; - background-color: #03a9f4; + background-color: var(--accent-color); color: white; border: 1px solid transparent; border-radius: 5px; @@ -1175,7 +1175,7 @@ class NavBar extends connect(store)(LitElement) { } vaadin-text-field[focused]::part(input-field) { - border-color: #03a9f4; + border-color: var(--accent-color); } ` diff --git a/core/src/functional-components/settings-page.js b/core/src/functional-components/settings-page.js index 44e2a6c3..587bfc7e 100644 --- a/core/src/functional-components/settings-page.js +++ b/core/src/functional-components/settings-page.js @@ -44,7 +44,7 @@ class SettingsPage extends connect(store)(LitElement) { static get styles() { return css` * { - --mdc-theme-primary: rgb(3, 169, 244); + --mdc-theme-primary: var(--login-button); --mdc-theme-secondary: var(--mdc-theme-primary); --mdc-dialog-content-ink-color: var(--black); --mdc-theme-surface: var(--white); @@ -70,7 +70,7 @@ class SettingsPage extends connect(store)(LitElement) { display: inline-block; width: 150px; font-weight: 600; - color: #03a9f4; + color: var(--accent-color); border: 1px solid transparent; } @@ -87,7 +87,7 @@ class SettingsPage extends connect(store)(LitElement) { } .buttonBlue { - color: #03a9f4; + color: var(--accent-color); } .floatleft { diff --git a/plugins/plugins/core/components/ChatScroller-css.js b/plugins/plugins/core/components/ChatScroller-css.js index 2897b76b..bf60e6c6 100644 --- a/plugins/plugins/core/components/ChatScroller-css.js +++ b/plugins/plugins/core/components/ChatScroller-css.js @@ -63,13 +63,13 @@ export const chatStyles = css` .message-data-name { user-select: none; - color: #03a9f4; + color: var(--qchat-name); margin-bottom: 5px; } .forwarded-text { user-select: none; - color: #03a9f4; + color: var(--accent-color); margin-bottom: 5px; } @@ -81,7 +81,7 @@ export const chatStyles = css` } .message-data-my-name { - color: #05be0e; + color: var(--qchat-my-name); font-weight: bold; }