nextcloud /
server
@@ -28,76 +28,76 @@ discard block |
||
| 28 | 28 | |
| 29 | 29 | class DarkHighContrastTheme extends DarkTheme implements ITheme { |
| 30 | 30 | |
| 31 | - public function getId(): string { |
|
| 32 | - return 'dark-highcontrast'; |
|
| 33 | - } |
|
| 34 | - |
|
| 35 | - public function getMediaQuery(): string { |
|
| 36 | - return '(prefers-color-scheme: dark) and (prefers-contrast: more)'; |
|
| 37 | - } |
|
| 38 | - |
|
| 39 | - public function getTitle(): string { |
|
| 40 | - return $this->l->t('Dark theme with high contrast mode'); |
|
| 41 | - } |
|
| 42 | - |
|
| 43 | - public function getEnableLabel(): string { |
|
| 44 | - return $this->l->t('Enable dark high contrast mode'); |
|
| 45 | - } |
|
| 46 | - |
|
| 47 | - public function getDescription(): string { |
|
| 48 | - return $this->l->t('Similar to the high contrast mode, but with dark colours.'); |
|
| 49 | - } |
|
| 50 | - |
|
| 51 | - /** |
|
| 52 | - * Keep this consistent with other HighContrast Themes |
|
| 53 | - */ |
|
| 54 | - public function getCSSVariables(): array { |
|
| 55 | - $defaultVariables = parent::getCSSVariables(); |
|
| 56 | - |
|
| 57 | - $colorMainText = '#ffffff'; |
|
| 58 | - $colorMainBackground = '#000000'; |
|
| 59 | - $colorMainBackgroundRGB = join(',', $this->util->hexToRGB($colorMainBackground)); |
|
| 60 | - |
|
| 61 | - return array_merge( |
|
| 62 | - $defaultVariables, |
|
| 63 | - $this->generatePrimaryVariables($colorMainBackground, $colorMainText), |
|
| 64 | - [ |
|
| 65 | - '--color-main-background' => $colorMainBackground, |
|
| 66 | - '--color-main-background-rgb' => $colorMainBackgroundRGB, |
|
| 67 | - '--color-main-background-translucent' => 'rgba(var(--color-main-background-rgb), 1)', |
|
| 68 | - '--color-main-text' => $colorMainText, |
|
| 69 | - |
|
| 70 | - '--color-background-dark' => $this->util->lighten($colorMainBackground, 30), |
|
| 71 | - '--color-background-darker' => $this->util->lighten($colorMainBackground, 30), |
|
| 72 | - |
|
| 73 | - '--color-main-background-blur' => $colorMainBackground, |
|
| 74 | - '--filter-background-blur' => 'none', |
|
| 75 | - |
|
| 76 | - '--color-placeholder-light' => $this->util->lighten($colorMainBackground, 30), |
|
| 77 | - '--color-placeholder-dark' => $this->util->lighten($colorMainBackground, 45), |
|
| 78 | - |
|
| 79 | - '--color-text-maxcontrast' => $colorMainText, |
|
| 80 | - '--color-text-maxcontrast-background-blur' => $colorMainText, |
|
| 81 | - '--color-text-light' => $colorMainText, |
|
| 82 | - '--color-text-lighter' => $colorMainText, |
|
| 83 | - |
|
| 84 | - '--color-scrollbar' => $this->util->lighten($colorMainBackground, 35), |
|
| 85 | - |
|
| 86 | - // used for the icon loading animation |
|
| 87 | - '--color-loading-light' => '#000000', |
|
| 88 | - '--color-loading-dark' => '#dddddd', |
|
| 89 | - |
|
| 90 | - '--color-box-shadow-rgb' => $colorMainText, |
|
| 91 | - '--color-box-shadow' => $colorMainText, |
|
| 92 | - |
|
| 93 | - '--color-border' => $this->util->lighten($colorMainBackground, 50), |
|
| 94 | - '--color-border-dark' => $this->util->lighten($colorMainBackground, 50), |
|
| 95 | - ] |
|
| 96 | - ); |
|
| 97 | - } |
|
| 98 | - |
|
| 99 | - public function getCustomCss(): string { |
|
| 100 | - return " |
|
| 31 | + public function getId(): string { |
|
| 32 | + return 'dark-highcontrast'; |
|
| 33 | + } |
|
| 34 | + |
|
| 35 | + public function getMediaQuery(): string { |
|
| 36 | + return '(prefers-color-scheme: dark) and (prefers-contrast: more)'; |
|
| 37 | + } |
|
| 38 | + |
|
| 39 | + public function getTitle(): string { |
|
| 40 | + return $this->l->t('Dark theme with high contrast mode'); |
|
| 41 | + } |
|
| 42 | + |
|
| 43 | + public function getEnableLabel(): string { |
|
| 44 | + return $this->l->t('Enable dark high contrast mode'); |
|
| 45 | + } |
|
| 46 | + |
|
| 47 | + public function getDescription(): string { |
|
| 48 | + return $this->l->t('Similar to the high contrast mode, but with dark colours.'); |
|
| 49 | + } |
|
| 50 | + |
|
| 51 | + /** |
|
| 52 | + * Keep this consistent with other HighContrast Themes |
|
| 53 | + */ |
|
| 54 | + public function getCSSVariables(): array { |
|
| 55 | + $defaultVariables = parent::getCSSVariables(); |
|
| 56 | + |
|
| 57 | + $colorMainText = '#ffffff'; |
|
| 58 | + $colorMainBackground = '#000000'; |
|
| 59 | + $colorMainBackgroundRGB = join(',', $this->util->hexToRGB($colorMainBackground)); |
|
| 60 | + |
|
| 61 | + return array_merge( |
|
| 62 | + $defaultVariables, |
|
| 63 | + $this->generatePrimaryVariables($colorMainBackground, $colorMainText), |
|
| 64 | + [ |
|
| 65 | + '--color-main-background' => $colorMainBackground, |
|
| 66 | + '--color-main-background-rgb' => $colorMainBackgroundRGB, |
|
| 67 | + '--color-main-background-translucent' => 'rgba(var(--color-main-background-rgb), 1)', |
|
| 68 | + '--color-main-text' => $colorMainText, |
|
| 69 | + |
|
| 70 | + '--color-background-dark' => $this->util->lighten($colorMainBackground, 30), |
|
| 71 | + '--color-background-darker' => $this->util->lighten($colorMainBackground, 30), |
|
| 72 | + |
|
| 73 | + '--color-main-background-blur' => $colorMainBackground, |
|
| 74 | + '--filter-background-blur' => 'none', |
|
| 75 | + |
|
| 76 | + '--color-placeholder-light' => $this->util->lighten($colorMainBackground, 30), |
|
| 77 | + '--color-placeholder-dark' => $this->util->lighten($colorMainBackground, 45), |
|
| 78 | + |
|
| 79 | + '--color-text-maxcontrast' => $colorMainText, |
|
| 80 | + '--color-text-maxcontrast-background-blur' => $colorMainText, |
|
| 81 | + '--color-text-light' => $colorMainText, |
|
| 82 | + '--color-text-lighter' => $colorMainText, |
|
| 83 | + |
|
| 84 | + '--color-scrollbar' => $this->util->lighten($colorMainBackground, 35), |
|
| 85 | + |
|
| 86 | + // used for the icon loading animation |
|
| 87 | + '--color-loading-light' => '#000000', |
|
| 88 | + '--color-loading-dark' => '#dddddd', |
|
| 89 | + |
|
| 90 | + '--color-box-shadow-rgb' => $colorMainText, |
|
| 91 | + '--color-box-shadow' => $colorMainText, |
|
| 92 | + |
|
| 93 | + '--color-border' => $this->util->lighten($colorMainBackground, 50), |
|
| 94 | + '--color-border-dark' => $this->util->lighten($colorMainBackground, 50), |
|
| 95 | + ] |
|
| 96 | + ); |
|
| 97 | + } |
|
| 98 | + |
|
| 99 | + public function getCustomCss(): string { |
|
| 100 | + return " |
|
| 101 | 101 | [class^='icon-'], [class*=' icon-'], |
| 102 | 102 | .action, |
| 103 | 103 | #appmenu li a, |
@@ -111,5 +111,5 @@ discard block |
||
| 111 | 111 | filter: brightness(150%); |
| 112 | 112 | } |
| 113 | 113 | "; |
| 114 | - } |
|
| 114 | + } |
|
| 115 | 115 | } |
@@ -28,76 +28,76 @@ discard block |
||
| 28 | 28 | |
| 29 | 29 | class HighContrastTheme extends DefaultTheme implements ITheme { |
| 30 | 30 | |
| 31 | - public function getId(): string { |
|
| 32 | - return 'light-highcontrast'; |
|
| 33 | - } |
|
| 34 | - |
|
| 35 | - public function getMediaQuery(): string { |
|
| 36 | - return '(prefers-contrast: more)'; |
|
| 37 | - } |
|
| 38 | - |
|
| 39 | - public function getTitle(): string { |
|
| 40 | - return $this->l->t('High contrast mode'); |
|
| 41 | - } |
|
| 42 | - |
|
| 43 | - public function getEnableLabel(): string { |
|
| 44 | - return $this->l->t('Enable high contrast mode'); |
|
| 45 | - } |
|
| 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 | - } |
|
| 50 | - |
|
| 51 | - /** |
|
| 52 | - * Keep this consistent with other HighContrast Themes |
|
| 53 | - */ |
|
| 54 | - public function getCSSVariables(): array { |
|
| 55 | - $defaultVariables = parent::getCSSVariables(); |
|
| 56 | - |
|
| 57 | - $colorMainText = '#000000'; |
|
| 58 | - $colorMainBackground = '#ffffff'; |
|
| 59 | - $colorMainBackgroundRGB = join(',', $this->util->hexToRGB($colorMainBackground)); |
|
| 60 | - |
|
| 61 | - return array_merge( |
|
| 62 | - $defaultVariables, |
|
| 63 | - $this->generatePrimaryVariables($colorMainBackground, $colorMainText), |
|
| 64 | - [ |
|
| 65 | - '--color-main-background' => $colorMainBackground, |
|
| 66 | - '--color-main-background-rgb' => $colorMainBackgroundRGB, |
|
| 67 | - '--color-main-background-translucent' => 'rgba(var(--color-main-background-rgb), 1)', |
|
| 68 | - '--color-main-text' => $colorMainText, |
|
| 69 | - |
|
| 70 | - '--color-background-dark' => $this->util->darken($colorMainBackground, 30), |
|
| 71 | - '--color-background-darker' => $this->util->darken($colorMainBackground, 30), |
|
| 72 | - |
|
| 73 | - '--color-main-background-blur' => $colorMainBackground, |
|
| 74 | - '--filter-background-blur' => 'none', |
|
| 75 | - |
|
| 76 | - '--color-placeholder-light' => $this->util->darken($colorMainBackground, 30), |
|
| 77 | - '--color-placeholder-dark' => $this->util->darken($colorMainBackground, 45), |
|
| 78 | - |
|
| 79 | - '--color-text-maxcontrast' => $colorMainText, |
|
| 80 | - '--color-text-maxcontrast-background-blur' => $colorMainText, |
|
| 81 | - '--color-text-light' => $colorMainText, |
|
| 82 | - '--color-text-lighter' => $colorMainText, |
|
| 83 | - |
|
| 84 | - '--color-scrollbar' => $this->util->darken($colorMainBackground, 25), |
|
| 85 | - |
|
| 86 | - // used for the icon loading animation |
|
| 87 | - '--color-loading-light' => '#dddddd', |
|
| 88 | - '--color-loading-dark' => '#000000', |
|
| 89 | - |
|
| 90 | - '--color-box-shadow-rgb' => $colorMainText, |
|
| 91 | - '--color-box-shadow' => $colorMainText, |
|
| 92 | - |
|
| 93 | - '--color-border' => $this->util->darken($colorMainBackground, 50), |
|
| 94 | - '--color-border-dark' => $this->util->darken($colorMainBackground, 50), |
|
| 95 | - ] |
|
| 96 | - ); |
|
| 97 | - } |
|
| 98 | - |
|
| 99 | - public function getCustomCss(): string { |
|
| 100 | - return " |
|
| 31 | + public function getId(): string { |
|
| 32 | + return 'light-highcontrast'; |
|
| 33 | + } |
|
| 34 | + |
|
| 35 | + public function getMediaQuery(): string { |
|
| 36 | + return '(prefers-contrast: more)'; |
|
| 37 | + } |
|
| 38 | + |
|
| 39 | + public function getTitle(): string { |
|
| 40 | + return $this->l->t('High contrast mode'); |
|
| 41 | + } |
|
| 42 | + |
|
| 43 | + public function getEnableLabel(): string { |
|
| 44 | + return $this->l->t('Enable high contrast mode'); |
|
| 45 | + } |
|
| 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 | + } |
|
| 50 | + |
|
| 51 | + /** |
|
| 52 | + * Keep this consistent with other HighContrast Themes |
|
| 53 | + */ |
|
| 54 | + public function getCSSVariables(): array { |
|
| 55 | + $defaultVariables = parent::getCSSVariables(); |
|
| 56 | + |
|
| 57 | + $colorMainText = '#000000'; |
|
| 58 | + $colorMainBackground = '#ffffff'; |
|
| 59 | + $colorMainBackgroundRGB = join(',', $this->util->hexToRGB($colorMainBackground)); |
|
| 60 | + |
|
| 61 | + return array_merge( |
|
| 62 | + $defaultVariables, |
|
| 63 | + $this->generatePrimaryVariables($colorMainBackground, $colorMainText), |
|
| 64 | + [ |
|
| 65 | + '--color-main-background' => $colorMainBackground, |
|
| 66 | + '--color-main-background-rgb' => $colorMainBackgroundRGB, |
|
| 67 | + '--color-main-background-translucent' => 'rgba(var(--color-main-background-rgb), 1)', |
|
| 68 | + '--color-main-text' => $colorMainText, |
|
| 69 | + |
|
| 70 | + '--color-background-dark' => $this->util->darken($colorMainBackground, 30), |
|
| 71 | + '--color-background-darker' => $this->util->darken($colorMainBackground, 30), |
|
| 72 | + |
|
| 73 | + '--color-main-background-blur' => $colorMainBackground, |
|
| 74 | + '--filter-background-blur' => 'none', |
|
| 75 | + |
|
| 76 | + '--color-placeholder-light' => $this->util->darken($colorMainBackground, 30), |
|
| 77 | + '--color-placeholder-dark' => $this->util->darken($colorMainBackground, 45), |
|
| 78 | + |
|
| 79 | + '--color-text-maxcontrast' => $colorMainText, |
|
| 80 | + '--color-text-maxcontrast-background-blur' => $colorMainText, |
|
| 81 | + '--color-text-light' => $colorMainText, |
|
| 82 | + '--color-text-lighter' => $colorMainText, |
|
| 83 | + |
|
| 84 | + '--color-scrollbar' => $this->util->darken($colorMainBackground, 25), |
|
| 85 | + |
|
| 86 | + // used for the icon loading animation |
|
| 87 | + '--color-loading-light' => '#dddddd', |
|
| 88 | + '--color-loading-dark' => '#000000', |
|
| 89 | + |
|
| 90 | + '--color-box-shadow-rgb' => $colorMainText, |
|
| 91 | + '--color-box-shadow' => $colorMainText, |
|
| 92 | + |
|
| 93 | + '--color-border' => $this->util->darken($colorMainBackground, 50), |
|
| 94 | + '--color-border-dark' => $this->util->darken($colorMainBackground, 50), |
|
| 95 | + ] |
|
| 96 | + ); |
|
| 97 | + } |
|
| 98 | + |
|
| 99 | + public function getCustomCss(): string { |
|
| 100 | + return " |
|
| 101 | 101 | [class^='icon-'], [class*=' icon-'], |
| 102 | 102 | .action, |
| 103 | 103 | #appmenu li a, |
@@ -108,5 +108,5 @@ discard block |
||
| 108 | 108 | border-right: 1px solid var(--color-border); |
| 109 | 109 | } |
| 110 | 110 | "; |
| 111 | - } |
|
| 111 | + } |
|
| 112 | 112 | } |
