New: Darkmode

* New: Native Theme Engine Co-Authored-By: Zak Saunders <thezak48@users.noreply.github.com> (cherry picked from commit 2291f3e00eb2ff9268a0b2f49da8dde82ee13c04) * Update CSS for themes * Fixup CSS values * Fixup remove duped Color-Impaired setting * Fixup Link Colors Co-Authored-By: Qstick <qstick@gmail.com>
Readarr · Jan 22, 2023 · 6e38df3 · 6e38df3
1 parent 91b8565
commit 6e38df3
Show file tree

Hide file tree

Showing 146 changed files with 923 additions and 481 deletions.
diff --git a/frontend/postcss.config.js b/frontend/postcss.config.js
@@ -1,7 +1,6 @@
 const reload = require('require-nocache')(module);
 
 const cssVarsFiles = [
-  './src/Styles/Variables/colors',
   './src/Styles/Variables/dimensions',
   './src/Styles/Variables/fonts',
   './src/Styles/Variables/animations',

diff --git a/frontend/src/Activity/Queue/ProtocolLabel.css b/frontend/src/Activity/Queue/ProtocolLabel.css
@@ -1,13 +1,13 @@
 .torrent {
   composes: label from '~Components/Label.css';
 
-  border-color: $torrentColor;
-  background-color: $torrentColor;
+  border-color: var(--torrentColor);
+  background-color: var(--torrentColor);
 }
 
 .usenet {
   composes: label from '~Components/Label.css';
 
-  border-color: $usenetColor;
-  background-color: $usenetColor;
+  border-color: var(--usenetColor);
+  background-color: var(--usenetColor);
 }
diff --git a/frontend/src/App/App.js b/frontend/src/App/App.js
@@ -4,16 +4,19 @@ import React from 'react';
 import DocumentTitle from 'react-document-title';
 import { Provider } from 'react-redux';
 import PageConnector from 'Components/Page/PageConnector';
+import ApplyTheme from './ApplyTheme';
 import AppRoutes from './AppRoutes';
 
 function App({ store, history }) {
   return (
     <DocumentTitle title={window.Readarr.instanceName}>
       <Provider store={store}>
         <ConnectedRouter history={history}>
-          <PageConnector>
-            <AppRoutes app={App} />
-          </PageConnector>
+          <ApplyTheme>
+            <PageConnector>
+              <AppRoutes app={App} />
+            </PageConnector>
+          </ApplyTheme>
         </ConnectedRouter>
       </Provider>
     </DocumentTitle>

diff --git a/frontend/src/App/ApplyTheme.js b/frontend/src/App/ApplyTheme.js
@@ -0,0 +1,49 @@
+import PropTypes from 'prop-types';
+import React, { Fragment, useCallback, useEffect } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import themes from 'Styles/Themes';
+
+function createMapStateToProps() {
+  return createSelector(
+    (state) => state.settings.ui.item.theme || window.Readarr.theme,
+    (
+      theme
+    ) => {
+      return {
+        theme
+      };
+    }
+  );
+}
+
+function ApplyTheme({ theme, children }) {
+  // Update the CSS Variables
+  const updateCSSVariables = useCallback(() => {
+    const arrayOfVariableKeys = Object.keys(themes[theme]);
+    const arrayOfVariableValues = Object.values(themes[theme]);
+
+    // Loop through each array key and set the CSS Variables
+    arrayOfVariableKeys.forEach((cssVariableKey, index) => {
+      // Based on our snippet from MDN
+      document.documentElement.style.setProperty(
+        `--${cssVariableKey}`,
+        arrayOfVariableValues[index]
+      );
+    });
+  }, [theme]);
+
+  // On Component Mount and Component Update
+  useEffect(() => {
+    updateCSSVariables(theme);
+  }, [updateCSSVariables, theme]);
+
+  return <Fragment>{children}</Fragment>;
+}
+
+ApplyTheme.propTypes = {
+  theme: PropTypes.string.isRequired,
+  children: PropTypes.object.isRequired
+};
+
+export default connect(createMapStateToProps)(ApplyTheme);
diff --git a/frontend/src/Author/Delete/DeleteAuthorModalContent.css b/frontend/src/Author/Delete/DeleteAuthorModalContent.css
@@ -8,5 +8,5 @@
 
 .deleteFilesMessage {
   margin-top: 20px;
-  color: $dangerColor;
+  color: var(--dangerColor);
 }
diff --git a/frontend/src/Author/Details/AuthorDetails.css b/frontend/src/Author/Details/AuthorDetails.css
@@ -9,7 +9,7 @@
 }
 
 .metadataMessage {
-  color: $helpTextColor;
+  color: var(--helpTextColor);
   text-align: center;
   font-weight: 300;
   font-size: 20px;
@@ -22,7 +22,7 @@
 .tabList {
   margin: 0;
   padding: 0;
-  border-bottom: 1px solid $lightGray;
+  border-bottom: 1px solid var(--lightGray);
 }
 
 .tab {
@@ -37,7 +37,7 @@
 }
 
 .selectedTab {
-  border-bottom: 4px solid $linkColor;
+  border-bottom: 4px solid var(--linkColor);
 }
 
 .tabContent {
@@ -63,7 +63,7 @@
   white-space: nowrap;
 
   &:hover {
-    color: $iconButtonHoverLightColor;
+    color: var(--iconButtonHoverLightColor);
   }
 }
 

diff --git a/frontend/src/Author/Details/AuthorDetailsHeader.css b/frontend/src/Author/Details/AuthorDetailsHeader.css
@@ -16,7 +16,7 @@
   position: absolute;
   width: 100%;
   height: 100%;
-  background: $black;
+  background: var(--black);
   opacity: 0.7;
 }
 
@@ -25,7 +25,7 @@
   padding: 30px;
   width: 100%;
   height: 100%;
-  color: $white;
+  color: var(--white);
 }
 
 .poster {
@@ -69,7 +69,7 @@
   width: 40px;
 
   &:hover {
-    color: $iconButtonHoverLightColor;
+    color: var(--iconButtonHoverLightColor);
   }
 }
 
@@ -97,7 +97,7 @@
   white-space: nowrap;
 
   &:hover {
-    color: $iconButtonHoverLightColor;
+    color: var(--iconButtonHoverLightColor);
   }
 }
 

diff --git a/frontend/src/Author/Details/AuthorDetailsSeason.css b/frontend/src/Author/Details/AuthorDetailsSeason.css
@@ -1,8 +1,8 @@
 .bookType {
   margin-bottom: 20px;
-  border: 1px solid $borderColor;
+  border: 1px solid var(--borderColor);
   border-radius: 4px;
-  background-color: $white;
+  background-color: var(--cardBackgroundColor);
 
   &:last-of-type {
     margin-bottom: 0;
@@ -77,7 +77,7 @@
 
 .books {
   padding-top: 15px;
-  border-top: 1px solid $borderColor;
+  border-top: 1px solid var(--borderColor);
 }
 
 .collapseButtonContainer {
@@ -86,10 +86,10 @@
   justify-content: center;
   padding: 10px 15px;
   width: 100%;
-  border-top: 1px solid $borderColor;
+  border-top: 1px solid var(--borderColor);
   border-bottom-right-radius: 4px;
   border-bottom-left-radius: 4px;
-  background-color: #fafafa;
+  background-color: var(--collapseButtonBackgroundColor);
 }
 
 .collapseButtonIcon {

diff --git a/frontend/src/Author/Details/AuthorDetailsSeries.css b/frontend/src/Author/Details/AuthorDetailsSeries.css
@@ -1,8 +1,8 @@
 .bookType {
   margin-bottom: 20px;
-  border: 1px solid $borderColor;
+  border: 1px solid var(--borderColor);
   border-radius: 4px;
-  background-color: $white;
+  background-color: var(--cardBackgroundColor);
 
   &:last-of-type {
     margin-bottom: 0;
@@ -77,7 +77,7 @@
 
 .books {
   padding-top: 15px;
-  border-top: 1px solid $borderColor;
+  border-top: 1px solid var(--borderColor);
 }
 
 .collapseButtonContainer {
@@ -86,10 +86,10 @@
   justify-content: center;
   padding: 10px 15px;
   width: 100%;
-  border-top: 1px solid $borderColor;
+  border-top: 1px solid var(--borderColor);
   border-bottom-right-radius: 4px;
   border-bottom-left-radius: 4px;
-  background-color: #fafafa;
+  background-color: var(--cardBackgroundColor);
 }
 
 .collapseButtonIcon {

diff --git a/frontend/src/Author/Editor/Delete/DeleteAuthorModalContent.css b/frontend/src/Author/Editor/Delete/DeleteAuthorModalContent.css
@@ -9,5 +9,5 @@
 
 .path {
   margin-left: 5px;
-  color: $dangerColor;
+  color: var(--dangerColor);
 }
diff --git a/frontend/src/Author/Index/AuthorIndexFooter.css b/frontend/src/Author/Index/AuthorIndexFooter.css
@@ -21,32 +21,32 @@
 .continuing {
   composes: legendItemColor;
 
-  background-color: $primaryColor;
+  background-color: var(--primaryColor);
 }
 
 .ended {
   composes: legendItemColor;
 
-  background-color: $successColor;
+  background-color: var(--successColor);
 }
 
 .missingMonitored {
   composes: legendItemColor;
 
-  background-color: $dangerColor;
+  background-color: var(--dangerColor);
 
   &:global(.colorImpaired) {
-    background: repeating-linear-gradient(90deg, color($dangerColor shade(5%)), color($dangerColor shade(5%)) 5px, color($dangerColor shade(15%)) 5px, color($dangerColor shade(15%)) 10px);
+    background: repeating-linear-gradient(90deg, color(#f05050 shade(5%)), color(#f05050 shade(5%)) 5px, color(#f05050 shade(15%)) 5px, color(#f05050 shade(15%)) 10px);
   }
 }
 
 .missingUnmonitored {
   composes: legendItemColor;
 
-  background-color: $warningColor;
+  background-color: var(--warningColor);
 
   &:global(.colorImpaired) {
-    background: repeating-linear-gradient(45deg, $warningColor, $warningColor 5px, color($warningColor tint(15%)) 5px, color($warningColor tint(15%)) 10px);
+    background: repeating-linear-gradient(45deg, #ffa500, #ffa500 5px, color(#ffa500 tint(15%)) 5px, color(#ffa500 tint(15%)) 10px);
   }
 }
 

diff --git a/frontend/src/Author/Index/Overview/AuthorIndexOverview.css b/frontend/src/Author/Index/Overview/AuthorIndexOverview.css
@@ -3,7 +3,7 @@ $hoverScale: 1.05;
 .container {
   &:hover {
     .content {
-      background-color: $tableRowHoverBackgroundColor;
+      background-color: var(--tableRowHoverBackgroundColor);
     }
   }
 }
@@ -35,10 +35,10 @@ $hoverScale: 1.05;
   composes: link from '~Components/Link/Link.css';
 
   display: block;
-  color: $defaultColor;
+  color: var(--defaultColor);
 
   &:hover {
-    color: $defaultColor;
+    color: var(--defaultColor);
     text-decoration: none;
   }
 }
@@ -52,8 +52,8 @@ $hoverScale: 1.05;
   height: 0;
   border-width: 0 25px 25px 0;
   border-style: solid;
-  border-color: transparent $dangerColor transparent transparent;
-  color: $white;
+  border-color: transparent var(--dangerColor) transparent transparent;
+  color: var(--white);
 }
 
 .info {

diff --git a/frontend/src/Author/Index/Posters/AuthorIndexPoster.css b/frontend/src/Author/Index/Posters/AuthorIndexPoster.css
@@ -5,7 +5,7 @@ $hoverScale: 1.05;
 
   &:hover {
     z-index: 2;
-    box-shadow: 0 0 12px $black;
+    box-shadow: 0 0 12px var(--black);
     transition: all 200ms ease-in;
 
     .controls {
@@ -32,7 +32,7 @@ $hoverScale: 1.05;
   position: relative;
   display: block;
   height: 70px;
-  background-color: $defaultColor;
+  background-color: var(--defaultColor);
 }
 
 .overlayTitle {
@@ -45,22 +45,21 @@ $hoverScale: 1.05;
   padding: 5px;
   width: 100%;
   height: 100%;
-  color: $offWhite;
+  color: var(--offWhite);
   text-align: center;
   font-size: 20px;
 }
 
 .nextAiring {
-  background-color: #fafbfc;
+  background-color: var(--seriesBackgroundColor);
   text-align: center;
   font-size: $smallFontSize;
 }
 
 .title {
   @add-mixin truncate;
 
-  background-color: $defaultColor;
-  color: $white;
+  background-color: var(--seriesBackgroundColor);
   text-align: center;
   font-size: $smallFontSize;
 }
@@ -74,8 +73,8 @@ $hoverScale: 1.05;
   height: 0;
   border-width: 0 25px 25px 0;
   border-style: solid;
-  border-color: transparent $dangerColor transparent transparent;
-  color: $white;
+  border-color: transparent var(--dangerColor) transparent transparent;
+  color: var(--white);
 }
 
 .editorSelect {
@@ -91,8 +90,8 @@ $hoverScale: 1.05;
   left: 10px;
   z-index: 3;
   border-radius: 4px;
-  background-color: $themeLightColor;
-  color: $white;
+  background-color: var(--readarrRed);
+  color: var(--white);
   font-size: $smallFontSize;
   opacity: 0;
   transition: opacity 0;

diff --git a/frontend/src/Author/Index/Posters/AuthorIndexPosterInfo.css b/frontend/src/Author/Index/Posters/AuthorIndexPosterInfo.css
@@ -1,5 +1,5 @@
 .info {
-  background-color: #fafbfc;
+  background-color: var(--seriesBackgroundColor);
   text-align: center;
   font-size: $smallFontSize;
 }