diff --git a/source/scss/pages/_settings.scss b/source/scss/pages/_settings.scss
index fc19f93..eacdff2 100644
--- a/source/scss/pages/_settings.scss
+++ b/source/scss/pages/_settings.scss
@@ -12,5 +12,11 @@
select {
margin-bottom: 1rem;
}
+
+ input[type='checkbox'] {
+ height: 1.75rem;
+ width: 1.75rem;
+ margin-right: 0.5rem;
+ }
}
}
diff --git a/source/ts/pages/settings.ts b/source/ts/pages/settings.ts
index aed62ba..c869363 100644
--- a/source/ts/pages/settings.ts
+++ b/source/ts/pages/settings.ts
@@ -2,6 +2,7 @@ import {Component, html} from 'htm/preact';
import ExternalAnchor from '../components/external-anchor.js';
import SharedFooter from '../components/shared-footer.js';
+import {isDebugEnabled} from '../utilities/debug.js';
import {
defaultTheme,
getThemeByCssClass,
@@ -12,6 +13,7 @@ import {
type Props = Record;
type State = {
+ debugChecked: boolean;
selectedTheme: string;
};
@@ -20,11 +22,17 @@ export default class SettingsPage extends Component {
super(props);
this.state = {
+ debugChecked: isDebugEnabled(),
selectedTheme:
window.localStorage.getItem('theme') ?? defaultTheme.cssClass,
};
}
+ onDebugChange = (event: Event) => {
+ const checked = (event.target as HTMLInputElement).checked;
+ window.localStorage.setItem('debug', checked.toString());
+ };
+
onThemeChange = (event: Event) => {
const theme = getThemeByCssClass((event.target as HTMLSelectElement).value);
setTheme(theme);
@@ -65,6 +73,21 @@ export default class SettingsPage extends Component {
+
+
<${SharedFooter} page="settings" />
`;
diff --git a/source/ts/utilities/debug.ts b/source/ts/utilities/debug.ts
new file mode 100644
index 0000000..de9ae02
--- /dev/null
+++ b/source/ts/utilities/debug.ts
@@ -0,0 +1,13 @@
+export function isDebugEnabled(): boolean {
+ return window.localStorage.getItem('debug') === 'true';
+}
+
+export function debug(...args: any[]): void {
+ if (!isDebugEnabled()) {
+ return;
+ }
+
+ for (const argument of args) {
+ console.debug(argument);
+ }
+}