Trying to get dark mode working

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 />

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
 );

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';

src/renderer/scss/themes/_dark.scss

@@ -0,0 +1,5 @@
+html[data-theme='dark'] {
+  .header {
+    background-color: $lbry-black;
+  }
+}

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 */
+}