[PARKED] (DO NOT MERGE) Fixes #577 : Add high contrast display

src/common/redux/actions/index.ts

@@ -14,6 +14,7 @@ import * as lcpActions from "./lcp";
 import * as loggerActions from "./logger";
 import * as netActions from "./net";
 import * as readerActions from "./reader";
+import * as styleActions from "./style";
 import * as toastActions from "./toast";
 import * as updateActions from "./update";
 
@@ -29,4 +30,5 @@ export {
     importActions,
     toastActions,
     downloadActions,
+    styleActions,
 };

src/common/redux/actions/style.ts

@@ -0,0 +1,19 @@
+import { HighContrastColors } from "readium-desktop/renderer/redux/states/style";
+
+// ==LICENSE-BEGIN==
+// Copyright 2017 European Digital Reading Lab. All rights reserved.
+// Licensed to the Readium Foundation under one or more contributor license agreements.
+// Use of this source code is governed by a BSD-style license
+// that can be found in the LICENSE file exposed on Github (readium) in the project repository.
+// ==LICENSE-END==
+
+export enum ActionType {
+    HighContrastChanged = "HIGH_CONTRAST_CHANGED",
+}
+
+export function highContrastChanged(enabled: boolean, colors: HighContrastColors) {
+    return {
+        type: ActionType.HighContrastChanged,
+        payload: { enabled, colors },
+    };
+}

src/index_app.ts

@@ -11,12 +11,11 @@ import { ipcRenderer } from "electron";
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 import { syncIpc, winIpc } from "readium-desktop/common/ipc";
-// import { setLcpNativePluginPath } from "@r2-lcp-js/parser/epub/lcp";
 import { ActionWithSender } from "readium-desktop/common/models/sync";
+import { winInit } from "readium-desktop/common/redux/actions/win";
 import { IS_DEV } from "readium-desktop/preprocessor-directives";
 import App from "readium-desktop/renderer/components/App";
 import { diRendererGet } from "readium-desktop/renderer/di";
-import { winInit } from "readium-desktop/renderer/redux/actions/win";
 import { WinStatus } from "readium-desktop/renderer/redux/states/win";
 
 import { initGlobalConverters_OPDS } from "@r2-opds-js/opds/init-globals";

src/index_reader.ts

@@ -12,12 +12,11 @@ import { ipcRenderer } from "electron";
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 import { syncIpc, winIpc } from "readium-desktop/common/ipc";
-// import { setLcpNativePluginPath } from "@r2-lcp-js/parser/epub/lcp";
 import { ActionWithSender } from "readium-desktop/common/models/sync";
+import { winInit } from "readium-desktop/common/redux/actions/win";
 import { IS_DEV } from "readium-desktop/preprocessor-directives";
 import App from "readium-desktop/renderer/components/reader/App";
 import { diRendererGet } from "readium-desktop/renderer/di";
-import { winInit } from "readium-desktop/renderer/redux/actions/win";
 import { WinStatus } from "readium-desktop/renderer/redux/states/win";
 
 import { initGlobalConverters_OPDS } from "@r2-opds-js/opds/init-globals";

src/main/init.ts

@@ -6,7 +6,7 @@
 // ==LICENSE-END=
 
 import * as debug_ from "debug";
-import { app, protocol } from "electron";
+import { app, protocol, systemPreferences } from "electron";
 import * as path from "path";
 import { syncIpc, winIpc } from "readium-desktop/common/ipc";
 import { ReaderMode } from "readium-desktop/common/models/reader";
@@ -24,6 +24,9 @@ import {
     ReaderStateConfig, ReaderStateMode, ReaderStateReader,
 } from "readium-desktop/main/redux/states/reader";
 
+import { highContrastChanged } from "readium-desktop/common/redux/actions/style";
+import { HighContrastColors } from "readium-desktop/renderer/redux/states/style";
+
 // Logger
 const debug = debug_("readium-desktop:main");
 
@@ -179,6 +182,19 @@ export function initApp() {
     const store = diMainGet("store");
     store.dispatch(appInit());
 
+    systemPreferences.on("high-contrast-color-scheme-changed", (__, enabled) => {
+        const colors: HighContrastColors = {
+            background: systemPreferences.getColor("window"),
+            text: systemPreferences.getColor("window-text"),
+            buttonBackground: systemPreferences.getColor("window"),
+            buttonText: systemPreferences.getColor("button-text"),
+            highlight: systemPreferences.getColor("highlight"),
+            highlightText: systemPreferences.getColor("highlight-text"),
+            disabled: systemPreferences.getColor("disabled-text"),
+        };
+        store.dispatch(highContrastChanged(enabled, colors));
+    });
+
     const configRepository = diMainGet("config-repository");
     configRepository.get("i18n").then((i18nLocale) => {
         if (i18nLocale && i18nLocale.value && i18nLocale.value.locale) {

src/main/redux/middleware/sync.ts

@@ -7,11 +7,22 @@
 
 import * as debug_ from "debug";
 import { syncIpc } from "readium-desktop/common/ipc";
-import { ActionWithSender, SenderType } from "readium-desktop/common/models/sync";
+import {
+    ActionWithSender,
+    SenderType,
+} from "readium-desktop/common/models/sync";
 import { AppWindow } from "readium-desktop/common/models/win";
 import {
-    apiActions, dialogActions, downloadActions, i18nActions, lcpActions, netActions, readerActions,
-    toastActions, updateActions,
+    apiActions,
+    dialogActions,
+    downloadActions,
+    i18nActions,
+    lcpActions,
+    netActions,
+    readerActions,
+    styleActions,
+    toastActions,
+    updateActions,
 } from "readium-desktop/common/redux/actions";
 import { diMainGet } from "readium-desktop/main/di";
 import { AnyAction, Dispatch, Middleware, MiddlewareAPI } from "redux";
@@ -50,6 +61,8 @@ const SYNCHRONIZABLE_ACTIONS: any = [
 
     downloadActions.ActionType.DownloadRequest,
     downloadActions.ActionType.DownloadSuccess,
+
+    styleActions.ActionType.HighContrastChanged,
 ];
 
 export const reduxSyncMiddleware: Middleware

src/main/redux/sagas/index.ts

@@ -7,21 +7,14 @@
 
 import { all, call } from "redux-saga/effects";
 
+import * as api from "./api";
 import { appInitWatcher } from "./app";
-
+import * as i18n from "./i18n";
 import { netStatusWatcher } from "./net";
-
 import * as reader from "./reader";
-
-import * as api from "./api";
-
-import * as i18n from "./i18n";
-
 import * as streamer from "./streamer";
-
-import {
-    updateStatusWatcher,
-} from "./update";
+import { updateStatusWatcher } from "./update";
+import { winInitSuccessWatcher } from "./win";
 
 export function* rootSaga() {
     yield all([
@@ -44,5 +37,8 @@ export function* rootSaga() {
 
         // Update checker
         call(updateStatusWatcher),
+
+        // Window
+        call(winInitSuccessWatcher),
     ]);
 }

src/main/redux/sagas/win.ts

@@ -0,0 +1,34 @@
+// ==LICENSE-BEGIN==
+// Copyright 2017 European Digital Reading Lab. All rights reserved.
+// Licensed to the Readium Foundation under one or more contributor license agreements.
+// Use of this source code is governed by a BSD-style license
+// that can be found in the LICENSE file exposed on Github (readium) in the project repository.
+// ==LICENSE-END==
+
+import { systemPreferences } from "electron";
+import { SagaIterator } from "redux-saga";
+import { put, take } from "redux-saga/effects";
+
+import { winActions } from "readium-desktop/renderer/redux/actions";
+
+import { highContrastChanged } from "readium-desktop/common/redux/actions/style";
+import { HighContrastColors } from "readium-desktop/renderer/redux/states/style";
+
+export function* winInitSuccessWatcher(): SagaIterator {
+    while (true) {
+        yield take(winActions.ActionType.InitSuccess);
+
+        if (systemPreferences.isHighContrastColorScheme()) {
+            const colors: HighContrastColors = {
+                background: systemPreferences.getColor("window"),
+                text: systemPreferences.getColor("window-text"),
+                buttonBackground: systemPreferences.getColor("button-text"),
+                buttonText: systemPreferences.getColor("button-text"),
+                highlight: systemPreferences.getColor("highlight"),
+                disabled: systemPreferences.getColor("disabled-text"),
+                highlightText: systemPreferences.getColor("highlight-text"),
+            };
+            yield put(highContrastChanged(true, colors));
+        }
+    }
+}

src/renderer/assets/styles/app.css

@@ -1,4 +1,5 @@
 @import "./focus.css";
+@import "./variable.css";
 
 :root {
   user-select: none;
@@ -9,7 +10,8 @@ body {
   padding: 0;
   width: 100%;
   font: 1.1rem "Open Sans", sans-serif;
-	background:#fbfbfb;
+	background: var(--secondary-background-color);
+  color: var(--main-text-color);
 }
 
 .commonButton {
@@ -32,15 +34,63 @@ button {
     border: 0;
     height: 30px;
     width: 30px;
-    fill: black;
+    fill: var(--button-text-color);
     margin: 3px;
     cursor: pointer;
+    color: var(--button-text-color);
 
     &:hover {
       opacity: 1;
     }
 }
 
+svg {
+  fill: var(--main-text-color);
+}
+
 .primary {
   color: rgb(0, 188, 212);
 }
+
+:global(#high_contrast) {
+  box-shadow: none;
+
+  & button {
+    color: var(--button-text-color) !important;
+    background-color: var(--button-background-color) !important;
+    border-color: var(--button-text-color) !important;
+
+    &:disabled {
+      color: var(--disabled-color) !important;
+      border-color: var(--disabled-color) !important;
+    }
+
+    &:hover {
+      background-color: var(--button-background-color) !important;
+    }
+  }
+  & svg {
+    fill: var(--button-text-color) !important;
+  }
+
+  & a {
+    &:disabled {
+      color: var(--disabled-color) !important;
+    }
+  }
+
+  & label:hover {
+    background-color: inherit !important;
+  }
+
+  & input {
+    color: var(--button-text-color) !important;
+    background-color: var(--button-background-color) !important;
+    border-color: var(--button-text-color) !important;
+  }
+
+  & *::selection {
+    color: var(--hc-highlight-text) !important;
+    background: var(--hc-highlight) !important;
+  }
+}