use os detection for initial dark mode setting

src/settings/index.ts

@@ -1,6 +1,8 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) 2021 The Pybricks Authors
 
+import { prefersDarkMode } from '../utils/os';
+
 // Definitions for user settings.
 
 export enum SettingId {
@@ -14,6 +16,7 @@ export function getDefaultBooleanValue(id: SettingId): boolean {
         case SettingId.ShowDocs:
             return window.innerWidth >= 1024;
         case SettingId.DarkMode:
+            return prefersDarkMode();
         case SettingId.FlashCurrentProgram:
             return false;
         // istanbul ignore next: it is a programmer error if we hit this

src/utils/os.test.ts

@@ -1,7 +1,7 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) 2021 The Pybricks Authors
 
-import { isMacOS } from './os';
+import { isMacOS, prefersDarkMode } from './os';
 
 describe('isMacOS', () => {
     test('is true', () => {
@@ -13,3 +13,22 @@ describe('isMacOS', () => {
         expect(isMacOS()).toBeFalsy();
     });
 });
+
+describe('prefersDarkMode', () => {
+    test('is true', () => {
+        window.matchMedia = jest.fn().mockReturnValue({
+            matches: true,
+        } as MediaQueryList);
+        expect(prefersDarkMode()).toBeTruthy();
+    });
+    test('is false', () => {
+        // @ts-expect-error 2790
+        delete window.matchMedia;
+        expect(prefersDarkMode()).toBeFalsy();
+
+        window.matchMedia = jest.fn().mockReturnValue({
+            matches: false,
+        } as MediaQueryList);
+        expect(prefersDarkMode()).toBeFalsy();
+    });
+});

src/utils/os.ts

@@ -3,6 +3,22 @@
 
 // Utility functions for dealing with operating systems.
 
+/**
+ * Tests if we are running on macOS.
+ * @returns `true` if running on macOS, otherwise `false`.
+ */
 export function isMacOS(): boolean {
     return /mac/i.test(navigator.platform);
 }
+
+/**
+ * Tests if the OS is set to dark mode.
+ * @returns: `true` if dark mode should be preferred, otherwise `false`.
+ */
+export function prefersDarkMode(): boolean {
+    if (!window.matchMedia) {
+        return false;
+    }
+
+    return window.matchMedia('(prefers-color-scheme: dark)').matches;
+}