From 191764c90439b617e0675cf85d1d2a22d5f79db2 Mon Sep 17 00:00:00 2001 From: Damian Korcz Date: Sun, 26 May 2024 19:35:21 +0100 Subject: [PATCH] Fixed graph colours going black when switching theme #133 --- src/scss/Color Schemes/colorSchemeBird.scss | 4 +- src/scss/Info/styleSettingsConfig.scss | 184 ++++++++++---------- src/scss/Plugins/Core/graph.scss | 12 -- src/scss/Variables/coreVariables.scss | 29 ++- 4 files changed, 114 insertions(+), 115 deletions(-) diff --git a/src/scss/Color Schemes/colorSchemeBird.scss b/src/scss/Color Schemes/colorSchemeBird.scss index e598586..401dd82 100644 --- a/src/scss/Color Schemes/colorSchemeBird.scss +++ b/src/scss/Color Schemes/colorSchemeBird.scss @@ -1,5 +1,5 @@ // [Color Scheme - Bird] Light Theme -.theme-light.pt-color-scheme-swan-lt, +.theme-light, .theme-light.pt-color-scheme-custom-lt, .theme-light:not(.css-settings-manager) { // Fills in enough colours to see the theme when Style Settings isn't enabled // The color variables below are comma separated HSL values. This format is necessary for using these @@ -61,7 +61,7 @@ } // [Color Scheme - Default] Dark Theme -.theme-dark.pt-color-scheme-raven-dt, +.theme-dark, .theme-dark.pt-color-scheme-custom-dt, .theme-dark:not(.css-settings-manager) { // Fills in enough colours to see the theme when Style Settings isn't enabled // The color variables below are comma separated HSL values. This format is necessary for using these diff --git a/src/scss/Info/styleSettingsConfig.scss b/src/scss/Info/styleSettingsConfig.scss index e7c50d5..b15fc45 100644 --- a/src/scss/Info/styleSettingsConfig.scss +++ b/src/scss/Info/styleSettingsConfig.scss @@ -396,34 +396,34 @@ settings: value: var(--graph-line-custom-color-lt) - label: Red - value: var(--color-red-text) + value: var(--color-red-tint) - label: Orange - value: var(--color-orange-text) + value: var(--color-orange-tint) - label: Yellow - value: var(--color-yellow-text) + value: var(--color-yellow-tint) - label: Green - value: var(--color-green-text) + value: var(--color-green-tint) - label: Mint - value: var(--color-mint-text) + value: var(--color-mint-tint) - label: Cyan - value: var(--color-cyan-text) + value: var(--color-cyan-tint) - label: Blue - value: var(--color-blue-text) + value: var(--color-blue-tint) - label: Purple - value: var(--color-purple-text) + value: var(--color-purple-tint) - label: Pink - value: var(--color-pink-text) + value: var(--color-pink-tint) - label: Grey - value: var(--color-grey-text) + value: var(--color-grey-tint) - id: graph-line-custom-color-lt title: Graph Lines Custom Color @@ -436,7 +436,7 @@ settings: id: graph-line-opacity-lt title: Graph Lines Opacity type: variable-number-slider - default: 0.6 + default: 1 min: 0 max: 1 step: 0.05 @@ -452,41 +452,41 @@ settings: title: Graph Note Color Presets type: variable-select allowEmpty: false - default: var(--color-grey-text) + default: var(--color-grey-tint) options: - label: Custom value: var(--graph-fill-custom-color-lt) - label: Red - value: var(--color-red-text) + value: var(--color-red-tint) - label: Orange - value: var(--color-orange-text) + value: var(--color-orange-tint) - label: Yellow - value: var(--color-yellow-text) + value: var(--color-yellow-tint) - label: Green - value: var(--color-green-text) + value: var(--color-green-tint) - label: Mint - value: var(--color-mint-text) + value: var(--color-mint-tint) - label: Cyan - value: var(--color-cyan-text) + value: var(--color-cyan-tint) - label: Blue - value: var(--color-blue-text) + value: var(--color-blue-tint) - label: Purple - value: var(--color-purple-text) + value: var(--color-purple-tint) - label: Pink - value: var(--color-pink-text) + value: var(--color-pink-tint) - label: Grey - value: var(--color-grey-text) + value: var(--color-grey-tint) - id: graph-fill-custom-color-lt title: Graph Note Custom Color @@ -515,44 +515,44 @@ settings: title: Graph Note Focused Color Presets type: variable-select allowEmpty: false - default: var(--interactive-accent-text) + default: var(--interactive-accent-tint) options: - label: Accent Color - value: var(--interactive-accent-text) + value: var(--interactive-accent-tint) - label: Custom value: var(--graph-fill-focused-custom-color-lt) - label: Red - value: var(--color-red-text) + value: var(--color-red-tint) - label: Orange - value: var(--color-orange-text) + value: var(--color-orange-tint) - label: Yellow - value: var(--color-yellow-text) + value: var(--color-yellow-tint) - label: Green - value: var(--color-green-text) + value: var(--color-green-tint) - label: Mint - value: var(--color-mint-text) + value: var(--color-mint-tint) - label: Cyan - value: var(--color-cyan-text) + value: var(--color-cyan-tint) - label: Blue - value: var(--color-blue-text) + value: var(--color-blue-tint) - label: Purple - value: var(--color-purple-text) + value: var(--color-purple-tint) - label: Pink - value: var(--color-pink-text) + value: var(--color-pink-tint) - label: Grey - value: var(--color-grey-text) + value: var(--color-grey-tint) - id: graph-fill-focused-custom-color-lt title: Graph Note Focused Custom Color @@ -581,41 +581,41 @@ settings: title: Graph Tag Color Presets type: variable-select allowEmpty: false - default: var(--color-blue-text) + default: var(--color-blue-tint) options: - label: Custom value: var(--graph-tag-custom-color-lt) - label: Red - value: var(--color-red-text) + value: var(--color-red-tint) - label: Orange - value: var(--color-orange-text) + value: var(--color-orange-tint) - label: Yellow - value: var(--color-yellow-text) + value: var(--color-yellow-tint) - label: Green - value: var(--color-green-text) + value: var(--color-green-tint) - label: Mint - value: var(--color-mint-text) + value: var(--color-mint-tint) - label: Cyan - value: var(--color-cyan-text) + value: var(--color-cyan-tint) - label: Blue - value: var(--color-blue-text) + value: var(--color-blue-tint) - label: Purple - value: var(--color-purple-text) + value: var(--color-purple-tint) - label: Pink - value: var(--color-pink-text) + value: var(--color-pink-tint) - label: Grey - value: var(--color-grey-text) + value: var(--color-grey-tint) - id: graph-tag-custom-color-lt title: Graph Tag Custom Color @@ -644,41 +644,41 @@ settings: title: Graph Attachment Color Presets type: variable-select allowEmpty: false - default: var(--color-yellow-text) + default: var(--color-yellow-tint) options: - label: Custom value: var(--graph-attachment-custom-color-lt) - label: Red - value: var(--color-red-text) + value: var(--color-red-tint) - label: Orange - value: var(--color-orange-text) + value: var(--color-orange-tint) - label: Yellow - value: var(--color-yellow-text) + value: var(--color-yellow-tint) - label: Green - value: var(--color-green-text) + value: var(--color-green-tint) - label: Mint - value: var(--color-mint-text) + value: var(--color-mint-tint) - label: Cyan - value: var(--color-cyan-text) + value: var(--color-cyan-tint) - label: Blue - value: var(--color-blue-text) + value: var(--color-blue-tint) - label: Purple - value: var(--color-purple-text) + value: var(--color-purple-tint) - label: Pink - value: var(--color-pink-text) + value: var(--color-pink-tint) - label: Grey - value: var(--color-grey-text) + value: var(--color-grey-tint) - id: graph-attachment-custom-color-lt title: Graph Attachment Custom Color @@ -707,41 +707,41 @@ settings: title: Graph Unresolved Color Presets type: variable-select allowEmpty: false - default: var(--color-red-text) + default: var(--color-red-tint) options: - label: Custom value: var(--graph-unresolved-custom-color-lt) - label: Red - value: var(--color-red-text) + value: var(--color-red-tint) - label: Orange - value: var(--color-orange-text) + value: var(--color-orange-tint) - label: Yellow - value: var(--color-yellow-text) + value: var(--color-yellow-tint) - label: Green - value: var(--color-green-text) + value: var(--color-green-tint) - label: Mint - value: var(--color-mint-text) + value: var(--color-mint-tint) - label: Cyan - value: var(--color-cyan-text) + value: var(--color-cyan-tint) - label: Blue - value: var(--color-blue-text) + value: var(--color-blue-tint) - label: Purple - value: var(--color-purple-text) + value: var(--color-purple-tint) - label: Pink - value: var(--color-pink-text) + value: var(--color-pink-tint) - label: Grey - value: var(--color-grey-text) + value: var(--color-grey-tint) - id: graph-unresolved-custom-color-lt title: Graph Unresolved Custom Color @@ -770,44 +770,44 @@ settings: title: Graph Highlight Color Presets type: variable-select allowEmpty: false - default: var(--interactive-accent-text) + default: var(--interactive-accent-tint) options: - label: Accent Color - value: var(--interactive-accent-text) + value: var(--interactive-accent-tint) - label: Custom value: var(--graph-highlight-custom-color-lt) - label: Red - value: var(--color-red-text) + value: var(--color-red-tint) - label: Orange - value: var(--color-orange-text) + value: var(--color-orange-tint) - label: Yellow - value: var(--color-yellow-text) + value: var(--color-yellow-tint) - label: Green - value: var(--color-green-text) + value: var(--color-green-tint) - label: Mint - value: var(--color-mint-text) + value: var(--color-mint-tint) - label: Cyan - value: var(--color-cyan-text) + value: var(--color-cyan-tint) - label: Blue - value: var(--color-blue-text) + value: var(--color-blue-tint) - label: Purple - value: var(--color-purple-text) + value: var(--color-purple-tint) - label: Pink - value: var(--color-pink-text) + value: var(--color-pink-tint) - label: Grey - value: var(--color-grey-text) + value: var(--color-grey-tint) - id: graph-highlight-custom-color-lt title: Graph Highlight Custom Color @@ -836,44 +836,44 @@ settings: title: Graph Highlight Line Color Presets type: variable-select allowEmpty: false - default: var(--interactive-accent-text) + default: var(--interactive-accent-tint) options: - label: Accent Color - value: var(--interactive-accent-text) + value: var(--interactive-accent-tint) - label: Custom value: var(--graph-highlight-line-custom-color-lt) - label: Red - value: var(--color-red-text) + value: var(--color-red-tint) - label: Orange - value: var(--color-orange-text) + value: var(--color-orange-tint) - label: Yellow - value: var(--color-yellow-text) + value: var(--color-yellow-tint) - label: Green - value: var(--color-green-text) + value: var(--color-green-tint) - label: Mint - value: var(--color-mint-text) + value: var(--color-mint-tint) - label: Cyan - value: var(--color-cyan-text) + value: var(--color-cyan-tint) - label: Blue - value: var(--color-blue-text) + value: var(--color-blue-tint) - label: Purple - value: var(--color-purple-text) + value: var(--color-purple-tint) - label: Pink - value: var(--color-pink-text) + value: var(--color-pink-tint) - label: Grey - value: var(--color-grey-text) + value: var(--color-grey-tint) - id: graph-highlight-line-custom-color-lt title: Graph Highlight Line Custom Color @@ -958,7 +958,7 @@ settings: id: graph-line-opacity-dt title: Graph Lines Opacity type: variable-number-slider - default: 0.6 + default: 1 min: 0 max: 1 step: 0.05 diff --git a/src/scss/Plugins/Core/graph.scss b/src/scss/Plugins/Core/graph.scss index 54502a1..3510a52 100644 --- a/src/scss/Plugins/Core/graph.scss +++ b/src/scss/Plugins/Core/graph.scss @@ -75,32 +75,26 @@ // [Plugins - Core] Graph LT .theme-light { .graph-view.color-line { - color: var(--graph-line-color-lt); opacity: var(--graph-line-opacity-lt); } .graph-view.color-fill { - color: var(--graph-fill-color-lt); opacity: var(--graph-fill-opacity-lt); } .graph-view.color-fill-focused { - color: var(--graph-fill-focused-color-lt); opacity: var(--graph-fill-focused-opacity-lt); } .graph-view.color-fill-tag { - color: var(--graph-tag-color-lt); opacity: var(--graph-tag-opacity-lt); } .graph-view.color-fill-attachment { - color: var(--graph-attachment-color-lt); opacity: var(--graph-attachment-opacity-lt); } .graph-view.color-fill-unresolved { - color: var(--graph-unresolved-color-lt); opacity: var(--graph-unresolved-opacity-lt); } @@ -118,32 +112,26 @@ // [Plugins - Core] Graph DT .theme-dark { .graph-view.color-line { - color: var(--graph-line-color-dt); opacity: var(--graph-line-opacity-dt); } .graph-view.color-fill { - color: var(--graph-fill-color-dt); opacity: var(--graph-fill-opacity-dt); } .graph-view.color-fill-focused { - color: var(--graph-fill-focused-color-dt); opacity: var(--graph-fill-focused-opacity-dt); } .graph-view.color-fill-tag { - color: var(--graph-tag-color-dt); opacity: var(--graph-tag-opacity-dt); } .graph-view.color-fill-attachment { - color: var(--graph-attachment-color-dt); opacity: var(--graph-attachment-opacity-dt); } .graph-view.color-fill-unresolved { - color: var(--graph-unresolved-color-dt); opacity: var(--graph-unresolved-opacity-dt); } diff --git a/src/scss/Variables/coreVariables.scss b/src/scss/Variables/coreVariables.scss index f12297d..815b4f1 100644 --- a/src/scss/Variables/coreVariables.scss +++ b/src/scss/Variables/coreVariables.scss @@ -275,6 +275,14 @@ body { --toggle-thumb-color: var(--background-primary); --background-modifier-form-field: var(--background-primary); + + --graph-line: var(--graph-line-color-lt); + --graph-node: var(--graph-fill-color-lt); + --graph-node-focused: var(--graph-fill-focused-color-lt); + --graph-node-tag: var(--graph-tag-color-lt); + --graph-node-attachment: var(--graph-attachment-color-lt); + --graph-node-unresolved: var(--graph-unresolved-color-lt); + // Style Settings Defaults --graph-line-color-lt: var(--background-secondary-alt); --graph-fill-color-lt: var(--color-grey-tint); @@ -282,8 +290,6 @@ body { --graph-tag-color-lt: var(--color-blue-tint); --graph-attachment-color-lt: var(--color-yellow-tint); --graph-unresolved-color-lt: var(--color-red-tint); - --graph-highlight-color-lt: var(--interactive-accent-tint); - --graph-highlight-line-color-lt: var(--interactive-accent-tint); --h1-text-color-lt: var(--text-normal); --h2-text-color-lt: var(--text-normal); @@ -497,15 +503,20 @@ body { --interactive-normal: var(--background-secondary); + --graph-line: var(--graph-line-color-dt); + --graph-node: var(--graph-fill-color-dt); + --graph-node-focused: var(--graph-fill-focused-color-dt); + --graph-node-tag: var(--graph-tag-color-dt); + --graph-node-attachment: var(--graph-attachment-color-dt); + --graph-node-unresolved: var(--graph-unresolved-color-dt); + // Style Settings Defaults --graph-line-color-dt: var(--background-primary-alt); - --graph-fill-color-dt: var(--color-grey-tint); - --graph-fill-focused-color-dt: var(--interactive-accent-tint); - --graph-tag-color-dt: var(--color-blue-tint); - --graph-attachment-color-dt: var(--color-yellow-tint); - --graph-unresolved-color-dt: var(--color-red-tint); - --graph-highlight-color-dt: var(--interactive-accent-tint); - --graph-highlight-line-color-dt: var(--interactive-accent-tint); + --graph-fill-color-dt: var(--color-grey-text); + --graph-fill-focused-color-dt: var(--interactive-accent-text); + --graph-tag-color-dt: var(--color-blue-text); + --graph-attachment-color-dt: var(--color-yellow-text); + --graph-unresolved-color-dt: var(--color-red-text); --h1-text-color-dt: var(--text-normal); --h2-text-color-dt: var(--text-normal);