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>

8 files changed, 8 insertions, 19 deletions

diff --git a/apps/files/src/components/FileEntry/FavoriteIcon.vue b/apps/files/src/components/FileEntry/FavoriteIcon.vue
index 40eff17fe9b..d5b73cc22a6 100644
--- 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
index dafa5370192..201ec242912 100644
--- 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
deleted file mode 100644
index 2d43b528a95..00000000000
--- a/apps/theming/css/theming.css
+++ /dev/null
@@ -1,17 +0,0 @@
-/* Error: Undefined variable.
- *    ,
- * 38 | $invert: luma($color-primary) > 0.6;
- *    |               ^^^^^^^^^^^^^^
- *    '
- *   apps/theming/css/theming.scss 38:15  root stylesheet */
-
-body::before {
-  font-family: "Source Code Pro", "SF Mono", Monaco, Inconsolata, "Fira Mono",
-      "Droid Sans Mono", monospace, monospace;
-  white-space: pre;
-  display: block;
-  padding: 1em;
-  margin-bottom: 1em;
-  border-bottom: 2px solid black;
-  content: "Error: Undefined variable.\a    \2577 \a 38 \2502  $invert: luma($color-primary) > 0.6;\a    \2502                ^^^^^^^^^^^^^^\a    \2575 \a   apps/theming/css/theming.scss 38:15  root stylesheet";
-}
diff --git a/apps/theming/lib/Themes/DarkTheme.php b/apps/theming/lib/Themes/DarkTheme.php
index a40f8009e17..8d88de75834 100644
--- a/apps/theming/lib/Themes/DarkTheme.php
+++ b/apps/theming/lib/Themes/DarkTheme.php
@@ -113,6 +113,7 @@ class DarkTheme extends DefaultTheme implements ITheme {
 				'--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
index af1489c3577..68038f053e3 100644
--- a/apps/theming/lib/Themes/DefaultTheme.php
+++ b/apps/theming/lib/Themes/DefaultTheme.php
@@ -165,6 +165,7 @@ class DefaultTheme implements ITheme {
 			'--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
index b1c2bf1564f..e21e802fbe3 100644
--- a/apps/theming/lib/Themes/HighContrastTheme.php
+++ b/apps/theming/lib/Themes/HighContrastTheme.php
@@ -110,6 +110,8 @@ class HighContrastTheme extends DefaultTheme implements ITheme {
 				'--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
index f5bbcf44c64..6ac2f0e7b49 100644
--- a/apps/theming/tests/Themes/AccessibleThemeTestCase.php
+++ b/apps/theming/tests/Themes/AccessibleThemeTestCase.php
@@ -64,6 +64,7 @@ class AccessibleThemeTestCase extends TestCase {
 					'--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
index 8aaa30f77d5..b9d0ed30d3a 100644
--- 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 {