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