*/ | */ | ||||
public function getDescription(): 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 | * Get the media query triggering this theme | ||||
* Optional, ignored if falsy | * Optional, ignored if falsy |
*/ | */ | ||||
namespace OCA\Theming\Service; | namespace OCA\Theming\Service; | ||||
use OCA\Theming\ITheme; | |||||
use OCA\Theming\Themes\DefaultTheme; | use OCA\Theming\Themes\DefaultTheme; | ||||
use OCA\Theming\Util; | use OCA\Theming\Util; | ||||
use OCP\IConfig; | use OCP\IConfig; | ||||
$this->defaultTheme = $defaultTheme; | $this->defaultTheme = $defaultTheme; | ||||
$this->util = $util; | $this->util = $util; | ||||
$this->config = $config; | $this->config = $config; | ||||
if ($userSession->getUser() !== null) { | if ($userSession->getUser() !== null) { | ||||
$this->userId = $userSession->getUser()->getUID(); | $this->userId = $userSession->getUser()->getUID(); | ||||
} else { | } else { | ||||
} | } | ||||
} | } | ||||
public function injectHeaders() { | |||||
public function injectHeaders(): void { | |||||
$themes = $this->themesService->getThemes(); | $themes = $this->themesService->getThemes(); | ||||
$defaultTheme = $themes[$this->defaultTheme->getId()]; | $defaultTheme = $themes[$this->defaultTheme->getId()]; | ||||
$mediaThemes = array_filter($themes, function ($theme) { | $mediaThemes = array_filter($themes, function ($theme) { | ||||
}); | }); | ||||
// Default theme fallback | // Default theme fallback | ||||
$this->addThemeHeader($defaultTheme->getId()); | |||||
$this->addThemeHeaders($defaultTheme); | |||||
// Themes applied by media queries | // Themes applied by media queries | ||||
foreach($mediaThemes as $theme) { | foreach($mediaThemes as $theme) { | ||||
$this->addThemeHeader($theme->getId(), true, $theme->getMediaQuery()); | |||||
$this->addThemeHeaders($theme, true, $theme->getMediaQuery()); | |||||
} | } | ||||
// Themes | // Themes | ||||
if ($theme->getId() === $this->defaultTheme->getId()) { | if ($theme->getId() === $this->defaultTheme->getId()) { | ||||
continue; | continue; | ||||
} | } | ||||
$this->addThemeHeader($theme->getId(), false); | |||||
$this->addThemeHeaders($theme, false); | |||||
} | } | ||||
// Meta headers | |||||
$this->addThemeMetaHeaders($themes); | |||||
} | } | ||||
/** | /** | ||||
* Inject theme header into rendered page | * 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 bool $plain request the :root syntax | ||||
* @param string $media media query to use in the <link> element | * @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', [ | $linkToCSS = $this->urlGenerator->linkToRoute('theming.Theming.getThemeStylesheet', [ | ||||
'themeId' => $themeId, | |||||
'themeId' => $theme->getId(), | |||||
'plain' => $plain, | 'plain' => $plain, | ||||
'v' => $this->util->getCacheBuster(), | 'v' => $this->util->getCacheBuster(), | ||||
]); | ]); | ||||
'class' => 'theme' | '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)), | |||||
]); | |||||
} | |||||
} | |||||
} | } |
return 'dark-highcontrast'; | return 'dark-highcontrast'; | ||||
} | } | ||||
public function getMediaQuery(): string { | |||||
return '(prefers-color-scheme: dark) and (prefers-contrast: more)'; | |||||
} | |||||
public function getTitle(): string { | public function getTitle(): string { | ||||
return $this->l->t('Dark theme with high contrast mode'); | return $this->l->t('Dark theme with high contrast mode'); | ||||
} | } | ||||
return $this->l->t('Similar to the high contrast mode, but with dark colours.'); | 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 | * Keep this consistent with other HighContrast Themes | ||||
*/ | */ |
return 'dark'; | return 'dark'; | ||||
} | } | ||||
public function getMediaQuery(): string { | |||||
return '(prefers-color-scheme: dark)'; | |||||
} | |||||
public function getTitle(): string { | public function getTitle(): string { | ||||
return $this->l->t('Dark theme'); | return $this->l->t('Dark theme'); | ||||
} | } | ||||
return $this->l->t('A dark theme to ease your eyes by reducing the overall luminosity and brightness.'); | 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 { | public function getCSSVariables(): array { | ||||
$defaultVariables = parent::getCSSVariables(); | $defaultVariables = parent::getCSSVariables(); | ||||
return ''; | return ''; | ||||
} | } | ||||
public function getMeta(): array { | |||||
return []; | |||||
} | |||||
public function getCSSVariables(): array { | public function getCSSVariables(): array { | ||||
$colorMainText = '#222222'; | $colorMainText = '#222222'; | ||||
$colorMainTextRgb = join(',', $this->util->hexToRGB($colorMainText)); | $colorMainTextRgb = join(',', $this->util->hexToRGB($colorMainText)); |
return 'light-highcontrast'; | return 'light-highcontrast'; | ||||
} | } | ||||
public function getMediaQuery(): string { | |||||
return '(prefers-contrast: more)'; | |||||
} | |||||
public function getTitle(): string { | public function getTitle(): string { | ||||
return $this->l->t('High contrast mode'); | return $this->l->t('High contrast mode'); | ||||
} | } | ||||
return $this->l->t('A high contrast mode to ease your navigation. Visual quality will be reduced but clarity will be increased.'); | 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 | * Keep this consistent with other HighContrast Themes | ||||
*/ | */ |
return 'light'; | return 'light'; | ||||
} | } | ||||
public function getType(): int { | |||||
return ITheme::TYPE_THEME; | |||||
} | |||||
public function getTitle(): string { | public function getTitle(): string { | ||||
return $this->l->t('Light theme'); | return $this->l->t('Light theme'); | ||||
} | } | ||||
public function getMediaQuery(): string { | public function getMediaQuery(): string { | ||||
return '(prefers-color-scheme: light)'; | 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', | |||||
]]; | |||||
} | |||||
} | } |