fix(options): 🐛 fix System display option on safari (#68)

JamesNZL · Aug 29, 2022 · 2a7a2ea · 2a7a2ea
1 parent a4d0940
commit 2a7a2ea
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 7 deletions.
diff --git a/src/elements/SegmentedControl.ts b/src/elements/SegmentedControl.ts
@@ -66,7 +66,12 @@ export class SegmentedControl extends Element {
 	}
 
 	public setValue(value: SupportedTypes, dispatchEvent = true) {
-		const segmentToCheck = this.segments.find(segment => segment.value === value);
+		let segmentToCheck = this.segments.find(segment => segment.value === value);
+
+		// ! see #68
+		if (!segmentToCheck && this.id === 'display-theme' && value === null) {
+			segmentToCheck = this.segments.find(segment => segment.value === 'system');
+		}
 
 		if (!segmentToCheck) throw new Error(`Failed to set unexpected value ${value} of type ${typeof value} on segmented control ${this.id}`);
 

diff --git a/src/options/configuration.ts b/src/options/configuration.ts
@@ -139,15 +139,15 @@ export const CONFIGURATION: {
 		},
 		extension: {
 			displayTheme: {
-				defaultValue: null,
+				defaultValue: 'system',
 				get input() {
 					delete (<Partial<typeof this>>this).input;
 					return this.input = SegmentedControl.getInstance<InputElementId, typeof this.defaultValue>({
 						id: 'display-theme',
 						segments: [
 							{
 								id: 'display-system-mode',
-								value: null,
+								value: 'system',
 								default: true,
 							},
 							{

diff --git a/src/options/options.ts b/src/options/options.ts
@@ -314,7 +314,9 @@ const buttons: {
 
 Storage.getOptions().then(({ extension: { displayTheme }, options: { displayAdvanced } }) => {
 	// set display theme
-	if (displayTheme) document.documentElement.classList.add(`${displayTheme}-mode`);
+	if (displayTheme && displayTheme !== 'system') {
+		document.documentElement.classList.add(`${displayTheme}-mode`);
+	}
 
 	// show advanced options if appropriate
 	AdvancedOptions.toggle(displayAdvanced);
@@ -402,7 +404,7 @@ CONFIGURATION.FIELDS['extension.displayTheme'].input.addEventListener('input', (
 		document.documentElement.classList.remove(token);
 	});
 
-	if (!displayTheme) return;
+	if (!displayTheme || displayTheme === 'system') return;
 
 	document.documentElement.classList.add(`${displayTheme}-mode`);
 });

diff --git a/src/popup/popup.ts b/src/popup/popup.ts
@@ -218,7 +218,10 @@ buttons.listAssignments.addEventListener('click', SavedCoursesList.listAssignmen
 buttons.listCourses.addEventListener('click', SavedCoursesList.listCourses.bind(SavedCoursesList, undefined));
 
 Storage.getOptions().then(({ extension: { displayTheme }, popup: { displayJSONButton } }) => {
-	if (displayTheme) document.documentElement.classList.add(`${displayTheme}-mode`);
+	if (displayTheme && displayTheme !== 'system') {
+		document.documentElement.classList.add(`${displayTheme}-mode`);
+	}
+
 	if (displayJSONButton) buttons.copyJSON.show();
 });
 

diff --git a/src/types/storage.d.ts b/src/types/storage.d.ts
@@ -6,7 +6,8 @@ type NeverEmpty<T extends string> = T extends '' ? never : T;
 type NullIfEmpty<T extends string | null> = (T extends '' ? null : T) | null;
 
 interface RequiredFields {
-	'extension.displayTheme': null | 'light' | 'dark';
+	// ! null is retained to avoid breaking changes, see #68
+	'extension.displayTheme': null | 'system' | 'light' | 'dark';
 	'popup.displayJSONButton': boolean;
 	'options.displayAdvanced': boolean;
 	'canvas.importMissingDueDates': boolean;