feature: PR 3/8 — SettingsContext and SCSS theming

package.json

@@ -54,6 +54,7 @@
     "karma-jasmine": "~2.0.1",
     "karma-jasmine-html-reporter": "^1.4.0",
     "protractor": "~5.4.0",
+    "sass": "^1.103.1",
     "ts-node": "~7.0.0",
     "tslint": "~5.15.0",
     "typescript": "~3.7.5",

src/main.tsx

@@ -1,6 +1,8 @@
 import { createRoot } from 'react-dom/client';
 import { BrowserRouter } from 'react-router-dom';
 import App from './react/App';
+import { SettingsProvider } from './react/context/SettingsContext';
+import './react/styles.scss';
 
 const rootElement = document.getElementById('root');
 
@@ -10,6 +12,8 @@ if (!rootElement) {
 
 createRoot(rootElement).render(
     <BrowserRouter>
-        <App />
+        <SettingsProvider>
+            <App />
+        </SettingsProvider>
     </BrowserRouter>
 );

src/react/App.tsx

@@ -1,6 +1,10 @@
+import { useSettings } from './context/SettingsContext';
+
 export default function App() {
+    const { settings } = useSettings();
+
     return (
-        <main>
+        <main className={settings.theme}>
             <h1>Hacker News</h1>
         </main>
     );

src/react/context/SettingsContext.tsx

@@ -0,0 +1,176 @@
+import { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import { Settings } from '../models/settings';
+
+interface SettingsContextValue {
+    settings: Settings;
+    toggleSettings: () => void;
+    toggleOpenLinksInNewTab: () => void;
+    setTheme: (theme: string) => void;
+    setFont: (fontSize: string) => void;
+    setSpacing: (listSpace: string) => void;
+}
+
+const SettingsContext = createContext<SettingsContextValue | undefined>(undefined);
+
+function getStorage(): Storage | null {
+    if (typeof window === 'undefined') {
+        return null;
+    }
+
+    try {
+        return window.localStorage;
+    } catch {
+        return null;
+    }
+}
+
+function getDarkColorSchemeMedia(): MediaQueryList | null {
+    if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {
+        return null;
+    }
+
+    try {
+        return window.matchMedia('(prefers-color-scheme: dark)');
+    } catch {
+        return null;
+    }
+}
+
+function getStoredValue(key: string): string | null {
+    const storage = getStorage();
+
+    try {
+        return storage?.getItem(key) ?? null;
+    } catch {
+        return null;
+    }
+}
+
+function getInitialSettings(): Settings {
+    const darkColorSchemeMedia = getDarkColorSchemeMedia();
+    const storedOpenLinkInNewTab = getStoredValue('openLinkInNewTab');
+    let openLinkInNewTab = false;
+
+    if (storedOpenLinkInNewTab) {
+        try {
+            openLinkInNewTab = JSON.parse(storedOpenLinkInNewTab);
+        } catch {
+            openLinkInNewTab = false;
+        }
+    }
+
+    return {
+        showSettings: false,
+        openLinkInNewTab,
+        theme: getStoredValue('theme') || (darkColorSchemeMedia?.matches ? 'night' : 'default'),
+        titleFontSize: getStoredValue('titleFontSize') || '16',
+        listSpacing: getStoredValue('listSpacing') || '0',
+    };
+}
+
+function setStoredValue(key: string, value: string): void {
+    const storage = getStorage();
+
+    try {
+        storage?.setItem(key, value);
+    } catch {
+        return;
+    }
+}
+
+export function SettingsProvider({ children }: { children: React.ReactNode }) {
+    const [settings, setSettings] = useState<Settings>(getInitialSettings);
+
+    const toggleSettings = useCallback(() => {
+        setSettings(currentSettings => ({
+            ...currentSettings,
+            showSettings: !currentSettings.showSettings,
+        }));
+    }, []);
+
+    const toggleOpenLinksInNewTab = useCallback(() => {
+        setSettings(currentSettings => {
+            const openLinkInNewTab = !currentSettings.openLinkInNewTab;
+            setStoredValue('openLinkInNewTab', JSON.stringify(openLinkInNewTab));
+
+            return {
+                ...currentSettings,
+                openLinkInNewTab,
+            };
+        });
+    }, []);
+
+    const setTheme = useCallback((theme: string) => {
+        setStoredValue('theme', theme);
+        setSettings(currentSettings => ({
+            ...currentSettings,
+            theme,
+        }));
+    }, []);
+
+    const setFont = useCallback((fontSize: string) => {
+        setStoredValue('titleFontSize', fontSize);
+        setSettings(currentSettings => ({
+            ...currentSettings,
+            titleFontSize: fontSize,
+        }));
+    }, []);
+
+    const setSpacing = useCallback((listSpace: string) => {
+        setStoredValue('listSpacing', listSpace);
+        setSettings(currentSettings => ({
+            ...currentSettings,
+            listSpacing: listSpace,
+        }));
+    }, []);
+
+    useEffect(() => {
+        const darkColorSchemeMedia = getDarkColorSchemeMedia();
+
+        if (!darkColorSchemeMedia) {
+            return undefined;
+        }
+
+        const handleSystemPreferredColorSchemeChange = (event: MediaQueryListEvent) => {
+            setTheme(event.matches ? 'night' : 'default');
+        };
+
+        if (typeof darkColorSchemeMedia.addEventListener === 'function') {
+            darkColorSchemeMedia.addEventListener('change', handleSystemPreferredColorSchemeChange);
+        } else {
+            darkColorSchemeMedia.addListener(handleSystemPreferredColorSchemeChange);
+        }
+
+        return () => {
+            if (typeof darkColorSchemeMedia.removeEventListener === 'function') {
+                darkColorSchemeMedia.removeEventListener('change', handleSystemPreferredColorSchemeChange);
+            } else {
+                darkColorSchemeMedia.removeListener(handleSystemPreferredColorSchemeChange);
+            }
+        };
+    }, [setTheme]);
+
+    const value = useMemo(
+        () => ({
+            settings,
+            toggleSettings,
+            toggleOpenLinksInNewTab,
+            setTheme,
+            setFont,
+            setSpacing,
+        }),
+        [settings, toggleSettings, toggleOpenLinksInNewTab, setTheme, setFont, setSpacing]
+    );
+
+    return <SettingsContext.Provider value={value}>{children}</SettingsContext.Provider>;
+}
+
+export function useSettings(): SettingsContextValue {
+    const context = useContext(SettingsContext);
+
+    if (!context) {
+        throw new Error('useSettings must be used within a SettingsProvider');
+    }
+
+    return context;
+}

src/react/scss/_media.scss

@@ -0,0 +1,3 @@
+$mobile-only: "only screen and (max-width : 768px)";
+$laptop-only: "only screen and (min-width : 769px)";
+$tablet-only: "only screen and (max-width : 1024px)";

src/react/scss/_theme_variables.scss

@@ -0,0 +1,37 @@
+$skull-size: 200px;
+
+// -------------------------------------------------------------------------------------------
+// Theme Engine
+// -------------------------------------------------------------------------------------------
+
+// Day theme colors
+$theme-day-body-background-color: #fff;
+$theme-day-wrapper-background-color: #f5f5f5;
+$theme-day-wrapper-mobile-background-color: #fff;
+$theme-day-text-color: #000;
+$theme-day-subtext-color: #696969;
+$theme-day-secondary-color: #b92b27;
+$theme-day-header-background-color: $theme-day-secondary-color;
+$theme-day-logo-inner: #fff;
+
+// Day theme extras
+$theme-day-border: 2px solid #b92b27;
+
+// Night theme colors
+$theme-night-body-background-color: #37474F;
+$theme-night-wrapper-background-color: #263238;
+$theme-night-wrapper-mobile-background-color: $theme-night-wrapper-background-color;
+$theme-night-text-color: rgba(255, 255, 255, 0.7);
+$theme-night-subtext-color: #999;
+$theme-night-secondary-color: #00c0ff;
+$theme-night-header-background-color: #263238;
+$theme-night-logo-inner: $theme-night-header-background-color;
+
+// Night theme extras
+$theme-night-border: 2px solid #00c0ff;
+
+// Black theme colors
+$theme-amoledblack-body-background-color: #000;
+$theme-amoledblack-text-color: rgba(255, 255, 255, 0.75);
+$theme-amoledblack-subtext-color: rgba(255, 255, 255, 0.5);
+$theme-amoledblack-secondary-color: rgba(255, 255, 255, 0.6);