--color-background-darker: #dbdbdb;
--color-placeholder-light: #e6e6e6;
--color-placeholder-dark: #cccccc;
- --color-primary: #0082c9;
- --color-primary-text: #ffffff;
- --color-primary-hover: #329bd3;
- --color-primary-light: #e5f2f9;
- --color-primary-light-text: #0082c9;
- --color-primary-light-hover: #dbe7ee;
- --color-primary-text-dark: #ededed;
- --color-primary-element: #0082c9;
- --color-primary-element-text: #ffffff;
- --color-primary-element-hover: #329bd3;
- --color-primary-element-light: #e5f2f9;
- --color-primary-element-light-text: #0082c9;
- --color-primary-element-light-hover: #dbe7ee;
- --color-primary-element-text-dark: #ededed;
- --gradient-primary-background: linear-gradient(40deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
--color-main-text: #222222;
--color-text-maxcontrast: #767676;
--color-text-light: #222222;
--background-invert-if-dark: no;
--background-invert-if-bright: invert(100%);
--image-main-background: url('/core/img/app-background.jpg');
+ --color-primary: #0082c9;
+ --color-primary-text: #ffffff;
+ --color-primary-hover: #329bd3;
+ --color-primary-light: #e5f2f9;
+ --color-primary-light-text: #0082c9;
+ --color-primary-light-hover: #dbe7ee;
+ --color-primary-text-dark: #ededed;
+ --color-primary-element: #0082c9;
+ --color-primary-element-text: #ffffff;
+ --color-primary-element-hover: #329bd3;
+ --color-primary-element-light: #e5f2f9;
+ --color-primary-element-light-text: #0082c9;
+ --color-primary-element-light-hover: #dbe7ee;
+ --color-primary-element-text-dark: #ededed;
+ --gradient-primary-background: linear-gradient(40deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
}
}
/** @var ITheme[] */
- $themes = array_map(function($themeId) {
+ $themes = array_filter(array_map(function($themeId) {
return $this->getThemes()[$themeId];
- }, $themesIds);
+ }, $themesIds));
// Filtering all themes with the same type
$filteredThemes = array_filter($themes, function(ITheme $t) use ($theme) {
--- /dev/null
+<?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\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): array {
+ $colorPrimaryLight = $this->util->mix($this->primaryColor, $colorMainBackground, -80);
+ $colorPrimaryElement = $this->util->elementColor($this->primaryColor);
+ $colorPrimaryElementLight = $this->util->mix($colorPrimaryElement, $colorMainBackground, -80);
+
+ // primary related colours
+ return [
+ '--color-primary' => $this->primaryColor,
+ '--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->primaryColor,
+ '--color-primary-light-hover' => $this->util->mix($colorPrimaryLight, $colorMainText, 90),
+ '--color-primary-text-dark' => $this->util->darken($this->util->invertTextColor($this->primaryColor) ? '#000000' : '#ffffff', 7),
+
+ // used for buttons, inputs...
+ '--color-primary-element' => $colorPrimaryElement,
+ '--color-primary-element-text' => $this->util->invertTextColor($colorPrimaryElement) ? '#000000' : '#ffffff',
+ '--color-primary-element-hover' => $this->util->mix($colorPrimaryElement, $colorMainBackground, 60),
+ '--color-primary-element-light' => $colorPrimaryElementLight,
+ '--color-primary-element-light-text' => $colorPrimaryElement,
+ '--color-primary-element-light-hover' => $this->util->mix($colorPrimaryElementLight, $colorMainText, 90),
+ '--color-primary-element-text-dark' => $this->util->darken($this->util->invertTextColor($colorPrimaryElement) ? '#000000' : '#ffffff', 7),
+
+ // 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%)',
+ ];
+ }
+}
}
/**
- * Try to keep this consistent with HighContrastTheme
+ * Keep this consistent with other HighContrast Themes
*/
public function getCSSVariables(): array {
- $variables = parent::getCSSVariables();
+ $defaultVariables = parent::getCSSVariables();
+
$colorMainText = '#ffffff';
$colorMainBackground = '#000000';
- $variables['--color-main-background'] = $colorMainBackground;
- $variables['--color-main-background-translucent'] = 'rgba(var(--color-main-background-rgb), .1)';
- $variables['--color-main-text'] = $colorMainText;
-
- $variables['--color-background-dark'] = $this->util->lighten($colorMainBackground, 30);
- $variables['--color-background-darker'] = $this->util->lighten($colorMainBackground, 30);
-
- $variables['--color-main-background-blur'] = $colorMainBackground;
- $variables['--filter-background-blur'] = 'none';
-
- $variables['--color-placeholder-light'] = $this->util->lighten($colorMainBackground, 30);
- $variables['--color-placeholder-dark'] = $this->util->lighten($colorMainBackground, 45);
+ return array_merge(
+ $defaultVariables,
+ $this->generatePrimaryVariables($colorMainBackground, $colorMainText),
+ [
+ '--color-main-background' => $colorMainBackground,
+ '--color-main-background-translucent' => 'rgba(var(--color-main-background-rgb), .1)',
+ '--color-main-text' => $colorMainText,
- $variables['--color-text-maxcontrast'] = $colorMainText;
- $variables['--color-text-light'] = $colorMainText;
- $variables['--color-text-lighter'] = $colorMainText;
+ '--color-background-dark' => $this->util->lighten($colorMainBackground, 30),
+ '--color-background-darker' => $this->util->lighten($colorMainBackground, 30),
- $variables['--color-scrollbar'] = $this->util->lighten($colorMainBackground, 35);
+ '--color-main-background-blur' => $colorMainBackground,
+ '--filter-background-blur' => 'none',
- // used for the icon loading animation
- $variables['--color-loading-light'] = '#000000';
- $variables['--color-loading-dark'] = '#dddddd';
+ '--color-placeholder-light' => $this->util->lighten($colorMainBackground, 30),
+ '--color-placeholder-dark' => $this->util->lighten($colorMainBackground, 45),
+ '--color-text-maxcontrast' => $colorMainText,
+ '--color-text-light' => $colorMainText,
+ '--color-text-lighter' => $colorMainText,
- $variables['--color-box-shadow-rgb'] = 'var(--color-main-text)';
- $variables['--color-box-shadow'] = 'var(--color-main-text)';
+ '--color-scrollbar' => $this->util->lighten($colorMainBackground, 35),
+ // used for the icon loading animation
+ '--color-loading-light' => '#000000',
+ '--color-loading-dark' => '#dddddd',
- $variables['--color-border'] = $this->util->lighten($colorMainBackground, 50);
- $variables['--color-border-dark'] = $this->util->lighten($colorMainBackground, 50);
+ '--color-box-shadow-rgb' => $colorMainText,
+ '--color-box-shadow' => $colorMainText,
- return $variables;
+ '--color-border' => $this->util->lighten($colorMainBackground, 50),
+ '--color-border-dark' => $this->util->lighten($colorMainBackground, 50),
+ ]
+ );
}
public function getCustomCss(): string {
$colorMainText = '#D8D8D8';
$colorMainBackground = '#171717';
$colorMainBackgroundRGB = join(',', $this->util->hexToRGB($colorMainBackground));
+
$colorBoxShadow = $this->util->darken($colorMainBackground, 70);
$colorBoxShadowRGB = join(',', $this->util->hexToRGB($colorBoxShadow));
- $colorPrimaryLight = $this->util->mix($this->primaryColor, $colorMainBackground, -80);
-
- // Background is _not_ bright
- $colorPrimaryElement = $this->util->elementColor($this->primaryColor, false);
- $colorPrimaryElementLight = $this->util->mix($colorPrimaryElement, $colorMainBackground, -80);
-
- return array_merge($defaultVariables, [
- '--color-main-text' => $colorMainText,
- '--color-main-background' => $colorMainBackground,
- '--color-main-background-rgb' => $colorMainBackgroundRGB,
-
- '--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),
+ return array_merge(
+ $defaultVariables,
+ $this->generatePrimaryVariables($colorMainBackground, $colorMainText),
+ [
+ '--color-main-text' => $colorMainText,
+ '--color-main-background' => $colorMainBackground,
+ '--color-main-background-rgb' => $colorMainBackgroundRGB,
- '--color-placeholder-light' => $this->util->lighten($colorMainBackground, 10),
- '--color-placeholder-dark' => $this->util->lighten($colorMainBackground, 20),
+ '--color-scrollbar' => $this->util->lighten($colorMainBackground, 15),
- '--color-primary-hover' => $this->util->mix($this->primaryColor, $colorMainBackground, 60),
- '--color-primary-light' => $colorPrimaryLight,
- '--color-primary-light-hover' => $this->util->mix($colorPrimaryLight, $colorMainText, 90),
+ '--color-background-hover' => $this->util->lighten($colorMainBackground, 4),
+ '--color-background-dark' => $this->util->lighten($colorMainBackground, 7),
+ '--color-background-darker' => $this->util->lighten($colorMainBackground, 14),
- // used for buttons, inputs...
- '--color-primary-element' => $colorPrimaryElement,
- '--color-primary-element-text' => $this->util->invertTextColor($colorPrimaryElement) ? '#000000' : '#ffffff',
- '--color-primary-element-hover' => $this->util->mix($colorPrimaryElement, $colorMainBackground, 60),
- '--color-primary-element-light' => $colorPrimaryElementLight,
- '--color-primary-element-light-text' => $colorPrimaryElement,
- '--color-primary-element-light-hover' => $this->util->mix($colorPrimaryElementLight, $colorMainText, 90),
- '--color-primary-element-text-dark' => $this->util->lighten($this->util->invertTextColor($colorPrimaryElement) ? '#000000' : '#ffffff', 7),
+ '--color-placeholder-light' => $this->util->lighten($colorMainBackground, 10),
+ '--color-placeholder-dark' => $this->util->lighten($colorMainBackground, 20),
- '--color-text-maxcontrast' => $this->util->darken($colorMainText, 30),
- '--color-text-light' => $this->util->darken($colorMainText, 10),
- '--color-text-lighter' => $this->util->darken($colorMainText, 20),
+ '--color-text-maxcontrast' => $this->util->darken($colorMainText, 30),
+ '--color-text-light' => $this->util->darken($colorMainText, 10),
+ '--color-text-lighter' => $this->util->darken($colorMainText, 20),
- '--color-loading-light' => '#777',
- '--color-loading-dark' => '#CCC',
+ // used for the icon loading animation
+ '--color-loading-light' => '#777',
+ '--color-loading-dark' => '#CCC',
- '--color-box-shadow-rgb' => $colorBoxShadowRGB,
+ '--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' => $this->util->lighten($colorMainBackground, 7),
+ '--color-border-dark' => $this->util->lighten($colorMainBackground, 14),
- '--background-invert-if-dark' => 'invert(100%)',
- '--background-invert-if-bright' => 'no',
- ]);
+ '--background-invert-if-dark' => 'invert(100%)',
+ '--background-invert-if-bright' => 'no',
+ ]
+ );
}
}
use OCP\Server;
class DefaultTheme implements ITheme {
+ use CommonThemeTrait;
+
public Util $util;
public ThemingDefaults $themingDefaults;
public IURLGenerator $urlGenerator;
$colorMainBackgroundRGB = join(',', $this->util->hexToRGB($colorMainBackground));
$colorBoxShadow = $this->util->darken($colorMainBackground, 70);
$colorBoxShadowRGB = join(',', $this->util->hexToRGB($colorBoxShadow));
- $colorPrimaryLight = $this->util->mix($this->primaryColor, $colorMainBackground, -80);
-
- $colorPrimaryElement = $this->util->elementColor($this->primaryColor);
- $colorPrimaryElementLight = $this->util->mix($colorPrimaryElement, $colorMainBackground, -80);
$hasCustomLogoHeader = $this->imageManager->hasImage('logo') || $this->imageManager->hasImage('logoheader');
$hasCustomPrimaryColour = !empty($this->config->getAppValue(Application::APP_ID, 'color'));
'--color-placeholder-light' => $this->util->darken($colorMainBackground, 10),
'--color-placeholder-dark' => $this->util->darken($colorMainBackground, 20),
- // primary related colours
- '--color-primary' => $this->primaryColor,
- '--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->primaryColor,
- '--color-primary-light-hover' => $this->util->mix($colorPrimaryLight, $colorMainText, 90),
- '--color-primary-text-dark' => $this->util->darken($this->util->invertTextColor($this->primaryColor) ? '#000000' : '#ffffff', 7),
- // used for buttons, inputs...
- '--color-primary-element' => $colorPrimaryElement,
- '--color-primary-element-text' => $this->util->invertTextColor($colorPrimaryElement) ? '#000000' : '#ffffff',
- '--color-primary-element-hover' => $this->util->mix($colorPrimaryElement, $colorMainBackground, 60),
- '--color-primary-element-light' => $colorPrimaryElementLight,
- '--color-primary-element-light-text' => $colorPrimaryElement,
- '--color-primary-element-light-hover' => $this->util->mix($colorPrimaryElementLight, $colorMainText, 90),
- '--color-primary-element-text-dark' => $this->util->darken($this->util->invertTextColor($colorPrimaryElement) ? '#000000' : '#ffffff', 7),
- // 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%)',
-
// max contrast for WCAG compliance
'--color-main-text' => $colorMainText,
'--color-text-maxcontrast' => $this->util->lighten($colorMainText, 33),
'--image-main-background' => "url('" . $this->urlGenerator->imagePath('core', 'app-background.jpg') . "')",
];
+ // Primary variables
+ $variables = array_merge($variables, $this->generatePrimaryVariables($colorMainBackground, $colorMainText));
+
$backgroundDeleted = $this->config->getAppValue(Application::APP_ID, 'backgroundMime', '') === 'backgroundColor';
// If primary as background has been request or if we have a custom primary colour
// let's not define the background image
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 {
- $variables = parent::getCSSVariables();
+ $defaultVariables = parent::getCSSVariables();
+
$colorMainText = '#000000';
$colorMainBackground = '#ffffff';
- $variables['--color-main-background'] = $colorMainBackground;
- $variables['--color-main-background-translucent'] = 'rgba(var(--color-main-background-rgb), .1)';
- $variables['--color-main-text'] = $colorMainText;
-
- $variables['--color-background-dark'] = $this->util->darken($colorMainBackground, 30);
- $variables['--color-background-darker'] = $this->util->darken($colorMainBackground, 30);
+ return array_merge(
+ $defaultVariables,
+ $this->generatePrimaryVariables($colorMainBackground, $colorMainText),
+ [
+ '--color-main-background' => $colorMainBackground,
+ '--color-main-background-translucent' => 'rgba(var(--color-main-background-rgb), .1)',
+ '--color-main-text' => $colorMainText,
- $variables['--color-main-background-blur'] = $colorMainBackground;
- $variables['--filter-background-blur'] = 'none';
+ '--color-background-dark' => $this->util->darken($colorMainBackground, 30),
+ '--color-background-darker' => $this->util->darken($colorMainBackground, 30),
- $variables['--color-placeholder-light'] = $this->util->darken($colorMainBackground, 30);
- $variables['--color-placeholder-dark'] = $this->util->darken($colorMainBackground, 45);
+ '--color-main-background-blur' => $colorMainBackground,
+ '--filter-background-blur' => 'none',
- $variables['--color-text-maxcontrast'] = 'var(--color-main-text)';
- $variables['--color-text-light'] = 'var(--color-main-text)';
- $variables['--color-text-lighter'] = 'var(--color-main-text)';
+ '--color-placeholder-light' => $this->util->darken($colorMainBackground, 30),
+ '--color-placeholder-dark' => $this->util->darken($colorMainBackground, 45),
- $variables['--color-scrollbar'] = $this->util->darken($colorMainBackground, 25);
+ '--color-text-maxcontrast' => $colorMainText,
+ '--color-text-light' => $colorMainText,
+ '--color-text-lighter' => $colorMainText,
- // used for the icon loading animation
- $variables['--color-loading-light'] = '#dddddd';
- $variables['--color-loading-dark'] = '#000000';
+ '--color-scrollbar' => $this->util->darken($colorMainBackground, 25),
- $variables['--color-box-shadow-rgb'] = 'var(--color-main-text)';
- $variables['--color-box-shadow'] = 'var(--color-main-text)';
+ // used for the icon loading animation
+ '--color-loading-light' => '#dddddd',
+ '--color-loading-dark' => '#000000',
- $variables['--color-border'] = $this->util->darken($colorMainBackground, 50);
- $variables['--color-border-dark'] = $this->util->darken($colorMainBackground, 50);
+ '--color-box-shadow-rgb' => $colorMainText,
+ '--color-box-shadow' => $colorMainText,
- return $variables;
+ '--color-border' => $this->util->darken($colorMainBackground, 50),
+ '--color-border-dark' => $this->util->darken($colorMainBackground, 50),
+ ]
+ );
}
public function getCustomCss(): string {
projects / nextcloud-server.git / commitdiff