aboutsummaryrefslogtreecommitdiff
path: root/ext/js/app/theme-controller.js
diff options
context:
space:
mode:
Diffstat (limited to 'ext/js/app/theme-controller.js')
-rw-r--r--ext/js/app/theme-controller.js28
1 files changed, 16 insertions, 12 deletions
diff --git a/ext/js/app/theme-controller.js b/ext/js/app/theme-controller.js
index f403a534..8b88c834 100644
--- a/ext/js/app/theme-controller.js
+++ b/ext/js/app/theme-controller.js
@@ -22,13 +22,18 @@
export class ThemeController {
/**
* Creates a new instance of the class.
- * @param {?Element} element A DOM element which theme properties are applied to.
+ * @param {?HTMLElement} element A DOM element which theme properties are applied to.
*/
constructor(element) {
+ /** @type {?HTMLElement} */
this._element = element;
- this._theme = 'default';
- this._outerTheme = 'default';
+ /** @type {'light'|'dark'|'browser'} */
+ this._theme = 'light';
+ /** @type {'light'|'dark'|'browser'|'site'} */
+ this._outerTheme = 'light';
+ /** @type {?('dark'|'light')} */
this._siteTheme = null;
+ /** @type {'dark'|'light'} */
this._browserTheme = 'light';
}
@@ -42,7 +47,7 @@ export class ThemeController {
/**
* Sets the DOM element which theme properties are applied to.
- * @param {?Element} value The DOM element to assign.
+ * @param {?HTMLElement} value The DOM element to assign.
*/
set element(value) {
this._element = value;
@@ -50,7 +55,7 @@ export class ThemeController {
/**
* Gets the main theme for the content.
- * @type {string}
+ * @type {'light'|'dark'|'browser'}
*/
get theme() {
return this._theme;
@@ -58,7 +63,7 @@ export class ThemeController {
/**
* Sets the main theme for the content.
- * @param {string} value The theme value to assign.
+ * @param {'light'|'dark'|'browser'} value The theme value to assign.
*/
set theme(value) {
this._theme = value;
@@ -66,7 +71,7 @@ export class ThemeController {
/**
* Gets the outer theme for the content.
- * @type {string}
+ * @type {'light'|'dark'|'browser'|'site'}
*/
get outerTheme() {
return this._outerTheme;
@@ -74,7 +79,7 @@ export class ThemeController {
/**
* Sets the outer theme for the content.
- * @param {string} value The outer theme value to assign.
+ * @param {'light'|'dark'|'browser'|'site'} value The outer theme value to assign.
*/
set outerTheme(value) {
this._outerTheme = value;
@@ -83,7 +88,7 @@ export class ThemeController {
/**
* Gets the override value for the site theme.
* If this value is `null`, the computed value will be used.
- * @type {?string}
+ * @type {?('dark'|'light')}
*/
get siteTheme() {
return this._siteTheme;
@@ -92,7 +97,7 @@ export class ThemeController {
/**
* Sets the override value for the site theme.
* If this value is `null`, the computed value will be used.
- * @param {?string} value The site theme value to assign.
+ * @param {?('dark'|'light')} value The site theme value to assign.
*/
set siteTheme(value) {
this._siteTheme = value;
@@ -101,7 +106,7 @@ export class ThemeController {
/**
* Gets the browser's preferred color theme.
* The value can be either 'light' or 'dark'.
- * @type {?string}
+ * @type {'dark'|'light'}
*/
get browserTheme() {
return this._browserTheme;
@@ -152,7 +157,6 @@ export class ThemeController {
/**
* Event handler for when the preferred browser theme changes.
* @param {MediaQueryList|MediaQueryListEvent} detail The object containing event details.
- * @param {boolean} detail.matches The object containing event details.
*/
_onPrefersColorSchemeDarkChange({matches}) {
this._browserTheme = (matches ? 'dark' : 'light');