nextcloud /
server
@@ -37,206 +37,206 @@ |
||
| 37 | 37 | use OCP\Server; |
| 38 | 38 | |
| 39 | 39 | class DefaultTheme implements ITheme { |
| 40 | - use CommonThemeTrait; |
|
| 41 | - |
|
| 42 | - public Util $util; |
|
| 43 | - public ThemingDefaults $themingDefaults; |
|
| 44 | - public IURLGenerator $urlGenerator; |
|
| 45 | - public ImageManager $imageManager; |
|
| 46 | - public IConfig $config; |
|
| 47 | - public IL10N $l; |
|
| 48 | - |
|
| 49 | - public string $primaryColor; |
|
| 50 | - |
|
| 51 | - public function __construct(Util $util, |
|
| 52 | - ThemingDefaults $themingDefaults, |
|
| 53 | - IURLGenerator $urlGenerator, |
|
| 54 | - ImageManager $imageManager, |
|
| 55 | - IConfig $config, |
|
| 56 | - IL10N $l) { |
|
| 57 | - $this->util = $util; |
|
| 58 | - $this->themingDefaults = $themingDefaults; |
|
| 59 | - $this->urlGenerator = $urlGenerator; |
|
| 60 | - $this->imageManager = $imageManager; |
|
| 61 | - $this->config = $config; |
|
| 62 | - $this->l = $l; |
|
| 63 | - |
|
| 64 | - $this->primaryColor = $this->themingDefaults->getColorPrimary(); |
|
| 65 | - } |
|
| 66 | - |
|
| 67 | - public function getId(): string { |
|
| 68 | - return 'default'; |
|
| 69 | - } |
|
| 70 | - |
|
| 71 | - public function getType(): int { |
|
| 72 | - return ITheme::TYPE_THEME; |
|
| 73 | - } |
|
| 74 | - |
|
| 75 | - public function getTitle(): string { |
|
| 76 | - return $this->l->t('System default theme'); |
|
| 77 | - } |
|
| 78 | - |
|
| 79 | - public function getEnableLabel(): string { |
|
| 80 | - return $this->l->t('Enable the system default'); |
|
| 81 | - } |
|
| 82 | - |
|
| 83 | - public function getDescription(): string { |
|
| 84 | - return $this->l->t('Using the default system appearance.'); |
|
| 85 | - } |
|
| 86 | - |
|
| 87 | - public function getMediaQuery(): string { |
|
| 88 | - return ''; |
|
| 89 | - } |
|
| 90 | - |
|
| 91 | - public function getCSSVariables(): array { |
|
| 92 | - $colorMainText = '#222222'; |
|
| 93 | - $colorMainTextRgb = join(',', $this->util->hexToRGB($colorMainText)); |
|
| 94 | - $colorMainBackground = '#ffffff'; |
|
| 95 | - $colorMainBackgroundRGB = join(',', $this->util->hexToRGB($colorMainBackground)); |
|
| 96 | - $colorBoxShadow = $this->util->darken($colorMainBackground, 70); |
|
| 97 | - $colorBoxShadowRGB = join(',', $this->util->hexToRGB($colorBoxShadow)); |
|
| 98 | - |
|
| 99 | - $hasCustomLogoHeader = $this->imageManager->hasImage('logo') || $this->imageManager->hasImage('logoheader'); |
|
| 100 | - $hasCustomPrimaryColour = !empty($this->config->getAppValue(Application::APP_ID, 'color')); |
|
| 101 | - |
|
| 102 | - $variables = [ |
|
| 103 | - '--color-main-background' => $colorMainBackground, |
|
| 104 | - '--color-main-background-rgb' => $colorMainBackgroundRGB, |
|
| 105 | - '--color-main-background-translucent' => 'rgba(var(--color-main-background-rgb), .97)', |
|
| 106 | - '--color-main-background-blur' => 'rgba(var(--color-main-background-rgb), .8)', |
|
| 107 | - '--filter-background-blur' => 'blur(25px)', |
|
| 108 | - |
|
| 109 | - // to use like this: background-image: linear-gradient(0, var('--gradient-main-background)); |
|
| 110 | - '--gradient-main-background' => 'var(--color-main-background) 0%, var(--color-main-background-translucent) 85%, transparent 100%', |
|
| 111 | - |
|
| 112 | - // used for different active/hover/focus/disabled states |
|
| 113 | - '--color-background-hover' => $this->util->darken($colorMainBackground, 4), |
|
| 114 | - '--color-background-dark' => $this->util->darken($colorMainBackground, 7), |
|
| 115 | - '--color-background-darker' => $this->util->darken($colorMainBackground, 14), |
|
| 116 | - |
|
| 117 | - '--color-placeholder-light' => $this->util->darken($colorMainBackground, 10), |
|
| 118 | - '--color-placeholder-dark' => $this->util->darken($colorMainBackground, 20), |
|
| 119 | - |
|
| 120 | - // max contrast for WCAG compliance |
|
| 121 | - '--color-main-text' => $colorMainText, |
|
| 122 | - '--color-text-maxcontrast' => $this->util->lighten($colorMainText, 33), |
|
| 123 | - '--color-text-light' => $colorMainText, |
|
| 124 | - '--color-text-lighter' => $this->util->lighten($colorMainText, 33), |
|
| 125 | - |
|
| 126 | - '--color-scrollbar' => 'rgba(' . $colorMainTextRgb . ', .15)', |
|
| 127 | - |
|
| 128 | - // info/warning/success feedback colours |
|
| 129 | - '--color-error' => '#e9322d', |
|
| 130 | - '--color-error-rgb' => join(',', $this->util->hexToRGB('#e9322d')), |
|
| 131 | - '--color-error-hover' => $this->util->mix('#e9322d', $colorMainBackground, 60), |
|
| 132 | - '--color-warning' => '#eca700', |
|
| 133 | - '--color-warning-rgb' => join(',', $this->util->hexToRGB('#eca700')), |
|
| 134 | - '--color-warning-hover' => $this->util->mix('#eca700', $colorMainBackground, 60), |
|
| 135 | - '--color-success' => '#46ba61', |
|
| 136 | - '--color-success-rgb' => join(',', $this->util->hexToRGB('#46ba61')), |
|
| 137 | - '--color-success-hover' => $this->util->mix('#46ba61', $colorMainBackground, 60), |
|
| 138 | - |
|
| 139 | - // used for the icon loading animation |
|
| 140 | - '--color-loading-light' => '#cccccc', |
|
| 141 | - '--color-loading-dark' => '#444444', |
|
| 142 | - |
|
| 143 | - '--color-box-shadow-rgb' => $colorBoxShadowRGB, |
|
| 144 | - '--color-box-shadow' => "rgba(var(--color-box-shadow-rgb), 0.5)", |
|
| 145 | - |
|
| 146 | - '--color-border' => $this->util->darken($colorMainBackground, 7), |
|
| 147 | - '--color-border-dark' => $this->util->darken($colorMainBackground, 14), |
|
| 148 | - |
|
| 149 | - '--font-face' => "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Cantarell, Ubuntu, 'Helvetica Neue', Arial, sans-serif, 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'", |
|
| 150 | - '--default-font-size' => '15px', |
|
| 151 | - |
|
| 152 | - // TODO: support "(prefers-reduced-motion)" |
|
| 153 | - '--animation-quick' => '100ms', |
|
| 154 | - '--animation-slow' => '300ms', |
|
| 155 | - |
|
| 156 | - // Default variables -------------------------------------------- |
|
| 157 | - '--border-radius' => '3px', |
|
| 158 | - '--border-radius-large' => '10px', |
|
| 159 | - // pill-style button, value is large so big buttons also have correct roundness |
|
| 160 | - '--border-radius-pill' => '100px', |
|
| 161 | - |
|
| 162 | - '--default-clickable-area' => '44px', |
|
| 163 | - '--default-line-height' => '24px', |
|
| 164 | - '--default-grid-baseline' => '4px', |
|
| 165 | - |
|
| 166 | - // various structure data |
|
| 167 | - '--header-height' => '50px', |
|
| 168 | - '--navigation-width' => '300px', |
|
| 169 | - '--sidebar-min-width' => '300px', |
|
| 170 | - '--sidebar-max-width' => '500px', |
|
| 171 | - '--list-min-width' => '200px', |
|
| 172 | - '--list-max-width' => '300px', |
|
| 173 | - '--header-menu-item-height' => '44px', |
|
| 174 | - '--header-menu-profile-item-height' => '66px', |
|
| 175 | - |
|
| 176 | - // mobile. Keep in sync with core/js/js.js |
|
| 177 | - '--breakpoint-mobile' => '1024px', |
|
| 178 | - |
|
| 179 | - // invert filter if primary is too bright |
|
| 180 | - // to be used for legacy reasons only. Use inline |
|
| 181 | - // svg with proper css variable instead or material |
|
| 182 | - // design icons. |
|
| 183 | - // ⚠️ Using 'no' as a value to make sure we specify an |
|
| 184 | - // invalid one with no fallback. 'unset' could here fallback to some |
|
| 185 | - // other theme with media queries |
|
| 186 | - '--primary-invert-if-bright' => $this->util->invertTextColor($this->primaryColor) ? 'invert(100%)' : 'no', |
|
| 187 | - '--background-invert-if-dark' => 'no', |
|
| 188 | - '--background-invert-if-bright' => 'invert(100%)', |
|
| 189 | - |
|
| 190 | - '--image-main-background' => "url('" . $this->urlGenerator->imagePath('core', 'app-background.jpg') . "')", |
|
| 191 | - ]; |
|
| 192 | - |
|
| 193 | - // Primary variables |
|
| 194 | - $variables = array_merge($variables, $this->generatePrimaryVariables($colorMainBackground, $colorMainText)); |
|
| 195 | - |
|
| 196 | - $backgroundDeleted = $this->config->getAppValue(Application::APP_ID, 'backgroundMime', '') === 'backgroundColor'; |
|
| 197 | - // If primary as background has been request or if we have a custom primary colour |
|
| 198 | - // let's not define the background image |
|
| 199 | - if ($backgroundDeleted || $hasCustomPrimaryColour) { |
|
| 200 | - $variables["--image-background-plain"] = 'true'; |
|
| 201 | - } |
|
| 202 | - |
|
| 203 | - // Register image variables only if custom-defined |
|
| 204 | - foreach (['logo', 'logoheader', 'favicon', 'background'] as $image) { |
|
| 205 | - if ($this->imageManager->hasImage($image)) { |
|
| 206 | - $imageUrl = $this->imageManager->getImageUrl($image); |
|
| 207 | - if ($image === 'background') { |
|
| 208 | - // If background deleted is set, ignoring variable |
|
| 209 | - if ($backgroundDeleted) { |
|
| 210 | - continue; |
|
| 211 | - } |
|
| 212 | - $variables['--image-background-size'] = 'cover'; |
|
| 213 | - $variables['--image-main-background'] = "url('" . $imageUrl . "')"; |
|
| 214 | - } |
|
| 215 | - $variables["--image-$image"] = "url('" . $imageUrl . "')"; |
|
| 216 | - } |
|
| 217 | - } |
|
| 218 | - |
|
| 219 | - if ($hasCustomLogoHeader) { |
|
| 220 | - $variables["--image-logoheader-custom"] = 'true'; |
|
| 221 | - } |
|
| 222 | - |
|
| 223 | - $appManager = Server::get(IAppManager::class); |
|
| 224 | - $userSession = Server::get(IUserSession::class); |
|
| 225 | - $user = $userSession->getUser(); |
|
| 226 | - if ($appManager->isEnabledForUser(Application::APP_ID) && $user !== null) { |
|
| 227 | - $themingBackground = $this->config->getUserValue($user->getUID(), Application::APP_ID, 'background', 'default'); |
|
| 228 | - |
|
| 229 | - if ($themingBackground === 'custom') { |
|
| 230 | - $variables['--image-main-background'] = "url('" . $this->urlGenerator->linkToRouteAbsolute('theming.userTheme.getBackground') . "')"; |
|
| 231 | - } elseif ($themingBackground !== 'default' && substr($themingBackground, 0, 1) !== '#') { |
|
| 232 | - $variables['--image-main-background'] = "url('" . $this->urlGenerator->linkTo(Application::APP_ID, "/img/background/$themingBackground") . "')"; |
|
| 233 | - } |
|
| 234 | - } |
|
| 235 | - |
|
| 236 | - return $variables; |
|
| 237 | - } |
|
| 238 | - |
|
| 239 | - public function getCustomCss(): string { |
|
| 240 | - return ''; |
|
| 241 | - } |
|
| 40 | + use CommonThemeTrait; |
|
| 41 | + |
|
| 42 | + public Util $util; |
|
| 43 | + public ThemingDefaults $themingDefaults; |
|
| 44 | + public IURLGenerator $urlGenerator; |
|
| 45 | + public ImageManager $imageManager; |
|
| 46 | + public IConfig $config; |
|
| 47 | + public IL10N $l; |
|
| 48 | + |
|
| 49 | + public string $primaryColor; |
|
| 50 | + |
|
| 51 | + public function __construct(Util $util, |
|
| 52 | + ThemingDefaults $themingDefaults, |
|
| 53 | + IURLGenerator $urlGenerator, |
|
| 54 | + ImageManager $imageManager, |
|
| 55 | + IConfig $config, |
|
| 56 | + IL10N $l) { |
|
| 57 | + $this->util = $util; |
|
| 58 | + $this->themingDefaults = $themingDefaults; |
|
| 59 | + $this->urlGenerator = $urlGenerator; |
|
| 60 | + $this->imageManager = $imageManager; |
|
| 61 | + $this->config = $config; |
|
| 62 | + $this->l = $l; |
|
| 63 | + |
|
| 64 | + $this->primaryColor = $this->themingDefaults->getColorPrimary(); |
|
| 65 | + } |
|
| 66 | + |
|
| 67 | + public function getId(): string { |
|
| 68 | + return 'default'; |
|
| 69 | + } |
|
| 70 | + |
|
| 71 | + public function getType(): int { |
|
| 72 | + return ITheme::TYPE_THEME; |
|
| 73 | + } |
|
| 74 | + |
|
| 75 | + public function getTitle(): string { |
|
| 76 | + return $this->l->t('System default theme'); |
|
| 77 | + } |
|
| 78 | + |
|
| 79 | + public function getEnableLabel(): string { |
|
| 80 | + return $this->l->t('Enable the system default'); |
|
| 81 | + } |
|
| 82 | + |
|
| 83 | + public function getDescription(): string { |
|
| 84 | + return $this->l->t('Using the default system appearance.'); |
|
| 85 | + } |
|
| 86 | + |
|
| 87 | + public function getMediaQuery(): string { |
|
| 88 | + return ''; |
|
| 89 | + } |
|
| 90 | + |
|
| 91 | + public function getCSSVariables(): array { |
|
| 92 | + $colorMainText = '#222222'; |
|
| 93 | + $colorMainTextRgb = join(',', $this->util->hexToRGB($colorMainText)); |
|
| 94 | + $colorMainBackground = '#ffffff'; |
|
| 95 | + $colorMainBackgroundRGB = join(',', $this->util->hexToRGB($colorMainBackground)); |
|
| 96 | + $colorBoxShadow = $this->util->darken($colorMainBackground, 70); |
|
| 97 | + $colorBoxShadowRGB = join(',', $this->util->hexToRGB($colorBoxShadow)); |
|
| 98 | + |
|
| 99 | + $hasCustomLogoHeader = $this->imageManager->hasImage('logo') || $this->imageManager->hasImage('logoheader'); |
|
| 100 | + $hasCustomPrimaryColour = !empty($this->config->getAppValue(Application::APP_ID, 'color')); |
|
| 101 | + |
|
| 102 | + $variables = [ |
|
| 103 | + '--color-main-background' => $colorMainBackground, |
|
| 104 | + '--color-main-background-rgb' => $colorMainBackgroundRGB, |
|
| 105 | + '--color-main-background-translucent' => 'rgba(var(--color-main-background-rgb), .97)', |
|
| 106 | + '--color-main-background-blur' => 'rgba(var(--color-main-background-rgb), .8)', |
|
| 107 | + '--filter-background-blur' => 'blur(25px)', |
|
| 108 | + |
|
| 109 | + // to use like this: background-image: linear-gradient(0, var('--gradient-main-background)); |
|
| 110 | + '--gradient-main-background' => 'var(--color-main-background) 0%, var(--color-main-background-translucent) 85%, transparent 100%', |
|
| 111 | + |
|
| 112 | + // used for different active/hover/focus/disabled states |
|
| 113 | + '--color-background-hover' => $this->util->darken($colorMainBackground, 4), |
|
| 114 | + '--color-background-dark' => $this->util->darken($colorMainBackground, 7), |
|
| 115 | + '--color-background-darker' => $this->util->darken($colorMainBackground, 14), |
|
| 116 | + |
|
| 117 | + '--color-placeholder-light' => $this->util->darken($colorMainBackground, 10), |
|
| 118 | + '--color-placeholder-dark' => $this->util->darken($colorMainBackground, 20), |
|
| 119 | + |
|
| 120 | + // max contrast for WCAG compliance |
|
| 121 | + '--color-main-text' => $colorMainText, |
|
| 122 | + '--color-text-maxcontrast' => $this->util->lighten($colorMainText, 33), |
|
| 123 | + '--color-text-light' => $colorMainText, |
|
| 124 | + '--color-text-lighter' => $this->util->lighten($colorMainText, 33), |
|
| 125 | + |
|
| 126 | + '--color-scrollbar' => 'rgba(' . $colorMainTextRgb . ', .15)', |
|
| 127 | + |
|
| 128 | + // info/warning/success feedback colours |
|
| 129 | + '--color-error' => '#e9322d', |
|
| 130 | + '--color-error-rgb' => join(',', $this->util->hexToRGB('#e9322d')), |
|
| 131 | + '--color-error-hover' => $this->util->mix('#e9322d', $colorMainBackground, 60), |
|
| 132 | + '--color-warning' => '#eca700', |
|
| 133 | + '--color-warning-rgb' => join(',', $this->util->hexToRGB('#eca700')), |
|
| 134 | + '--color-warning-hover' => $this->util->mix('#eca700', $colorMainBackground, 60), |
|
| 135 | + '--color-success' => '#46ba61', |
|
| 136 | + '--color-success-rgb' => join(',', $this->util->hexToRGB('#46ba61')), |
|
| 137 | + '--color-success-hover' => $this->util->mix('#46ba61', $colorMainBackground, 60), |
|
| 138 | + |
|
| 139 | + // used for the icon loading animation |
|
| 140 | + '--color-loading-light' => '#cccccc', |
|
| 141 | + '--color-loading-dark' => '#444444', |
|
| 142 | + |
|
| 143 | + '--color-box-shadow-rgb' => $colorBoxShadowRGB, |
|
| 144 | + '--color-box-shadow' => "rgba(var(--color-box-shadow-rgb), 0.5)", |
|
| 145 | + |
|
| 146 | + '--color-border' => $this->util->darken($colorMainBackground, 7), |
|
| 147 | + '--color-border-dark' => $this->util->darken($colorMainBackground, 14), |
|
| 148 | + |
|
| 149 | + '--font-face' => "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Cantarell, Ubuntu, 'Helvetica Neue', Arial, sans-serif, 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'", |
|
| 150 | + '--default-font-size' => '15px', |
|
| 151 | + |
|
| 152 | + // TODO: support "(prefers-reduced-motion)" |
|
| 153 | + '--animation-quick' => '100ms', |
|
| 154 | + '--animation-slow' => '300ms', |
|
| 155 | + |
|
| 156 | + // Default variables -------------------------------------------- |
|
| 157 | + '--border-radius' => '3px', |
|
| 158 | + '--border-radius-large' => '10px', |
|
| 159 | + // pill-style button, value is large so big buttons also have correct roundness |
|
| 160 | + '--border-radius-pill' => '100px', |
|
| 161 | + |
|
| 162 | + '--default-clickable-area' => '44px', |
|
| 163 | + '--default-line-height' => '24px', |
|
| 164 | + '--default-grid-baseline' => '4px', |
|
| 165 | + |
|
| 166 | + // various structure data |
|
| 167 | + '--header-height' => '50px', |
|
| 168 | + '--navigation-width' => '300px', |
|
| 169 | + '--sidebar-min-width' => '300px', |
|
| 170 | + '--sidebar-max-width' => '500px', |
|
| 171 | + '--list-min-width' => '200px', |
|
| 172 | + '--list-max-width' => '300px', |
|
| 173 | + '--header-menu-item-height' => '44px', |
|
| 174 | + '--header-menu-profile-item-height' => '66px', |
|
| 175 | + |
|
| 176 | + // mobile. Keep in sync with core/js/js.js |
|
| 177 | + '--breakpoint-mobile' => '1024px', |
|
| 178 | + |
|
| 179 | + // invert filter if primary is too bright |
|
| 180 | + // to be used for legacy reasons only. Use inline |
|
| 181 | + // svg with proper css variable instead or material |
|
| 182 | + // design icons. |
|
| 183 | + // ⚠️ Using 'no' as a value to make sure we specify an |
|
| 184 | + // invalid one with no fallback. 'unset' could here fallback to some |
|
| 185 | + // other theme with media queries |
|
| 186 | + '--primary-invert-if-bright' => $this->util->invertTextColor($this->primaryColor) ? 'invert(100%)' : 'no', |
|
| 187 | + '--background-invert-if-dark' => 'no', |
|
| 188 | + '--background-invert-if-bright' => 'invert(100%)', |
|
| 189 | + |
|
| 190 | + '--image-main-background' => "url('" . $this->urlGenerator->imagePath('core', 'app-background.jpg') . "')", |
|
| 191 | + ]; |
|
| 192 | + |
|
| 193 | + // Primary variables |
|
| 194 | + $variables = array_merge($variables, $this->generatePrimaryVariables($colorMainBackground, $colorMainText)); |
|
| 195 | + |
|
| 196 | + $backgroundDeleted = $this->config->getAppValue(Application::APP_ID, 'backgroundMime', '') === 'backgroundColor'; |
|
| 197 | + // If primary as background has been request or if we have a custom primary colour |
|
| 198 | + // let's not define the background image |
|
| 199 | + if ($backgroundDeleted || $hasCustomPrimaryColour) { |
|
| 200 | + $variables["--image-background-plain"] = 'true'; |
|
| 201 | + } |
|
| 202 | + |
|
| 203 | + // Register image variables only if custom-defined |
|
| 204 | + foreach (['logo', 'logoheader', 'favicon', 'background'] as $image) { |
|
| 205 | + if ($this->imageManager->hasImage($image)) { |
|
| 206 | + $imageUrl = $this->imageManager->getImageUrl($image); |
|
| 207 | + if ($image === 'background') { |
|
| 208 | + // If background deleted is set, ignoring variable |
|
| 209 | + if ($backgroundDeleted) { |
|
| 210 | + continue; |
|
| 211 | + } |
|
| 212 | + $variables['--image-background-size'] = 'cover'; |
|
| 213 | + $variables['--image-main-background'] = "url('" . $imageUrl . "')"; |
|
| 214 | + } |
|
| 215 | + $variables["--image-$image"] = "url('" . $imageUrl . "')"; |
|
| 216 | + } |
|
| 217 | + } |
|
| 218 | + |
|
| 219 | + if ($hasCustomLogoHeader) { |
|
| 220 | + $variables["--image-logoheader-custom"] = 'true'; |
|
| 221 | + } |
|
| 222 | + |
|
| 223 | + $appManager = Server::get(IAppManager::class); |
|
| 224 | + $userSession = Server::get(IUserSession::class); |
|
| 225 | + $user = $userSession->getUser(); |
|
| 226 | + if ($appManager->isEnabledForUser(Application::APP_ID) && $user !== null) { |
|
| 227 | + $themingBackground = $this->config->getUserValue($user->getUID(), Application::APP_ID, 'background', 'default'); |
|
| 228 | + |
|
| 229 | + if ($themingBackground === 'custom') { |
|
| 230 | + $variables['--image-main-background'] = "url('" . $this->urlGenerator->linkToRouteAbsolute('theming.userTheme.getBackground') . "')"; |
|
| 231 | + } elseif ($themingBackground !== 'default' && substr($themingBackground, 0, 1) !== '#') { |
|
| 232 | + $variables['--image-main-background'] = "url('" . $this->urlGenerator->linkTo(Application::APP_ID, "/img/background/$themingBackground") . "')"; |
|
| 233 | + } |
|
| 234 | + } |
|
| 235 | + |
|
| 236 | + return $variables; |
|
| 237 | + } |
|
| 238 | + |
|
| 239 | + public function getCustomCss(): string { |
|
| 240 | + return ''; |
|
| 241 | + } |
|
| 242 | 242 | } |
@@ -27,39 +27,39 @@ |
||
| 27 | 27 | use OCA\Theming\Util; |
| 28 | 28 | |
| 29 | 29 | trait CommonThemeTrait { |
| 30 | - public Util $util; |
|
| 30 | + public Util $util; |
|
| 31 | 31 | |
| 32 | - /** |
|
| 33 | - * Generate primary-related variables |
|
| 34 | - * This is shared between multiple themes because colorMainBackground and colorMainText |
|
| 35 | - * will change in between. |
|
| 36 | - */ |
|
| 37 | - protected function generatePrimaryVariables(string $colorMainBackground, string $colorMainText): array { |
|
| 38 | - $colorPrimaryLight = $this->util->mix($this->primaryColor, $colorMainBackground, -80); |
|
| 39 | - $colorPrimaryElement = $this->util->elementColor($this->primaryColor); |
|
| 40 | - $colorPrimaryElementLight = $this->util->mix($colorPrimaryElement, $colorMainBackground, -80); |
|
| 32 | + /** |
|
| 33 | + * Generate primary-related variables |
|
| 34 | + * This is shared between multiple themes because colorMainBackground and colorMainText |
|
| 35 | + * will change in between. |
|
| 36 | + */ |
|
| 37 | + protected function generatePrimaryVariables(string $colorMainBackground, string $colorMainText): array { |
|
| 38 | + $colorPrimaryLight = $this->util->mix($this->primaryColor, $colorMainBackground, -80); |
|
| 39 | + $colorPrimaryElement = $this->util->elementColor($this->primaryColor); |
|
| 40 | + $colorPrimaryElementLight = $this->util->mix($colorPrimaryElement, $colorMainBackground, -80); |
|
| 41 | 41 | |
| 42 | - // primary related colours |
|
| 43 | - return [ |
|
| 44 | - '--color-primary' => $this->primaryColor, |
|
| 45 | - '--color-primary-text' => $this->util->invertTextColor($this->primaryColor) ? '#000000' : '#ffffff', |
|
| 46 | - '--color-primary-hover' => $this->util->mix($this->primaryColor, $colorMainBackground, 60), |
|
| 47 | - '--color-primary-light' => $colorPrimaryLight, |
|
| 48 | - '--color-primary-light-text' => $this->primaryColor, |
|
| 49 | - '--color-primary-light-hover' => $this->util->mix($colorPrimaryLight, $colorMainText, 90), |
|
| 50 | - '--color-primary-text-dark' => $this->util->darken($this->util->invertTextColor($this->primaryColor) ? '#000000' : '#ffffff', 7), |
|
| 42 | + // primary related colours |
|
| 43 | + return [ |
|
| 44 | + '--color-primary' => $this->primaryColor, |
|
| 45 | + '--color-primary-text' => $this->util->invertTextColor($this->primaryColor) ? '#000000' : '#ffffff', |
|
| 46 | + '--color-primary-hover' => $this->util->mix($this->primaryColor, $colorMainBackground, 60), |
|
| 47 | + '--color-primary-light' => $colorPrimaryLight, |
|
| 48 | + '--color-primary-light-text' => $this->primaryColor, |
|
| 49 | + '--color-primary-light-hover' => $this->util->mix($colorPrimaryLight, $colorMainText, 90), |
|
| 50 | + '--color-primary-text-dark' => $this->util->darken($this->util->invertTextColor($this->primaryColor) ? '#000000' : '#ffffff', 7), |
|
| 51 | 51 | |
| 52 | - // used for buttons, inputs... |
|
| 53 | - '--color-primary-element' => $colorPrimaryElement, |
|
| 54 | - '--color-primary-element-text' => $this->util->invertTextColor($colorPrimaryElement) ? '#000000' : '#ffffff', |
|
| 55 | - '--color-primary-element-hover' => $this->util->mix($colorPrimaryElement, $colorMainBackground, 60), |
|
| 56 | - '--color-primary-element-light' => $colorPrimaryElementLight, |
|
| 57 | - '--color-primary-element-light-text' => $colorPrimaryElement, |
|
| 58 | - '--color-primary-element-light-hover' => $this->util->mix($colorPrimaryElementLight, $colorMainText, 90), |
|
| 59 | - '--color-primary-element-text-dark' => $this->util->darken($this->util->invertTextColor($colorPrimaryElement) ? '#000000' : '#ffffff', 7), |
|
| 52 | + // used for buttons, inputs... |
|
| 53 | + '--color-primary-element' => $colorPrimaryElement, |
|
| 54 | + '--color-primary-element-text' => $this->util->invertTextColor($colorPrimaryElement) ? '#000000' : '#ffffff', |
|
| 55 | + '--color-primary-element-hover' => $this->util->mix($colorPrimaryElement, $colorMainBackground, 60), |
|
| 56 | + '--color-primary-element-light' => $colorPrimaryElementLight, |
|
| 57 | + '--color-primary-element-light-text' => $colorPrimaryElement, |
|
| 58 | + '--color-primary-element-light-hover' => $this->util->mix($colorPrimaryElementLight, $colorMainText, 90), |
|
| 59 | + '--color-primary-element-text-dark' => $this->util->darken($this->util->invertTextColor($colorPrimaryElement) ? '#000000' : '#ffffff', 7), |
|
| 60 | 60 | |
| 61 | - // to use like this: background-image: var(--gradient-primary-background); |
|
| 62 | - '--gradient-primary-background' => 'linear-gradient(40deg, var(--color-primary) 0%, var(--color-primary-hover) 100%)', |
|
| 63 | - ]; |
|
| 64 | - } |
|
| 61 | + // to use like this: background-image: var(--gradient-primary-background); |
|
| 62 | + '--gradient-primary-background' => 'linear-gradient(40deg, var(--color-primary) 0%, var(--color-primary-hover) 100%)', |
|
| 63 | + ]; |
|
| 64 | + } |
|
| 65 | 65 | } |
@@ -28,73 +28,73 @@ discard block |
||
| 28 | 28 | |
| 29 | 29 | class DarkHighContrastTheme extends DarkTheme implements ITheme { |
| 30 | 30 | |
| 31 | - public function getId(): string { |
|
| 32 | - return 'dark-highcontrast'; |
|
| 33 | - } |
|
| 31 | + public function getId(): string { |
|
| 32 | + return 'dark-highcontrast'; |
|
| 33 | + } |
|
| 34 | 34 | |
| 35 | - public function getMediaQuery(): string { |
|
| 36 | - return '(prefers-color-scheme: dark) and (prefers-contrast: more)'; |
|
| 37 | - } |
|
| 35 | + public function getMediaQuery(): string { |
|
| 36 | + return '(prefers-color-scheme: dark) and (prefers-contrast: more)'; |
|
| 37 | + } |
|
| 38 | 38 | |
| 39 | - public function getTitle(): string { |
|
| 40 | - return $this->l->t('Dark theme with high contrast mode'); |
|
| 41 | - } |
|
| 39 | + public function getTitle(): string { |
|
| 40 | + return $this->l->t('Dark theme with high contrast mode'); |
|
| 41 | + } |
|
| 42 | 42 | |
| 43 | - public function getEnableLabel(): string { |
|
| 44 | - return $this->l->t('Enable dark high contrast mode'); |
|
| 45 | - } |
|
| 43 | + public function getEnableLabel(): string { |
|
| 44 | + return $this->l->t('Enable dark high contrast mode'); |
|
| 45 | + } |
|
| 46 | 46 | |
| 47 | - public function getDescription(): string { |
|
| 48 | - return $this->l->t('Similar to the high contrast mode, but with dark colours.'); |
|
| 49 | - } |
|
| 47 | + public function getDescription(): string { |
|
| 48 | + return $this->l->t('Similar to the high contrast mode, but with dark colours.'); |
|
| 49 | + } |
|
| 50 | 50 | |
| 51 | - /** |
|
| 52 | - * Keep this consistent with other HighContrast Themes |
|
| 53 | - */ |
|
| 54 | - public function getCSSVariables(): array { |
|
| 55 | - $defaultVariables = parent::getCSSVariables(); |
|
| 51 | + /** |
|
| 52 | + * Keep this consistent with other HighContrast Themes |
|
| 53 | + */ |
|
| 54 | + public function getCSSVariables(): array { |
|
| 55 | + $defaultVariables = parent::getCSSVariables(); |
|
| 56 | 56 | |
| 57 | - $colorMainText = '#ffffff'; |
|
| 58 | - $colorMainBackground = '#000000'; |
|
| 57 | + $colorMainText = '#ffffff'; |
|
| 58 | + $colorMainBackground = '#000000'; |
|
| 59 | 59 | |
| 60 | - return array_merge( |
|
| 61 | - $defaultVariables, |
|
| 62 | - $this->generatePrimaryVariables($colorMainBackground, $colorMainText), |
|
| 63 | - [ |
|
| 64 | - '--color-main-background' => $colorMainBackground, |
|
| 65 | - '--color-main-background-translucent' => 'rgba(var(--color-main-background-rgb), .1)', |
|
| 66 | - '--color-main-text' => $colorMainText, |
|
| 60 | + return array_merge( |
|
| 61 | + $defaultVariables, |
|
| 62 | + $this->generatePrimaryVariables($colorMainBackground, $colorMainText), |
|
| 63 | + [ |
|
| 64 | + '--color-main-background' => $colorMainBackground, |
|
| 65 | + '--color-main-background-translucent' => 'rgba(var(--color-main-background-rgb), .1)', |
|
| 66 | + '--color-main-text' => $colorMainText, |
|
| 67 | 67 | |
| 68 | - '--color-background-dark' => $this->util->lighten($colorMainBackground, 30), |
|
| 69 | - '--color-background-darker' => $this->util->lighten($colorMainBackground, 30), |
|
| 68 | + '--color-background-dark' => $this->util->lighten($colorMainBackground, 30), |
|
| 69 | + '--color-background-darker' => $this->util->lighten($colorMainBackground, 30), |
|
| 70 | 70 | |
| 71 | - '--color-main-background-blur' => $colorMainBackground, |
|
| 72 | - '--filter-background-blur' => 'none', |
|
| 71 | + '--color-main-background-blur' => $colorMainBackground, |
|
| 72 | + '--filter-background-blur' => 'none', |
|
| 73 | 73 | |
| 74 | - '--color-placeholder-light' => $this->util->lighten($colorMainBackground, 30), |
|
| 75 | - '--color-placeholder-dark' => $this->util->lighten($colorMainBackground, 45), |
|
| 74 | + '--color-placeholder-light' => $this->util->lighten($colorMainBackground, 30), |
|
| 75 | + '--color-placeholder-dark' => $this->util->lighten($colorMainBackground, 45), |
|
| 76 | 76 | |
| 77 | - '--color-text-maxcontrast' => $colorMainText, |
|
| 78 | - '--color-text-light' => $colorMainText, |
|
| 79 | - '--color-text-lighter' => $colorMainText, |
|
| 77 | + '--color-text-maxcontrast' => $colorMainText, |
|
| 78 | + '--color-text-light' => $colorMainText, |
|
| 79 | + '--color-text-lighter' => $colorMainText, |
|
| 80 | 80 | |
| 81 | - '--color-scrollbar' => $this->util->lighten($colorMainBackground, 35), |
|
| 81 | + '--color-scrollbar' => $this->util->lighten($colorMainBackground, 35), |
|
| 82 | 82 | |
| 83 | - // used for the icon loading animation |
|
| 84 | - '--color-loading-light' => '#000000', |
|
| 85 | - '--color-loading-dark' => '#dddddd', |
|
| 83 | + // used for the icon loading animation |
|
| 84 | + '--color-loading-light' => '#000000', |
|
| 85 | + '--color-loading-dark' => '#dddddd', |
|
| 86 | 86 | |
| 87 | - '--color-box-shadow-rgb' => $colorMainText, |
|
| 88 | - '--color-box-shadow' => $colorMainText, |
|
| 87 | + '--color-box-shadow-rgb' => $colorMainText, |
|
| 88 | + '--color-box-shadow' => $colorMainText, |
|
| 89 | 89 | |
| 90 | - '--color-border' => $this->util->lighten($colorMainBackground, 50), |
|
| 91 | - '--color-border-dark' => $this->util->lighten($colorMainBackground, 50), |
|
| 92 | - ] |
|
| 93 | - ); |
|
| 94 | - } |
|
| 90 | + '--color-border' => $this->util->lighten($colorMainBackground, 50), |
|
| 91 | + '--color-border-dark' => $this->util->lighten($colorMainBackground, 50), |
|
| 92 | + ] |
|
| 93 | + ); |
|
| 94 | + } |
|
| 95 | 95 | |
| 96 | - public function getCustomCss(): string { |
|
| 97 | - return " |
|
| 96 | + public function getCustomCss(): string { |
|
| 97 | + return " |
|
| 98 | 98 | [class^='icon-'], [class*=' icon-'], |
| 99 | 99 | .action, |
| 100 | 100 | #appmenu li a, |
@@ -102,5 +102,5 @@ discard block |
||
| 102 | 102 | opacity: 1 !important; |
| 103 | 103 | } |
| 104 | 104 | "; |
| 105 | - } |
|
| 105 | + } |
|
| 106 | 106 | } |
@@ -28,73 +28,73 @@ discard block |
||
| 28 | 28 | |
| 29 | 29 | class HighContrastTheme extends DefaultTheme implements ITheme { |
| 30 | 30 | |
| 31 | - public function getId(): string { |
|
| 32 | - return 'highcontrast'; |
|
| 33 | - } |
|
| 31 | + public function getId(): string { |
|
| 32 | + return 'highcontrast'; |
|
| 33 | + } |
|
| 34 | 34 | |
| 35 | - public function getMediaQuery(): string { |
|
| 36 | - return '(prefers-contrast: more)'; |
|
| 37 | - } |
|
| 35 | + public function getMediaQuery(): string { |
|
| 36 | + return '(prefers-contrast: more)'; |
|
| 37 | + } |
|
| 38 | 38 | |
| 39 | - public function getTitle(): string { |
|
| 40 | - return $this->l->t('High contrast mode'); |
|
| 41 | - } |
|
| 39 | + public function getTitle(): string { |
|
| 40 | + return $this->l->t('High contrast mode'); |
|
| 41 | + } |
|
| 42 | 42 | |
| 43 | - public function getEnableLabel(): string { |
|
| 44 | - return $this->l->t('Enable high contrast mode'); |
|
| 45 | - } |
|
| 43 | + public function getEnableLabel(): string { |
|
| 44 | + return $this->l->t('Enable high contrast mode'); |
|
| 45 | + } |
|
| 46 | 46 | |
| 47 | - public function getDescription(): string { |
|
| 48 | - return $this->l->t('A high contrast mode to ease your navigation. Visual quality will be reduced but clarity will be increased.'); |
|
| 49 | - } |
|
| 47 | + public function getDescription(): string { |
|
| 48 | + return $this->l->t('A high contrast mode to ease your navigation. Visual quality will be reduced but clarity will be increased.'); |
|
| 49 | + } |
|
| 50 | 50 | |
| 51 | - /** |
|
| 52 | - * Keep this consistent with other HighContrast Themes |
|
| 53 | - */ |
|
| 54 | - public function getCSSVariables(): array { |
|
| 55 | - $defaultVariables = parent::getCSSVariables(); |
|
| 51 | + /** |
|
| 52 | + * Keep this consistent with other HighContrast Themes |
|
| 53 | + */ |
|
| 54 | + public function getCSSVariables(): array { |
|
| 55 | + $defaultVariables = parent::getCSSVariables(); |
|
| 56 | 56 | |
| 57 | - $colorMainText = '#000000'; |
|
| 58 | - $colorMainBackground = '#ffffff'; |
|
| 57 | + $colorMainText = '#000000'; |
|
| 58 | + $colorMainBackground = '#ffffff'; |
|
| 59 | 59 | |
| 60 | - return array_merge( |
|
| 61 | - $defaultVariables, |
|
| 62 | - $this->generatePrimaryVariables($colorMainBackground, $colorMainText), |
|
| 63 | - [ |
|
| 64 | - '--color-main-background' => $colorMainBackground, |
|
| 65 | - '--color-main-background-translucent' => 'rgba(var(--color-main-background-rgb), .1)', |
|
| 66 | - '--color-main-text' => $colorMainText, |
|
| 60 | + return array_merge( |
|
| 61 | + $defaultVariables, |
|
| 62 | + $this->generatePrimaryVariables($colorMainBackground, $colorMainText), |
|
| 63 | + [ |
|
| 64 | + '--color-main-background' => $colorMainBackground, |
|
| 65 | + '--color-main-background-translucent' => 'rgba(var(--color-main-background-rgb), .1)', |
|
| 66 | + '--color-main-text' => $colorMainText, |
|
| 67 | 67 | |
| 68 | - '--color-background-dark' => $this->util->darken($colorMainBackground, 30), |
|
| 69 | - '--color-background-darker' => $this->util->darken($colorMainBackground, 30), |
|
| 68 | + '--color-background-dark' => $this->util->darken($colorMainBackground, 30), |
|
| 69 | + '--color-background-darker' => $this->util->darken($colorMainBackground, 30), |
|
| 70 | 70 | |
| 71 | - '--color-main-background-blur' => $colorMainBackground, |
|
| 72 | - '--filter-background-blur' => 'none', |
|
| 71 | + '--color-main-background-blur' => $colorMainBackground, |
|
| 72 | + '--filter-background-blur' => 'none', |
|
| 73 | 73 | |
| 74 | - '--color-placeholder-light' => $this->util->darken($colorMainBackground, 30), |
|
| 75 | - '--color-placeholder-dark' => $this->util->darken($colorMainBackground, 45), |
|
| 74 | + '--color-placeholder-light' => $this->util->darken($colorMainBackground, 30), |
|
| 75 | + '--color-placeholder-dark' => $this->util->darken($colorMainBackground, 45), |
|
| 76 | 76 | |
| 77 | - '--color-text-maxcontrast' => $colorMainText, |
|
| 78 | - '--color-text-light' => $colorMainText, |
|
| 79 | - '--color-text-lighter' => $colorMainText, |
|
| 77 | + '--color-text-maxcontrast' => $colorMainText, |
|
| 78 | + '--color-text-light' => $colorMainText, |
|
| 79 | + '--color-text-lighter' => $colorMainText, |
|
| 80 | 80 | |
| 81 | - '--color-scrollbar' => $this->util->darken($colorMainBackground, 25), |
|
| 81 | + '--color-scrollbar' => $this->util->darken($colorMainBackground, 25), |
|
| 82 | 82 | |
| 83 | - // used for the icon loading animation |
|
| 84 | - '--color-loading-light' => '#dddddd', |
|
| 85 | - '--color-loading-dark' => '#000000', |
|
| 83 | + // used for the icon loading animation |
|
| 84 | + '--color-loading-light' => '#dddddd', |
|
| 85 | + '--color-loading-dark' => '#000000', |
|
| 86 | 86 | |
| 87 | - '--color-box-shadow-rgb' => $colorMainText, |
|
| 88 | - '--color-box-shadow' => $colorMainText, |
|
| 87 | + '--color-box-shadow-rgb' => $colorMainText, |
|
| 88 | + '--color-box-shadow' => $colorMainText, |
|
| 89 | 89 | |
| 90 | - '--color-border' => $this->util->darken($colorMainBackground, 50), |
|
| 91 | - '--color-border-dark' => $this->util->darken($colorMainBackground, 50), |
|
| 92 | - ] |
|
| 93 | - ); |
|
| 94 | - } |
|
| 90 | + '--color-border' => $this->util->darken($colorMainBackground, 50), |
|
| 91 | + '--color-border-dark' => $this->util->darken($colorMainBackground, 50), |
|
| 92 | + ] |
|
| 93 | + ); |
|
| 94 | + } |
|
| 95 | 95 | |
| 96 | - public function getCustomCss(): string { |
|
| 97 | - return " |
|
| 96 | + public function getCustomCss(): string { |
|
| 97 | + return " |
|
| 98 | 98 | [class^='icon-'], [class*=' icon-'], |
| 99 | 99 | .action, |
| 100 | 100 | #appmenu li a, |
@@ -102,5 +102,5 @@ discard block |
||
| 102 | 102 | opacity: 1 !important; |
| 103 | 103 | } |
| 104 | 104 | "; |
| 105 | - } |
|
| 105 | + } |
|
| 106 | 106 | } |
@@ -28,70 +28,70 @@ |
||
| 28 | 28 | |
| 29 | 29 | class DarkTheme extends DefaultTheme implements ITheme { |
| 30 | 30 | |
| 31 | - public function getId(): string { |
|
| 32 | - return 'dark'; |
|
| 33 | - } |
|
| 31 | + public function getId(): string { |
|
| 32 | + return 'dark'; |
|
| 33 | + } |
|
| 34 | 34 | |
| 35 | - public function getMediaQuery(): string { |
|
| 36 | - return '(prefers-color-scheme: dark)'; |
|
| 37 | - } |
|
| 35 | + public function getMediaQuery(): string { |
|
| 36 | + return '(prefers-color-scheme: dark)'; |
|
| 37 | + } |
|
| 38 | 38 | |
| 39 | - public function getTitle(): string { |
|
| 40 | - return $this->l->t('Dark theme'); |
|
| 41 | - } |
|
| 39 | + public function getTitle(): string { |
|
| 40 | + return $this->l->t('Dark theme'); |
|
| 41 | + } |
|
| 42 | 42 | |
| 43 | - public function getEnableLabel(): string { |
|
| 44 | - return $this->l->t('Enable dark theme'); |
|
| 45 | - } |
|
| 43 | + public function getEnableLabel(): string { |
|
| 44 | + return $this->l->t('Enable dark theme'); |
|
| 45 | + } |
|
| 46 | 46 | |
| 47 | - public function getDescription(): string { |
|
| 48 | - return $this->l->t('A dark theme to ease your eyes by reducing the overall luminosity and brightness.'); |
|
| 49 | - } |
|
| 47 | + public function getDescription(): string { |
|
| 48 | + return $this->l->t('A dark theme to ease your eyes by reducing the overall luminosity and brightness.'); |
|
| 49 | + } |
|
| 50 | 50 | |
| 51 | - public function getCSSVariables(): array { |
|
| 52 | - $defaultVariables = parent::getCSSVariables(); |
|
| 51 | + public function getCSSVariables(): array { |
|
| 52 | + $defaultVariables = parent::getCSSVariables(); |
|
| 53 | 53 | |
| 54 | - $colorMainText = '#D8D8D8'; |
|
| 55 | - $colorMainBackground = '#171717'; |
|
| 56 | - $colorMainBackgroundRGB = join(',', $this->util->hexToRGB($colorMainBackground)); |
|
| 54 | + $colorMainText = '#D8D8D8'; |
|
| 55 | + $colorMainBackground = '#171717'; |
|
| 56 | + $colorMainBackgroundRGB = join(',', $this->util->hexToRGB($colorMainBackground)); |
|
| 57 | 57 | |
| 58 | - $colorBoxShadow = $this->util->darken($colorMainBackground, 70); |
|
| 59 | - $colorBoxShadowRGB = join(',', $this->util->hexToRGB($colorBoxShadow)); |
|
| 58 | + $colorBoxShadow = $this->util->darken($colorMainBackground, 70); |
|
| 59 | + $colorBoxShadowRGB = join(',', $this->util->hexToRGB($colorBoxShadow)); |
|
| 60 | 60 | |
| 61 | - return array_merge( |
|
| 62 | - $defaultVariables, |
|
| 63 | - $this->generatePrimaryVariables($colorMainBackground, $colorMainText), |
|
| 64 | - [ |
|
| 65 | - '--color-main-text' => $colorMainText, |
|
| 66 | - '--color-main-background' => $colorMainBackground, |
|
| 67 | - '--color-main-background-rgb' => $colorMainBackgroundRGB, |
|
| 61 | + return array_merge( |
|
| 62 | + $defaultVariables, |
|
| 63 | + $this->generatePrimaryVariables($colorMainBackground, $colorMainText), |
|
| 64 | + [ |
|
| 65 | + '--color-main-text' => $colorMainText, |
|
| 66 | + '--color-main-background' => $colorMainBackground, |
|
| 67 | + '--color-main-background-rgb' => $colorMainBackgroundRGB, |
|
| 68 | 68 | |
| 69 | - '--color-scrollbar' => $this->util->lighten($colorMainBackground, 15), |
|
| 69 | + '--color-scrollbar' => $this->util->lighten($colorMainBackground, 15), |
|
| 70 | 70 | |
| 71 | - '--color-background-hover' => $this->util->lighten($colorMainBackground, 4), |
|
| 72 | - '--color-background-dark' => $this->util->lighten($colorMainBackground, 7), |
|
| 73 | - '--color-background-darker' => $this->util->lighten($colorMainBackground, 14), |
|
| 71 | + '--color-background-hover' => $this->util->lighten($colorMainBackground, 4), |
|
| 72 | + '--color-background-dark' => $this->util->lighten($colorMainBackground, 7), |
|
| 73 | + '--color-background-darker' => $this->util->lighten($colorMainBackground, 14), |
|
| 74 | 74 | |
| 75 | - '--color-placeholder-light' => $this->util->lighten($colorMainBackground, 10), |
|
| 76 | - '--color-placeholder-dark' => $this->util->lighten($colorMainBackground, 20), |
|
| 75 | + '--color-placeholder-light' => $this->util->lighten($colorMainBackground, 10), |
|
| 76 | + '--color-placeholder-dark' => $this->util->lighten($colorMainBackground, 20), |
|
| 77 | 77 | |
| 78 | - '--color-text-maxcontrast' => $this->util->darken($colorMainText, 30), |
|
| 79 | - '--color-text-light' => $this->util->darken($colorMainText, 10), |
|
| 80 | - '--color-text-lighter' => $this->util->darken($colorMainText, 20), |
|
| 78 | + '--color-text-maxcontrast' => $this->util->darken($colorMainText, 30), |
|
| 79 | + '--color-text-light' => $this->util->darken($colorMainText, 10), |
|
| 80 | + '--color-text-lighter' => $this->util->darken($colorMainText, 20), |
|
| 81 | 81 | |
| 82 | - // used for the icon loading animation |
|
| 83 | - '--color-loading-light' => '#777', |
|
| 84 | - '--color-loading-dark' => '#CCC', |
|
| 82 | + // used for the icon loading animation |
|
| 83 | + '--color-loading-light' => '#777', |
|
| 84 | + '--color-loading-dark' => '#CCC', |
|
| 85 | 85 | |
| 86 | - '--color-box-shadow' => $colorBoxShadow, |
|
| 87 | - '--color-box-shadow-rgb' => $colorBoxShadowRGB, |
|
| 86 | + '--color-box-shadow' => $colorBoxShadow, |
|
| 87 | + '--color-box-shadow-rgb' => $colorBoxShadowRGB, |
|
| 88 | 88 | |
| 89 | - '--color-border' => $this->util->lighten($colorMainBackground, 7), |
|
| 90 | - '--color-border-dark' => $this->util->lighten($colorMainBackground, 14), |
|
| 89 | + '--color-border' => $this->util->lighten($colorMainBackground, 7), |
|
| 90 | + '--color-border-dark' => $this->util->lighten($colorMainBackground, 14), |
|
| 91 | 91 | |
| 92 | - '--background-invert-if-dark' => 'invert(100%)', |
|
| 93 | - '--background-invert-if-bright' => 'no', |
|
| 94 | - ] |
|
| 95 | - ); |
|
| 96 | - } |
|
| 92 | + '--background-invert-if-dark' => 'invert(100%)', |
|
| 93 | + '--background-invert-if-bright' => 'no', |
|
| 94 | + ] |
|
| 95 | + ); |
|
| 96 | + } |
|
| 97 | 97 | } |
@@ -35,147 +35,147 @@ |
||
| 35 | 35 | use OCP\IUserSession; |
| 36 | 36 | |
| 37 | 37 | class ThemesService { |
| 38 | - private IUserSession $userSession; |
|
| 39 | - private IConfig $config; |
|
| 40 | - |
|
| 41 | - /** @var ITheme[] */ |
|
| 42 | - private array $themesProviders; |
|
| 43 | - |
|
| 44 | - public function __construct(IUserSession $userSession, |
|
| 45 | - IConfig $config, |
|
| 46 | - DefaultTheme $defaultTheme, |
|
| 47 | - LightTheme $lightTheme, |
|
| 48 | - DarkTheme $darkTheme, |
|
| 49 | - HighContrastTheme $highContrastTheme, |
|
| 50 | - DarkHighContrastTheme $darkHighContrastTheme, |
|
| 51 | - DyslexiaFont $dyslexiaFont) { |
|
| 52 | - $this->userSession = $userSession; |
|
| 53 | - $this->config = $config; |
|
| 54 | - |
|
| 55 | - // Register themes |
|
| 56 | - $this->themesProviders = [ |
|
| 57 | - $defaultTheme->getId() => $defaultTheme, |
|
| 58 | - $lightTheme->getId() => $lightTheme, |
|
| 59 | - $darkTheme->getId() => $darkTheme, |
|
| 60 | - $highContrastTheme->getId() => $highContrastTheme, |
|
| 61 | - $darkHighContrastTheme->getId() => $darkHighContrastTheme, |
|
| 62 | - $dyslexiaFont->getId() => $dyslexiaFont, |
|
| 63 | - ]; |
|
| 64 | - } |
|
| 65 | - |
|
| 66 | - /** |
|
| 67 | - * Get the list of all registered themes |
|
| 68 | - * |
|
| 69 | - * @return ITheme[] |
|
| 70 | - */ |
|
| 71 | - public function getThemes(): array { |
|
| 72 | - return $this->themesProviders; |
|
| 73 | - } |
|
| 74 | - |
|
| 75 | - /** |
|
| 76 | - * Enable a theme for the logged-in user |
|
| 77 | - * |
|
| 78 | - * @param ITheme $theme the theme to enable |
|
| 79 | - * @return string[] the enabled themes |
|
| 80 | - */ |
|
| 81 | - public function enableTheme(ITheme $theme): array { |
|
| 82 | - $themesIds = $this->getEnabledThemes(); |
|
| 83 | - |
|
| 84 | - // If already enabled, ignore |
|
| 85 | - if (in_array($theme->getId(), $themesIds)) { |
|
| 86 | - return $themesIds; |
|
| 87 | - } |
|
| 88 | - |
|
| 89 | - /** @var ITheme[] */ |
|
| 90 | - $themes = array_filter(array_map(function($themeId) { |
|
| 91 | - return $this->getThemes()[$themeId]; |
|
| 92 | - }, $themesIds)); |
|
| 93 | - |
|
| 94 | - // Filtering all themes with the same type |
|
| 95 | - $filteredThemes = array_filter($themes, function(ITheme $t) use ($theme) { |
|
| 96 | - return $theme->getType() === $t->getType(); |
|
| 97 | - }); |
|
| 98 | - |
|
| 99 | - // Retrieve IDs only |
|
| 100 | - /** @var string[] */ |
|
| 101 | - $filteredThemesIds = array_map(function(ITheme $t) { |
|
| 102 | - return $t->getId(); |
|
| 103 | - }, array_values($filteredThemes)); |
|
| 104 | - |
|
| 105 | - $enabledThemes = array_merge(array_diff($themesIds, $filteredThemesIds), [$theme->getId()]); |
|
| 106 | - $this->setEnabledThemes($enabledThemes); |
|
| 107 | - |
|
| 108 | - return $enabledThemes; |
|
| 109 | - } |
|
| 110 | - |
|
| 111 | - /** |
|
| 112 | - * Disable a theme for the logged-in user |
|
| 113 | - * |
|
| 114 | - * @param ITheme $theme the theme to disable |
|
| 115 | - * @return string[] the enabled themes |
|
| 116 | - */ |
|
| 117 | - public function disableTheme(ITheme $theme): array { |
|
| 118 | - $themesIds = $this->getEnabledThemes(); |
|
| 119 | - |
|
| 120 | - // If enabled, removing it |
|
| 121 | - if (in_array($theme->getId(), $themesIds)) { |
|
| 122 | - $enabledThemes = array_diff($themesIds, [$theme->getId()]); |
|
| 123 | - $this->setEnabledThemes($enabledThemes); |
|
| 124 | - return $enabledThemes; |
|
| 125 | - } |
|
| 38 | + private IUserSession $userSession; |
|
| 39 | + private IConfig $config; |
|
| 40 | + |
|
| 41 | + /** @var ITheme[] */ |
|
| 42 | + private array $themesProviders; |
|
| 43 | + |
|
| 44 | + public function __construct(IUserSession $userSession, |
|
| 45 | + IConfig $config, |
|
| 46 | + DefaultTheme $defaultTheme, |
|
| 47 | + LightTheme $lightTheme, |
|
| 48 | + DarkTheme $darkTheme, |
|
| 49 | + HighContrastTheme $highContrastTheme, |
|
| 50 | + DarkHighContrastTheme $darkHighContrastTheme, |
|
| 51 | + DyslexiaFont $dyslexiaFont) { |
|
| 52 | + $this->userSession = $userSession; |
|
| 53 | + $this->config = $config; |
|
| 54 | + |
|
| 55 | + // Register themes |
|
| 56 | + $this->themesProviders = [ |
|
| 57 | + $defaultTheme->getId() => $defaultTheme, |
|
| 58 | + $lightTheme->getId() => $lightTheme, |
|
| 59 | + $darkTheme->getId() => $darkTheme, |
|
| 60 | + $highContrastTheme->getId() => $highContrastTheme, |
|
| 61 | + $darkHighContrastTheme->getId() => $darkHighContrastTheme, |
|
| 62 | + $dyslexiaFont->getId() => $dyslexiaFont, |
|
| 63 | + ]; |
|
| 64 | + } |
|
| 65 | + |
|
| 66 | + /** |
|
| 67 | + * Get the list of all registered themes |
|
| 68 | + * |
|
| 69 | + * @return ITheme[] |
|
| 70 | + */ |
|
| 71 | + public function getThemes(): array { |
|
| 72 | + return $this->themesProviders; |
|
| 73 | + } |
|
| 74 | + |
|
| 75 | + /** |
|
| 76 | + * Enable a theme for the logged-in user |
|
| 77 | + * |
|
| 78 | + * @param ITheme $theme the theme to enable |
|
| 79 | + * @return string[] the enabled themes |
|
| 80 | + */ |
|
| 81 | + public function enableTheme(ITheme $theme): array { |
|
| 82 | + $themesIds = $this->getEnabledThemes(); |
|
| 83 | + |
|
| 84 | + // If already enabled, ignore |
|
| 85 | + if (in_array($theme->getId(), $themesIds)) { |
|
| 86 | + return $themesIds; |
|
| 87 | + } |
|
| 88 | + |
|
| 89 | + /** @var ITheme[] */ |
|
| 90 | + $themes = array_filter(array_map(function($themeId) { |
|
| 91 | + return $this->getThemes()[$themeId]; |
|
| 92 | + }, $themesIds)); |
|
| 93 | + |
|
| 94 | + // Filtering all themes with the same type |
|
| 95 | + $filteredThemes = array_filter($themes, function(ITheme $t) use ($theme) { |
|
| 96 | + return $theme->getType() === $t->getType(); |
|
| 97 | + }); |
|
| 98 | + |
|
| 99 | + // Retrieve IDs only |
|
| 100 | + /** @var string[] */ |
|
| 101 | + $filteredThemesIds = array_map(function(ITheme $t) { |
|
| 102 | + return $t->getId(); |
|
| 103 | + }, array_values($filteredThemes)); |
|
| 104 | + |
|
| 105 | + $enabledThemes = array_merge(array_diff($themesIds, $filteredThemesIds), [$theme->getId()]); |
|
| 106 | + $this->setEnabledThemes($enabledThemes); |
|
| 107 | + |
|
| 108 | + return $enabledThemes; |
|
| 109 | + } |
|
| 110 | + |
|
| 111 | + /** |
|
| 112 | + * Disable a theme for the logged-in user |
|
| 113 | + * |
|
| 114 | + * @param ITheme $theme the theme to disable |
|
| 115 | + * @return string[] the enabled themes |
|
| 116 | + */ |
|
| 117 | + public function disableTheme(ITheme $theme): array { |
|
| 118 | + $themesIds = $this->getEnabledThemes(); |
|
| 119 | + |
|
| 120 | + // If enabled, removing it |
|
| 121 | + if (in_array($theme->getId(), $themesIds)) { |
|
| 122 | + $enabledThemes = array_diff($themesIds, [$theme->getId()]); |
|
| 123 | + $this->setEnabledThemes($enabledThemes); |
|
| 124 | + return $enabledThemes; |
|
| 125 | + } |
|
| 126 | 126 | |
| 127 | - return $themesIds; |
|
| 128 | - } |
|
| 129 | - |
|
| 130 | - /** |
|
| 131 | - * Check whether a theme is enabled or not |
|
| 132 | - * for the logged-in user |
|
| 133 | - * |
|
| 134 | - * @return bool |
|
| 135 | - */ |
|
| 136 | - public function isEnabled(ITheme $theme): bool { |
|
| 137 | - $user = $this->userSession->getUser(); |
|
| 138 | - if ($user instanceof IUser) { |
|
| 139 | - // Using keys as it's faster |
|
| 140 | - $themes = $this->getEnabledThemes(); |
|
| 141 | - return in_array($theme->getId(), $themes); |
|
| 142 | - } |
|
| 143 | - return false; |
|
| 144 | - } |
|
| 145 | - |
|
| 146 | - /** |
|
| 147 | - * Get the list of all enabled themes IDs |
|
| 148 | - * for the logged-in user |
|
| 149 | - * |
|
| 150 | - * @return string[] |
|
| 151 | - */ |
|
| 152 | - public function getEnabledThemes(): array { |
|
| 153 | - $user = $this->userSession->getUser(); |
|
| 154 | - if ($user === null) { |
|
| 155 | - return []; |
|
| 156 | - } |
|
| 157 | - |
|
| 158 | - $enforcedTheme = $this->config->getSystemValueString('enforce_theme', ''); |
|
| 159 | - $enabledThemes = json_decode($this->config->getUserValue($user->getUID(), Application::APP_ID, 'enabled-themes', '[]')); |
|
| 160 | - if ($enforcedTheme !== '') { |
|
| 161 | - return array_merge([$enforcedTheme], $enabledThemes); |
|
| 162 | - } |
|
| 163 | - |
|
| 164 | - try { |
|
| 165 | - return $enabledThemes; |
|
| 166 | - } catch (\Exception $e) { |
|
| 167 | - return []; |
|
| 168 | - } |
|
| 169 | - } |
|
| 170 | - |
|
| 171 | - /** |
|
| 172 | - * Set the list of enabled themes |
|
| 173 | - * for the logged-in user |
|
| 174 | - * |
|
| 175 | - * @param string[] $themes the list of enabled themes IDs |
|
| 176 | - */ |
|
| 177 | - private function setEnabledThemes(array $themes): void { |
|
| 178 | - $user = $this->userSession->getUser(); |
|
| 179 | - $this->config->setUserValue($user->getUID(), Application::APP_ID, 'enabled-themes', json_encode(array_values(array_unique($themes)))); |
|
| 180 | - } |
|
| 127 | + return $themesIds; |
|
| 128 | + } |
|
| 129 | + |
|
| 130 | + /** |
|
| 131 | + * Check whether a theme is enabled or not |
|
| 132 | + * for the logged-in user |
|
| 133 | + * |
|
| 134 | + * @return bool |
|
| 135 | + */ |
|
| 136 | + public function isEnabled(ITheme $theme): bool { |
|
| 137 | + $user = $this->userSession->getUser(); |
|
| 138 | + if ($user instanceof IUser) { |
|
| 139 | + // Using keys as it's faster |
|
| 140 | + $themes = $this->getEnabledThemes(); |
|
| 141 | + return in_array($theme->getId(), $themes); |
|
| 142 | + } |
|
| 143 | + return false; |
|
| 144 | + } |
|
| 145 | + |
|
| 146 | + /** |
|
| 147 | + * Get the list of all enabled themes IDs |
|
| 148 | + * for the logged-in user |
|
| 149 | + * |
|
| 150 | + * @return string[] |
|
| 151 | + */ |
|
| 152 | + public function getEnabledThemes(): array { |
|
| 153 | + $user = $this->userSession->getUser(); |
|
| 154 | + if ($user === null) { |
|
| 155 | + return []; |
|
| 156 | + } |
|
| 157 | + |
|
| 158 | + $enforcedTheme = $this->config->getSystemValueString('enforce_theme', ''); |
|
| 159 | + $enabledThemes = json_decode($this->config->getUserValue($user->getUID(), Application::APP_ID, 'enabled-themes', '[]')); |
|
| 160 | + if ($enforcedTheme !== '') { |
|
| 161 | + return array_merge([$enforcedTheme], $enabledThemes); |
|
| 162 | + } |
|
| 163 | + |
|
| 164 | + try { |
|
| 165 | + return $enabledThemes; |
|
| 166 | + } catch (\Exception $e) { |
|
| 167 | + return []; |
|
| 168 | + } |
|
| 169 | + } |
|
| 170 | + |
|
| 171 | + /** |
|
| 172 | + * Set the list of enabled themes |
|
| 173 | + * for the logged-in user |
|
| 174 | + * |
|
| 175 | + * @param string[] $themes the list of enabled themes IDs |
|
| 176 | + */ |
|
| 177 | + private function setEnabledThemes(array $themes): void { |
|
| 178 | + $user = $this->userSession->getUser(); |
|
| 179 | + $this->config->setUserValue($user->getUID(), Application::APP_ID, 'enabled-themes', json_encode(array_values(array_unique($themes)))); |
|
| 180 | + } |
|
| 181 | 181 | } |
