From 98349d6b411e49c8af5aaba348e151583265b20a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=83=9D=E3=83=BC=E3=83=AB=20=E3=82=A6=E3=82=A7=E3=83=83?=
 =?UTF-8?q?=E3=83=96?= <netopwibby@thenetwork.email>
Date: Thu, 18 Oct 2018 11:45:24 -0500
Subject: [PATCH] Trying to get dark mode working

---
 src/renderer/component/app/view.jsx      |  7 +++++--
 src/renderer/redux/selectors/settings.js |  7 ++++++-
 src/renderer/scss/all.scss               |  2 +-
 src/renderer/scss/themes/_dark.scss      |  5 +++++
 static/themes/dark.css                   | 19 ++++++++++++++++---
 5 files changed, 33 insertions(+), 7 deletions(-)
 create mode 100644 src/renderer/scss/themes/_dark.scss

diff --git a/src/renderer/component/app/view.jsx b/src/renderer/component/app/view.jsx
index a23a258ea..120a271a8 100644
--- a/src/renderer/component/app/view.jsx
+++ b/src/renderer/component/app/view.jsx
@@ -1,12 +1,13 @@
 // @flow
 import React from 'react';
 import Router from 'component/router/index';
-import Theme from 'component/theme';
+// import Theme from 'component/theme';
 import ModalRouter from 'modal/modalRouter';
 import ReactModal from 'react-modal';
 import throttle from 'util/throttle';
 import SideBar from 'component/sideBar';
 import Header from 'component/header';
+import { whatIsTheTheme } from 'redux/selectors/settings';
 import { openContextMenu } from '../../util/contextMenu';
 
 type Props = {
@@ -32,6 +33,9 @@ class App extends React.PureComponent<Props> {
     document.addEventListener('unhandledError', (event: any) => {
       alertError(event.detail);
     });
+
+    // $FlowFixMe
+    document.documentElement.setAttribute('data-theme', whatIsTheTheme());
   }
 
   componentDidMount() {
@@ -81,7 +85,6 @@ class App extends React.PureComponent<Props> {
   render() {
     return (
       <div id="window" onContextMenu={e => openContextMenu(e)}>
-        <Theme />
         <Header />
         <main className="page">
           <SideBar />
diff --git a/src/renderer/redux/selectors/settings.js b/src/renderer/redux/selectors/settings.js
index 11299c9af..6c33fa604 100644
--- a/src/renderer/redux/selectors/settings.js
+++ b/src/renderer/redux/selectors/settings.js
@@ -30,10 +30,15 @@ export const selectThemePath = createSelector(
   selectIsNight,
   (theme, automaticDarkModeEnabled, isNight) => {
     const dynamicTheme = automaticDarkModeEnabled && isNight ? 'dark' : theme;
-    return `${staticResourcesPath}/themes/${dynamicTheme || 'light'}.css`;
+    // return `${staticResourcesPath}/themes/${dynamicTheme || 'light'}.css`;
+    return dynamicTheme || 'light';
   }
 );
 
+// TODO: I have no idea what I am doing
+export const whatIsTheTheme = () =>
+  selectAutomaticDarkModeEnabled || selectIsNight || selectTheme === 'dark' ? 'dark' : 'light';
+
 export const selectosNotificationsEnabled = makeSelectClientSetting(
   SETTINGS.OS_NOTIFICATIONS_ENABLED
 );
diff --git a/src/renderer/scss/all.scss b/src/renderer/scss/all.scss
index 170d90d75..8cea5ff5e 100644
--- a/src/renderer/scss/all.scss
+++ b/src/renderer/scss/all.scss
@@ -8,4 +8,4 @@
   'component/markdown-editor', 'component/scrollbar', 'component/spinner', 'component/nav',
   'component/file-list', 'component/file-render', 'component/search', 'component/toggle',
   'component/search', 'component/dat-gui', 'component/item-list', 'component/time', 'component/icon',
-  'component/placeholder';
+  'component/placeholder', 'themes/dark';
diff --git a/src/renderer/scss/themes/_dark.scss b/src/renderer/scss/themes/_dark.scss
new file mode 100644
index 000000000..bd5cddbc6
--- /dev/null
+++ b/src/renderer/scss/themes/_dark.scss
@@ -0,0 +1,5 @@
+html[data-theme='dark'] {
+  .header {
+    background-color: $lbry-black;
+  }
+}
diff --git a/static/themes/dark.css b/static/themes/dark.css
index 0c2fccd77..2ed9f8008 100644
--- a/static/themes/dark.css
+++ b/static/themes/dark.css
@@ -1,5 +1,6 @@
-:root {
+@import url("../../node_modules/@lbry/color/lbry-color.css");
 
+:root {
   /* Colors */
   --color-divider: #53637C;
   --color-canvas: transparent;
@@ -15,8 +16,8 @@
   --text-color: var(--color-text-white);
   --text-help-color: $lbry-gray-5;
 
-   /* Form */
-   --form-label-color: $lbry-white;
+  /* Form */
+  --form-label-color: $lbry-white;
 
   /* Input */
   --input-bg: transparent;
@@ -94,3 +95,15 @@
   /* Shadows */
   --box-shadow-header: 0 6px 20px 1px rgba(0, 0, 0, 0.2);
 }
+
+html,
+.card {
+  /* filter: invert(100%) hue-rotate(180deg); */
+}
+
+.card {
+}
+
+.header {
+  background-color: #212529; /* lbry-black */
+}