From 9c9579ad457134136b3c0277df7fa72c11db81fc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6?= Date: Sun, 1 May 2022 12:12:45 +0200 Subject: [PATCH] Support theme meta w3c standard MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ Signed-off-by: Simon L --- apps/theming/lib/ITheme.php | 8 ++++++++ .../lib/Service/ThemeInjectionService.php | 18 ++++++++++++------ .../lib/Themes/DarkHighContrastTheme.php | 8 ++++---- apps/theming/lib/Themes/DarkTheme.php | 16 ++++++++++++---- apps/theming/lib/Themes/DefaultTheme.php | 4 ++++ apps/theming/lib/Themes/HighContrastTheme.php | 8 ++++---- apps/theming/lib/Themes/LightTheme.php | 12 ++++++++---- 7 files changed, 52 insertions(+), 22 deletions(-) diff --git a/apps/theming/lib/ITheme.php b/apps/theming/lib/ITheme.php index 3c3b081aec58b..f3cf5ec14496d 100644 --- 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 29.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 index c7560bdf8f8e2..8d57cf8d5983c 100644 --- 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,6 +49,7 @@ public function __construct(IURLGenerator $urlGenerator, $this->defaultTheme = $defaultTheme; $this->util = $util; $this->config = $config; + if ($userSession->getUser() !== null) { $this->userId = $userSession->getUser()->getUID(); } else { @@ -55,7 +57,7 @@ public function __construct(IURLGenerator $urlGenerator, } } - 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 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 index 965dac2922c25..e6f1da94b4e8b 100644 --- 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 index f63854289ad04..4b4754e671357 100644 --- 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 index 3dfa89f8d3a84..af1489c357743 100644 --- 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 index 92511b59c81d7..b1c2bf1564fc9 100644 --- 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 index 320f83341474c..7da7cd350a1a2 100644 --- 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', + ]; + } }