Merge pull request #32231 from nextcloud/feat/theming-scheme-meta

Author: skjnldsv

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 29.0.0
+	 */
+	public function getMeta(): array;
+
 	/**
 	 * Get the media query triggering this theme
 	 * Optional, ignored if falsy

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,20 +79,23 @@ public function injectHeaders() {
 			if ($theme->getId() === $this->defaultTheme->getId()) {
 				continue;
 			}
-			$this->addThemeHeader($theme->getId(), false);
+			$this->addThemeHeaders($theme, false);
 		}
+
+		// Meta headers
+		$this->addThemeMetaHeaders($themes);
 	}
 
 	/**
 	 * Inject theme header into rendered page
 	 *
-	 * @param string $themeId the theme ID
+	 * @param ITheme $theme the theme
 	 * @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(),
 		]);
@@ -101,4 +106,36 @@ private function addThemeHeader(string $themeId, bool $plain = true, string $med
 			'class' => 'theme'
 		]);
 	}
+
+	/**
+	 * Inject meta headers into rendered page
+	 *
+	 * @param ITheme[] $themes the theme
+	 */
+	private function addThemeMetaHeaders(array $themes): void {
+		$metaHeaders = [];
+
+		// Meta headers
+		foreach($this->themesService->getThemes() as $theme) {
+			if (!empty($theme->getMeta())) {
+				foreach($theme->getMeta() as $meta) {
+					if (!isset($meta['name']) || !isset($meta['content'])) {
+						continue;
+					}
+
+					if (!isset($metaHeaders[$meta['name']])) {
+						$metaHeaders[$meta['name']] = [];
+					}
+					$metaHeaders[$meta['name']][] = $meta['content'];
+				}
+			}
+		}
+
+		foreach($metaHeaders as $name => $content) {
+			\OCP\Util::addHeader('meta', [
+				'name' => $name,
+				'content' => join(' ', array_unique($content)),
+			]);
+		}
+	}
 }

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
 	 */

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();
 

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));

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
 	 */

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',
+		]];
+	}
 }