Support theme meta w3c standard

Signed-off-by: John Molakvoæ <skjnldsv@protonmail.com> Signed-off-by: Simon L <szaimen@e.mail.de>
nextcloud · Feb 7, 2024 · 4e2b616 · 4e2b616
1 parent 4ce10d0
commit 4e2b616
Show file tree

Hide file tree

Showing 7 changed files with 52 additions and 22 deletions.
diff --git a/apps/theming/lib/ITheme.php b/apps/theming/lib/ITheme.php
@@ -71,6 +71,14 @@ public function getEnableLabel(): string;
 	 */
 	public function getDescription(): string;
 
+	/**
+	 * Get the meta attribute matching the theme
+	 * e.g. https://html.spec.whatwg.org/multipage/semantics.html#meta-color-scheme
+	 * @return array{?name: string, ?content: string}[]
+	 * @since 25.0.0
+	 */
+	public function getMeta(): array;
+
 	/**
 	 * Get the media query triggering this theme
 	 * Optional, ignored if falsy

diff --git a/apps/theming/lib/Service/ThemeInjectionService.php b/apps/theming/lib/Service/ThemeInjectionService.php
@@ -22,6 +22,7 @@
  */
 namespace OCA\Theming\Service;
 
+use OCA\Theming\ITheme;
 use OCA\Theming\Themes\DefaultTheme;
 use OCA\Theming\Util;
 use OCP\IConfig;
@@ -48,14 +49,15 @@ public function __construct(IURLGenerator $urlGenerator,
 		$this->defaultTheme = $defaultTheme;
 		$this->util = $util;
 		$this->config = $config;
+
 		if ($userSession->getUser() !== null) {
 			$this->userId = $userSession->getUser()->getUID();
 		} else {
 			$this->userId = null;
 		}
 	}
 
-	public function injectHeaders() {
+	public function injectHeaders(): void {
 		$themes = $this->themesService->getThemes();
 		$defaultTheme = $themes[$this->defaultTheme->getId()];
 		$mediaThemes = array_filter($themes, function ($theme) {
@@ -64,11 +66,11 @@ public function injectHeaders() {
 		});
 
 		// Default theme fallback
-		$this->addThemeHeader($defaultTheme->getId());
+		$this->addThemeHeaders($defaultTheme);
 
 		// Themes applied by media queries
 		foreach($mediaThemes as $theme) {
-			$this->addThemeHeader($theme->getId(), true, $theme->getMediaQuery());
+			$this->addThemeHeaders($theme, true, $theme->getMediaQuery());
 		}
 
 		// Themes
@@ -77,7 +79,7 @@ public function injectHeaders() {
 			if ($theme->getId() === $this->defaultTheme->getId()) {
 				continue;
 			}
-			$this->addThemeHeader($theme->getId(), false);
+			$this->addThemeHeaders($theme, false);
 		}
 	}
 
@@ -88,9 +90,9 @@ public function injectHeaders() {
 	 * @param bool $plain request the :root syntax
 	 * @param string $media media query to use in the <link> element
 	 */
-	private function addThemeHeader(string $themeId, bool $plain = true, string $media = null) {
+	private function addThemeHeaders(ITheme $theme, bool $plain = true, string $media = null): void {
 		$linkToCSS = $this->urlGenerator->linkToRoute('theming.Theming.getThemeStylesheet', [
-			'themeId' => $themeId,
+			'themeId' => $theme->getId(),
 			'plain' => $plain,
 			'v' => $this->util->getCacheBuster(),
 		]);
@@ -100,5 +102,9 @@ private function addThemeHeader(string $themeId, bool $plain = true, string $med
 			'href' => $linkToCSS,
 			'class' => 'theme'
 		]);
+
+		if (!empty($theme->getMeta())) {
+			\OCP\Util::addHeader('meta', $theme->getMeta());
+		}
 	}
 }
diff --git a/apps/theming/lib/Themes/DarkHighContrastTheme.php b/apps/theming/lib/Themes/DarkHighContrastTheme.php
@@ -33,10 +33,6 @@ public function getId(): string {
 		return 'dark-highcontrast';
 	}
 
-	public function getMediaQuery(): string {
-		return '(prefers-color-scheme: dark) and (prefers-contrast: more)';
-	}
-
 	public function getTitle(): string {
 		return $this->l->t('Dark theme with high contrast mode');
 	}
@@ -49,6 +45,10 @@ public function getDescription(): string {
 		return $this->l->t('Similar to the high contrast mode, but with dark colours.');
 	}
 
+	public function getMediaQuery(): string {
+		return '(prefers-color-scheme: dark) and (prefers-contrast: more)';
+	}
+
 	/**
 	 * Keep this consistent with other HighContrast Themes
 	 */

diff --git a/apps/theming/lib/Themes/DarkTheme.php b/apps/theming/lib/Themes/DarkTheme.php
@@ -33,10 +33,6 @@ public function getId(): string {
 		return 'dark';
 	}
 
-	public function getMediaQuery(): string {
-		return '(prefers-color-scheme: dark)';
-	}
-
 	public function getTitle(): string {
 		return $this->l->t('Dark theme');
 	}
@@ -49,6 +45,18 @@ public function getDescription(): string {
 		return $this->l->t('A dark theme to ease your eyes by reducing the overall luminosity and brightness.');
 	}
 
+	public function getMediaQuery(): string {
+		return '(prefers-color-scheme: dark)';
+	}
+
+	public function getMeta(): array {
+		// https://html.spec.whatwg.org/multipage/semantics.html#meta-color-scheme
+		return [
+			'name' => 'color-scheme',
+			'content' => 'dark',
+		];
+	}
+
 	public function getCSSVariables(): array {
 		$defaultVariables = parent::getCSSVariables();
 

diff --git a/apps/theming/lib/Themes/DefaultTheme.php b/apps/theming/lib/Themes/DefaultTheme.php
@@ -101,6 +101,10 @@ public function getMediaQuery(): string {
 		return '';
 	}
 
+	public function getMeta(): array {
+		return [];
+	}
+
 	public function getCSSVariables(): array {
 		$colorMainText = '#222222';
 		$colorMainTextRgb = join(',', $this->util->hexToRGB($colorMainText));

diff --git a/apps/theming/lib/Themes/HighContrastTheme.php b/apps/theming/lib/Themes/HighContrastTheme.php
@@ -33,10 +33,6 @@ public function getId(): string {
 		return 'light-highcontrast';
 	}
 
-	public function getMediaQuery(): string {
-		return '(prefers-contrast: more)';
-	}
-
 	public function getTitle(): string {
 		return $this->l->t('High contrast mode');
 	}
@@ -49,6 +45,10 @@ public function getDescription(): string {
 		return $this->l->t('A high contrast mode to ease your navigation. Visual quality will be reduced but clarity will be increased.');
 	}
 
+	public function getMediaQuery(): string {
+		return '(prefers-contrast: more)';
+	}
+
 	/**
 	 * Keep this consistent with other HighContrast Themes
 	 */

diff --git a/apps/theming/lib/Themes/LightTheme.php b/apps/theming/lib/Themes/LightTheme.php
@@ -33,10 +33,6 @@ public function getId(): string {
 		return 'light';
 	}
 
-	public function getType(): int {
-		return ITheme::TYPE_THEME;
-	}
-
 	public function getTitle(): string {
 		return $this->l->t('Light theme');
 	}
@@ -52,4 +48,12 @@ public function getDescription(): string {
 	public function getMediaQuery(): string {
 		return '(prefers-color-scheme: light)';
 	}
+
+	public function getMeta(): array {
+		// https://html.spec.whatwg.org/multipage/semantics.html#meta-color-scheme
+		return [
+			'name' => 'color-scheme',
+			'content' => 'light',
+		];
+	}
 }