@@ -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.'); |
|
| 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)); |
|
| 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 | } |