@@ -11,125 +11,125 @@ |
||
| 11 | 11 | |
| 12 | 12 | class DarkTheme extends DefaultTheme implements ITheme { |
| 13 | 13 | |
| 14 | - protected bool $isDarkVariant = true; |
|
| 15 | - |
|
| 16 | - public function getId(): string { |
|
| 17 | - return 'dark'; |
|
| 18 | - } |
|
| 19 | - |
|
| 20 | - public function getTitle(): string { |
|
| 21 | - return $this->l->t('Dark theme'); |
|
| 22 | - } |
|
| 23 | - |
|
| 24 | - public function getEnableLabel(): string { |
|
| 25 | - return $this->l->t('Enable dark theme'); |
|
| 26 | - } |
|
| 27 | - |
|
| 28 | - public function getDescription(): string { |
|
| 29 | - return $this->l->t('A dark theme to ease your eyes by reducing the overall luminosity and brightness.'); |
|
| 30 | - } |
|
| 31 | - |
|
| 32 | - public function getMediaQuery(): string { |
|
| 33 | - return '(prefers-color-scheme: dark)'; |
|
| 34 | - } |
|
| 35 | - |
|
| 36 | - public function getMeta(): array { |
|
| 37 | - // https://html.spec.whatwg.org/multipage/semantics.html#meta-color-scheme |
|
| 38 | - return [[ |
|
| 39 | - 'name' => 'color-scheme', |
|
| 40 | - 'content' => 'dark', |
|
| 41 | - ]]; |
|
| 42 | - } |
|
| 43 | - |
|
| 44 | - public function getCSSVariables(): array { |
|
| 45 | - $defaultVariables = parent::getCSSVariables(); |
|
| 46 | - |
|
| 47 | - $colorMainText = '#EBEBEB'; |
|
| 48 | - $colorMainBackground = '#171717'; |
|
| 49 | - $colorMainBackgroundRGB = join(',', $this->util->hexToRGB($colorMainBackground)); |
|
| 50 | - $colorTextMaxcontrast = $this->util->darken($colorMainText, 32); |
|
| 51 | - |
|
| 52 | - $colorBoxShadow = $this->util->darken($colorMainBackground, 70); |
|
| 53 | - $colorBoxShadowRGB = join(',', $this->util->hexToRGB($colorBoxShadow)); |
|
| 54 | - |
|
| 55 | - $colorError = '#552121'; |
|
| 56 | - $colorErrorText = '#FFCCCC'; |
|
| 57 | - $colorErrorElement = '#FF5050'; |
|
| 58 | - $colorWarning = '#3D3010'; |
|
| 59 | - $colorWarningText = '#FFEEC5'; |
|
| 60 | - $colorWarningElement = '#FFCC00'; |
|
| 61 | - $colorSuccess = '#11321A'; |
|
| 62 | - $colorSuccessText = '#D5F2DC'; |
|
| 63 | - $colorSuccessElement = '#40A330'; |
|
| 64 | - $colorInfo = '#003553'; |
|
| 65 | - $colorInfoText = '#00AEFF'; |
|
| 66 | - $colorInfoElement = '#0099E0'; |
|
| 67 | - |
|
| 68 | - return array_merge( |
|
| 69 | - $defaultVariables, |
|
| 70 | - $this->generatePrimaryVariables($colorMainBackground, $colorMainText), |
|
| 71 | - [ |
|
| 72 | - '--color-main-text' => $colorMainText, |
|
| 73 | - '--color-main-background' => $colorMainBackground, |
|
| 74 | - '--color-main-background-rgb' => $colorMainBackgroundRGB, |
|
| 75 | - '--color-main-background-blur' => 'rgba(var(--color-main-background-rgb), .85)', |
|
| 76 | - |
|
| 77 | - '--color-background-hover' => $this->util->lighten($colorMainBackground, 4), |
|
| 78 | - '--color-background-dark' => $this->util->lighten($colorMainBackground, 7), |
|
| 79 | - '--color-background-darker' => $this->util->lighten($colorMainBackground, 14), |
|
| 80 | - |
|
| 81 | - '--color-placeholder-light' => $this->util->lighten($colorMainBackground, 10), |
|
| 82 | - '--color-placeholder-dark' => $this->util->lighten($colorMainBackground, 20), |
|
| 83 | - |
|
| 84 | - '--color-text-maxcontrast' => $colorTextMaxcontrast, |
|
| 85 | - '--color-text-maxcontrast-default' => $colorTextMaxcontrast, |
|
| 86 | - '--color-text-maxcontrast-background-blur' => $this->util->lighten($colorTextMaxcontrast, 6), |
|
| 87 | - '--color-text-error' => $this->util->lighten($colorErrorElement, 6), |
|
| 88 | - '--color-text-success' => $this->util->lighten($colorSuccessElement, 6), |
|
| 89 | - |
|
| 90 | - '--color-border' => $this->util->lighten($colorMainBackground, 7), |
|
| 91 | - '--color-border-dark' => $this->util->lighten($colorMainBackground, 14), |
|
| 92 | - '--color-border-maxcontrast' => $this->util->lighten($colorMainBackground, 40), |
|
| 93 | - |
|
| 94 | - // Assistant colors (see default theme) |
|
| 95 | - '--color-background-assistant' => '#221D2B', |
|
| 96 | - '--color-border-assistant' => 'linear-gradient(125deg, #0C3A65 50%, #6204A5 125%)', |
|
| 97 | - '--color-element-assistant-icon' => 'linear-gradient(285deg, #CDACE7 15.28%, #008FDB 39.98%, #A180E0 82.05%)', |
|
| 98 | - |
|
| 99 | - '--color-element-error' => $colorErrorElement, |
|
| 100 | - '--color-element-info' => $colorInfoElement, |
|
| 101 | - '--color-element-success' => $colorSuccessElement, |
|
| 102 | - '--color-element-warning' => $colorWarningElement, |
|
| 103 | - |
|
| 104 | - '--color-error' => $colorError, |
|
| 105 | - '--color-error-hover' => $this->util->lighten($colorError, 10), |
|
| 106 | - '--color-error-text' => $colorErrorText, |
|
| 107 | - '--color-warning' => $colorWarning, |
|
| 108 | - '--color-warning-hover' => $this->util->lighten($colorWarning, 10), |
|
| 109 | - '--color-warning-text' => $colorWarningText, |
|
| 110 | - '--color-success' => $colorSuccess, |
|
| 111 | - '--color-success-hover' => $this->util->lighten($colorSuccess, 10), |
|
| 112 | - '--color-success-text' => $colorSuccessText, |
|
| 113 | - '--color-info' => $colorInfo, |
|
| 114 | - '--color-info-hover' => $this->util->lighten($colorInfo, 10), |
|
| 115 | - '--color-info-text' => $colorInfoText, |
|
| 116 | - '--color-favorite' => '#ffde00', |
|
| 117 | - // deprecated |
|
| 118 | - '--color-error-rgb' => join(',', $this->util->hexToRGB($colorError)), |
|
| 119 | - '--color-warning-rgb' => join(',', $this->util->hexToRGB($colorWarning)), |
|
| 120 | - '--color-success-rgb' => join(',', $this->util->hexToRGB($colorSuccess)), |
|
| 121 | - '--color-info-rgb' => join(',', $this->util->hexToRGB($colorInfo)), |
|
| 122 | - |
|
| 123 | - // used for the icon loading animation |
|
| 124 | - '--color-loading-light' => '#777', |
|
| 125 | - '--color-loading-dark' => '#CCC', |
|
| 126 | - |
|
| 127 | - '--color-box-shadow' => $colorBoxShadow, |
|
| 128 | - '--color-box-shadow-rgb' => $colorBoxShadowRGB, |
|
| 129 | - |
|
| 130 | - '--background-invert-if-dark' => 'invert(100%)', |
|
| 131 | - '--background-invert-if-bright' => 'no', |
|
| 132 | - ] |
|
| 133 | - ); |
|
| 134 | - } |
|
| 14 | + protected bool $isDarkVariant = true; |
|
| 15 | + |
|
| 16 | + public function getId(): string { |
|
| 17 | + return 'dark'; |
|
| 18 | + } |
|
| 19 | + |
|
| 20 | + public function getTitle(): string { |
|
| 21 | + return $this->l->t('Dark theme'); |
|
| 22 | + } |
|
| 23 | + |
|
| 24 | + public function getEnableLabel(): string { |
|
| 25 | + return $this->l->t('Enable dark theme'); |
|
| 26 | + } |
|
| 27 | + |
|
| 28 | + public function getDescription(): string { |
|
| 29 | + return $this->l->t('A dark theme to ease your eyes by reducing the overall luminosity and brightness.'); |
|
| 30 | + } |
|
| 31 | + |
|
| 32 | + public function getMediaQuery(): string { |
|
| 33 | + return '(prefers-color-scheme: dark)'; |
|
| 34 | + } |
|
| 35 | + |
|
| 36 | + public function getMeta(): array { |
|
| 37 | + // https://html.spec.whatwg.org/multipage/semantics.html#meta-color-scheme |
|
| 38 | + return [[ |
|
| 39 | + 'name' => 'color-scheme', |
|
| 40 | + 'content' => 'dark', |
|
| 41 | + ]]; |
|
| 42 | + } |
|
| 43 | + |
|
| 44 | + public function getCSSVariables(): array { |
|
| 45 | + $defaultVariables = parent::getCSSVariables(); |
|
| 46 | + |
|
| 47 | + $colorMainText = '#EBEBEB'; |
|
| 48 | + $colorMainBackground = '#171717'; |
|
| 49 | + $colorMainBackgroundRGB = join(',', $this->util->hexToRGB($colorMainBackground)); |
|
| 50 | + $colorTextMaxcontrast = $this->util->darken($colorMainText, 32); |
|
| 51 | + |
|
| 52 | + $colorBoxShadow = $this->util->darken($colorMainBackground, 70); |
|
| 53 | + $colorBoxShadowRGB = join(',', $this->util->hexToRGB($colorBoxShadow)); |
|
| 54 | + |
|
| 55 | + $colorError = '#552121'; |
|
| 56 | + $colorErrorText = '#FFCCCC'; |
|
| 57 | + $colorErrorElement = '#FF5050'; |
|
| 58 | + $colorWarning = '#3D3010'; |
|
| 59 | + $colorWarningText = '#FFEEC5'; |
|
| 60 | + $colorWarningElement = '#FFCC00'; |
|
| 61 | + $colorSuccess = '#11321A'; |
|
| 62 | + $colorSuccessText = '#D5F2DC'; |
|
| 63 | + $colorSuccessElement = '#40A330'; |
|
| 64 | + $colorInfo = '#003553'; |
|
| 65 | + $colorInfoText = '#00AEFF'; |
|
| 66 | + $colorInfoElement = '#0099E0'; |
|
| 67 | + |
|
| 68 | + return array_merge( |
|
| 69 | + $defaultVariables, |
|
| 70 | + $this->generatePrimaryVariables($colorMainBackground, $colorMainText), |
|
| 71 | + [ |
|
| 72 | + '--color-main-text' => $colorMainText, |
|
| 73 | + '--color-main-background' => $colorMainBackground, |
|
| 74 | + '--color-main-background-rgb' => $colorMainBackgroundRGB, |
|
| 75 | + '--color-main-background-blur' => 'rgba(var(--color-main-background-rgb), .85)', |
|
| 76 | + |
|
| 77 | + '--color-background-hover' => $this->util->lighten($colorMainBackground, 4), |
|
| 78 | + '--color-background-dark' => $this->util->lighten($colorMainBackground, 7), |
|
| 79 | + '--color-background-darker' => $this->util->lighten($colorMainBackground, 14), |
|
| 80 | + |
|
| 81 | + '--color-placeholder-light' => $this->util->lighten($colorMainBackground, 10), |
|
| 82 | + '--color-placeholder-dark' => $this->util->lighten($colorMainBackground, 20), |
|
| 83 | + |
|
| 84 | + '--color-text-maxcontrast' => $colorTextMaxcontrast, |
|
| 85 | + '--color-text-maxcontrast-default' => $colorTextMaxcontrast, |
|
| 86 | + '--color-text-maxcontrast-background-blur' => $this->util->lighten($colorTextMaxcontrast, 6), |
|
| 87 | + '--color-text-error' => $this->util->lighten($colorErrorElement, 6), |
|
| 88 | + '--color-text-success' => $this->util->lighten($colorSuccessElement, 6), |
|
| 89 | + |
|
| 90 | + '--color-border' => $this->util->lighten($colorMainBackground, 7), |
|
| 91 | + '--color-border-dark' => $this->util->lighten($colorMainBackground, 14), |
|
| 92 | + '--color-border-maxcontrast' => $this->util->lighten($colorMainBackground, 40), |
|
| 93 | + |
|
| 94 | + // Assistant colors (see default theme) |
|
| 95 | + '--color-background-assistant' => '#221D2B', |
|
| 96 | + '--color-border-assistant' => 'linear-gradient(125deg, #0C3A65 50%, #6204A5 125%)', |
|
| 97 | + '--color-element-assistant-icon' => 'linear-gradient(285deg, #CDACE7 15.28%, #008FDB 39.98%, #A180E0 82.05%)', |
|
| 98 | + |
|
| 99 | + '--color-element-error' => $colorErrorElement, |
|
| 100 | + '--color-element-info' => $colorInfoElement, |
|
| 101 | + '--color-element-success' => $colorSuccessElement, |
|
| 102 | + '--color-element-warning' => $colorWarningElement, |
|
| 103 | + |
|
| 104 | + '--color-error' => $colorError, |
|
| 105 | + '--color-error-hover' => $this->util->lighten($colorError, 10), |
|
| 106 | + '--color-error-text' => $colorErrorText, |
|
| 107 | + '--color-warning' => $colorWarning, |
|
| 108 | + '--color-warning-hover' => $this->util->lighten($colorWarning, 10), |
|
| 109 | + '--color-warning-text' => $colorWarningText, |
|
| 110 | + '--color-success' => $colorSuccess, |
|
| 111 | + '--color-success-hover' => $this->util->lighten($colorSuccess, 10), |
|
| 112 | + '--color-success-text' => $colorSuccessText, |
|
| 113 | + '--color-info' => $colorInfo, |
|
| 114 | + '--color-info-hover' => $this->util->lighten($colorInfo, 10), |
|
| 115 | + '--color-info-text' => $colorInfoText, |
|
| 116 | + '--color-favorite' => '#ffde00', |
|
| 117 | + // deprecated |
|
| 118 | + '--color-error-rgb' => join(',', $this->util->hexToRGB($colorError)), |
|
| 119 | + '--color-warning-rgb' => join(',', $this->util->hexToRGB($colorWarning)), |
|
| 120 | + '--color-success-rgb' => join(',', $this->util->hexToRGB($colorSuccess)), |
|
| 121 | + '--color-info-rgb' => join(',', $this->util->hexToRGB($colorInfo)), |
|
| 122 | + |
|
| 123 | + // used for the icon loading animation |
|
| 124 | + '--color-loading-light' => '#777', |
|
| 125 | + '--color-loading-dark' => '#CCC', |
|
| 126 | + |
|
| 127 | + '--color-box-shadow' => $colorBoxShadow, |
|
| 128 | + '--color-box-shadow-rgb' => $colorBoxShadowRGB, |
|
| 129 | + |
|
| 130 | + '--background-invert-if-dark' => 'invert(100%)', |
|
| 131 | + '--background-invert-if-bright' => 'no', |
|
| 132 | + ] |
|
| 133 | + ); |
|
| 134 | + } |
|
| 135 | 135 | } |