fix: apply contrast color to header elements

Signed-off-by: Maksim Sukharev <[email protected]>
nextcloud · Jul 1, 2024 · 497dcd4 · 497dcd4
1 parent 4588959
commit 497dcd4
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 2 deletions.
diff --git a/src/talk/renderer/DesktopHeader.vue b/src/talk/renderer/DesktopHeader.vue
@@ -83,7 +83,7 @@ export default {
 	height: 50px;
 	box-sizing: border-box;
 	margin-bottom: -50px;
-	color: #FFF;
+	color: var(--color-header-contrast);
 	user-select: none;
 }
 

diff --git a/src/talk/renderer/assets/styles.css b/src/talk/renderer/assets/styles.css
@@ -15,3 +15,12 @@
 :focus-visible {
 	outline-color: var(--color-main-text);
 }
+
+#header {
+	/*
+		Adjusting of text and icons appearing on Nextcloud header to contrast with.
+		Nextcloud (28-29) server has a workaround with '--background-image-color-text' variable.
+		Starting from Nextcloud 30 server has '--color-background-plain-text' variable.
+	*/
+	--color-header-contrast: var(--color-background-plain-text, var(--background-image-color-text, #ffffff))
+}
diff --git a/src/talk/renderer/components/MainMenu.vue b/src/talk/renderer/components/MainMenu.vue
@@ -32,7 +32,7 @@ const reload = () => window.location.reload()
 		type="tertiary-no-background"
 		container="body">
 		<template #icon>
-			<MdiMenu :size="20" />
+			<MdiMenu :size="20" fill-color="var(--color-header-contrast)" />
 		</template>
 
 		<NcActionLink :href="talkWebLink" target="_blank">