dark mode

2025-02-19 13:10:53 +01:00 · 2020-06-11 13:35:14 +08:00 · 2020-06-11 13:35:14 +08:00 · ea75d5a893
commit ea75d5a893
parent a9c64cbe78
23 changed files with 316 additions and 100 deletions
--- a/README.md
+++ b/README.md
@ -18,11 +18,10 @@ npm run build
 # Start the application
 npm run electron

+# Generate certificate for signature
+electron-builder create-self-signed-cert
 # Package the app for Windows
 npm run package-win
-# Generate certificate and sign the appx package
-electron-builder create-self-signed-cert
-signtool sign /fd SHA256 /a /f XXX.pfx "Fluent Reader X.X.X.appx"

 ```

--- a/build/appx/Wide310x150Logo.scale-100.png
+++ b/build/appx/Wide310x150Logo.scale-100.png
--- a/build/appx/Wide310x150Logo.scale-125.png
+++ b/build/appx/Wide310x150Logo.scale-125.png
--- a/build/appx/Wide310x150Logo.scale-150.png
+++ b/build/appx/Wide310x150Logo.scale-150.png
--- a/build/appx/Wide310x150Logo.scale-200.png
+++ b/build/appx/Wide310x150Logo.scale-200.png
--- a/build/appx/Wide310x150Logo.scale-400.png
+++ b/build/appx/Wide310x150Logo.scale-400.png
--- a/dist/article/article.css
+++ b/dist/article/article.css
@ -6,14 +6,23 @@ html {
 }
 body {
    margin: 12px 96px 32px;
+    --gray: #484644;
+    --primary: #0078d4;
+    --primary-alt: #004578;
+}
+body.dark {
+    color: #f8f8f8;
+    --gray: #a19f9d;
+    --primary: #3a96dd;
+    --primary-alt: #4ba0e1;
 }

 a {
-    color: #0078d4;
+    color: var(--primary);
    text-decoration: none;
 }
 a:hover, a:active {
-    color: #004578;
+    color: var(--primary-alt);
    text-decoration: underline;
 }

@ -28,7 +37,7 @@ a:hover, a:active {
    margin-block-end: 0;
 }
 #main > p.date {
-    color: #484644;
+    color: var(--gray);
    font-size: .875rem;
 }

@ -47,6 +56,6 @@ article figure {
 }
 article figure figcaption {
    font-size: .875rem;
-    color: #484644;
+    color: var(--gray);
    -webkit-user-modify: read-only;
 }
--- a/dist/article/article.html
+++ b/dist/article/article.html
@ -3,12 +3,14 @@
 <head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Security-Policy"
-        content="default-src 'none'; script-src-elem 'sha256-34JRfFnY5YiFDB1MABAIxq6OfvlgM/Ba2el4MdA0WoM='; img-src http://* https://*; style-src 'self' 'unsafe-inline'; frame-src http://* https://*; media-src http://* https://*">
+        content="default-src 'none'; script-src-elem 'sha256-CTdT4eT3ye2S03G9EvKqKVksHK5iE98I6LPSH9ah7UM='; img-src http://* https://*; style-src 'self' 'unsafe-inline'; frame-src http://* https://*; media-src http://* https://*">
    <title>Article</title>
+    <link rel="stylesheet" href="scroll.css" />
    <link rel="stylesheet" href="article.css" />
 </head>
 <body>
    <div id="main"></div>
-    <script integrity="sha256-34JRfFnY5YiFDB1MABAIxq6OfvlgM/Ba2el4MdA0WoM=" src="article.js"></script>
+    <script integrity="sha256-CTdT4eT3ye2S03G9EvKqKVksHK5iE98I6LPSH9ah7UM=" src="article.js"></script>
+    <!-- Run "cat article.js | openssl dgst -sha256 -binary | openssl enc -base64 -A" for hash -->
 </body>
 </html>
--- a/dist/article/article.js
+++ b/dist/article/article.js
@ -15,6 +15,7 @@ for (let i of dom.querySelectorAll("img")) {
 for (let s of dom.querySelectorAll("script")) {
    s.parentNode.removeChild(s)
 }
+if (get("d") === "1") document.body.classList.add("dark")
 let main = document.getElementById("main")
 main.innerHTML = dom.body.innerHTML
 document.addEventListener("click", event => {
--- a/dist/article/scroll.css
+++ b/dist/article/scroll.css
@ -0,0 +1,23 @@
+::-webkit-scrollbar {
+    width: 16px;
+}
+::-webkit-scrollbar-thumb {
+    border: 2px solid transparent;
+    background-color: #0004;
+    background-clip: padding-box;
+}
+::-webkit-scrollbar-thumb:hover {
+    background-color: #0006;
+}
+::-webkit-scrollbar-thumb:active {
+    background-color: #0008;
+}
+body.dark::-webkit-scrollbar-thumb , body.dark *::-webkit-scrollbar-thumb {
+    background-color: #fff4;
+}
+body.dark::-webkit-scrollbar-thumb:hover, body.dark *::-webkit-scrollbar-thumb:hover {
+    background-color: #fff6;
+}
+body.dark::-webkit-scrollbar-thumb:active, body.dark *::-webkit-scrollbar-thumb:active {
+    background-color: #fff8;
+}
--- a/dist/styles.css
+++ b/dist/styles.css
@ -1,10 +1,49 @@
+:root {
+    --neutralLighterAlt: #faf9f8;
+    --neutralLighter: #f3f2f1;
+    --neutralLight: #edebe9;
+    --neutralQuaternaryAlt: #e1dfdd;
+    --neutralQuaternary: #d2d0ce;
+    --neutralTertiaryAlt: #c8c6c4;
+    --neutralTertiary: #a19f9d;
+    --neutralSecondaryAlt: #8a8886;
+    --neutralSecondary: #605e5c;
+    --neutralPrimaryAlt: #3b3a39;
+    --neutralPrimary: #323130;
+    --neutralDark: #201f1e;
+    --neutralDarker: #161514;
+    --black: #000;
+    --white: #fff;
+    --whiteConstant: #fff;
+}
+body.dark {
+    --neutralLighterAlt: #282828;
+    --neutralLighter: #313131;
+    --neutralLight: #3f3f3f;
+    --neutralQuaternaryAlt: #484848;
+    --neutralQuaternary: #4f4f4f;
+    --neutralTertiaryAlt: #6d6d6d;
+    --neutralTertiary: #c8c8c8;
+    --neutralSecondaryAlt: #d2d0ce;
+    --neutralSecondary: #d0d0d0;
+    --neutralPrimaryAlt: #dadada;
+    --neutralPrimary: #ffffff;
+    --neutralDark: #f4f4f4;
+    --neutralDarker: #f4f4f4;
+    --black: #f8f8f8;
+    --white: #1f1f1f;
+    --whiteConstant: #f8f8f8;
+}
+
 html, body {
-    background-color: #faf9f8;
    font-family: "Segoe UI Regular", "Source Han Sans SC Regular", "Microsoft YaHei", sans-serif;
    height: 100%;
    overflow: hidden;
    margin: 0;
 }
+body {
+    background-color: var(--neutralLighterAlt);
+}
 #root {
    height: 100%;
 }
@ -18,7 +57,7 @@ html, body {
    line-height: 32px;
    height: 32px;
    background-color: transparent;
-    color: #323130;
+    color: var(--neutralPrimary);
 }
 .ms-Button--primary.danger {
    background: #d13438;
@ -33,11 +72,14 @@ html, body {
    border-color: #a4262c;
 }
 .ms-Button--commandBar.active {
-    background-color: rgb(237, 235, 233);
-    color: rgb(32, 31, 30);
+    background-color: var(--neutralLight);
+    color: var(--neutralDark);
 }
 .ms-Button--commandBar.active .ms-Button-icon {
-    color: rgb(0, 90, 158);
+    color: #005a9e;
+}
+body.dark .ms-Button--commandBar.active .ms-Button-icon {
+    color: #c7e0f4;
 }
 i.ms-Nav-chevron {
    line-height: 32px;
@ -52,6 +94,12 @@ i.ms-Nav-chevron {
 .ms-Label, .ms-Spinner-label {
    user-select: none;
 }
+.ms-ActivityItem {
+    color: var(--neutralSecondary);
+}
+.ms-ActivityItem-timeStamp {
+    color: var(--neutralSecondaryAlt);
+}

 #root > nav {
    height: 32px;
@ -89,6 +137,7 @@ nav .progress {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
+    color: var(--black);
 }
 .btn-group {
    display: inline-block;
@ -113,7 +162,7 @@ nav .progress {
    text-decoration: none;
    text-align: center;
    line-height: 32px;
-    color: #000;
+    color: var(--black);
    font-size: 14px;
    vertical-align: top;
 }
@ -128,7 +177,7 @@ nav.menu-on .btn-group .btn.system, nav.hide-btns .btn-group .btn.system {
    display: inline-block;
 }
 nav.menu-on .btn-group .btn.system, nav.item-on .btn-group .btn.system {
-    color: #fff;
+    color: var(--white);
 }
 .btn-group .btn:hover {
    background-color: #0001;
@ -136,9 +185,15 @@ nav.menu-on .btn-group .btn.system, nav.item-on .btn-group .btn.system {
 .btn-group .btn:active {
    background-color: #0002;
 }
+body.dark .btn-group .btn:hover {
+    background-color: #fff1;
+}
+body.dark .btn-group .btn:active {
+    background-color: #fff2;
+}
 .btn-group .btn.disabled, .btn-group .btn.fetching {
    background-color: unset;
-    color: #797775;
+    color: var(--neutralSecondaryAlt);
 }
 .btn-group .btn.fetching {
    animation: rotating linear 1.5s infinite;
@ -149,11 +204,11 @@ nav.menu-on .btn-group .btn.system, nav.item-on .btn-group .btn.system {
 }
 .btn-group .btn.close:hover {
    background-color: #e81123;
-    color: #fff !important;
+    color: var(--whiteConstant) !important;
 }
 .btn-group .btn.close:active {
    background-color: #f1707a;
-    color: #fff !important;
+    color: var(--whiteConstant) !important;
 }
 .btn-group .btn.inline-block-wide { 
    display: none;
@ -178,7 +233,7 @@ nav.menu-on .btn-group .btn.system, nav.item-on .btn-group .btn.system {
    top: 0;
    width: 280px;
    height: 100%;
-    background-color: #faf9f8;
+    background-color: var(--neutralLighterAlt);
 }
 .menu-container .menu .nav-wrapper {
    max-height: calc(100% - 32px);
@ -186,7 +241,7 @@ nav.menu-on .btn-group .btn.system, nav.item-on .btn-group .btn.system {
 }
 .menu-container .menu p.subs-header {
    font-size: 12px;
-    color: #797775;
+    color: var(--neutralSecondaryAlt);
    margin: 2px 8px;
    user-select: none;
 }
@ -198,14 +253,14 @@ nav.menu-on .btn-group .btn.system, nav.item-on .btn-group .btn.system {
    top: 0;
    width: 100%;
    height: 100%;
-    background-color: #edebe9;
+    background-color: var(--neutralLight);
    overflow: hidden;
 }
 .settings-container .settings {
    margin: 64px auto 0;
    width: 680px;
    height: calc(100% - 64px);
-    background-color: #fff;
+    background-color: var(--white);
    box-shadow: 0 6.4px 14.4px 0 rgba(0,0,0,.132), 0 1.2px 3.6px 0 rgba(0,0,0,.108);
 }
 div[role="toolbar"] {
@ -226,6 +281,9 @@ div[role="tabpanel"] {
    background-color: #fffa;
    z-index: 6;
 }
+body.dark .settings .loading {
+    background-color: #000a;
+}
 .settings .loading .ms-Spinner {
    margin-top: 180px;
 }
@ -255,10 +313,11 @@ img.favicon {
    user-select: none;
    line-height: 32px;
    font-size: 12px;
-    color: #605e5c;
+    color: var(--neutralSecondary);
 }
 .settings-about {
    margin: 72px 0;
+    color: var(--black);
 }
 .settings-about > * {
    margin: 0 !important;
@ -279,7 +338,7 @@ img.favicon {
    width: 100%;
    height: 32px;
    margin-bottom: -32px;
-    background: linear-gradient(#faf9f8ff, #faf9f800);
+    background: linear-gradient(var(--neutralLighterAlt), #faf9f800);
    z-index: 1;
 }

@ -291,16 +350,16 @@ img.favicon {
        display: inline-block;
    }
    nav.menu-on .btn-group .btn.system {
-        color: #000;
+        color: var(--black);
    }
    nav.item-on .btn-group .btn.system {
-        color: #fff;
+        color: var(--whiteConstant);
    }
    .menu-container {
        width: 280px;
    }
    .menu-container .menu {
-        background-color: #edebe9;
+        background-color: var(--neutralLight);
    }
    .menu-container .menu::after {
        content: "";
@ -329,7 +388,7 @@ img.favicon {
    margin: 32px auto 0;
    width: 860px;
    height: calc(100% - 50px);
-    background-color: #fff;
+    background-color: var(--white);
    box-shadow: 0 6.4px 14.4px 0 rgba(0,0,0,.132), 0 1.2px 3.6px 0 rgba(0,0,0,.108);
    border-radius: 5px;
    overflow: hidden;
@ -356,10 +415,11 @@ img.favicon {
    border: none;
 }
 .article i.ms-Icon {
-    color: #161514;
+    color: var(--neutralDarker);
 }
 .article .actions {
-    border-bottom: 1px solid #e1dfdd;
+    color: var(--black);
+    border-bottom: 1px solid var(--neutralQuaternaryAlt);
 }
 .article .actions .favicon {
    margin-right: 8px;
@ -377,7 +437,7 @@ img.favicon {
    flex-grow: 1;
    padding-top: 32px;
    height: calc(100% - 32px);
-    background: #fff;
+    background: var(--white);
 }
 .side-article-wrapper .article {
    display: flex;
@ -387,13 +447,13 @@ img.favicon {
    border-bottom: none;
 }
 .side-article-wrapper .article > .ms-Stack {
-    border-top: 1px solid #e1dfdd;
+    border-top: 1px solid var(--neutralQuaternaryAlt);
 }
 .list-feed-container::before, .side-article-wrapper::before {
    content: "";
    display: block;
    width: 100%;
-    border-bottom: 1px solid #e1dfdd;
+    border-bottom: 1px solid var(--neutralQuaternaryAlt);
    position: absolute;
    top: 31px;
 }
@ -405,11 +465,11 @@ img.favicon {
    position: relative;
    margin-top: -32px;
    overflow: hidden;
-    background: #fff;
+    background: var(--white);
 }
 .list-feed-container {
    width: 350px;
-    background-color: #faf9f8;
+    background-color: var(--neutralLighterAlt);
    height: 100%;
    position: relative;
 }
@ -509,11 +569,11 @@ img.favicon {
    width: 256px;
    height: 264px;
    border-radius: 4px;
-    background-color: #fff;
+    background-color: var(--white);
    overflow: hidden;
    box-shadow: #0004 0px 5px 20px;
    margin: 18px 12px;
-    color: #161514;
+    color: var(--neutralDarker);
    user-select: none;
    transition: box-shadow linear .08s;
    transform: scale(1);
@ -526,6 +586,12 @@ img.favicon {
 .card:active {
    transform: scale(.97);
 }
+body.dark .card {
+    box-shadow: #0006 0px 5px 20px;
+}
+body.dark .card:hover {
+    box-shadow: #0008 0px 5px 40px;
+}
 .card .bg {
    position: absolute;
    left: 0;
@ -540,6 +606,9 @@ img.favicon {
 .card div.bg {
    background-color: #fffb;
 }
+body.dark div.bg {
+    background-color: #000b;
+}
 .card img.head {
    display: block;
    object-fit: cover;
@ -597,10 +666,10 @@ img.favicon {
    display: flex;
    position: relative;
    overflow: hidden;
-    color: #161514;
+    color: var(--neutralDarker);
    user-select: none;
    transition: box-shadow linear .08s;
-    border-bottom: 1px solid #e1dfdd;
+    border-bottom: 1px solid var(--neutralQuaternaryAlt);
    transform: scale(1);
    cursor: pointer;
    box-shadow: #0000 0px 5px 15px;
@ -611,6 +680,12 @@ img.favicon {
 .list-card:active {
    box-shadow: #0000 0px 5px 15px, inset #0004 0px 0px 15px;
 }
+body.dark .list-card:hover {
+    box-shadow: #0006 0px 5px 15px;
+}
+body.dark .list-card:active {
+    box-shadow: #0000 0px 5px 15px, inset #0006 0px 0px 15px;
+}
 .list-card div.head {
    width: 80px;
    height: 80px;
--- a/package.json
+++ b/package.json
@ -21,14 +21,21 @@
      "output": "./bin/"
    },
    "win": {
-      "target": ["nsis", "appx"]
+      "target": [
+        "nsis",
+        "appx"
+      ],
+      "certificateFile": "./bin/key.pfx"
    },
    "appx": {
      "applicationId": "FluentReader",
      "identityName": "25286HaoyuanLiu.FluentReader",
      "publisher": "CN=FD70E7FA-E5AC-41C4-B9C4-6E8708A6616A",
      "backgroundColor": "transparent",
-      "languages": ["zh-CN", "en-US"],
+      "languages": [
+        "zh-CN",
+        "en-US"
+      ],
      "showNameOnTiles": true,
      "setBuildNumber": true
    }
@ -47,6 +54,7 @@
    "electron": "^8.3.0",
    "electron-builder": "^22.7.0",
    "electron-react-devtools": "^0.5.3",
+    "electron-store": "^5.2.0",
    "electron-window-state": "^5.0.3",
    "favicon": "0.0.2",
    "html-webpack-plugin": "^4.3.0",
--- a/src/components/article.tsx
+++ b/src/components/article.tsx
@ -130,7 +130,7 @@ class Article extends React.Component<ArticleProps, ArticleState> {
        <p className="title">{this.props.item.title}</p>
        <p className="date">{this.props.item.date.toLocaleString("zh-cn", {hour12: false})}</p>
        <article dangerouslySetInnerHTML={{__html: this.props.item.content}}></article>
-    </>))) + `&s=${this.state.fontSize}&u=${this.props.item.link}`
+    </>))) + `&s=${this.state.fontSize}&u=${this.props.item.link}&d=${Number(document.body.classList.contains("dark"))}`
    
    render = () => (
        <div className="article">
--- a/src/components/cards/list-card.tsx
+++ b/src/components/cards/list-card.tsx
@ -6,7 +6,6 @@ import CardInfo from "./info"
 class ListCard extends Card {
    className = () => {
        let cn = ["list-card", AnimationClassNames.slideUpIn10]
-        if (this.props.item.snippet && this.props.item.thumb) cn.push("transform")
        if (this.props.item.hidden) cn.push("hidden")
        return cn.join(" ")
    }
--- a/src/components/settings.tsx
+++ b/src/components/settings.tsx
@ -5,7 +5,7 @@ import AboutTab from "./settings/about"
 import { Pivot, PivotItem, Spinner } from "@fluentui/react"
 import SourcesTabContainer from "../containers/settings/sources-container"
 import GroupsTabContainer from "../containers/settings/groups-container"
-import ProxyTab from "./settings/proxy"
+import AppTab from "./settings/app"

 type SettingsProps = {
    display: boolean,
@ -37,8 +37,8 @@ class Settings extends React.Component<SettingsProps> {
                    <PivotItem headerText="分组与排序" itemIcon="GroupList">
                        <GroupsTabContainer />
                    </PivotItem>
-                    <PivotItem headerText="代理" itemIcon="Globe">
-                        <ProxyTab />
+                    <PivotItem headerText="应用选项" itemIcon="Settings">
+                        <AppTab />
                    </PivotItem>
                    <PivotItem headerText="关于" itemIcon="Info">
                        <AboutTab />
--- a/src/components/settings/proxy.tsx
+++ b/src/components/settings/proxy.tsx
@ -1,11 +1,19 @@
 import * as React from "react"
-import { getProxy, urlTest, getProxyStatus, toggleProxyStatus, setProxy } from "../../scripts/utils"
-import { Stack, Label, Toggle, TextField, DefaultButton } from "@fluentui/react"
+import { urlTest } from "../../scripts/utils"
+import { getProxy, getProxyStatus, toggleProxyStatus, setProxy, getThemeSettings, setThemeSettings, ThemeSettings } from "../../scripts/settings"
+import { Stack, Label, Toggle, TextField, DefaultButton, ChoiceGroup, IChoiceGroupOption, loadTheme } from "@fluentui/react"

-class ProxyTab extends React.Component {
+const themeChoices: IChoiceGroupOption[] = [
+    { key: ThemeSettings.Default, text: "系统默认" },
+    { key: ThemeSettings.Light, text: "浅色模式" },
+    { key: ThemeSettings.Dark, text: "深色模式" }
+]
+
+class AppTab extends React.Component {
    state = {
        pacStatus: getProxyStatus(),
-        pacUrl: getProxy() 
+        pacUrl: getProxy(),
+        themeSettings: getThemeSettings()
    }

    toggleStatus = () => {
@ -26,6 +34,11 @@ class ProxyTab extends React.Component {
        if (urlTest(this.state.pacUrl)) setProxy(this.state.pacUrl)
    }

+    onThemeChange = (_, option: IChoiceGroupOption) => {
+        setThemeSettings(option.key as ThemeSettings)
+        this.setState({ themeSettings: option.key })
+    }
+
    render = () => (
        <div className="tab-body">
            <Stack horizontal verticalAlign="baseline">
@ -55,8 +68,14 @@ class ProxyTab extends React.Component {
                    </Stack.Item>
                </Stack>
            </form>}
+
+            <ChoiceGroup
+                label="应用主题"
+                options={themeChoices}
+                onChange={this.onThemeChange}
+                selectedKey={this.state.themeSettings} />
        </div>
    )
 }

-export default ProxyTab
+export default AppTab
--- a/src/containers/context-menu-container.tsx
+++ b/src/containers/context-menu-container.tsx
@ -5,7 +5,7 @@ import { ContextMenuType, closeContextMenu } from "../scripts/models/app"
 import { ContextMenu } from "../components/context-menu"
 import { RSSItem, markRead, markUnread, toggleStarred, toggleHidden } from "../scripts/models/item"
 import { showItem, switchView, ViewType, switchFilter, toggleFilter } from "../scripts/models/page"
-import { setDefaultView } from "../scripts/utils"
+import { setDefaultView } from "../scripts/settings"
 import { FeedFilter } from "../scripts/models/feed"

 const getContext = (state: RootState) => state.app.contextMenu
--- a/src/electron.ts
+++ b/src/electron.ts
@ -1,7 +1,9 @@
-import { app, ipcMain, BrowserWindow, Menu } from "electron"
+import { app, ipcMain, BrowserWindow, Menu, nativeTheme } from "electron"
 import windowStateKeeper = require("electron-window-state")
+import Store = require('electron-store');

 let mainWindow: BrowserWindow
+const store = new Store()

 function createWindow() {
    let mainWindowState = windowStateKeeper({
@ -11,7 +13,7 @@ function createWindow() {
    // Create the browser window.
    mainWindow = new BrowserWindow({
        title: "Fluent Reader",
-        backgroundColor: "#faf9f8",
+        backgroundColor: shouldUseDarkColors() ? "#282828" : "#faf9f8",
        x: mainWindowState.x,
        y: mainWindowState.y,
        width: mainWindowState.width,
@ -47,3 +49,15 @@ app.on('activate', function () {
        createWindow()
    }
 })
+
+ipcMain.on("set-theme", (_, theme) => {
+    store.set("theme", theme)
+    nativeTheme.themeSource = theme
+})
+
+function shouldUseDarkColors() {
+    let option = store.get("theme", "system")
+    return option === "system"
+        ? nativeTheme.shouldUseDarkColors
+        : option === "dark"
+}
--- a/src/index.html
+++ b/src/index.html
@ -4,6 +4,7 @@
    <meta charset="UTF-8">
    <meta http-equiv="Content-Security-Policy" content="default-src 'none'; script-src 'self'; img-src *; style-src 'self' 'unsafe-inline'; font-src 'self' https://static2.sharepointonline.com; connect-src https://* http://*">
    <title>Fluent Reader</title>
+    <link rel="stylesheet" href="article/scroll.css">
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
--- a/src/index.tsx
+++ b/src/index.tsx
@ -1,20 +1,21 @@
 import * as React from "react"
 import * as ReactDOM from "react-dom"
 import { Provider } from "react-redux"
-import { createStore, applyMiddleware, AnyAction } from "redux"
-import thunkMiddleware, { ThunkDispatch } from "redux-thunk"
+import { createStore, applyMiddleware } from "redux"
+import thunkMiddleware from "redux-thunk"
 import { loadTheme } from '@fluentui/react'
 import { initializeIcons } from "@fluentui/react/lib/Icons"
 import { rootReducer, RootState } from "./scripts/reducer"
-import { initSources, addSource } from "./scripts/models/source"
+import { initSources } from "./scripts/models/source"
 import { fetchItems } from "./scripts/models/item"
 import Root from "./components/root"
 import { initFeeds } from "./scripts/models/feed"
-import { AppDispatch, setProxy } from "./scripts/utils"
+import { AppDispatch } from "./scripts/utils"
+import { setProxy, applyThemeSettings } from "./scripts/settings"

 setProxy()

-loadTheme({ defaultFontStyle: { fontFamily: '"Source Han Sans SC Regular", "Microsoft YaHei", sans-serif' } })
+applyThemeSettings()
 initializeIcons("icons/")

 const store = createStore(
@ -23,10 +24,6 @@ const store = createStore(
 )

 store.dispatch(initSources()).then(() => store.dispatch(initFeeds())).then(() => store.dispatch(fetchItems()))
-/* store.dispatch(addSource("https://www.gcores.com/rss"))
-.then(() => store.dispatch(addSource("https://www.ifanr.com/feed")))
-.then(() => store.dispatch(addSource("https://www.vgtime.com/rss.jhtml")))
-.then(() => store.dispatch(fetchItems())) */

 ReactDOM.render(
    <Provider store={store}>
--- a/src/scripts/models/page.ts
+++ b/src/scripts/models/page.ts
@ -1,5 +1,6 @@
 import { ALL, SOURCE, loadMore, FeedFilter, initFeeds } from "./feed"
-import { getWindowBreakpoint, AppThunk, getDefaultView } from "../utils"
+import { getWindowBreakpoint, AppThunk } from "../utils"
+import { getDefaultView } from "../settings"
 import { RSSItem, markRead } from "./item"
 import { SourceActionTypes, DELETE_SOURCE } from "./source"

--- a/src/scripts/settings.ts
+++ b/src/scripts/settings.ts
@ -0,0 +1,102 @@
+import { remote, ipcRenderer } from "electron"
+import { ViewType } from "./models/page"
+import { IPartialTheme, loadTheme } from "@fluentui/react"
+
+const PAC_STORE_KEY = "PAC"
+const PAC_STATUS_KEY = "PAC_ON"
+export function getProxyStatus() {
+    return Boolean(localStorage.getItem(PAC_STATUS_KEY))
+}
+export function toggleProxyStatus() {
+    localStorage.setItem(PAC_STATUS_KEY, getProxyStatus() ? "" : "on")
+    setProxy()
+}
+export function getProxy() {
+    return localStorage.getItem(PAC_STORE_KEY) || ""
+}
+export function setProxy(address = null) {
+    if (!address) {
+        address = getProxy()
+    } else {
+        localStorage.setItem(PAC_STORE_KEY, address)
+    }
+    remote.getCurrentWebContents().session.setProxy({
+        pacScript: getProxyStatus() ? address : ""
+    })
+    remote.session.fromPartition("sandbox").setProxy({
+        pacScript: getProxyStatus() ? address : ""
+    })
+}
+
+const VIEW_STORE_KEY = "view"
+export const getDefaultView = () => {
+    let view = localStorage.getItem(VIEW_STORE_KEY)
+    return view ? parseInt(view) as ViewType : ViewType.Cards
+}
+export const setDefaultView = (viewType: ViewType) => {
+    localStorage.setItem(VIEW_STORE_KEY, String(viewType))
+}
+
+const lightTheme: IPartialTheme = { 
+    defaultFontStyle: { fontFamily: '"Source Han Sans SC Regular", "Microsoft YaHei", sans-serif' } 
+}
+const darkTheme: IPartialTheme = {
+    ...lightTheme,
+    palette: {
+        neutralLighterAlt: '#282828',
+        neutralLighter: '#313131',
+        neutralLight: '#3f3f3f',
+        neutralQuaternaryAlt: '#484848',
+        neutralQuaternary: '#4f4f4f',
+        neutralTertiaryAlt: '#6d6d6d',
+        neutralTertiary: '#c8c8c8',
+        neutralSecondary: '#d0d0d0',
+        neutralSecondaryAlt: '#d2d0ce',
+        neutralPrimaryAlt: '#dadada',
+        neutralPrimary: '#ffffff',
+        neutralDark: '#f4f4f4',
+        black: '#f8f8f8',
+        white: '#1f1f1f',
+        themePrimary: '#3a96dd',
+        themeLighterAlt: '#020609',
+        themeLighter: '#091823',
+        themeLight: '#112d43',
+        themeTertiary: '#235a85',
+        themeSecondary: '#3385c3',
+        themeDarkAlt: '#4ba0e1',
+        themeDark: '#65aee6',
+        themeDarker: '#8ac2ec',
+        accent: '#3a96dd'
+    }
+}
+export enum ThemeSettings {
+    Default = "system", 
+    Light = "light", 
+    Dark = "dark"
+}
+const THEME_STORE_KEY = "theme"
+export function setThemeSettings(theme: ThemeSettings) {
+    localStorage.setItem(THEME_STORE_KEY, theme)
+    ipcRenderer.send("set-theme", theme)
+    applyThemeSettings()
+}
+export function getThemeSettings(): ThemeSettings {
+    let stored = localStorage.getItem(THEME_STORE_KEY)
+    return stored === null ? ThemeSettings.Default : stored as ThemeSettings
+}
+export function applyThemeSettings() {
+    let theme = getThemeSettings()
+    let useDark = theme === ThemeSettings.Default 
+        ? remote.nativeTheme.shouldUseDarkColors
+        : theme === ThemeSettings.Dark
+    loadTheme(useDark ? darkTheme : lightTheme)
+    if (useDark) { 
+        document.body.classList.add("dark")
+    } else { 
+        document.body.classList.remove("dark")
+    }
+}
+
+export const STORE_KEYS = [
+    PAC_STORE_KEY, PAC_STATUS_KEY, VIEW_STORE_KEY, THEME_STORE_KEY
+]
--- a/src/scripts/utils.ts
+++ b/src/scripts/utils.ts
@ -21,34 +21,9 @@ const customFields = {
    item: ["thumb", "image", ["content:encoded", "fullContent"]] as Parser.CustomFieldItem[]
 }

-const PAC_STORE_KEY = "PAC"
-const PAC_STATUS_KEY = "PAC_ON"
-export function getProxyStatus() {
-    return Boolean(localStorage.getItem(PAC_STATUS_KEY))
-}
-export function toggleProxyStatus() {
-    localStorage.setItem(PAC_STATUS_KEY, getProxyStatus() ? "" : "on")
-    setProxy()
-}
-export function getProxy() {
-    return localStorage.getItem(PAC_STORE_KEY) || ""
-}
-export function setProxy(address = null) {
-    if (!address) {
-        address = getProxy()
-    } else {
-        localStorage.setItem(PAC_STORE_KEY, address)
-    }
-    remote.getCurrentWebContents().session.setProxy({
-        pacScript: getProxyStatus() ? address : ""
-    })
-    remote.session.fromPartition("sandbox").setProxy({
-        pacScript: getProxyStatus() ? address : ""
-    })
-}
-
 import ElectronProxyAgent = require("@yang991178/electron-proxy-agent")
 import { ViewType } from "./models/page"
+import { IPartialTheme } from "@fluentui/react"
 let agent = new ElectronProxyAgent(remote.getCurrentWebContents().session)
 export const rssParser = new Parser({
    customFields: customFields,
@ -93,12 +68,3 @@ export const cutText = (s: string, length: number) => {
 }

 export const googleSearch = (text: string) => openExternal("https://www.google.com/search?q=" + encodeURIComponent(text))
-
-const VIEW_STORE_KEY = "view"
-export const getDefaultView = () => {
-    let view = localStorage.getItem(VIEW_STORE_KEY)
-    return view ? parseInt(view) as ViewType : ViewType.Cards
-}
-export const setDefaultView = (viewType: ViewType) => {
-    localStorage.setItem(VIEW_STORE_KEY, String(viewType))
-}