Create "light mode" theme

src/common/reducers/preferences.ts

@@ -22,6 +22,7 @@ export const initialState = {
   preferOptimizedPatches: false,
   disableBrowser: env.integrationTests ? true : false,
   enableTabs: false,
+  lightMode: false,
 } as PreferencesState;
 
 export default reducer<PreferencesState>(initialState, (on) => {

src/common/types/index.ts

@@ -450,6 +450,9 @@ export interface PreferencesState {
   /** when closing window, keep running in tray */
   closeToTray: boolean;
 
+  /** toggle light mode on or off */
+  lightMode: boolean;
+
   /** notify when a download has been installed or updated */
   readyNotification: boolean;
 

src/main/reactors/winds.ts

@@ -530,6 +530,13 @@ function getIconPath(): string {
 function commonBrowserWindowOpts(
   store: Store
 ): Partial<BrowserWindowConstructorOptions> {
+  logger.debug("---");
+  logger.debug("---");
+  logger.debug("---");
+  logger.debug("Common browser window opts");
+  logger.debug("---");
+  logger.debug("---");
+  logger.debug("---");
   return {
     icon: getIconPath(),
     autoHideMenuBar: true,

src/renderer/App/Modals.tsx

@@ -34,11 +34,16 @@ import styled, * as styles from "renderer/styles";
 import { T, TString } from "renderer/t";
 import { filter, isEmpty, map } from "underscore";
 import { isSecretClick } from "common/helpers/secret-click";
+import { lightTheme } from "renderer/lightTheme";
 
 const HoverCover = Hoverable(Cover);
 
 type Flavor = "normal" | "big";
 
+let lColor = global.ReduxStore.getState().preferences.lightMode
+  ? lightTheme.colors.ivory
+  : styles.colors.ivory;
+
 const ModalPortalDiv = styled.div`
   position: fixed;
   top: 0;
@@ -149,10 +154,10 @@ const ModalsDiv = styled.div`
       }
 
       a {
-        color: darken($ivory, 5%);
+        color: darken(${lColor}, 5%);
 
         &:hover {
-          color: $ivory;
+          color: ${lColor};
           cursor: pointer;
         }
       }
@@ -271,6 +276,7 @@ const ButtonsDiv = styled.div`
   flex-direction: row;
   align-items: center;
   padding: 20px;
+  background-color: ${(props) => props.theme.breadBackground};
 
   & > * {
     margin-left: 8px;

src/renderer/App/index.tsx

@@ -3,6 +3,7 @@ const Profiler = require("react").unstable_Profiler;
 import { IntlProvider } from "react-intl";
 import { hook } from "renderer/hocs/hook";
 import { theme, ThemeProvider } from "renderer/styles";
+import { lightTheme } from "renderer/lightTheme";
 import AppContents from "renderer/App/AppContents";
 import { isEqual } from "underscore";
 
@@ -17,6 +18,7 @@ class App extends React.PureComponent<Props, State> {
       messages: {},
       localeMessages: {},
       fallbackMessages: {},
+      lightMode: false,
     };
   }
 
@@ -42,10 +44,11 @@ class App extends React.PureComponent<Props, State> {
 
   realRender() {
     const { localeVersion, locale, messages } = this.state;
+    const { lightMode } = this.props;
 
     return (
       <IntlProvider key={localeVersion} locale={locale} messages={messages}>
-        <ThemeProvider theme={theme}>
+        <ThemeProvider theme={lightMode ? lightTheme : theme}>
           <AppContents />
         </ThemeProvider>
       </IntlProvider>
@@ -70,6 +73,7 @@ class App extends React.PureComponent<Props, State> {
           ...props.fallbackMessages,
           ...props.localeMessages,
         },
+        lightMode: props.lightMode,
       };
     }
     return null;
@@ -84,6 +88,7 @@ interface Props {
   fallbackMessages: {
     [id: string]: string;
   };
+  lightMode: boolean;
 }
 
 interface State {
@@ -99,6 +104,7 @@ interface State {
   fallbackMessages: {
     [id: string]: string;
   };
+  lightMode: boolean;
 }
 
 const emptyObj = {};
@@ -110,4 +116,5 @@ export default hook((map) => ({
     return strings[lang] || strings[lang.substring(0, 2)] || emptyObj;
   }),
   fallbackMessages: map((rs) => rs.i18n.strings.en || emptyObj),
+  lightMode: map((rs) => rs.preferences.lightMode),
 }))(App);

src/renderer/basics/Button.tsx

@@ -8,6 +8,13 @@ const Label = styled.div`
   ${styles.singleLine};
 `;
 
+const buttonBackground = `
+    hsla(355, 40%, 21%, 1),
+    hsla(355, 40%, 32%, 1)`;
+
+const primaryBackground = `
+    hsla(355, 50%, 32%, 1),
+    hsla(355, 50%, 48%, 1)`;
 const ButtonDiv = styled.div`
   ${styles.singleLine};
   transition: all 0.2s;
@@ -20,17 +27,13 @@ const ButtonDiv = styled.div`
   border-width: 4px 1px 1px 1px;
   border-radius: 3px;
 
-  background-image: linear-gradient(
-    10deg,
-    hsla(355, 40%, 21%, 1),
-    hsla(355, 40%, 32%, 1)
-  );
+  background-image: linear-gradient(10deg, ${buttonBackground});
   border-color: hsla(355, 40%, 44%, 1);
 
   box-shadow: 0 1px 3px ${(props) => props.theme.inputBoxShadow};
   text-shadow: 0px 1px rgba(0, 0, 0, 0.4);
 
-  color: ${(props) => props.theme.baseText};
+  color: #fffff0;
   min-height: 38px;
   min-width: 7em;
 
@@ -45,11 +48,7 @@ const ButtonDiv = styled.div`
 
   &.primary {
     font-weight: bold;
-    background-image: linear-gradient(
-      10deg,
-      hsla(355, 50%, 32%, 1),
-      hsla(355, 50%, 48%, 1)
-    );
+    background-image: linear-gradient(10deg, ${primaryBackground});
     border-color: hsla(355, 40%, 52%, 1);
   }
 

src/renderer/basics/GameStats.tsx

@@ -24,7 +24,7 @@ const GameStatsDiv = styled.div`
   }
 
   label {
-    color: #fff;
+    color: ${(props) => props.theme.baseText};
 
     .nice-ago {
       color: ${(props) => props.theme.secondaryText}; // sigh

src/renderer/basics/NavigationBar.tsx

@@ -82,6 +82,26 @@ const browserAddressStyle = css`
   }
 `;
 
+const lightBrowserAddressStyle = css`
+  ${browserAddressSizing};
+  ${styles.singleLine};
+  font-size: 14px;
+  text-shadow: 0 0 1px black;
+  padding: 0;
+  padding-left: 8px;
+  padding-right: 12px;
+  width: 100%;
+  color: #333333;
+
+  border: none;
+  background: rgba(200, 200, 200, 0.7);
+  box-shadow: none;
+
+  &:focus {
+    outline: none;
+  }
+`;
+
 const AddressWrapper = styled.div`
   ${browserAddressSizing};
   margin: 0 6px;
@@ -101,6 +121,13 @@ const AddressInput = styled.input`
   color: white;
 `;
 
+const LightAddressInput = styled.input`
+  ${lightBrowserAddressStyle};
+
+  text-shadow: 0 0 1px transparent;
+  color: black;
+`;
+
 const AddressDiv = styled.div`
   ${browserAddressStyle};
 
@@ -113,6 +140,18 @@ const AddressDiv = styled.div`
   }
 `;
 
+const LightAddressDiv = styled.div`
+  ${lightBrowserAddressStyle};
+
+  .security-theater-bit {
+    color: rgb(108, 145, 85);
+  }
+
+  .fluff-bit {
+    color: rgb(75, 121, 166);
+  }
+`;
+
 function isHTMLInput(el: HTMLElement): el is HTMLInputElement {
   return el.tagName === "INPUT";
 }
@@ -201,14 +240,45 @@ class NavigationBar extends React.PureComponent<Props, State> {
   }
 
   renderAddressBar() {
-    const { loading, url } = this.props;
+    const { loading, url, lightMode } = this.props;
 
     if (!this.props.showAddressBar) {
       return null;
     }
 
     let { editingAddress } = this.state;
 
+    if (lightMode) {
+      return (
+        <>
+          {loading ? (
+            <IconButton icon="cross" onClick={this.stop} />
+          ) : (
+            <IconButton icon="repeat" onClick={this.reload} />
+          )}
+          <AddressWrapper className={classNames({ editing: editingAddress })}>
+            {editingAddress ? (
+              <LightAddressInput
+                className="browser-address"
+                type="search"
+                ref={this.onBrowserAddress as any}
+                defaultValue={url}
+                onKeyDown={this.addressKeyDown}
+                onBlur={this.addressBlur}
+              />
+            ) : (
+              <LightAddressDiv
+                className={classNames("browser-address")}
+                ref={this.onBrowserAddress}
+                onClick={this.startEditingAddress}
+              >
+                {this.renderURL(url)}
+              </LightAddressDiv>
+            )}
+          </AddressWrapper>
+        </>
+      );
+    }
     return (
       <>
         {loading ? (
@@ -345,11 +415,13 @@ interface Props {
   internalPage: string;
   canGoBack: string;
   canGoForward: string;
+  lightMode: boolean;
 }
 
 interface State {
   url: string;
   editingAddress: boolean;
+  lightMode: boolean;
 }
 
 export default withTab(
@@ -360,5 +432,6 @@ export default withTab(
     ),
     canGoBack: map((rs, props) => ambientTab(rs, props).status.canGoBack),
     canGoForward: map((rs, props) => ambientTab(rs, props).status.canGoForward),
+    lightMode: map((rs) => rs.preferences.lightMode),
   }))(NavigationBar)
 );

src/renderer/global-styles/base.ts

@@ -1,6 +1,11 @@
 import { css, theme } from "renderer/styles";
+import { lightTheme } from "renderer/lightTheme";
 import env from "renderer/env";
 
+const currentTheme = global.ReduxStore.getState().preferences.lightMode
+  ? lightTheme
+  : theme;
+
 const testDisables = () => {
   if (!env.integrationTests) {
     return css``;
@@ -33,7 +38,7 @@ export default css`
     user-select: none;
 
     font-family: LatoWeb, sans-serif;
-    color: ${theme.baseText};
+    color: ${currentTheme.baseText};
   }
 
   img.emojione {
@@ -46,10 +51,10 @@ export default css`
   }
 
   a {
-    color: ${theme.accent};
+    color: ${currentTheme.accent};
 
     &[href^="itch:"] {
-      color: ${theme.baseText};
+      color: ${currentTheme.baseText};
       text-decoration: none;
 
       &:hover {