@@ -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 | } |