nextcloud /
server
@@ -28,65 +28,65 @@ |
||
| 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. It is still under development, so please report any issues you may find.'); |
|
| 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. It is still under development, so please report any issues you may find.'); |
|
| 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)); |
|
| 57 | - $colorBoxShadow = $this->util->darken($colorMainBackground, 70); |
|
| 58 | - $colorBoxShadowRGB = join(',', $this->util->hexToRGB($colorBoxShadow)); |
|
| 54 | + $colorMainText = '#D8D8D8'; |
|
| 55 | + $colorMainBackground = '#171717'; |
|
| 56 | + $colorMainBackgroundRGB = join(',', $this->util->hexToRGB($colorMainBackground)); |
|
| 57 | + $colorBoxShadow = $this->util->darken($colorMainBackground, 70); |
|
| 58 | + $colorBoxShadowRGB = join(',', $this->util->hexToRGB($colorBoxShadow)); |
|
| 59 | 59 | |
| 60 | - return array_merge($defaultVariables, [ |
|
| 61 | - '--color-main-text' => $colorMainText, |
|
| 62 | - '--color-main-background' => $colorMainBackground, |
|
| 63 | - '--color-main-background-rgb' => $colorMainBackgroundRGB, |
|
| 60 | + return array_merge($defaultVariables, [ |
|
| 61 | + '--color-main-text' => $colorMainText, |
|
| 62 | + '--color-main-background' => $colorMainBackground, |
|
| 63 | + '--color-main-background-rgb' => $colorMainBackgroundRGB, |
|
| 64 | 64 | |
| 65 | - '--color-background-hover' => $this->util->lighten($colorMainBackground, 4), |
|
| 66 | - '--color-background-dark' => $this->util->lighten($colorMainBackground, 7), |
|
| 67 | - '--color-background-darker' => $this->util->lighten($colorMainBackground, 14), |
|
| 65 | + '--color-background-hover' => $this->util->lighten($colorMainBackground, 4), |
|
| 66 | + '--color-background-dark' => $this->util->lighten($colorMainBackground, 7), |
|
| 67 | + '--color-background-darker' => $this->util->lighten($colorMainBackground, 14), |
|
| 68 | 68 | |
| 69 | - '--color-placeholder-light' => $this->util->lighten($colorMainBackground, 10), |
|
| 70 | - '--color-placeholder-dark' => $this->util->lighten($colorMainBackground, 20), |
|
| 69 | + '--color-placeholder-light' => $this->util->lighten($colorMainBackground, 10), |
|
| 70 | + '--color-placeholder-dark' => $this->util->lighten($colorMainBackground, 20), |
|
| 71 | 71 | |
| 72 | - '--color-primary-hover' => $this->util->mix($this->primaryColor, $colorMainBackground, 60), |
|
| 73 | - '--color-primary-light' => $this->util->mix($this->primaryColor, $colorMainBackground, -80), |
|
| 74 | - '--color-primary-element-hover' => $this->util->mix($this->util->elementColor($this->primaryColor), $colorMainBackground, 80), |
|
| 75 | - '--color-primary-element-lighter' => $this->util->mix($this->util->elementColor($this->primaryColor), $colorMainBackground, -70), |
|
| 72 | + '--color-primary-hover' => $this->util->mix($this->primaryColor, $colorMainBackground, 60), |
|
| 73 | + '--color-primary-light' => $this->util->mix($this->primaryColor, $colorMainBackground, -80), |
|
| 74 | + '--color-primary-element-hover' => $this->util->mix($this->util->elementColor($this->primaryColor), $colorMainBackground, 80), |
|
| 75 | + '--color-primary-element-lighter' => $this->util->mix($this->util->elementColor($this->primaryColor), $colorMainBackground, -70), |
|
| 76 | 76 | |
| 77 | - '--color-text-maxcontrast' => $this->util->darken($colorMainText, 30), |
|
| 78 | - '--color-text-light' => $this->util->darken($colorMainText, 10), |
|
| 79 | - '--color-text-lighter' => $this->util->darken($colorMainText, 20), |
|
| 77 | + '--color-text-maxcontrast' => $this->util->darken($colorMainText, 30), |
|
| 78 | + '--color-text-light' => $this->util->darken($colorMainText, 10), |
|
| 79 | + '--color-text-lighter' => $this->util->darken($colorMainText, 20), |
|
| 80 | 80 | |
| 81 | - '--color-loading-light' => '#777', |
|
| 82 | - '--color-loading-dark' => '#CCC', |
|
| 81 | + '--color-loading-light' => '#777', |
|
| 82 | + '--color-loading-dark' => '#CCC', |
|
| 83 | 83 | |
| 84 | - '--color-box-shadow-rgb' => $colorBoxShadowRGB, |
|
| 84 | + '--color-box-shadow-rgb' => $colorBoxShadowRGB, |
|
| 85 | 85 | |
| 86 | - '--color-border' => $this->util->lighten($colorMainBackground, 7), |
|
| 87 | - '--color-border-dark' => $this->util->lighten($colorMainBackground, 14), |
|
| 86 | + '--color-border' => $this->util->lighten($colorMainBackground, 7), |
|
| 87 | + '--color-border-dark' => $this->util->lighten($colorMainBackground, 14), |
|
| 88 | 88 | |
| 89 | - '--background-invert-if-dark' => 'invert(100%)', |
|
| 90 | - ]); |
|
| 91 | - } |
|
| 89 | + '--background-invert-if-dark' => 'invert(100%)', |
|
| 90 | + ]); |
|
| 91 | + } |
|
| 92 | 92 | } |
@@ -33,171 +33,171 @@ |
||
| 33 | 33 | use OCP\IURLGenerator; |
| 34 | 34 | |
| 35 | 35 | class DefaultTheme implements ITheme { |
| 36 | - public Util $util; |
|
| 37 | - public ThemingDefaults $themingDefaults; |
|
| 38 | - public IURLGenerator $urlGenerator; |
|
| 39 | - public ImageManager $imageManager; |
|
| 40 | - public IConfig $config; |
|
| 41 | - public IL10N $l; |
|
| 42 | - |
|
| 43 | - public string $primaryColor; |
|
| 44 | - |
|
| 45 | - public function __construct(Util $util, |
|
| 46 | - ThemingDefaults $themingDefaults, |
|
| 47 | - IURLGenerator $urlGenerator, |
|
| 48 | - ImageManager $imageManager, |
|
| 49 | - IConfig $config, |
|
| 50 | - IL10N $l) { |
|
| 51 | - $this->util = $util; |
|
| 52 | - $this->themingDefaults = $themingDefaults; |
|
| 53 | - $this->urlGenerator = $urlGenerator; |
|
| 54 | - $this->imageManager = $imageManager; |
|
| 55 | - $this->config = $config; |
|
| 56 | - $this->l = $l; |
|
| 57 | - |
|
| 58 | - $this->primaryColor = $this->themingDefaults->getColorPrimary(); |
|
| 59 | - } |
|
| 60 | - |
|
| 61 | - public function getId(): string { |
|
| 62 | - return 'default'; |
|
| 63 | - } |
|
| 64 | - |
|
| 65 | - public function getType(): int { |
|
| 66 | - return ITheme::TYPE_THEME; |
|
| 67 | - } |
|
| 68 | - |
|
| 69 | - public function getTitle(): string { |
|
| 70 | - return $this->l->t('Light theme'); |
|
| 71 | - } |
|
| 72 | - |
|
| 73 | - public function getEnableLabel(): string { |
|
| 74 | - return $this->l->t('Enable the default light theme'); |
|
| 75 | - } |
|
| 76 | - |
|
| 77 | - public function getDescription(): string { |
|
| 78 | - return $this->l->t('The default light appearance.'); |
|
| 79 | - } |
|
| 80 | - |
|
| 81 | - public function getMediaQuery(): string { |
|
| 82 | - return ''; |
|
| 83 | - } |
|
| 84 | - |
|
| 85 | - public function getCSSVariables(): array { |
|
| 86 | - $colorMainText = '#222222'; |
|
| 87 | - $colorMainBackground = '#ffffff'; |
|
| 88 | - $colorMainBackgroundRGB = join(',', $this->util->hexToRGB($colorMainBackground)); |
|
| 89 | - $colorBoxShadow = $this->util->darken($colorMainBackground, 70); |
|
| 90 | - $colorBoxShadowRGB = join(',', $this->util->hexToRGB($colorBoxShadow)); |
|
| 91 | - |
|
| 92 | - $variables = [ |
|
| 93 | - '--color-main-background' => $colorMainBackground, |
|
| 94 | - '--color-main-background-rgb' => $colorMainBackgroundRGB, |
|
| 95 | - '--color-main-background-translucent' => 'rgba(var(--color-main-background-rgb), .97)', |
|
| 96 | - |
|
| 97 | - // to use like this: background-image: linear-gradient(0, var('--gradient-main-background)); |
|
| 98 | - '--gradient-main-background' => 'var(--color-main-background) 0%, var(--color-main-background-translucent) 85%, transparent 100%', |
|
| 99 | - |
|
| 100 | - // used for different active/hover/focus/disabled states |
|
| 101 | - '--color-background-hover' => $this->util->darken($colorMainBackground, 4), |
|
| 102 | - '--color-background-dark' => $this->util->darken($colorMainBackground, 7), |
|
| 103 | - '--color-background-darker' => $this->util->darken($colorMainBackground, 14), |
|
| 104 | - |
|
| 105 | - '--color-placeholder-light' => $this->util->darken($colorMainBackground, 10), |
|
| 106 | - '--color-placeholder-dark' => $this->util->darken($colorMainBackground, 20), |
|
| 107 | - |
|
| 108 | - // primary related colours |
|
| 109 | - '--color-primary' => $this->primaryColor, |
|
| 110 | - '--color-primary-text' => $this->util->invertTextColor($this->primaryColor) ? '#000000' : '#ffffff', |
|
| 111 | - '--color-primary-hover' => $this->util->mix($this->primaryColor, $colorMainBackground, 60), |
|
| 112 | - '--color-primary-light' => $this->util->mix($this->primaryColor, $colorMainBackground, -80), |
|
| 113 | - '--color-primary-light-text' => $this->primaryColor, |
|
| 114 | - '--color-primary-light-hover' => $this->util->mix($this->primaryColor, $colorMainText, -80), |
|
| 115 | - '--color-primary-text-dark' => $this->util->darken($this->util->invertTextColor($this->primaryColor) ? '#000000' : '#ffffff', 7), |
|
| 116 | - // used for buttons, inputs... |
|
| 117 | - '--color-primary-element' => $this->util->elementColor($this->primaryColor), |
|
| 118 | - '--color-primary-element-hover' => $this->util->mix($this->util->elementColor($this->primaryColor), $colorMainBackground, 80), |
|
| 119 | - '--color-primary-element-light' => $this->util->lighten($this->util->elementColor($this->primaryColor), 15), |
|
| 120 | - '--color-primary-element-lighter' => $this->util->mix($this->util->elementColor($this->primaryColor), $colorMainBackground, -70), |
|
| 121 | - |
|
| 122 | - // max contrast for WCAG compliance |
|
| 123 | - '--color-main-text' => $colorMainText, |
|
| 124 | - '--color-text-maxcontrast' => $this->util->lighten($colorMainText, 33), |
|
| 125 | - '--color-text-light' => $colorMainText, |
|
| 126 | - '--color-text-lighter' => $this->util->lighten($colorMainText, 33), |
|
| 127 | - |
|
| 128 | - // info/warning/success feedback colours |
|
| 129 | - '--color-error' => '#e9322d', |
|
| 130 | - '--color-error-hover' => $this->util->mix('#e9322d', $colorMainBackground, 60), |
|
| 131 | - '--color-warning' => '#eca700', |
|
| 132 | - '--color-warning-hover' => $this->util->mix('#eca700', $colorMainBackground, 60), |
|
| 133 | - '--color-success' => '#46ba61', |
|
| 134 | - '--color-success-hover' => $this->util->mix('#46ba61', $colorMainBackground, 60), |
|
| 135 | - |
|
| 136 | - // used for the icon loading animation |
|
| 137 | - '--color-loading-light' => '#cccccc', |
|
| 138 | - '--color-loading-dark' => '#444444', |
|
| 139 | - |
|
| 140 | - '--color-box-shadow-rgb' => $colorBoxShadowRGB, |
|
| 141 | - '--color-box-shadow' => "rgba(var(--color-box-shadow-rgb), 0.5)", |
|
| 142 | - |
|
| 143 | - '--color-border' => $this->util->darken($colorMainBackground, 7), |
|
| 144 | - '--color-border-dark' => $this->util->darken($colorMainBackground, 14), |
|
| 145 | - |
|
| 146 | - '--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'", |
|
| 147 | - '--default-font-size' => '15px', |
|
| 148 | - |
|
| 149 | - // TODO: support "(prefers-reduced-motion)" |
|
| 150 | - '--animation-quick' => '100ms', |
|
| 151 | - '--animation-slow' => '300ms', |
|
| 152 | - |
|
| 153 | - // Default variables -------------------------------------------- |
|
| 154 | - '--border-radius' => '3px', |
|
| 155 | - '--border-radius-large' => '10px', |
|
| 156 | - // pill-style button, value is large so big buttons also have correct roundness |
|
| 157 | - '--border-radius-pill' => '100px', |
|
| 158 | - |
|
| 159 | - '--default-line-height' => '24px', |
|
| 160 | - |
|
| 161 | - // various structure data |
|
| 162 | - '--header-height' => '50px', |
|
| 163 | - '--navigation-width' => '300px', |
|
| 164 | - '--sidebar-min-width' => '300px', |
|
| 165 | - '--sidebar-max-width' => '500px', |
|
| 166 | - '--list-min-width' => '200px', |
|
| 167 | - '--list-max-width' => '300px', |
|
| 168 | - '--header-menu-item-height' => '44px', |
|
| 169 | - '--header-menu-profile-item-height' => '66px', |
|
| 170 | - |
|
| 171 | - // mobile. Keep in sync with core/js/js.js |
|
| 172 | - '--breakpoint-mobile' => '1024px', |
|
| 173 | - |
|
| 174 | - // invert filter if primary is too bright |
|
| 175 | - // to be used for legacy reasons only. Use inline |
|
| 176 | - // svg with proper css variable instead or material |
|
| 177 | - // design icons. |
|
| 178 | - '--primary-invert-if-bright' => $this->util->invertTextColor($this->primaryColor) ? 'invert(100%)' : 'unset', |
|
| 179 | - '--background-invert-if-dark' => 'unset', |
|
| 180 | - ]; |
|
| 181 | - |
|
| 182 | - // Register image variables only if custom-defined |
|
| 183 | - $backgroundDeleted = $this->config->getAppValue('theming', 'backgroundMime', '') === 'backgroundColor'; |
|
| 184 | - foreach(['logo', 'logoheader', 'favicon', 'background'] as $image) { |
|
| 185 | - if ($this->imageManager->hasImage($image)) { |
|
| 186 | - // If primary as background has been request, let's not define the background image |
|
| 187 | - if ($image === 'background' && $backgroundDeleted) { |
|
| 188 | - $variables["--image-background-plain"] = true; |
|
| 189 | - continue; |
|
| 190 | - } else if ($image === 'background') { |
|
| 191 | - $variables['--image-background-size'] = 'cover'; |
|
| 192 | - } |
|
| 193 | - $variables["--image-$image"] = "url('".$this->imageManager->getImageUrl($image)."')"; |
|
| 194 | - } |
|
| 195 | - } |
|
| 196 | - |
|
| 197 | - return $variables; |
|
| 198 | - } |
|
| 199 | - |
|
| 200 | - public function getCustomCss(): string { |
|
| 201 | - return ''; |
|
| 202 | - } |
|
| 36 | + public Util $util; |
|
| 37 | + public ThemingDefaults $themingDefaults; |
|
| 38 | + public IURLGenerator $urlGenerator; |
|
| 39 | + public ImageManager $imageManager; |
|
| 40 | + public IConfig $config; |
|
| 41 | + public IL10N $l; |
|
| 42 | + |
|
| 43 | + public string $primaryColor; |
|
| 44 | + |
|
| 45 | + public function __construct(Util $util, |
|
| 46 | + ThemingDefaults $themingDefaults, |
|
| 47 | + IURLGenerator $urlGenerator, |
|
| 48 | + ImageManager $imageManager, |
|
| 49 | + IConfig $config, |
|
| 50 | + IL10N $l) { |
|
| 51 | + $this->util = $util; |
|
| 52 | + $this->themingDefaults = $themingDefaults; |
|
| 53 | + $this->urlGenerator = $urlGenerator; |
|
| 54 | + $this->imageManager = $imageManager; |
|
| 55 | + $this->config = $config; |
|
| 56 | + $this->l = $l; |
|
| 57 | + |
|
| 58 | + $this->primaryColor = $this->themingDefaults->getColorPrimary(); |
|
| 59 | + } |
|
| 60 | + |
|
| 61 | + public function getId(): string { |
|
| 62 | + return 'default'; |
|
| 63 | + } |
|
| 64 | + |
|
| 65 | + public function getType(): int { |
|
| 66 | + return ITheme::TYPE_THEME; |
|
| 67 | + } |
|
| 68 | + |
|
| 69 | + public function getTitle(): string { |
|
| 70 | + return $this->l->t('Light theme'); |
|
| 71 | + } |
|
| 72 | + |
|
| 73 | + public function getEnableLabel(): string { |
|
| 74 | + return $this->l->t('Enable the default light theme'); |
|
| 75 | + } |
|
| 76 | + |
|
| 77 | + public function getDescription(): string { |
|
| 78 | + return $this->l->t('The default light appearance.'); |
|
| 79 | + } |
|
| 80 | + |
|
| 81 | + public function getMediaQuery(): string { |
|
| 82 | + return ''; |
|
| 83 | + } |
|
| 84 | + |
|
| 85 | + public function getCSSVariables(): array { |
|
| 86 | + $colorMainText = '#222222'; |
|
| 87 | + $colorMainBackground = '#ffffff'; |
|
| 88 | + $colorMainBackgroundRGB = join(',', $this->util->hexToRGB($colorMainBackground)); |
|
| 89 | + $colorBoxShadow = $this->util->darken($colorMainBackground, 70); |
|
| 90 | + $colorBoxShadowRGB = join(',', $this->util->hexToRGB($colorBoxShadow)); |
|
| 91 | + |
|
| 92 | + $variables = [ |
|
| 93 | + '--color-main-background' => $colorMainBackground, |
|
| 94 | + '--color-main-background-rgb' => $colorMainBackgroundRGB, |
|
| 95 | + '--color-main-background-translucent' => 'rgba(var(--color-main-background-rgb), .97)', |
|
| 96 | + |
|
| 97 | + // to use like this: background-image: linear-gradient(0, var('--gradient-main-background)); |
|
| 98 | + '--gradient-main-background' => 'var(--color-main-background) 0%, var(--color-main-background-translucent) 85%, transparent 100%', |
|
| 99 | + |
|
| 100 | + // used for different active/hover/focus/disabled states |
|
| 101 | + '--color-background-hover' => $this->util->darken($colorMainBackground, 4), |
|
| 102 | + '--color-background-dark' => $this->util->darken($colorMainBackground, 7), |
|
| 103 | + '--color-background-darker' => $this->util->darken($colorMainBackground, 14), |
|
| 104 | + |
|
| 105 | + '--color-placeholder-light' => $this->util->darken($colorMainBackground, 10), |
|
| 106 | + '--color-placeholder-dark' => $this->util->darken($colorMainBackground, 20), |
|
| 107 | + |
|
| 108 | + // primary related colours |
|
| 109 | + '--color-primary' => $this->primaryColor, |
|
| 110 | + '--color-primary-text' => $this->util->invertTextColor($this->primaryColor) ? '#000000' : '#ffffff', |
|
| 111 | + '--color-primary-hover' => $this->util->mix($this->primaryColor, $colorMainBackground, 60), |
|
| 112 | + '--color-primary-light' => $this->util->mix($this->primaryColor, $colorMainBackground, -80), |
|
| 113 | + '--color-primary-light-text' => $this->primaryColor, |
|
| 114 | + '--color-primary-light-hover' => $this->util->mix($this->primaryColor, $colorMainText, -80), |
|
| 115 | + '--color-primary-text-dark' => $this->util->darken($this->util->invertTextColor($this->primaryColor) ? '#000000' : '#ffffff', 7), |
|
| 116 | + // used for buttons, inputs... |
|
| 117 | + '--color-primary-element' => $this->util->elementColor($this->primaryColor), |
|
| 118 | + '--color-primary-element-hover' => $this->util->mix($this->util->elementColor($this->primaryColor), $colorMainBackground, 80), |
|
| 119 | + '--color-primary-element-light' => $this->util->lighten($this->util->elementColor($this->primaryColor), 15), |
|
| 120 | + '--color-primary-element-lighter' => $this->util->mix($this->util->elementColor($this->primaryColor), $colorMainBackground, -70), |
|
| 121 | + |
|
| 122 | + // max contrast for WCAG compliance |
|
| 123 | + '--color-main-text' => $colorMainText, |
|
| 124 | + '--color-text-maxcontrast' => $this->util->lighten($colorMainText, 33), |
|
| 125 | + '--color-text-light' => $colorMainText, |
|
| 126 | + '--color-text-lighter' => $this->util->lighten($colorMainText, 33), |
|
| 127 | + |
|
| 128 | + // info/warning/success feedback colours |
|
| 129 | + '--color-error' => '#e9322d', |
|
| 130 | + '--color-error-hover' => $this->util->mix('#e9322d', $colorMainBackground, 60), |
|
| 131 | + '--color-warning' => '#eca700', |
|
| 132 | + '--color-warning-hover' => $this->util->mix('#eca700', $colorMainBackground, 60), |
|
| 133 | + '--color-success' => '#46ba61', |
|
| 134 | + '--color-success-hover' => $this->util->mix('#46ba61', $colorMainBackground, 60), |
|
| 135 | + |
|
| 136 | + // used for the icon loading animation |
|
| 137 | + '--color-loading-light' => '#cccccc', |
|
| 138 | + '--color-loading-dark' => '#444444', |
|
| 139 | + |
|
| 140 | + '--color-box-shadow-rgb' => $colorBoxShadowRGB, |
|
| 141 | + '--color-box-shadow' => "rgba(var(--color-box-shadow-rgb), 0.5)", |
|
| 142 | + |
|
| 143 | + '--color-border' => $this->util->darken($colorMainBackground, 7), |
|
| 144 | + '--color-border-dark' => $this->util->darken($colorMainBackground, 14), |
|
| 145 | + |
|
| 146 | + '--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'", |
|
| 147 | + '--default-font-size' => '15px', |
|
| 148 | + |
|
| 149 | + // TODO: support "(prefers-reduced-motion)" |
|
| 150 | + '--animation-quick' => '100ms', |
|
| 151 | + '--animation-slow' => '300ms', |
|
| 152 | + |
|
| 153 | + // Default variables -------------------------------------------- |
|
| 154 | + '--border-radius' => '3px', |
|
| 155 | + '--border-radius-large' => '10px', |
|
| 156 | + // pill-style button, value is large so big buttons also have correct roundness |
|
| 157 | + '--border-radius-pill' => '100px', |
|
| 158 | + |
|
| 159 | + '--default-line-height' => '24px', |
|
| 160 | + |
|
| 161 | + // various structure data |
|
| 162 | + '--header-height' => '50px', |
|
| 163 | + '--navigation-width' => '300px', |
|
| 164 | + '--sidebar-min-width' => '300px', |
|
| 165 | + '--sidebar-max-width' => '500px', |
|
| 166 | + '--list-min-width' => '200px', |
|
| 167 | + '--list-max-width' => '300px', |
|
| 168 | + '--header-menu-item-height' => '44px', |
|
| 169 | + '--header-menu-profile-item-height' => '66px', |
|
| 170 | + |
|
| 171 | + // mobile. Keep in sync with core/js/js.js |
|
| 172 | + '--breakpoint-mobile' => '1024px', |
|
| 173 | + |
|
| 174 | + // invert filter if primary is too bright |
|
| 175 | + // to be used for legacy reasons only. Use inline |
|
| 176 | + // svg with proper css variable instead or material |
|
| 177 | + // design icons. |
|
| 178 | + '--primary-invert-if-bright' => $this->util->invertTextColor($this->primaryColor) ? 'invert(100%)' : 'unset', |
|
| 179 | + '--background-invert-if-dark' => 'unset', |
|
| 180 | + ]; |
|
| 181 | + |
|
| 182 | + // Register image variables only if custom-defined |
|
| 183 | + $backgroundDeleted = $this->config->getAppValue('theming', 'backgroundMime', '') === 'backgroundColor'; |
|
| 184 | + foreach(['logo', 'logoheader', 'favicon', 'background'] as $image) { |
|
| 185 | + if ($this->imageManager->hasImage($image)) { |
|
| 186 | + // If primary as background has been request, let's not define the background image |
|
| 187 | + if ($image === 'background' && $backgroundDeleted) { |
|
| 188 | + $variables["--image-background-plain"] = true; |
|
| 189 | + continue; |
|
| 190 | + } else if ($image === 'background') { |
|
| 191 | + $variables['--image-background-size'] = 'cover'; |
|
| 192 | + } |
|
| 193 | + $variables["--image-$image"] = "url('".$this->imageManager->getImageUrl($image)."')"; |
|
| 194 | + } |
|
| 195 | + } |
|
| 196 | + |
|
| 197 | + return $variables; |
|
| 198 | + } |
|
| 199 | + |
|
| 200 | + public function getCustomCss(): string { |
|
| 201 | + return ''; |
|
| 202 | + } |
|
| 203 | 203 | } |
