Default day/night theme to system theme via css3 media query.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bldrs",
-  "version": "1.0.0-r298",
+  "version": "1.0.0-r302",
   "main": "src/index.jsx",
   "homepage": "https://github.com/bldrs-ai/Share",
   "bugs": {

src/Theme.jsx

@@ -12,7 +12,8 @@ export default function useTheme() {
   const [mode, setMode] = useState(Privacy.getCookie({
     component: 'theme',
     name: 'mode',
-    defaultValue: Themes.Day}))
+    defaultValue: getSystemCurrentLightDark(),
+  }))
 
 
   const theme = useMemo(() => {
@@ -48,7 +49,7 @@ export default function useTheme() {
 }
 
 
-const Themes = {
+export const Themes = {
   Day: 'Day',
   Night: 'Night',
 }
@@ -103,3 +104,17 @@ function loadTheme(mode) {
   }
   return createTheme(theme)
 }
+
+
+/**
+ * Look for explicit night, otherwise day
+ * See https://drafts.csswg.org/mediaqueries-5/#prefers-color-scheme
+ * @return {string}
+ * @private
+ */
+export function getSystemCurrentLightDark() {
+  if (window.matchMedia) {
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? Themes.Night : Themes.Day
+  }
+  return Themes.Day
+}

src/Theme.test.jsx

@@ -0,0 +1,35 @@
+import {Themes, getSystemCurrentLightDark} from './Theme'
+
+
+// https://stackoverflow.com/questions/41885841/how-can-i-mock-the-javascript-window-object-using-jest
+let windowSpy
+
+beforeEach(() => {
+  windowSpy = jest.spyOn(window, 'window', 'get')
+})
+
+
+afterEach(() => {
+  windowSpy.mockRestore()
+})
+
+
+describe('Theme', () => {
+  test('getSystemCurrentLightDark is day when system is day', () => {
+    windowSpy.mockImplementation(() => ({
+      matchMedia: jest.fn((query) => {
+        return {matches: query == '(prefers-color-scheme: dark)' ? false : true}
+      }),
+    }))
+    expect(getSystemCurrentLightDark()).toBe(Themes.Day)
+  })
+
+  test('getSystemCurrentLightDark is night when system is night', () => {
+    windowSpy.mockImplementation(() => ({
+      matchMedia: jest.fn((query) => {
+        return {matches: query == '(prefers-color-scheme: dark)' ? true : false}
+      }),
+    }))
+    expect(getSystemCurrentLightDark()).toBe(Themes.Night)
+  })
+})