migrate therinaldos.com data

wedding-pics/apps/theming/lib/Themes/CommonThemeTrait.php

@@ -0,0 +1,179 @@
+<?php
+
+declare(strict_types=1);
+/**
+ * @copyright Copyright (c) 2022 Joas Schilling <coding@schilljs.com>
+ *
+ * @author Joas Schilling <coding@schilljs.com>
+ * @author John Molakvoæ <skjnldsv@protonmail.com>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+namespace OCA\Theming\Themes;
+
+use OCA\Theming\AppInfo\Application;
+use OCA\Theming\ImageManager;
+use OCA\Theming\Service\BackgroundService;
+use OCA\Theming\Util;
+
+trait CommonThemeTrait {
+	public Util $util;
+
+	/**
+	 * Generate primary-related variables
+	 * This is shared between multiple themes because colorMainBackground and colorMainText
+	 * will change in between.
+	 */
+	protected function generatePrimaryVariables(string $colorMainBackground, string $colorMainText, bool $highContrast = false): array {
+		$isBrightColor = $this->util->isBrightColor($colorMainBackground);
+		$colorPrimaryElement = $this->util->elementColor($this->primaryColor, $isBrightColor, $colorMainBackground, $highContrast);
+		$colorPrimaryLight = $this->util->mix($colorPrimaryElement, $colorMainBackground, -80);
+		$colorPrimaryElementLight = $this->util->mix($colorPrimaryElement, $colorMainBackground, -80);
+		$invertPrimaryTextColor = $this->util->invertTextColor($colorPrimaryElement);
+
+		// primary related colours
+		return [
+			// invert filter if primary is too bright
+			// to be used for legacy reasons only. Use inline
+			// svg with proper css variable instead or material
+			// design icons.
+			// ⚠️ Using 'no' as a value to make sure we specify an
+			// invalid one with no fallback. 'unset' could here fallback to some
+			// other theme with media queries
+			'--primary-invert-if-bright' => $this->util->invertTextColor($colorPrimaryElement) ? 'invert(100%)' : 'no',
+			'--primary-invert-if-dark' => $this->util->invertTextColor($colorPrimaryElement) ? 'no' : 'invert(100%)',
+
+			'--color-primary' => $this->primaryColor,
+			'--color-primary-default' => $this->defaultPrimaryColor,
+			'--color-primary-text' => $this->util->invertTextColor($this->primaryColor) ? '#000000' : '#ffffff',
+			'--color-primary-hover' => $this->util->mix($this->primaryColor, $colorMainBackground, 60),
+			'--color-primary-light' => $colorPrimaryLight,
+			'--color-primary-light-text' => $this->util->mix($this->primaryColor, $this->util->invertTextColor($colorPrimaryLight) ? '#000000' : '#ffffff', -20),
+			'--color-primary-light-hover' => $this->util->mix($colorPrimaryLight, $colorMainText, 90),
+
+			// used for buttons, inputs...
+			'--color-primary-element' => $colorPrimaryElement,
+			'--color-primary-element-hover' => $invertPrimaryTextColor ? $this->util->lighten($colorPrimaryElement, 4) : $this->util->darken($colorPrimaryElement, 4),
+			'--color-primary-element-text' => $invertPrimaryTextColor ? '#000000' : '#ffffff',
+			// mostly used for disabled states
+			'--color-primary-element-text-dark' => $invertPrimaryTextColor ? $this->util->lighten('#000000', 4) : $this->util->darken('#ffffff', 4),
+
+			// used for hover/focus states
+			'--color-primary-element-light' => $colorPrimaryElementLight,
+			'--color-primary-element-light-hover' => $this->util->mix($colorPrimaryElementLight, $colorMainText, 90),
+			'--color-primary-element-light-text' => $this->util->mix($colorPrimaryElement, $this->util->invertTextColor($colorPrimaryElementLight) ? '#000000' : '#ffffff', -20),
+
+			// to use like this: background-image: var(--gradient-primary-background);
+			'--gradient-primary-background' => 'linear-gradient(40deg, var(--color-primary) 0%, var(--color-primary-hover) 100%)',
+		];
+	}
+
+	/**
+	 * Generate admin theming background-related variables
+	 */
+	protected function generateGlobalBackgroundVariables(): array {
+		$backgroundDeleted = $this->config->getAppValue(Application::APP_ID, 'backgroundMime', '') === 'backgroundColor';
+		$hasCustomLogoHeader = $this->util->isLogoThemed();
+		$isPrimaryBright = $this->util->invertTextColor($this->primaryColor);
+
+		$variables = [];
+
+		// Default last fallback values
+		$variables['--image-background-default'] = "url('" . $this->themingDefaults->getBackground() . "')";
+		$variables['--color-background-plain'] = $this->primaryColor;
+
+		// Register image variables only if custom-defined
+		foreach (ImageManager::SUPPORTED_IMAGE_KEYS as $image) {
+			if ($this->imageManager->hasImage($image)) {
+				$imageUrl = $this->imageManager->getImageUrl($image);
+				// --image-background is overridden by user theming if logged in
+				$variables["--image-$image"] = "url('" . $imageUrl . "')";
+			}
+		}
+
+		// If primary as background has been request or if we have a custom primary colour
+		// let's not define the background image
+		if ($backgroundDeleted) {
+			$variables['--color-background-plain'] = $this->primaryColor;
+			$variables['--image-background-plain'] = 'yes';
+			$variables['--image-background'] = 'no';
+			// If no background image is set, we need to check against the shown primary colour
+			$variables['--background-image-invert-if-bright'] = $isPrimaryBright ? 'invert(100%)' : 'no';
+		}
+
+		if ($hasCustomLogoHeader) {
+			$variables['--image-logoheader-custom'] = 'true';
+		}
+
+		return $variables;
+	}
+
+	/**
+	 * Generate user theming background-related variables
+	 */
+	protected function generateUserBackgroundVariables(): array {
+		$user = $this->userSession->getUser();
+		if ($user !== null
+			&& !$this->themingDefaults->isUserThemingDisabled()
+			&& $this->appManager->isEnabledForUser(Application::APP_ID)) {
+			$adminBackgroundDeleted = $this->config->getAppValue(Application::APP_ID, 'backgroundMime', '') === 'backgroundColor';
+			$backgroundImage = $this->config->getUserValue($user->getUID(), Application::APP_ID, 'background_image', BackgroundService::BACKGROUND_DEFAULT);
+			$currentVersion = (int)$this->config->getUserValue($user->getUID(), Application::APP_ID, 'userCacheBuster', '0');
+			$isPrimaryBright = $this->util->invertTextColor($this->primaryColor);
+
+			// The user removed the background
+			if ($backgroundImage === BackgroundService::BACKGROUND_DISABLED) {
+				return [
+					// Might be defined already by admin theming, needs to be overridden
+					'--image-background' => 'none',
+					'--color-background-plain' => $this->primaryColor,
+					// If no background image is set, we need to check against the shown primary colour
+					'--background-image-invert-if-bright' => $isPrimaryBright ? 'invert(100%)' : 'no',
+				];
+			}
+
+			// The user uploaded a custom background
+			if ($backgroundImage === BackgroundService::BACKGROUND_CUSTOM) {
+				$cacheBuster = substr(sha1($user->getUID() . '_' . $currentVersion), 0, 8);
+				return [
+					'--image-background' => "url('" . $this->urlGenerator->linkToRouteAbsolute('theming.userTheme.getBackground') . "?v=$cacheBuster')",
+					'--color-background-plain' => $this->primaryColor,
+				];
+			}
+
+			// The user is using the default background and admin removed the background image
+			if ($backgroundImage === BackgroundService::BACKGROUND_DEFAULT && $adminBackgroundDeleted) {
+				return [
+					// --image-background is not defined in this case
+					'--color-background-plain' => $this->primaryColor,
+					'--background-image-invert-if-bright' => $isPrimaryBright ? 'invert(100%)' : 'no',
+				];
+			}
+
+			// The user picked a shipped background
+			if (isset(BackgroundService::SHIPPED_BACKGROUNDS[$backgroundImage])) {
+				return [
+					'--image-background' => "url('" . $this->urlGenerator->linkTo(Application::APP_ID, "img/background/$backgroundImage") . "')",
+					'--color-background-plain' => $this->primaryColor,
+					'--background-image-invert-if-bright' => BackgroundService::SHIPPED_BACKGROUNDS[$backgroundImage]['theming'] ?? null === BackgroundService::THEMING_MODE_DARK ? 'invert(100%)' : 'no',
+				];
+			}
+		}
+
+		return [];
+	}
+}

wedding-pics/apps/theming/lib/Themes/DarkHighContrastTheme.php

@@ -0,0 +1,142 @@
+<?php
+
+declare(strict_types=1);
+/**
+ * @copyright Copyright (c) 2022 Joas Schilling <coding@schilljs.com>
+ *
+ * @author Joas Schilling <coding@schilljs.com>
+ * @author John Molakvoæ <skjnldsv@protonmail.com>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+namespace OCA\Theming\Themes;
+
+use OCA\Theming\ITheme;
+
+class DarkHighContrastTheme extends DarkTheme implements ITheme {
+
+	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');
+	}
+
+	public function getEnableLabel(): string {
+		return $this->l->t('Enable dark high contrast mode');
+	}
+
+	public function getDescription(): string {
+		return $this->l->t('Similar to the high contrast mode, but with dark colours.');
+	}
+
+	/**
+	 * Keep this consistent with other HighContrast Themes
+	 */
+	public function getCSSVariables(): array {
+		$defaultVariables = parent::getCSSVariables();
+
+		$colorMainText = '#ffffff';
+		$colorMainBackground = '#000000';
+		$colorMainBackgroundRGB = join(',', $this->util->hexToRGB($colorMainBackground));
+
+		$colorError = '#ff5252';
+		$colorWarning = '#ffcc00';
+		$colorSuccess = '#42a942';
+		$colorInfo = '#38c0ff';
+
+		return array_merge(
+			$defaultVariables,
+			$this->generatePrimaryVariables($colorMainBackground, $colorMainText, true),
+			[
+				'--color-main-background' => $colorMainBackground,
+				'--color-main-background-rgb' => $colorMainBackgroundRGB,
+				'--color-main-background-translucent' => 'rgba(var(--color-main-background-rgb), 1)',
+				'--color-main-text' => $colorMainText,
+
+				'--color-background-dark' => $this->util->lighten($colorMainBackground, 25),
+				'--color-background-darker' => $this->util->lighten($colorMainBackground, 25),
+
+				'--color-main-background-blur' => $colorMainBackground,
+				'--filter-background-blur' => 'none',
+
+				'--color-placeholder-light' => $this->util->lighten($colorMainBackground, 30),
+				'--color-placeholder-dark' => $this->util->lighten($colorMainBackground, 45),
+
+				'--color-text-maxcontrast' => $colorMainText,
+				'--color-text-maxcontrast-background-blur' => $colorMainText,
+				'--color-text-light' => $colorMainText,
+				'--color-text-lighter' => $colorMainText,
+
+				'--color-error' => $colorError,
+				'--color-error-rgb' => join(',', $this->util->hexToRGB($colorError)),
+				'--color-error-hover' => $this->util->lighten($colorError, 10),
+				'--color-error-text' => $this->util->lighten($colorError, 25),
+
+				'--color-warning' => $colorWarning,
+				'--color-warning-rgb' => join(',', $this->util->hexToRGB($colorWarning)),
+				'--color-warning-hover' => $this->util->lighten($colorWarning, 10),
+				'--color-warning-text' => $this->util->lighten($colorWarning, 10),
+
+				'--color-success' => $colorSuccess,
+				'--color-success-rgb' => join(',', $this->util->hexToRGB($colorSuccess)),
+				'--color-success-hover' => $this->util->lighten($colorSuccess, 10),
+				'--color-success-text' => $this->util->lighten($colorSuccess, 35),
+
+				'--color-info' => $colorInfo,
+				'--color-info-rgb' => join(',', $this->util->hexToRGB($colorInfo)),
+				'--color-info-hover' => $this->util->lighten($colorInfo, 10),
+				'--color-info-text' => $this->util->lighten($colorInfo, 20),
+
+				'--color-scrollbar' => $this->util->lighten($colorMainBackground, 35),
+
+				// used for the icon loading animation
+				'--color-loading-light' => '#000000',
+				'--color-loading-dark' => '#dddddd',
+
+				'--color-box-shadow-rgb' => $colorMainText,
+				'--color-box-shadow' => $colorMainText,
+
+				'--color-border' => $this->util->lighten($colorMainBackground, 50),
+				'--color-border-dark' => $this->util->lighten($colorMainBackground, 50),
+				'--color-border-maxcontrast' => $this->util->lighten($colorMainBackground, 55),
+			]
+		);
+	}
+
+	public function getCustomCss(): string {
+		return "
+		[class^='icon-'], [class*=' icon-'],
+			.action,
+			#appmenu li a,
+			.menutoggle {
+				opacity: 1 !important;
+			}
+			#app-navigation {
+				border-right: 1px solid var(--color-border);
+			}
+			div.crumb {
+				filter: brightness(150%);
+			}
+		";
+	}
+}

wedding-pics/apps/theming/lib/Themes/DarkTheme.php

@@ -0,0 +1,125 @@
+<?php
+
+declare(strict_types=1);
+/**
+ * @copyright Copyright (c) 2022 Joas Schilling <coding@schilljs.com>
+ *
+ * @author Joas Schilling <coding@schilljs.com>
+ * @author John Molakvoæ <skjnldsv@protonmail.com>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+namespace OCA\Theming\Themes;
+
+use OCA\Theming\ITheme;
+
+class DarkTheme extends DefaultTheme implements ITheme {
+
+	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');
+	}
+
+	public function getEnableLabel(): string {
+		return $this->l->t('Enable dark theme');
+	}
+
+	public function getDescription(): string {
+		return $this->l->t('A dark theme to ease your eyes by reducing the overall luminosity and brightness.');
+	}
+
+	public function getCSSVariables(): array {
+		$defaultVariables = parent::getCSSVariables();
+
+		$colorMainText = '#EBEBEB';
+		$colorMainBackground = '#171717';
+		$colorMainBackgroundRGB = join(',', $this->util->hexToRGB($colorMainBackground));
+		$colorTextMaxcontrast = $this->util->darken($colorMainText, 32);
+
+		$colorBoxShadow = $this->util->darken($colorMainBackground, 70);
+		$colorBoxShadowRGB = join(',', $this->util->hexToRGB($colorBoxShadow));
+
+		$colorError = '#FF3333';
+		$colorWarning = '#FFCC00';
+		$colorSuccess = '#3B973B';
+		$colorInfo = '#00AEFF';
+
+		return array_merge(
+			$defaultVariables,
+			$this->generatePrimaryVariables($colorMainBackground, $colorMainText),
+			[
+				'--color-main-text' => $colorMainText,
+				'--color-main-background' => $colorMainBackground,
+				'--color-main-background-rgb' => $colorMainBackgroundRGB,
+				'--color-main-background-blur' => 'rgba(var(--color-main-background-rgb), .85)',
+
+				'--color-scrollbar' => $this->util->lighten($colorMainBackground, 15),
+
+				'--color-background-hover' => $this->util->lighten($colorMainBackground, 4),
+				'--color-background-dark' => $this->util->lighten($colorMainBackground, 7),
+				'--color-background-darker' => $this->util->lighten($colorMainBackground, 14),
+
+				'--color-placeholder-light' => $this->util->lighten($colorMainBackground, 10),
+				'--color-placeholder-dark' => $this->util->lighten($colorMainBackground, 20),
+
+				'--color-text-maxcontrast' => $colorTextMaxcontrast,
+				'--color-text-maxcontrast-default' => $colorTextMaxcontrast,
+				'--color-text-maxcontrast-background-blur' => $this->util->lighten($colorTextMaxcontrast, 6),
+				'--color-text-light' => 'var(--color-main-text)', // deprecated
+				'--color-text-lighter' => 'var(--color-text-maxcontrast)', // deprecated
+
+				'--color-error' => $colorError,
+				'--color-error-rgb' => join(',', $this->util->hexToRGB($colorError)),
+				'--color-error-hover' => $this->util->lighten($colorError, 10),
+				'--color-error-text' => $this->util->lighten($colorError, 15),
+				'--color-warning' => $colorWarning,
+				'--color-warning-rgb' => join(',', $this->util->hexToRGB($colorWarning)),
+				'--color-warning-hover' => $this->util->lighten($colorWarning, 10),
+				'--color-warning-text' => $colorWarning,
+				'--color-success' => $colorSuccess,
+				'--color-success-rgb' => join(',', $this->util->hexToRGB($colorSuccess)),
+				'--color-success-hover' => $this->util->lighten($colorSuccess, 10),
+				'--color-success-text' => $this->util->lighten($colorSuccess, 15),
+				'--color-info' => $colorInfo,
+				'--color-info-rgb' => join(',', $this->util->hexToRGB($colorInfo)),
+				'--color-info-hover' => $this->util->lighten($colorInfo, 10),
+				'--color-info-text' => $colorInfo,
+
+				// used for the icon loading animation
+				'--color-loading-light' => '#777',
+				'--color-loading-dark' => '#CCC',
+
+				'--color-box-shadow' => $colorBoxShadow,
+				'--color-box-shadow-rgb' => $colorBoxShadowRGB,
+
+				'--color-border' => $this->util->lighten($colorMainBackground, 7),
+				'--color-border-dark' => $this->util->lighten($colorMainBackground, 14),
+				'--color-border-maxcontrast' => $this->util->lighten($colorMainBackground, 40),
+
+				'--background-invert-if-dark' => 'invert(100%)',
+				'--background-invert-if-bright' => 'no',
+			]
+		);
+	}
+}

wedding-pics/apps/theming/lib/Themes/DefaultTheme.php

@@ -0,0 +1,222 @@
+<?php
+
+declare(strict_types=1);
+/**
+ * @copyright Copyright (c) 2022 Joas Schilling <coding@schilljs.com>
+ *
+ * @author Joas Schilling <coding@schilljs.com>
+ * @author John Molakvoæ <skjnldsv@protonmail.com>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+namespace OCA\Theming\Themes;
+
+use OCA\Theming\ImageManager;
+use OCA\Theming\ITheme;
+use OCA\Theming\Service\BackgroundService;
+use OCA\Theming\ThemingDefaults;
+use OCA\Theming\Util;
+use OCP\App\IAppManager;
+use OCP\IConfig;
+use OCP\IL10N;
+use OCP\IURLGenerator;
+use OCP\IUserSession;
+
+class DefaultTheme implements ITheme {
+	use CommonThemeTrait;
+
+	public Util $util;
+	public ThemingDefaults $themingDefaults;
+	public IUserSession $userSession;
+	public IURLGenerator $urlGenerator;
+	public ImageManager $imageManager;
+	public IConfig $config;
+	public IL10N $l;
+	public IAppManager $appManager;
+
+	public string $defaultPrimaryColor;
+	public string $primaryColor;
+
+	public function __construct(Util $util,
+		ThemingDefaults $themingDefaults,
+		IUserSession $userSession,
+		IURLGenerator $urlGenerator,
+		ImageManager $imageManager,
+		IConfig $config,
+		IL10N $l,
+		IAppManager $appManager) {
+		$this->util = $util;
+		$this->themingDefaults = $themingDefaults;
+		$this->userSession = $userSession;
+		$this->urlGenerator = $urlGenerator;
+		$this->imageManager = $imageManager;
+		$this->config = $config;
+		$this->l = $l;
+		$this->appManager = $appManager;
+
+		$this->defaultPrimaryColor = $this->themingDefaults->getDefaultColorPrimary();
+		$this->primaryColor = $this->themingDefaults->getColorPrimary();
+
+		// Override primary colors (if set) to improve accessibility
+		if ($this->primaryColor === BackgroundService::DEFAULT_COLOR) {
+			$this->primaryColor = BackgroundService::DEFAULT_ACCESSIBLE_COLOR;
+		}
+	}
+
+	public function getId(): string {
+		return 'default';
+	}
+
+	public function getType(): int {
+		return ITheme::TYPE_THEME;
+	}
+
+	public function getTitle(): string {
+		return $this->l->t('System default theme');
+	}
+
+	public function getEnableLabel(): string {
+		return $this->l->t('Enable the system default');
+	}
+
+	public function getDescription(): string {
+		return $this->l->t('Using the default system appearance.');
+	}
+
+	public function getMediaQuery(): string {
+		return '';
+	}
+
+	public function getCSSVariables(): array {
+		$colorMainText = '#222222';
+		$colorMainTextRgb = join(',', $this->util->hexToRGB($colorMainText));
+		// Color that still provides enough contrast for text, so we need a ratio of 4.5:1 on main background AND hover
+		$colorTextMaxcontrast = '#6b6b6b'; // 4.5 : 1 for hover background and background dark
+		$colorMainBackground = '#ffffff';
+		$colorMainBackgroundRGB = join(',', $this->util->hexToRGB($colorMainBackground));
+		$colorBoxShadow = $this->util->darken($colorMainBackground, 70);
+		$colorBoxShadowRGB = join(',', $this->util->hexToRGB($colorBoxShadow));
+
+		$colorError = '#DB0606';
+		$colorWarning = '#A37200';
+		$colorSuccess = '#2d7b41';
+		$colorInfo = '#0071ad';
+
+		$variables = [
+			'--color-main-background' => $colorMainBackground,
+			'--color-main-background-rgb' => $colorMainBackgroundRGB,
+			'--color-main-background-translucent' => 'rgba(var(--color-main-background-rgb), .97)',
+			'--color-main-background-blur' => 'rgba(var(--color-main-background-rgb), .8)',
+			'--filter-background-blur' => 'blur(25px)',
+
+			// to use like this: background-image: linear-gradient(0, var('--gradient-main-background));
+			'--gradient-main-background' => 'var(--color-main-background) 0%, var(--color-main-background-translucent) 85%, transparent 100%',
+
+			// used for different active/hover/focus/disabled states
+			'--color-background-hover' => $this->util->darken($colorMainBackground, 4),
+			'--color-background-dark' => $this->util->darken($colorMainBackground, 7),
+			'--color-background-darker' => $this->util->darken($colorMainBackground, 14),
+
+			'--color-placeholder-light' => $this->util->darken($colorMainBackground, 10),
+			'--color-placeholder-dark' => $this->util->darken($colorMainBackground, 20),
+
+			// max contrast for WCAG compliance
+			'--color-main-text' => $colorMainText,
+			'--color-text-maxcontrast' => $colorTextMaxcontrast,
+			'--color-text-maxcontrast-default' => $colorTextMaxcontrast,
+			'--color-text-maxcontrast-background-blur' => $this->util->darken($colorTextMaxcontrast, 7),
+			'--color-text-light' => 'var(--color-main-text)', // deprecated
+			'--color-text-lighter' => 'var(--color-text-maxcontrast)', // deprecated
+
+			'--color-scrollbar' => 'rgba(' . $colorMainTextRgb . ', .15)',
+
+			// error/warning/success/info feedback colours
+			'--color-error' => $colorError,
+			'--color-error-rgb' => join(',', $this->util->hexToRGB($colorError)),
+			'--color-error-hover' => $this->util->mix($colorError, $colorMainBackground, 75),
+			'--color-error-text' => $this->util->darken($colorError, 5),
+			'--color-warning' => $colorWarning,
+			'--color-warning-rgb' => join(',', $this->util->hexToRGB($colorWarning)),
+			'--color-warning-hover' => $this->util->darken($colorWarning, 5),
+			'--color-warning-text' => $this->util->darken($colorWarning, 7),
+			'--color-success' => $colorSuccess,
+			'--color-success-rgb' => join(',', $this->util->hexToRGB($colorSuccess)),
+			'--color-success-hover' => $this->util->mix($colorSuccess, $colorMainBackground, 80),
+			'--color-success-text' => $this->util->darken($colorSuccess, 4),
+			'--color-info' => $colorInfo,
+			'--color-info-rgb' => join(',', $this->util->hexToRGB($colorInfo)),
+			'--color-info-hover' => $this->util->mix($colorInfo, $colorMainBackground, 80),
+			'--color-info-text' => $this->util->darken($colorInfo, 4),
+
+			// used for the icon loading animation
+			'--color-loading-light' => '#cccccc',
+			'--color-loading-dark' => '#444444',
+
+			'--color-box-shadow-rgb' => $colorBoxShadowRGB,
+			'--color-box-shadow' => "rgba(var(--color-box-shadow-rgb), 0.5)",
+
+			'--color-border' => $this->util->darken($colorMainBackground, 7),
+			'--color-border-dark' => $this->util->darken($colorMainBackground, 14),
+			'--color-border-maxcontrast' => $this->util->darken($colorMainBackground, 51),
+
+			'--font-face' => "system-ui, -apple-system, 'Segoe UI', Roboto, Oxygen-Sans, Cantarell, Ubuntu, 'Helvetica Neue', 'Noto Sans', 'Liberation Sans', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'",
+			'--default-font-size' => '15px',
+
+			// TODO: support "(prefers-reduced-motion)"
+			'--animation-quick' => '100ms',
+			'--animation-slow' => '300ms',
+
+			// Default variables --------------------------------------------
+			'--border-radius' => '3px',
+			'--border-radius-large' => '10px',
+			'--border-radius-rounded' => '28px',
+			// pill-style button, value is large so big buttons also have correct roundness
+			'--border-radius-pill' => '100px',
+
+			'--default-clickable-area' => '44px',
+			'--default-line-height' => '24px',
+			'--default-grid-baseline' => '4px',
+
+			// various structure data
+			'--header-height' => '50px',
+			'--navigation-width' => '300px',
+			'--sidebar-min-width' => '300px',
+			'--sidebar-max-width' => '500px',
+			'--list-min-width' => '200px',
+			'--list-max-width' => '300px',
+			'--header-menu-item-height' => '44px',
+			'--header-menu-profile-item-height' => '66px',
+
+			// mobile. Keep in sync with core/js/js.js
+			'--breakpoint-mobile' => '1024px',
+			'--background-invert-if-dark' => 'no',
+			'--background-invert-if-bright' => 'invert(100%)',
+			'--background-image-invert-if-bright' => 'no',
+		];
+
+		// Primary variables
+		$variables = array_merge($variables, $this->generatePrimaryVariables($colorMainBackground, $colorMainText));
+		$variables = array_merge($variables, $this->generateGlobalBackgroundVariables());
+		$variables = array_merge($variables, $this->generateUserBackgroundVariables());
+
+		return $variables;
+	}
+
+	public function getCustomCss(): string {
+		return '';
+	}
+}

wedding-pics/apps/theming/lib/Themes/DyslexiaFont.php

@@ -0,0 +1,91 @@
+<?php
+
+declare(strict_types=1);
+/**
+ * @copyright Copyright (c) 2022 Joas Schilling <coding@schilljs.com>
+ *
+ * @author Joas Schilling <coding@schilljs.com>
+ * @author John Molakvoæ <skjnldsv@protonmail.com>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+namespace OCA\Theming\Themes;
+
+use OCA\Theming\ITheme;
+
+class DyslexiaFont extends DefaultTheme implements ITheme {
+
+	public function getId(): string {
+		return 'opendyslexic';
+	}
+
+	public function getType(): int {
+		return ITheme::TYPE_FONT;
+	}
+
+	public function getTitle(): string {
+		return $this->l->t('Dyslexia font');
+	}
+
+	public function getEnableLabel(): string {
+		return $this->l->t('Enable dyslexia font');
+	}
+
+	public function getDescription(): string {
+		return $this->l->t('OpenDyslexic is a free typeface/font designed to mitigate some of the common reading errors caused by dyslexia.');
+	}
+
+	public function getCSSVariables(): array {
+		$variables = parent::getCSSVariables();
+		$originalFontFace = $variables['--font-face'];
+
+		$variables = [
+			'--font-face' => 'OpenDyslexic, ' . $originalFontFace
+		];
+
+		return $variables;
+	}
+
+	public function getCustomCss(): string {
+		$fontPathWoff = $this->urlGenerator->linkTo('theming', 'fonts/OpenDyslexic-Regular.woff');
+		$fontPathOtf = $this->urlGenerator->linkTo('theming', 'fonts/OpenDyslexic-Regular.otf');
+		$fontPathTtf = $this->urlGenerator->linkTo('theming', 'fonts/OpenDyslexic-Regular.ttf');
+		$boldFontPathWoff = $this->urlGenerator->linkTo('theming', 'fonts/OpenDyslexic-Bold.woff');
+		$boldFontPathOtf = $this->urlGenerator->linkTo('theming', 'fonts/OpenDyslexic-Bold.otf');
+		$boldFontPathTtf = $this->urlGenerator->linkTo('theming', 'fonts/OpenDyslexic-Bold.ttf');
+
+		return "
+			@font-face {
+				font-family: 'OpenDyslexic';
+				font-style: normal;
+				font-weight: 400;
+				src: url('$fontPathWoff') format('woff'),
+					 url('$fontPathOtf') format('opentype'),
+					 url('$fontPathTtf') format('truetype');
+			}
+			
+			@font-face {
+				font-family: 'OpenDyslexic';
+				font-style: normal;
+				font-weight: 700;
+				src: url('$boldFontPathWoff') format('woff'),
+					 url('$boldFontPathOtf') format('opentype'),
+					 url('$boldFontPathTtf') format('truetype');
+			}
+		";
+	}
+}

wedding-pics/apps/theming/lib/Themes/HighContrastTheme.php

@@ -0,0 +1,142 @@
+<?php
+
+declare(strict_types=1);
+/**
+ * @copyright Copyright (c) 2022 Joas Schilling <coding@schilljs.com>
+ *
+ * @author Joas Schilling <coding@schilljs.com>
+ * @author John Molakvoæ <skjnldsv@protonmail.com>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+namespace OCA\Theming\Themes;
+
+use OCA\Theming\ITheme;
+
+class HighContrastTheme extends DefaultTheme implements ITheme {
+
+	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');
+	}
+
+	public function getEnableLabel(): string {
+		return $this->l->t('Enable high contrast mode');
+	}
+
+	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.');
+	}
+
+	/**
+	 * Keep this consistent with other HighContrast Themes
+	 */
+	public function getCSSVariables(): array {
+		$defaultVariables = parent::getCSSVariables();
+
+		$colorMainText = '#000000';
+		$colorMainBackground = '#ffffff';
+		$colorMainBackgroundRGB = join(',', $this->util->hexToRGB($colorMainBackground));
+
+		$colorError = '#D10000';
+		$colorWarning = '#995900';
+		$colorSuccess = '#207830';
+		$colorInfo = '#006DA8';
+
+		$primaryVariables = $this->generatePrimaryVariables($colorMainBackground, $colorMainText, true);
+		return array_merge(
+			$defaultVariables,
+			$primaryVariables,
+			[
+				'--color-primary-element-text-dark' => $primaryVariables['--color-primary-element-text'],
+
+				'--color-main-background' => $colorMainBackground,
+				'--color-main-background-rgb' => $colorMainBackgroundRGB,
+				'--color-main-background-translucent' => 'rgba(var(--color-main-background-rgb), 1)',
+				'--color-main-text' => $colorMainText,
+
+				'--color-background-dark' => $this->util->darken($colorMainBackground, 20),
+				'--color-background-darker' => $this->util->darken($colorMainBackground, 20),
+
+				'--color-main-background-blur' => $colorMainBackground,
+				'--filter-background-blur' => 'none',
+
+				'--color-placeholder-light' => $this->util->darken($colorMainBackground, 30),
+				'--color-placeholder-dark' => $this->util->darken($colorMainBackground, 45),
+
+				'--color-text-maxcontrast' => $colorMainText,
+				'--color-text-maxcontrast-background-blur' => $colorMainText,
+				'--color-text-light' => $colorMainText,
+				'--color-text-lighter' => $colorMainText,
+
+				'--color-error' => $colorError,
+				'--color-error-rgb' => join(',', $this->util->hexToRGB($colorError)),
+				'--color-error-hover' => $this->util->darken($colorError, 8),
+				'--color-error-text' => $this->util->darken($colorError, 17),
+
+				'--color-warning' => $colorWarning,
+				'--color-warning-rgb' => join(',', $this->util->hexToRGB($colorWarning)),
+				'--color-warning-hover' => $this->util->darken($colorWarning, 7),
+				'--color-warning-text' => $this->util->darken($colorWarning, 13),
+
+				'--color-info' => $colorInfo,
+				'--color-info-rgb' => join(',', $this->util->hexToRGB($colorInfo)),
+				'--color-info-hover' => $this->util->darken($colorInfo, 7),
+				'--color-info-text' => $this->util->darken($colorInfo, 15),
+
+				'--color-success' => $colorSuccess,
+				'--color-success-rgb' => join(',', $this->util->hexToRGB($colorSuccess)),
+				'--color-success-hover' => $this->util->darken($colorSuccess, 7),
+				'--color-success-text' => $this->util->darken($colorSuccess, 14),
+
+				'--color-scrollbar' => $this->util->darken($colorMainBackground, 25),
+
+				// used for the icon loading animation
+				'--color-loading-light' => '#dddddd',
+				'--color-loading-dark' => '#000000',
+
+				'--color-box-shadow-rgb' => $colorMainText,
+				'--color-box-shadow' => $colorMainText,
+
+				'--color-border' => $this->util->darken($colorMainBackground, 50),
+				'--color-border-dark' => $this->util->darken($colorMainBackground, 50),
+				'--color-border-maxcontrast' => $this->util->darken($colorMainBackground, 56),
+			]
+		);
+	}
+
+	public function getCustomCss(): string {
+		return "
+			[class^='icon-'], [class*=' icon-'],
+			.action,
+			#appmenu li a,
+			.menutoggle {
+				opacity: 1 !important;
+			}
+			#app-navigation {
+				border-right: 1px solid var(--color-border);
+			}
+		";
+	}
+}

wedding-pics/apps/theming/lib/Themes/LightTheme.php

@@ -0,0 +1,55 @@
+<?php
+
+declare(strict_types=1);
+/**
+ * @copyright Copyright (c) 2022 Joas Schilling <coding@schilljs.com>
+ *
+ * @author Joas Schilling <coding@schilljs.com>
+ * @author John Molakvoæ <skjnldsv@protonmail.com>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+namespace OCA\Theming\Themes;
+
+use OCA\Theming\ITheme;
+
+class LightTheme extends DefaultTheme implements ITheme {
+
+	public function getId(): string {
+		return 'light';
+	}
+
+	public function getType(): int {
+		return ITheme::TYPE_THEME;
+	}
+
+	public function getTitle(): string {
+		return $this->l->t('Light theme');
+	}
+
+	public function getEnableLabel(): string {
+		return $this->l->t('Enable the default light theme');
+	}
+
+	public function getDescription(): string {
+		return $this->l->t('The default light appearance.');
+	}
+
+	public function getMediaQuery(): string {
+		return '(prefers-color-scheme: light)';
+	}
+}