feat(theming): Provide CSS variable for favorite color and adjust for…

… dark mode Co-authored-by: Simon L <szaimen@e.mail.de> Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
nextcloud · Mar 6, 2024 · 4b8868a · 4b8868a
1 parent 834f70f
commit 4b8868a
Show file tree

Hide file tree

Showing 8 changed files with 8 additions and 19 deletions.
diff --git a/apps/files/src/components/FileEntry/FavoriteIcon.vue b/apps/files/src/components/FileEntry/FavoriteIcon.vue
@@ -65,7 +65,7 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .favorite-marker-icon {
-	color: #a08b00;
+	color: var(--color-favorite);
 	// Override NcIconSvgWrapper defaults (clickable area)
 	min-width: unset !important;
     min-height: unset !important;

diff --git a/apps/theming/css/default.css b/apps/theming/css/default.css
@@ -37,6 +37,7 @@
   --color-info-rgb: 0,113,173;
   --color-info-hover: #197fb5;
   --color-info-text: #006499;
+  --color-favorite: #A37200;
   --color-loading-light: #cccccc;
   --color-loading-dark: #444444;
   --color-box-shadow-rgb: 77,77,77;

diff --git a/apps/theming/css/theming.css b/apps/theming/css/theming.css
diff --git a/apps/theming/lib/Themes/DarkTheme.php b/apps/theming/lib/Themes/DarkTheme.php
@@ -113,6 +113,7 @@ public function getCSSVariables(): array {
 				'--color-info-rgb' => join(',', $this->util->hexToRGB($colorInfo)),
 				'--color-info-hover' => $this->util->lighten($colorInfo, 10),
 				'--color-info-text' => $colorInfo,
+				'--color-favorite' => '#ffde00',
 
 				// used for the icon loading animation
 				'--color-loading-light' => '#777',

diff --git a/apps/theming/lib/Themes/DefaultTheme.php b/apps/theming/lib/Themes/DefaultTheme.php
@@ -165,6 +165,7 @@ public function getCSSVariables(): array {
 			'--color-info-rgb' => join(',', $this->util->hexToRGB($colorInfo)),
 			'--color-info-hover' => $this->util->mix($colorInfo, $colorMainBackground, 80),
 			'--color-info-text' => $this->util->darken($colorInfo, 4),
+			'--color-favorite' => '#A37200',
 
 			// used for the icon loading animation
 			'--color-loading-light' => '#cccccc',

diff --git a/apps/theming/lib/Themes/HighContrastTheme.php b/apps/theming/lib/Themes/HighContrastTheme.php
@@ -110,6 +110,8 @@ public function getCSSVariables(): array {
 				'--color-success-hover' => $this->util->darken($colorSuccess, 7),
 				'--color-success-text' => $this->util->darken($colorSuccess, 14),
 
+				'--color-favorite' => '#936B06',
+
 				'--color-scrollbar' => $this->util->darken($colorMainBackground, 25),
 
 				// used for the icon loading animation

diff --git a/apps/theming/tests/Themes/AccessibleThemeTestCase.php b/apps/theming/tests/Themes/AccessibleThemeTestCase.php
@@ -64,6 +64,7 @@ public function dataAccessibilityPairs() {
 					'--color-info-hover',
 					'--color-success',
 					'--color-success-hover',
+					'--color-favorite',
 				],
 				[
 					'--color-main-background',

diff --git a/apps/weather_status/src/App.vue b/apps/weather_status/src/App.vue
@@ -590,7 +590,7 @@ export default {
 
 // Set color to primary element for current / active favorite address
 .favorite-color {
-	color: #a08b00;
+	color: var(--color-favorite);
 }
 
 .weather-status-menu-item__subheader {