From b0014efbc48887d8f50adb28f55d654526e792eb Mon Sep 17 00:00:00 2001 From: wql219 <160428035+wql219@users.noreply.github.com> Date: Sat, 28 Sep 2024 10:42:46 +0800 Subject: [PATCH 1/5] Create readme --- themes/Theme - ColorPalette/readme | 1 + 1 file changed, 1 insertion(+) create mode 100644 themes/Theme - ColorPalette/readme diff --git a/themes/Theme - ColorPalette/readme b/themes/Theme - ColorPalette/readme new file mode 100644 index 00000000..8b137891 --- /dev/null +++ b/themes/Theme - ColorPalette/readme @@ -0,0 +1 @@ + From 0e0b5add15d16728832b6fa2be6241beae6e24ee Mon Sep 17 00:00:00 2001 From: wql219 <160428035+wql219@users.noreply.github.com> Date: Sat, 28 Sep 2024 10:43:58 +0800 Subject: [PATCH 2/5] Add files of theme colorPalette --- themes/Theme - ColorPalette/colorPalette.yml | 16 ++ themes/Theme - ColorPalette/main.css | 279 +++++++++++++++++++ themes/Theme - ColorPalette/main.js | 30 ++ 3 files changed, 325 insertions(+) create mode 100644 themes/Theme - ColorPalette/colorPalette.yml create mode 100644 themes/Theme - ColorPalette/main.css create mode 100644 themes/Theme - ColorPalette/main.js diff --git a/themes/Theme - ColorPalette/colorPalette.yml b/themes/Theme - ColorPalette/colorPalette.yml new file mode 100644 index 00000000..080be182 --- /dev/null +++ b/themes/Theme - ColorPalette/colorPalette.yml @@ -0,0 +1,16 @@ +name: Theme - colorPalette +description: Based on the default theme, change the overall color of the page by setting the hue value. Make minor changes to the remaining styles. +version: 0.1 +ui: + requires: + - CommunityScriptsUILibrary + javascript: + - main.js + css: + - main.css +settings: + hue: + displayName: hue value + description: An angle value of 0-360. Red (0) - Orange - Yellow - Green (120) - Cyan - Blue (240) - Purple - Red (360) + type: NUMBER + \ No newline at end of file diff --git a/themes/Theme - ColorPalette/main.css b/themes/Theme - ColorPalette/main.css new file mode 100644 index 00000000..f0ce5022 --- /dev/null +++ b/themes/Theme - ColorPalette/main.css @@ -0,0 +1,279 @@ +:root { + /* 定义主颜色角度 */ + --maincolorDeg: 140deg; + /* 定义所有颜色的通用饱和度 */ + --saturation: 80%; + + /* 定义亮度级别变量 */ + --brightestLevel: 95%; + --veryBrightLevel: 90%; + --brightLevel: 75%; + --moderatelyBrightLevel: 60%; + --mediumLevel: 40%; + --moderatelyDarkLevel: 25%; + --darkLevel: 15%; + --veryDarkLevel: 8%; + --extremelyDarkLevel: 2%; + + /* 主颜色及相关设置 */ + --mainLightest: hsl(var(--maincolorDeg), var(--saturation), var(--brightestLevel)); + --mainVeryBright: hsl(var(--maincolorDeg), var(--saturation), var(--veryBrightLevel)); + --mainBright: hsl(var(--maincolorDeg), var(--saturation), var(--brightLevel)); + --mainModeratelyBright: hsl(var(--maincolorDeg), var(--saturation), var(--moderatelyBrightLevel)); + --mainMedium: hsl(var(--maincolorDeg), var(--saturation), var(--mediumLevel)); + --mainModeratelyDark: hsl(var(--maincolorDeg), var(--saturation), var(--moderatelyDarkLevel)); + --mainDark: hsl(var(--maincolorDeg), var(--saturation), var(--darkLevel)); + --mainVeryDark: hsl(var(--maincolorDeg), var(--saturation), var(--veryDarkLevel)); + --mainExtremelyDark: hsl(var(--maincolorDeg), var(--saturation), var(--extremelyDarkLevel)); + --mainGrey:hsl(var(--maincolorDeg),20%, var(--darkLevel)); + + /* 互补色设置 */ + --complementary: 20deg; + --complementaryColor: calc(var(--maincolorDeg) + var(--complementary)); + --complementaryLightest: hsl(var(--complementaryColor), var(--saturation), var(--brightestLevel)); + --complementaryVeryBright: hsl(var(--complementaryColor), var(--saturation), var(--veryBrightLevel)); + --complementaryBright: hsl(var(--complementaryColor), var(--saturation), var(--brightLevel)); + --complementaryModeratelyBright: hsl(var(--complementaryColor), var(--saturation), var(--moderatelyBrightLevel)); + --complementaryMedium: hsl(var(--complementaryColor), var(--saturation), var(--mediumLevel)); + --complementaryModeratelyDark: hsl(var(--complementaryColor), var(--saturation), var(--moderatelyDarkLevel)); + --complementaryDark: hsl(var(--complementaryColor), var(--saturation), var(--darkLevel)); + --complementaryVeryDark: hsl(var(--complementaryColor), var(--saturation), var(--veryDarkLevel)); + --complementaryExtremelyDark: hsl(var(--complementaryColor), var(--saturation), var(--extremelyDarkLevel)); + + /* 三分色设置 */ + --tertiary1: calc(var(--maincolorDeg) + 120deg); + --tertiary1Lightest: hsl(var(--tertiary1), var(--saturation), var(--brightestLevel)); + --tertiary1VeryBright: hsl(var(--tertiary1), var(--saturation), var(--veryBrightLevel)); + --tertiary1Bright: hsl(var(--tertiary1), var(--saturation), var(--brightLevel)); + --tertiary1ModeratelyBright: hsl(var(--tertiary1), var(--saturation), var(--moderatelyBrightLevel)); + --tertiary1Medium: hsl(var(--tertiary1), var(--saturation), var(--mediumLevel)); + --tertiary1ModeratelyDark: hsl(var(--tertiary1), var(--saturation), var(--moderatelyDarkLevel)); + --tertiary1Dark: hsl(var(--tertiary1), var(--saturation), var(--darkLevel)); + --tertiary1VeryDark: hsl(var(--tertiary1), var(--saturation), var(--veryDarkLevel)); + --tertiary1ExtremelyDark: hsl(var(--tertiary1), var(--saturation), var(--extremelyDarkLevel)); + --tertiary2: calc(var(--maincolorDeg) + 240deg); + --tertiary2Lightest: hsl(var(--tertiary2), var(--saturation), var(--brightestLevel)); + --tertiary2VeryBright: hsl(var(--tertiary2), var(--saturation), var(--veryBrightLevel)); + --tertiary2Bright: hsl(var(--tertiary2), var(--saturation), var(--brightLevel)); + --tertiary2ModeratelyBright: hsl(var(--tertiary2), var(--saturation), var(--moderatelyBrightLevel)); + --tertiary2Medium: hsl(var(--tertiary2), var(--saturation), var(--mediumLevel)); + --tertiary2ModeratelyDark: hsl(var(--tertiary2), var(--saturation), var(--moderatelyDarkLevel)); + --tertiary2Dark: hsl(var(--tertiary2), var(--saturation), var(--darkLevel)); + --tertiary2VeryDark: hsl(var(--tertiary2), var(--saturation), var(--veryDarkLevel)); + --tertiary2ExtremelyDark: hsl(var(--tertiary2), var(--saturation), var(--extremelyDarkLevel)); + + /* 背景类型 */ + --bgTypeNormal: var(--mainDark); + --bgTypeBright: var(--mainMedium); + --bgTypeDark: var(--mainVeryDark); + --bgTypeSpecial: var(--mainModeratelyDark); + --bgTypeGrey:var(--mainGrey); + + /* 文本类型 */ + --textTypeNormal: var(--mainModeratelyDark); + --textTypeBright: var(--mainBright); + --textTypeDark: var(--mainVeryBright); + --textTypeSpecial: var(--complementaryModeratelyBright); + + /* 边框类型 */ + --borderTypeNormal: var(--complementaryMedium); + --borderTypeBright: var(--complementaryBright); + --borderTypeDark: var(--mainDark); + --borderTypeSpecial: var(--mainBright); +} +body {color:var(--textTypeBright);background-color: var(--bgTypeDark);} +.card { + background-color: #55555555; +} +.bg-dark { + background-color: var(--bgTypeSpecial) !important; +} +.clearable-text-field, .clearable-text-field:active, .clearable-text-field:focus { +background-color: var(--bgTypeNormal); +border-color: var(--borderTypeNormal); +color: #fff; +} + +.btn-secondary { +color: #fff; +background-color: var(--bgTypeNormal); +border-color: var(--borderTypeDark); +} +.btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active, .show>.btn-secondary.dropdown-toggle { + color: #fff; + background-color: var(--bgTypeDark); + border-color: var(--borderTypeDark); +} +.bg-secondary { + background-color: var(--bgTypeNormal) !important; +} +.input-control, .input-control:focus, .input-control:disabled { + background-color: var(--darkBg); +} +.nav-pills .nav-link.active, .nav-pills .show>.nav-link { + color: var(--textTypeBright); + background-color: var(--bgTypeDark); +} +.btn-primary { + color: #fff; + background-color: var(--bgTypeBright); + border-color: var(--bgTypeDark); +} +.custom-control-input:checked~.custom-control-label:before { + color: var(--bgTypeDark); + border-color: var(--borderTypeNormal); + background-color: var(--bgTypeBright); +} + #tasks-panel .tasks-panel-queue { + background-color: var(--bgTypeDark); +} +.job-table.card { + background-color: var(--bgTypeDark); +} +.btn-primary:hover { + color: #fff; + background-color: var(--bgTypeDark); + border-color: var(--borderTypeDark); +} +.btn-primary.disabled, .btn-primary:disabled { + color: #fff; + background-color: #888; + border-color: var(--borderTypeDark); +} + + +a { + color: var(--bgTypeBright); +} + +.detail-header { + background-color: var(--bgTypeDark); +} +.nav-tabs .nav-link.active { + border-bottom: 4px solid; + color: var(--textTypeBright); +} + +div.react-select__control { + background-color: rgba(16, 22, 26, .3); + border-color: var(--borderTypeNormal); +} +.modal-header, .modal-body, .modal-footer { + background-color: var(--bgTypeNormal); + color: #f5f8fa; +} +.btn-secondary:hover { + color: #fff; + background-color: var(--bgTypeBright); + border-color: var(--borderTypeDark); +} + + +h5, .h5 { + font-size: 1.5rem; + text-shadow: 0px 0px 7px var(--textTypeBright); + font-family: Pingfang; + font-variation-settings: 'wght' 900, 'wdth' 50; +} +primary.dropdown-toggle:focus { +box-shadow: 0 0 0 .2rem var(--borderTypeSpecial); +} +.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show>.btn-primary.dropdown-toggle { color: #fff; background-color: var(--bgTypeNormal); border-color: var(--borderTypeSpecial);} +.btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus, .show>.btn-primary.dropdown-toggle:focus { + box-shadow: 0 0 0 .2rem var(--borderTypeSpecial); +} +.btn-primary:focus, .btn-primary.focus { + color: #fff; + background-color: var(--bgTypeBright); + border-color: var(--borderTypeDark); + box-shadow: 0 0 0 .2rem var(--complementaryLightest); +} +div.react-select__menu, div.dropdown-menu { + background-color: var(--bgTypeNormal); +} +.package-manager table thead { background-color: var(--bgTypeNormal); +} +.dropdown-item.active, .dropdown-item:active { + background-color: var(--bgTypeBright); +} +.btn-secondary.disabled, .btn-secondary:disabled { + color: #fff; + background-color: var(--bgTypeGrey); +} +.markdown blockquote, .markdown pre { + background-color: var(--bgTypeSpecial); +} +.markdown code { + background-color: var(--bgTypeBright); +} +.modal-header, .modal-body, .modal-footer { + background-color: var(--bgTypeDark); +} +.markdown table tr:nth-child(2n) { + background-color: var(--bgTypeGrey); +} +a:hover { + color: var(--textTypeSpecial); +} +.collapsed .detail-item-value { + -webkit-line-clamp: 10; +} +.TruncatedText.scene-card__description { + -webkit-line-clamp: 10 !important; +} +.StudioTagger-studio { + background-color: var(--bgTypeNormal); +} +.search-item { + background-color: #88888866; + border-radius: 8px; +} +.StudioTagger-studio .studio-card img { + background-color: #fff0; +} +.StudioTagger-studio .studio-card { + background-color: #fff0; +} + +.text-input, .text-input:focus, .text-input[readonly], .text-input:disabled { + background-color: rgba(16,22,26,.3); + border-color: var(--borderTypeNormal); + border-radius: 4px; + border-style: solid; + border-width: 1px; +} +.PerformerTagger-performer { + background-color: var(--bgTypeNormal); +} + +#queue-viewer .current { + background-color: var(--bgTypeSpecial); +} + +.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { + background-color: var(--bgTypeGrey); +} + +div.react-datepicker { + background-color: var(--mainModeratelyBright); + border-color: var(--bgTypeBright); + color: var(--textTypeDark); +} + +div.react-datepicker .react-datepicker__header, div.react-datepicker .react-datepicker-time__header { + background-color: var(--bgTypeSpecial); + +} + +.react-datepicker__day--selected, .react-datepicker__day--in-selecting-range, .react-datepicker__day--in-range, .react-datepicker__month-text--selected, .react-datepicker__month-text--in-selecting-range, .react-datepicker__month-text--in-range, .react-datepicker__quarter-text--selected, .react-datepicker__quarter-text--in-selecting-range, .react-datepicker__quarter-text--in-range, .react-datepicker__year-text--selected, .react-datepicker__year-text--in-selecting-range, .react-datepicker__year-text--in-range { + background-color: var(--bgTypeNormal); +} +a.bg-secondary:hover, a.bg-secondary:focus, button.bg-secondary:hover, button.bg-secondary:focus { + background-color: var(--bgTypeBright) !important; +} +.nav-tabs .nav-link.active:hover { + border-bottom-color: var(--tertiary1ModeratelyBright); +} +#scene-edit-details .edit-buttons-container { + background-color: var(--bgTypeGrey); +} \ No newline at end of file diff --git a/themes/Theme - ColorPalette/main.js b/themes/Theme - ColorPalette/main.js new file mode 100644 index 00000000..599f0c0c --- /dev/null +++ b/themes/Theme - ColorPalette/main.js @@ -0,0 +1,30 @@ +if (!localStorage.getItem('UserColor')) { + localStorage.setItem('UserColor', 0); +} +document.documentElement.style.setProperty('--maincolorDeg', localStorage.getItem('UserColor') +"deg"); + +async function mainFunction() { + let hueValue; + try { + const config = await csLib.getConfiguration("colorPalette", {}); + // 假设config是一个对象，其中包含hue属性 + hueValue = config.hue; + let UserColorValue = hueValue; + localStorage.setItem('UserColor', UserColorValue); + } catch (error) { + console.error('Error getting configuration:', error); + } + // 在这里可以继续使用hueValue变量进行其他操作 + return hueValue; +} +mainFunction(); + + +if (!localStorage.getItem('UserColor')) { + localStorage.setItem('UserColor', 0); +} +document.documentElement.style.setProperty('--maincolorDeg', localStorage.getItem('UserColor') +"deg"); + +document.querySelector("meta[name='theme-color']").content = window.getComputedStyle(document.querySelectorAll(".top-nav")[0]).backgroundColor + + From 328bd086c12cd2ceb316e791e3ace1272e8607b4 Mon Sep 17 00:00:00 2001 From: wql219 <160428035+wql219@users.noreply.github.com> Date: Sat, 28 Sep 2024 11:08:02 +0800 Subject: [PATCH 3/5] Change folder name --- themes/Theme - ColorPalette/readme | 1 - .../colorPalette.yml | 0 themes/{Theme - ColorPalette => Theme-ColorPalette}/main.css | 0 themes/{Theme - ColorPalette => Theme-ColorPalette}/main.js | 0 4 files changed, 1 deletion(-) delete mode 100644 themes/Theme - ColorPalette/readme rename themes/{Theme - ColorPalette => Theme-ColorPalette}/colorPalette.yml (100%) rename themes/{Theme - ColorPalette => Theme-ColorPalette}/main.css (100%) rename themes/{Theme - ColorPalette => Theme-ColorPalette}/main.js (100%) diff --git a/themes/Theme - ColorPalette/readme b/themes/Theme - ColorPalette/readme deleted file mode 100644 index 8b137891..00000000 --- a/themes/Theme - ColorPalette/readme +++ /dev/null @@ -1 +0,0 @@ - diff --git a/themes/Theme - ColorPalette/colorPalette.yml b/themes/Theme-ColorPalette/colorPalette.yml similarity index 100% rename from themes/Theme - ColorPalette/colorPalette.yml rename to themes/Theme-ColorPalette/colorPalette.yml diff --git a/themes/Theme - ColorPalette/main.css b/themes/Theme-ColorPalette/main.css similarity index 100% rename from themes/Theme - ColorPalette/main.css rename to themes/Theme-ColorPalette/main.css diff --git a/themes/Theme - ColorPalette/main.js b/themes/Theme-ColorPalette/main.js similarity index 100% rename from themes/Theme - ColorPalette/main.js rename to themes/Theme-ColorPalette/main.js From 4f49d8e5a5383f548ab9243b6f930b6ee706b9ad Mon Sep 17 00:00:00 2001 From: wql219 <160428035+wql219@users.noreply.github.com> Date: Sat, 28 Sep 2024 11:15:57 +0800 Subject: [PATCH 4/5] Modify file name, translate comments to English, modify second color variable name --- .../{main.css => Theme-ColorPalette.css} | 48 +++++++++---------- .../{main.js => Theme-ColorPalette.js} | 2 - ...olorPalette.yml => Theme-ColorPalette.yml} | 4 +- 3 files changed, 26 insertions(+), 28 deletions(-) rename themes/Theme-ColorPalette/{main.css => Theme-ColorPalette.css} (85%) rename themes/Theme-ColorPalette/{main.js => Theme-ColorPalette.js} (87%) rename themes/Theme-ColorPalette/{colorPalette.yml => Theme-ColorPalette.yml} (88%) diff --git a/themes/Theme-ColorPalette/main.css b/themes/Theme-ColorPalette/Theme-ColorPalette.css similarity index 85% rename from themes/Theme-ColorPalette/main.css rename to themes/Theme-ColorPalette/Theme-ColorPalette.css index f0ce5022..ede8a176 100644 --- a/themes/Theme-ColorPalette/main.css +++ b/themes/Theme-ColorPalette/Theme-ColorPalette.css @@ -1,10 +1,10 @@ :root { - /* 定义主颜色角度 */ + /* Define the main color angle */ --maincolorDeg: 140deg; - /* 定义所有颜色的通用饱和度 */ + /* Define the universal saturation for all colors */ --saturation: 80%; - /* 定义亮度级别变量 */ + /* Define brightness level variable */ --brightestLevel: 95%; --veryBrightLevel: 90%; --brightLevel: 75%; @@ -15,7 +15,7 @@ --veryDarkLevel: 8%; --extremelyDarkLevel: 2%; - /* 主颜色及相关设置 */ + /* Main color and related settings */ --mainLightest: hsl(var(--maincolorDeg), var(--saturation), var(--brightestLevel)); --mainVeryBright: hsl(var(--maincolorDeg), var(--saturation), var(--veryBrightLevel)); --mainBright: hsl(var(--maincolorDeg), var(--saturation), var(--brightLevel)); @@ -27,20 +27,20 @@ --mainExtremelyDark: hsl(var(--maincolorDeg), var(--saturation), var(--extremelyDarkLevel)); --mainGrey:hsl(var(--maincolorDeg),20%, var(--darkLevel)); - /* 互补色设置 */ - --complementary: 20deg; - --complementaryColor: calc(var(--maincolorDeg) + var(--complementary)); - --complementaryLightest: hsl(var(--complementaryColor), var(--saturation), var(--brightestLevel)); - --complementaryVeryBright: hsl(var(--complementaryColor), var(--saturation), var(--veryBrightLevel)); - --complementaryBright: hsl(var(--complementaryColor), var(--saturation), var(--brightLevel)); - --complementaryModeratelyBright: hsl(var(--complementaryColor), var(--saturation), var(--moderatelyBrightLevel)); - --complementaryMedium: hsl(var(--complementaryColor), var(--saturation), var(--mediumLevel)); - --complementaryModeratelyDark: hsl(var(--complementaryColor), var(--saturation), var(--moderatelyDarkLevel)); - --complementaryDark: hsl(var(--complementaryColor), var(--saturation), var(--darkLevel)); - --complementaryVeryDark: hsl(var(--complementaryColor), var(--saturation), var(--veryDarkLevel)); - --complementaryExtremelyDark: hsl(var(--complementaryColor), var(--saturation), var(--extremelyDarkLevel)); + /* secondary color settings */ + --secondary: 20deg; + --secondaryColor: calc(var(--maincolorDeg) + var(--secondary)); + --secondaryLightest: hsl(var(--secondaryColor), var(--saturation), var(--brightestLevel)); + --secondaryVeryBright: hsl(var(--secondaryColor), var(--saturation), var(--veryBrightLevel)); + --secondaryBright: hsl(var(--secondaryColor), var(--saturation), var(--brightLevel)); + --secondaryModeratelyBright: hsl(var(--secondaryColor), var(--saturation), var(--moderatelyBrightLevel)); + --secondaryMedium: hsl(var(--secondaryColor), var(--saturation), var(--mediumLevel)); + --secondaryModeratelyDark: hsl(var(--secondaryColor), var(--saturation), var(--moderatelyDarkLevel)); + --secondaryDark: hsl(var(--secondaryColor), var(--saturation), var(--darkLevel)); + --secondaryVeryDark: hsl(var(--secondaryColor), var(--saturation), var(--veryDarkLevel)); + --secondaryExtremelyDark: hsl(var(--secondaryColor), var(--saturation), var(--extremelyDarkLevel)); - /* 三分色设置 */ + /* Three-point color setting */ --tertiary1: calc(var(--maincolorDeg) + 120deg); --tertiary1Lightest: hsl(var(--tertiary1), var(--saturation), var(--brightestLevel)); --tertiary1VeryBright: hsl(var(--tertiary1), var(--saturation), var(--veryBrightLevel)); @@ -62,22 +62,22 @@ --tertiary2VeryDark: hsl(var(--tertiary2), var(--saturation), var(--veryDarkLevel)); --tertiary2ExtremelyDark: hsl(var(--tertiary2), var(--saturation), var(--extremelyDarkLevel)); - /* 背景类型 */ + /* Background Type */ --bgTypeNormal: var(--mainDark); --bgTypeBright: var(--mainMedium); --bgTypeDark: var(--mainVeryDark); --bgTypeSpecial: var(--mainModeratelyDark); --bgTypeGrey:var(--mainGrey); - /* 文本类型 */ + /* Text Type */ --textTypeNormal: var(--mainModeratelyDark); --textTypeBright: var(--mainBright); --textTypeDark: var(--mainVeryBright); - --textTypeSpecial: var(--complementaryModeratelyBright); + --textTypeSpecial: var(--secondaryModeratelyBright); - /* 边框类型 */ - --borderTypeNormal: var(--complementaryMedium); - --borderTypeBright: var(--complementaryBright); + /* border type */ + --borderTypeNormal: var(--secondaryMedium); + --borderTypeBright: var(--secondaryBright); --borderTypeDark: var(--mainDark); --borderTypeSpecial: var(--mainBright); } @@ -186,7 +186,7 @@ box-shadow: 0 0 0 .2rem var(--borderTypeSpecial); color: #fff; background-color: var(--bgTypeBright); border-color: var(--borderTypeDark); - box-shadow: 0 0 0 .2rem var(--complementaryLightest); + box-shadow: 0 0 0 .2rem var(--secondaryLightest); } div.react-select__menu, div.dropdown-menu { background-color: var(--bgTypeNormal); diff --git a/themes/Theme-ColorPalette/main.js b/themes/Theme-ColorPalette/Theme-ColorPalette.js similarity index 87% rename from themes/Theme-ColorPalette/main.js rename to themes/Theme-ColorPalette/Theme-ColorPalette.js index 599f0c0c..fd020d62 100644 --- a/themes/Theme-ColorPalette/main.js +++ b/themes/Theme-ColorPalette/Theme-ColorPalette.js @@ -7,14 +7,12 @@ async function mainFunction() { let hueValue; try { const config = await csLib.getConfiguration("colorPalette", {}); - // 假设config是一个对象，其中包含hue属性 hueValue = config.hue; let UserColorValue = hueValue; localStorage.setItem('UserColor', UserColorValue); } catch (error) { console.error('Error getting configuration:', error); } - // 在这里可以继续使用hueValue变量进行其他操作 return hueValue; } mainFunction(); diff --git a/themes/Theme-ColorPalette/colorPalette.yml b/themes/Theme-ColorPalette/Theme-ColorPalette.yml similarity index 88% rename from themes/Theme-ColorPalette/colorPalette.yml rename to themes/Theme-ColorPalette/Theme-ColorPalette.yml index 080be182..09ac7b8d 100644 --- a/themes/Theme-ColorPalette/colorPalette.yml +++ b/themes/Theme-ColorPalette/Theme-ColorPalette.yml @@ -5,9 +5,9 @@ ui: requires: - CommunityScriptsUILibrary javascript: - - main.js + - Theme-ColorPalette.js css: - - main.css + - Theme-ColorPalette.css settings: hue: displayName: hue value From b84fc5e0da3302c8ade90172585506318784ed4c Mon Sep 17 00:00:00 2001 From: wql219 <160428035+wql219@users.noreply.github.com> Date: Sat, 28 Sep 2024 12:34:39 +0800 Subject: [PATCH 5/5] format the code --- .../Theme-ColorPalette/Theme-ColorPalette.css | 564 ++++++++++++------ .../Theme-ColorPalette/Theme-ColorPalette.js | 36 +- .../Theme-ColorPalette/Theme-ColorPalette.yml | 3 +- 3 files changed, 390 insertions(+), 213 deletions(-) diff --git a/themes/Theme-ColorPalette/Theme-ColorPalette.css b/themes/Theme-ColorPalette/Theme-ColorPalette.css index ede8a176..aeb1d974 100644 --- a/themes/Theme-ColorPalette/Theme-ColorPalette.css +++ b/themes/Theme-ColorPalette/Theme-ColorPalette.css @@ -1,279 +1,451 @@ :root { - /* Define the main color angle */ - --maincolorDeg: 140deg; - /* Define the universal saturation for all colors */ - --saturation: 80%; + /* Define the main color angle */ + --maincolorDeg: 140deg; + /* Define the universal saturation for all colors */ + --saturation: 80%; - /* Define brightness level variable */ - --brightestLevel: 95%; - --veryBrightLevel: 90%; - --brightLevel: 75%; - --moderatelyBrightLevel: 60%; - --mediumLevel: 40%; - --moderatelyDarkLevel: 25%; - --darkLevel: 15%; - --veryDarkLevel: 8%; - --extremelyDarkLevel: 2%; + /* Define brightness level variable */ + --brightestLevel: 95%; + --veryBrightLevel: 90%; + --brightLevel: 75%; + --moderatelyBrightLevel: 60%; + --mediumLevel: 40%; + --moderatelyDarkLevel: 25%; + --darkLevel: 15%; + --veryDarkLevel: 8%; + --extremelyDarkLevel: 2%; - /* Main color and related settings */ - --mainLightest: hsl(var(--maincolorDeg), var(--saturation), var(--brightestLevel)); - --mainVeryBright: hsl(var(--maincolorDeg), var(--saturation), var(--veryBrightLevel)); - --mainBright: hsl(var(--maincolorDeg), var(--saturation), var(--brightLevel)); - --mainModeratelyBright: hsl(var(--maincolorDeg), var(--saturation), var(--moderatelyBrightLevel)); - --mainMedium: hsl(var(--maincolorDeg), var(--saturation), var(--mediumLevel)); - --mainModeratelyDark: hsl(var(--maincolorDeg), var(--saturation), var(--moderatelyDarkLevel)); - --mainDark: hsl(var(--maincolorDeg), var(--saturation), var(--darkLevel)); - --mainVeryDark: hsl(var(--maincolorDeg), var(--saturation), var(--veryDarkLevel)); - --mainExtremelyDark: hsl(var(--maincolorDeg), var(--saturation), var(--extremelyDarkLevel)); - --mainGrey:hsl(var(--maincolorDeg),20%, var(--darkLevel)); + /* Main color and related settings */ + --mainLightest: hsl( + var(--maincolorDeg), + var(--saturation), + var(--brightestLevel) + ); + --mainVeryBright: hsl( + var(--maincolorDeg), + var(--saturation), + var(--veryBrightLevel) + ); + --mainBright: hsl(var(--maincolorDeg), var(--saturation), var(--brightLevel)); + --mainModeratelyBright: hsl( + var(--maincolorDeg), + var(--saturation), + var(--moderatelyBrightLevel) + ); + --mainMedium: hsl(var(--maincolorDeg), var(--saturation), var(--mediumLevel)); + --mainModeratelyDark: hsl( + var(--maincolorDeg), + var(--saturation), + var(--moderatelyDarkLevel) + ); + --mainDark: hsl(var(--maincolorDeg), var(--saturation), var(--darkLevel)); + --mainVeryDark: hsl( + var(--maincolorDeg), + var(--saturation), + var(--veryDarkLevel) + ); + --mainExtremelyDark: hsl( + var(--maincolorDeg), + var(--saturation), + var(--extremelyDarkLevel) + ); + --mainGrey: hsl(var(--maincolorDeg), 20%, var(--darkLevel)); - /* secondary color settings */ - --secondary: 20deg; - --secondaryColor: calc(var(--maincolorDeg) + var(--secondary)); - --secondaryLightest: hsl(var(--secondaryColor), var(--saturation), var(--brightestLevel)); - --secondaryVeryBright: hsl(var(--secondaryColor), var(--saturation), var(--veryBrightLevel)); - --secondaryBright: hsl(var(--secondaryColor), var(--saturation), var(--brightLevel)); - --secondaryModeratelyBright: hsl(var(--secondaryColor), var(--saturation), var(--moderatelyBrightLevel)); - --secondaryMedium: hsl(var(--secondaryColor), var(--saturation), var(--mediumLevel)); - --secondaryModeratelyDark: hsl(var(--secondaryColor), var(--saturation), var(--moderatelyDarkLevel)); - --secondaryDark: hsl(var(--secondaryColor), var(--saturation), var(--darkLevel)); - --secondaryVeryDark: hsl(var(--secondaryColor), var(--saturation), var(--veryDarkLevel)); - --secondaryExtremelyDark: hsl(var(--secondaryColor), var(--saturation), var(--extremelyDarkLevel)); + /* secondary color settings */ + --secondary: 20deg; + --secondaryColor: calc(var(--maincolorDeg) + var(--secondary)); + --secondaryLightest: hsl( + var(--secondaryColor), + var(--saturation), + var(--brightestLevel) + ); + --secondaryVeryBright: hsl( + var(--secondaryColor), + var(--saturation), + var(--veryBrightLevel) + ); + --secondaryBright: hsl( + var(--secondaryColor), + var(--saturation), + var(--brightLevel) + ); + --secondaryModeratelyBright: hsl( + var(--secondaryColor), + var(--saturation), + var(--moderatelyBrightLevel) + ); + --secondaryMedium: hsl( + var(--secondaryColor), + var(--saturation), + var(--mediumLevel) + ); + --secondaryModeratelyDark: hsl( + var(--secondaryColor), + var(--saturation), + var(--moderatelyDarkLevel) + ); + --secondaryDark: hsl( + var(--secondaryColor), + var(--saturation), + var(--darkLevel) + ); + --secondaryVeryDark: hsl( + var(--secondaryColor), + var(--saturation), + var(--veryDarkLevel) + ); + --secondaryExtremelyDark: hsl( + var(--secondaryColor), + var(--saturation), + var(--extremelyDarkLevel) + ); - /* Three-point color setting */ - --tertiary1: calc(var(--maincolorDeg) + 120deg); - --tertiary1Lightest: hsl(var(--tertiary1), var(--saturation), var(--brightestLevel)); - --tertiary1VeryBright: hsl(var(--tertiary1), var(--saturation), var(--veryBrightLevel)); - --tertiary1Bright: hsl(var(--tertiary1), var(--saturation), var(--brightLevel)); - --tertiary1ModeratelyBright: hsl(var(--tertiary1), var(--saturation), var(--moderatelyBrightLevel)); - --tertiary1Medium: hsl(var(--tertiary1), var(--saturation), var(--mediumLevel)); - --tertiary1ModeratelyDark: hsl(var(--tertiary1), var(--saturation), var(--moderatelyDarkLevel)); - --tertiary1Dark: hsl(var(--tertiary1), var(--saturation), var(--darkLevel)); - --tertiary1VeryDark: hsl(var(--tertiary1), var(--saturation), var(--veryDarkLevel)); - --tertiary1ExtremelyDark: hsl(var(--tertiary1), var(--saturation), var(--extremelyDarkLevel)); - --tertiary2: calc(var(--maincolorDeg) + 240deg); - --tertiary2Lightest: hsl(var(--tertiary2), var(--saturation), var(--brightestLevel)); - --tertiary2VeryBright: hsl(var(--tertiary2), var(--saturation), var(--veryBrightLevel)); - --tertiary2Bright: hsl(var(--tertiary2), var(--saturation), var(--brightLevel)); - --tertiary2ModeratelyBright: hsl(var(--tertiary2), var(--saturation), var(--moderatelyBrightLevel)); - --tertiary2Medium: hsl(var(--tertiary2), var(--saturation), var(--mediumLevel)); - --tertiary2ModeratelyDark: hsl(var(--tertiary2), var(--saturation), var(--moderatelyDarkLevel)); - --tertiary2Dark: hsl(var(--tertiary2), var(--saturation), var(--darkLevel)); - --tertiary2VeryDark: hsl(var(--tertiary2), var(--saturation), var(--veryDarkLevel)); - --tertiary2ExtremelyDark: hsl(var(--tertiary2), var(--saturation), var(--extremelyDarkLevel)); + /* Three-point color setting */ + --tertiary1: calc(var(--maincolorDeg) + 120deg); + --tertiary1Lightest: hsl( + var(--tertiary1), + var(--saturation), + var(--brightestLevel) + ); + --tertiary1VeryBright: hsl( + var(--tertiary1), + var(--saturation), + var(--veryBrightLevel) + ); + --tertiary1Bright: hsl( + var(--tertiary1), + var(--saturation), + var(--brightLevel) + ); + --tertiary1ModeratelyBright: hsl( + var(--tertiary1), + var(--saturation), + var(--moderatelyBrightLevel) + ); + --tertiary1Medium: hsl( + var(--tertiary1), + var(--saturation), + var(--mediumLevel) + ); + --tertiary1ModeratelyDark: hsl( + var(--tertiary1), + var(--saturation), + var(--moderatelyDarkLevel) + ); + --tertiary1Dark: hsl(var(--tertiary1), var(--saturation), var(--darkLevel)); + --tertiary1VeryDark: hsl( + var(--tertiary1), + var(--saturation), + var(--veryDarkLevel) + ); + --tertiary1ExtremelyDark: hsl( + var(--tertiary1), + var(--saturation), + var(--extremelyDarkLevel) + ); + --tertiary2: calc(var(--maincolorDeg) + 240deg); + --tertiary2Lightest: hsl( + var(--tertiary2), + var(--saturation), + var(--brightestLevel) + ); + --tertiary2VeryBright: hsl( + var(--tertiary2), + var(--saturation), + var(--veryBrightLevel) + ); + --tertiary2Bright: hsl( + var(--tertiary2), + var(--saturation), + var(--brightLevel) + ); + --tertiary2ModeratelyBright: hsl( + var(--tertiary2), + var(--saturation), + var(--moderatelyBrightLevel) + ); + --tertiary2Medium: hsl( + var(--tertiary2), + var(--saturation), + var(--mediumLevel) + ); + --tertiary2ModeratelyDark: hsl( + var(--tertiary2), + var(--saturation), + var(--moderatelyDarkLevel) + ); + --tertiary2Dark: hsl(var(--tertiary2), var(--saturation), var(--darkLevel)); + --tertiary2VeryDark: hsl( + var(--tertiary2), + var(--saturation), + var(--veryDarkLevel) + ); + --tertiary2ExtremelyDark: hsl( + var(--tertiary2), + var(--saturation), + var(--extremelyDarkLevel) + ); - /* Background Type */ - --bgTypeNormal: var(--mainDark); - --bgTypeBright: var(--mainMedium); - --bgTypeDark: var(--mainVeryDark); - --bgTypeSpecial: var(--mainModeratelyDark); - --bgTypeGrey:var(--mainGrey); + /* Background Type */ + --bgTypeNormal: var(--mainDark); + --bgTypeBright: var(--mainMedium); + --bgTypeDark: var(--mainVeryDark); + --bgTypeSpecial: var(--mainModeratelyDark); + --bgTypeGrey: var(--mainGrey); - /* Text Type */ - --textTypeNormal: var(--mainModeratelyDark); - --textTypeBright: var(--mainBright); - --textTypeDark: var(--mainVeryBright); - --textTypeSpecial: var(--secondaryModeratelyBright); + /* Text Type */ + --textTypeNormal: var(--mainModeratelyDark); + --textTypeBright: var(--mainBright); + --textTypeDark: var(--mainVeryBright); + --textTypeSpecial: var(--secondaryModeratelyBright); - /* border type */ - --borderTypeNormal: var(--secondaryMedium); - --borderTypeBright: var(--secondaryBright); - --borderTypeDark: var(--mainDark); - --borderTypeSpecial: var(--mainBright); + /* border type */ + --borderTypeNormal: var(--secondaryMedium); + --borderTypeBright: var(--secondaryBright); + --borderTypeDark: var(--mainDark); + --borderTypeSpecial: var(--mainBright); +} +body { + color: var(--textTypeBright); + background-color: var(--bgTypeDark); } -body {color:var(--textTypeBright);background-color: var(--bgTypeDark);} .card { - background-color: #55555555; + background-color: #55555555; } .bg-dark { - background-color: var(--bgTypeSpecial) !important; + background-color: var(--bgTypeSpecial) !important; } -.clearable-text-field, .clearable-text-field:active, .clearable-text-field:focus { -background-color: var(--bgTypeNormal); -border-color: var(--borderTypeNormal); -color: #fff; +.clearable-text-field, +.clearable-text-field:active, +.clearable-text-field:focus { + background-color: var(--bgTypeNormal); + border-color: var(--borderTypeNormal); + color: #fff; } -.btn-secondary { -color: #fff; -background-color: var(--bgTypeNormal); -border-color: var(--borderTypeDark); -} -.btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active, .show>.btn-secondary.dropdown-toggle { - color: #fff; - background-color: var(--bgTypeDark); - border-color: var(--borderTypeDark); +.btn-secondary { + color: #fff; + background-color: var(--bgTypeNormal); + border-color: var(--borderTypeDark); +} +.btn-secondary:not(:disabled):not(.disabled):active, +.btn-secondary:not(:disabled):not(.disabled).active, +.show > .btn-secondary.dropdown-toggle { + color: #fff; + background-color: var(--bgTypeDark); + border-color: var(--borderTypeDark); } .bg-secondary { - background-color: var(--bgTypeNormal) !important; + background-color: var(--bgTypeNormal) !important; } -.input-control, .input-control:focus, .input-control:disabled { - background-color: var(--darkBg); +.input-control, +.input-control:focus, +.input-control:disabled { + background-color: var(--darkBg); } -.nav-pills .nav-link.active, .nav-pills .show>.nav-link { - color: var(--textTypeBright); - background-color: var(--bgTypeDark); +.nav-pills .nav-link.active, +.nav-pills .show > .nav-link { + color: var(--textTypeBright); + background-color: var(--bgTypeDark); } .btn-primary { - color: #fff; - background-color: var(--bgTypeBright); - border-color: var(--bgTypeDark); + color: #fff; + background-color: var(--bgTypeBright); + border-color: var(--bgTypeDark); } -.custom-control-input:checked~.custom-control-label:before { - color: var(--bgTypeDark); - border-color: var(--borderTypeNormal); - background-color: var(--bgTypeBright); +.custom-control-input:checked ~ .custom-control-label:before { + color: var(--bgTypeDark); + border-color: var(--borderTypeNormal); + background-color: var(--bgTypeBright); } - #tasks-panel .tasks-panel-queue { - background-color: var(--bgTypeDark); +#tasks-panel .tasks-panel-queue { + background-color: var(--bgTypeDark); } .job-table.card { - background-color: var(--bgTypeDark); + background-color: var(--bgTypeDark); } .btn-primary:hover { - color: #fff; - background-color: var(--bgTypeDark); - border-color: var(--borderTypeDark); + color: #fff; + background-color: var(--bgTypeDark); + border-color: var(--borderTypeDark); } -.btn-primary.disabled, .btn-primary:disabled { - color: #fff; - background-color: #888; - border-color: var(--borderTypeDark); +.btn-primary.disabled, +.btn-primary:disabled { + color: #fff; + background-color: #888; + border-color: var(--borderTypeDark); } - a { - color: var(--bgTypeBright); + color: var(--bgTypeBright); } .detail-header { - background-color: var(--bgTypeDark); + background-color: var(--bgTypeDark); } .nav-tabs .nav-link.active { - border-bottom: 4px solid; - color: var(--textTypeBright); + border-bottom: 4px solid; + color: var(--textTypeBright); } div.react-select__control { - background-color: rgba(16, 22, 26, .3); - border-color: var(--borderTypeNormal); + background-color: rgba(16, 22, 26, 0.3); + border-color: var(--borderTypeNormal); } -.modal-header, .modal-body, .modal-footer { - background-color: var(--bgTypeNormal); - color: #f5f8fa; +.modal-header, +.modal-body, +.modal-footer { + background-color: var(--bgTypeNormal); + color: #f5f8fa; } .btn-secondary:hover { - color: #fff; - background-color: var(--bgTypeBright); - border-color: var(--borderTypeDark); + color: #fff; + background-color: var(--bgTypeBright); + border-color: var(--borderTypeDark); } - -h5, .h5 { - font-size: 1.5rem; - text-shadow: 0px 0px 7px var(--textTypeBright); - font-family: Pingfang; - font-variation-settings: 'wght' 900, 'wdth' 50; -} -primary.dropdown-toggle:focus { -box-shadow: 0 0 0 .2rem var(--borderTypeSpecial); -} -.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show>.btn-primary.dropdown-toggle { color: #fff; background-color: var(--bgTypeNormal); border-color: var(--borderTypeSpecial);} -.btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus, .show>.btn-primary.dropdown-toggle:focus { - box-shadow: 0 0 0 .2rem var(--borderTypeSpecial); -} -.btn-primary:focus, .btn-primary.focus { - color: #fff; - background-color: var(--bgTypeBright); - border-color: var(--borderTypeDark); - box-shadow: 0 0 0 .2rem var(--secondaryLightest); -} -div.react-select__menu, div.dropdown-menu { - background-color: var(--bgTypeNormal); -} -.package-manager table thead { background-color: var(--bgTypeNormal); -} -.dropdown-item.active, .dropdown-item:active { - background-color: var(--bgTypeBright); -} -.btn-secondary.disabled, .btn-secondary:disabled { - color: #fff; - background-color: var(--bgTypeGrey); -} -.markdown blockquote, .markdown pre { - background-color: var(--bgTypeSpecial); +h5, +.h5 { + font-size: 1.5rem; + text-shadow: 0px 0px 7px var(--textTypeBright); + font-family: Pingfang; + font-variation-settings: + "wght" 900, + "wdth" 50; +} +primary.dropdown-toggle:focus { + box-shadow: 0 0 0 0.2rem var(--borderTypeSpecial); +} +.btn-primary:not(:disabled):not(.disabled):active, +.btn-primary:not(:disabled):not(.disabled).active, +.show > .btn-primary.dropdown-toggle { + color: #fff; + background-color: var(--bgTypeNormal); + border-color: var(--borderTypeSpecial); +} +.btn-primary:not(:disabled):not(.disabled):active:focus, +.btn-primary:not(:disabled):not(.disabled).active:focus, +.show > .btn-primary.dropdown-toggle:focus { + box-shadow: 0 0 0 0.2rem var(--borderTypeSpecial); +} +.btn-primary:focus, +.btn-primary.focus { + color: #fff; + background-color: var(--bgTypeBright); + border-color: var(--borderTypeDark); + box-shadow: 0 0 0 0.2rem var(--secondaryLightest); +} +div.react-select__menu, +div.dropdown-menu { + background-color: var(--bgTypeNormal); +} +.package-manager table thead { + background-color: var(--bgTypeNormal); +} +.dropdown-item.active, +.dropdown-item:active { + background-color: var(--bgTypeBright); +} +.btn-secondary.disabled, +.btn-secondary:disabled { + color: #fff; + background-color: var(--bgTypeGrey); +} +.markdown blockquote, +.markdown pre { + background-color: var(--bgTypeSpecial); } .markdown code { - background-color: var(--bgTypeBright); + background-color: var(--bgTypeBright); } -.modal-header, .modal-body, .modal-footer { - background-color: var(--bgTypeDark); +.modal-header, +.modal-body, +.modal-footer { + background-color: var(--bgTypeDark); } .markdown table tr:nth-child(2n) { - background-color: var(--bgTypeGrey); + background-color: var(--bgTypeGrey); } a:hover { - color: var(--textTypeSpecial); + color: var(--textTypeSpecial); } .collapsed .detail-item-value { - -webkit-line-clamp: 10; + -webkit-line-clamp: 10; } .TruncatedText.scene-card__description { - -webkit-line-clamp: 10 !important; + -webkit-line-clamp: 10 !important; } .StudioTagger-studio { - background-color: var(--bgTypeNormal); + background-color: var(--bgTypeNormal); } .search-item { - background-color: #88888866; - border-radius: 8px; + background-color: #88888866; + border-radius: 8px; } .StudioTagger-studio .studio-card img { - background-color: #fff0; + background-color: #fff0; } .StudioTagger-studio .studio-card { - background-color: #fff0; + background-color: #fff0; } -.text-input, .text-input:focus, .text-input[readonly], .text-input:disabled { - background-color: rgba(16,22,26,.3); - border-color: var(--borderTypeNormal); - border-radius: 4px; - border-style: solid; - border-width: 1px; +.text-input, +.text-input:focus, +.text-input[readonly], +.text-input:disabled { + background-color: rgba(16, 22, 26, 0.3); + border-color: var(--borderTypeNormal); + border-radius: 4px; + border-style: solid; + border-width: 1px; } .PerformerTagger-performer { - background-color: var(--bgTypeNormal); + background-color: var(--bgTypeNormal); } #queue-viewer .current { - background-color: var(--bgTypeSpecial); + background-color: var(--bgTypeSpecial); } -.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { - background-color: var(--bgTypeGrey); +.nav-tabs .nav-link.active, +.nav-tabs .nav-item.show .nav-link { + background-color: var(--bgTypeGrey); } div.react-datepicker { - background-color: var(--mainModeratelyBright); - border-color: var(--bgTypeBright); - color: var(--textTypeDark); + background-color: var(--mainModeratelyBright); + border-color: var(--bgTypeBright); + color: var(--textTypeDark); } -div.react-datepicker .react-datepicker__header, div.react-datepicker .react-datepicker-time__header { - background-color: var(--bgTypeSpecial); - +div.react-datepicker .react-datepicker__header, +div.react-datepicker .react-datepicker-time__header { + background-color: var(--bgTypeSpecial); } -.react-datepicker__day--selected, .react-datepicker__day--in-selecting-range, .react-datepicker__day--in-range, .react-datepicker__month-text--selected, .react-datepicker__month-text--in-selecting-range, .react-datepicker__month-text--in-range, .react-datepicker__quarter-text--selected, .react-datepicker__quarter-text--in-selecting-range, .react-datepicker__quarter-text--in-range, .react-datepicker__year-text--selected, .react-datepicker__year-text--in-selecting-range, .react-datepicker__year-text--in-range { - background-color: var(--bgTypeNormal); -} -a.bg-secondary:hover, a.bg-secondary:focus, button.bg-secondary:hover, button.bg-secondary:focus { - background-color: var(--bgTypeBright) !important; +.react-datepicker__day--selected, +.react-datepicker__day--in-selecting-range, +.react-datepicker__day--in-range, +.react-datepicker__month-text--selected, +.react-datepicker__month-text--in-selecting-range, +.react-datepicker__month-text--in-range, +.react-datepicker__quarter-text--selected, +.react-datepicker__quarter-text--in-selecting-range, +.react-datepicker__quarter-text--in-range, +.react-datepicker__year-text--selected, +.react-datepicker__year-text--in-selecting-range, +.react-datepicker__year-text--in-range { + background-color: var(--bgTypeNormal); +} +a.bg-secondary:hover, +a.bg-secondary:focus, +button.bg-secondary:hover, +button.bg-secondary:focus { + background-color: var(--bgTypeBright) !important; } .nav-tabs .nav-link.active:hover { - border-bottom-color: var(--tertiary1ModeratelyBright); + border-bottom-color: var(--tertiary1ModeratelyBright); } #scene-edit-details .edit-buttons-container { - background-color: var(--bgTypeGrey); -} \ No newline at end of file + background-color: var(--bgTypeGrey); +} diff --git a/themes/Theme-ColorPalette/Theme-ColorPalette.js b/themes/Theme-ColorPalette/Theme-ColorPalette.js index fd020d62..d4bd93bf 100644 --- a/themes/Theme-ColorPalette/Theme-ColorPalette.js +++ b/themes/Theme-ColorPalette/Theme-ColorPalette.js @@ -1,28 +1,34 @@ -if (!localStorage.getItem('UserColor')) { - localStorage.setItem('UserColor', 0); +if (!localStorage.getItem("UserColor")) { + localStorage.setItem("UserColor", 0); } -document.documentElement.style.setProperty('--maincolorDeg', localStorage.getItem('UserColor') +"deg"); +document.documentElement.style.setProperty( + "--maincolorDeg", + localStorage.getItem("UserColor") + "deg" +); async function mainFunction() { let hueValue; try { - const config = await csLib.getConfiguration("colorPalette", {}); - hueValue = config.hue; - let UserColorValue = hueValue; - localStorage.setItem('UserColor', UserColorValue); + const config = await csLib.getConfiguration("colorPalette", {}); + hueValue = config.hue; + let UserColorValue = hueValue; + localStorage.setItem("UserColor", UserColorValue); } catch (error) { - console.error('Error getting configuration:', error); + console.error("Error getting configuration:", error); } return hueValue; } mainFunction(); - -if (!localStorage.getItem('UserColor')) { - localStorage.setItem('UserColor', 0); +if (!localStorage.getItem("UserColor")) { + localStorage.setItem("UserColor", 0); } -document.documentElement.style.setProperty('--maincolorDeg', localStorage.getItem('UserColor') +"deg"); - -document.querySelector("meta[name='theme-color']").content = window.getComputedStyle(document.querySelectorAll(".top-nav")[0]).backgroundColor - +document.documentElement.style.setProperty( + "--maincolorDeg", + localStorage.getItem("UserColor") + "deg" +); +document.querySelector("meta[name='theme-color']").content = + window.getComputedStyle( + document.querySelectorAll(".top-nav")[0] + ).backgroundColor; diff --git a/themes/Theme-ColorPalette/Theme-ColorPalette.yml b/themes/Theme-ColorPalette/Theme-ColorPalette.yml index 09ac7b8d..0b3e56d1 100644 --- a/themes/Theme-ColorPalette/Theme-ColorPalette.yml +++ b/themes/Theme-ColorPalette/Theme-ColorPalette.yml @@ -2,7 +2,7 @@ name: Theme - colorPalette description: Based on the default theme, change the overall color of the page by setting the hue value. Make minor changes to the remaining styles. version: 0.1 ui: - requires: + requires: - CommunityScriptsUILibrary javascript: - Theme-ColorPalette.js @@ -13,4 +13,3 @@ settings: displayName: hue value description: An angle value of 0-360. Red (0) - Orange - Yellow - Green (120) - Cyan - Blue (240) - Purple - Red (360) type: NUMBER - \ No newline at end of file