Add support for template switching using Theme Park templates

frontend/.stylelintrc

@@ -4,6 +4,7 @@
 ],
 "ignoreFiles": [
   "frontend/src/Styles/scaffolding.css",
+  "**/Theme.Park/**/*.css",
   "**/*.js"
 ],
 "rules": {

frontend/build/webpack.config.js

@@ -124,6 +124,20 @@ module.exports = (env) => {
               {
                 source: 'frontend/src/Content/robots.txt',
                 destination: path.join(distFolder, 'Content/robots.txt')
+              },
+
+              // Theme.Park
+              {
+                source: 'frontend/src/Content/Theme.Park/*',
+                destination: path.join(distFolder, 'Content/Theme.Park')
+              },
+              {
+                source: 'frontend/src/Content/Theme.Park/Themes/*',
+                destination: path.join(distFolder, 'Content/Theme.Park/Themes')
+              },
+              {
+                source: 'frontend/src/Content/Theme.Park/Resources/*',
+                destination: path.join(distFolder, 'Content/Theme.Park/Resources')
               }
             ]
           }
@@ -243,6 +257,19 @@ module.exports = (env) => {
               }
             }
           ]
+        },
+
+        {
+          test: /\.(png)?$/,
+          use: [
+            {
+              loader: 'file-loader',
+              options: {
+                emitFile: false,
+                name: 'Content/Theme.Park/Resources/[name].[ext]'
+              }
+            }
+          ]
         }
       ]
     }

frontend/src/App/ThemeSelector.js

@@ -0,0 +1,29 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+const theme = window.Radarr.theme;
+
+function ThemeSelector({ children }) {
+  return (
+    <>
+      {
+        theme !== 'default' &&
+          <>
+            <link rel="stylesheet" type="text/css"
+              href={'/Content/Theme.Park/radarr-base.css'}
+            />
+            <link rel="stylesheet" type="text/css"
+              href={`/Content/Theme.Park/Themes/${theme}.css`}
+            />
+          </>
+      }
+      {children}
+    </>
+  );
+}
+
+ThemeSelector.propTypes = {
+  children: PropTypes.object.isRequired
+};
+
+export default ThemeSelector;

frontend/src/Components/Form/FormInputGroup.js

@@ -113,6 +113,8 @@ function FormInputGroup(props) {
     helpTexts,
     helpTextWarning,
     helpLink,
+    inlineLink,
+    tooltip,
     pending,
     errors,
     warnings,
@@ -182,6 +184,9 @@ function FormInputGroup(props) {
         !checkInput && helpText &&
           <FormInputHelpText
             text={helpText}
+            link={inlineLink}
+            tooltip={tooltip}
+            isWarning={!!inlineLink}
           />
       }
 
@@ -263,6 +268,8 @@ FormInputGroup.propTypes = {
   helpTexts: PropTypes.arrayOf(PropTypes.string),
   helpTextWarning: PropTypes.string,
   helpLink: PropTypes.string,
+  inlineLink: PropTypes.string,
+  tooltip: PropTypes.string,
   pending: PropTypes.bool,
   errors: PropTypes.arrayOf(PropTypes.object),
   warnings: PropTypes.arrayOf(PropTypes.object)

frontend/src/Content/Theme.Park/Themes/aquamarine.css

@@ -0,0 +1,30 @@
+:root {
+  --main-bg-color: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed;
+  
+  --modal-bg-color: radial-gradient(ellipse at top, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed;
+  --modal-header-color: radial-gradient(ellipse at top, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed;
+  --modal-footer-color: radial-gradient(ellipse at top, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed;
+
+  --drop-down-menu-bg: radial-gradient(ellipse at top, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed;
+
+  --button-color: #009688;
+  --button-color-hover: #12afa0;
+  --button-text: #eee;
+  --button-text-hover: #FFF;
+
+  --accent-color:  18, 175, 160;
+  --accent-color-hover: rgb(var(--accent-color),.8);
+  --link-color: #0ed2bf;
+  --link-color-hover: #36e7d6;
+  --label-text-color: #fff;
+
+  --text:#ddd;
+  --text-hover: #fff;
+  --text-muted: #999;
+
+  /*Specials*/
+  --arr-queue-color: #009688; /* Servarr apps + Bazarr*/
+  --plex-poster-unwatched: rgb(21, 213, 194);
+  --petio-spinner: invert(39%) sepia(98%) saturate(527%) hue-rotate(129deg) brightness(94%) contrast(101%); /* Made with https://codepen.io/jsm91/embed/ZEEawyZ */
+  --gitea-color-primary-dark-4: 18, 175, 160;
+}

frontend/src/Content/Theme.Park/Themes/dark.css

@@ -0,0 +1,30 @@
+:root {
+  --main-bg-color: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed;
+  
+  --modal-bg-color: radial-gradient(circle , #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed;
+  --modal-header-color: radial-gradient(circle , #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed;
+  --modal-footer-color: radial-gradient(circle , #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed;
+
+  --drop-down-menu-bg: #2d2d2d;
+
+  --button-color: #7a7a7a;
+  --button-color-hover: #9b9b9b;
+  --button-text: #eee;
+  --button-text-hover: #FFF;
+
+  --accent-color: 170, 170, 170;
+  --accent-color-hover: rgba(255, 255, 255, 0.45);
+  --link-color: #7a7a7a;
+  --link-color-hover: #fff;
+  --label-text-color: black;
+    
+  --text:#ddd;
+  --text-hover: #fff;
+  --text-muted: #999;
+
+  /*Specials*/
+  --arr-queue-color: #6b5; /* Servarr apps + Bazarr*/
+  --plex-poster-unwatched: #e5a00d;
+  --petio-spinner: invert(35%) sepia(12%) saturate(4%) hue-rotate(2deg) brightness(104%) contrast(86%);/* Made with https://codepen.io/jsm91/embed/ZEEawyZ */
+  --gitea-color-primary-dark-4: 255, 255, 255;
+}

frontend/src/Content/Theme.Park/Themes/dracula.css

@@ -0,0 +1,30 @@
+:root {
+  --main-bg-color: #282a36;
+  
+  --modal-bg-color: #1e2029;
+  --modal-header-color: #1e2029;
+  --modal-footer-color: #1e2029;
+
+  --drop-down-menu-bg: #1e2029;
+
+  --button-color: #bd93f9;
+  --button-color-hover: #ff79c6;
+  --button-text: #eee;
+  --button-text-hover: #FFF;
+
+  --accent-color:  80, 250, 123;
+  --accent-color-hover: rgb(var(--accent-color),.8);
+  --link-color: #ff79c6;
+  --link-color-hover: #8be9fd;
+  --label-text-color: #282a36;
+    
+  --text:#6272a4;
+  --text-hover: #95adfa;
+  --text-muted: #999;
+
+  /*Specials*/
+  --arr-queue-color: #50fa7b; /* Servarr apps + Bazarr*/
+  --plex-poster-unwatched: #bd93f9;
+  --petio-spinner: invert(79%) sepia(27%) saturate(1033%) hue-rotate(74deg) brightness(104%) contrast(96%);/* Made with https://codepen.io/jsm91/embed/ZEEawyZ */
+  --gitea-color-primary-dark-4: 80, 250, 123;
+  }

frontend/src/Content/Theme.Park/Themes/hotline.css

@@ -0,0 +1,30 @@
+:root {
+  --main-bg-color: linear-gradient(0deg, rgba(247,101,184,1) 0%, rgb(21, 95, 165) 100%) center center/cover no-repeat fixed;
+
+  --modal-bg-color: linear-gradient(0deg, rgba(247,101,184,1) 0%, rgb(21, 95, 165) 100%) center center/cover no-repeat fixed;
+  --modal-header-color: linear-gradient(0deg, rgba(247,101,184,1) 0%, rgb(21, 95, 165) 100%) center center/cover no-repeat fixed;
+  --modal-footer-color: linear-gradient(0deg, rgba(247,101,184,1) 0%, rgb(21, 95, 165) 100%) center center/cover no-repeat fixed;
+  
+  --drop-down-menu-bg: linear-gradient(90deg, rgba(247,101,184,1) 0%, rgba(21, 95, 165) 100%) center center/cover no-repeat fixed;
+
+  --button-color: #f98dc9;
+  --button-color-hover: #ff4cb1;
+  --button-text: #eee;
+  --button-text-hover: #fff;
+  
+  --accent-color:  249, 141, 201;
+  --accent-color-hover: rgb(var(--accent-color),.8);
+  --link-color:rgb(255, 179, 222);
+  --link-color-hover: #d7fffe;
+  --label-text-color: #fff;
+    
+  --text:#ddd;
+  --text-hover: #fff;
+  --text-muted: #999;
+
+  /*Specials*/
+  --arr-queue-color: #f98dc9; /* Servarr apps + Bazarr*/
+  --plex-poster-unwatched: #f765b8;
+  --petio-spinner: invert(78%) sepia(17%) saturate(4447%) hue-rotate(290deg) brightness(109%) contrast(95%); /* Made with https://codepen.io/jsm91/embed/ZEEawyZ */ 
+  --gitea-color-primary-dark-4: 215,255,254;
+}

frontend/src/Content/Theme.Park/Themes/hotpink.css

@@ -0,0 +1,30 @@
+:root {
+  --main-bg-color: linear-gradient(45deg, #fb3f62 0%, #204c80 37%, #004249 97%) center center/cover no-repeat fixed;
+
+  --modal-bg-color: radial-gradient(circle, #204c80 0%, #000 100%) center center/cover no-repeat fixed;
+  --modal-header-color: radial-gradient(circle, #204c80 0%, #000 100%) center center/cover no-repeat fixed;
+  --modal-footer-color: radial-gradient(circle, #204c80 0%, #000 100%) center center/cover no-repeat fixed;
+
+  --drop-down-menu-bg: #204c80;
+
+  --button-color: #fb3f62;
+  --button-color-hover: #cd4164;
+  --button-text: #eee;
+  --button-text-hover: #FFF;
+
+  --accent-color:  251, 63, 98;
+  --accent-color-hover: rgba(var(--accent-color), .8);
+  --link-color: rgb(0, 255, 157);
+  --link-color-hover: rgba(0, 255, 157, 0.8);
+  --label-text-color: #282a36;
+  
+  --text:#eee;
+  --text-hover: #fff;
+  --text-muted: #999;
+  
+  --arr-queue-color: rgb(0, 255, 157);
+  --plex-poster-unwatched: #fb3f62;
+  --petio-spinner: invert(29%) sepia(87%) saturate(2199%) hue-rotate(331deg) brightness(115%) contrast(97%); /* Made with https://codepen.io/jsm91/embed/ZEEawyZ */
+  --gitea-color-primary-dark-4: 251, 63, 98;
+  }
+

frontend/src/Content/Theme.Park/Themes/nord.css

@@ -0,0 +1,30 @@
+:root {
+  --main-bg-color: #2E3440;
+  
+  --modal-bg-color: #3B4252;
+  --modal-header-color: #434C5E;
+  --modal-footer-color: #434C5E;
+
+  --drop-down-menu-bg: #3B4252;
+
+  --button-color: #79b8ca;
+  --button-color-hover: #6a9daf;
+  --button-text: #2E3440;
+  --button-text-hover: #D8DEE9;
+
+  --accent-color: 121, 184, 202;
+  --accent-color-hover: rgb(var(--accent-color),.8);
+  --link-color: #81A1C1;
+  --link-color-hover: #88C0D0;
+  --label-text-color: #222730;
+    
+  --text:#D8DEE9;
+  --text-hover: #ECEFF4;
+  --text-muted: #81A1C1;
+
+  /*Specials*/
+  --arr-queue-color: #A3BE8C; /* Servarr apps + Bazarr*/
+  --plex-poster-unwatched: #D08770;
+  --petio-spinner: invert(83%) sepia(9%) saturate(1787%) hue-rotate(156deg) brightness(85%) contrast(83%); /* Made with https://codepen.io/jsm91/embed/ZEEawyZ */
+  --gitea-color-primary-dark-4: 121, 184, 202;
+  }

frontend/src/Content/Theme.Park/Themes/organizr.css

@@ -0,0 +1,30 @@
+:root {
+  --main-bg-color: #1f1f1f;
+
+  --modal-bg-color: #333;
+  --modal-header-color: #232323;
+  --modal-footer-color: #232323;
+
+  --drop-down-menu-bg: #1b1b1b;
+
+  --button-color: #2cabe3;
+  --button-color-hover: #298fbc;
+  --button-text: #eee;
+  --button-text-hover: #fff;
+
+  --accent-color:  44, 171, 227;
+  --accent-color-hover: rgb(var(--accent-color),.8);
+  --link-color: #2cabe3;
+  --link-color-hover: #3cc5ff;
+  --label-text-color: #fff;
+    
+  --text:#96a2b4;
+  --text-hover: #fff;
+  --text-muted: #999;
+
+  /*Specials*/
+  --arr-queue-color: #2cabe3; /* Servarr apps + Bazarr*/
+  --plex-poster-unwatched: #2cabe3;
+  --petio-spinner: invert(65%) sepia(83%) saturate(2026%) hue-rotate(167deg) brightness(90%) contrast(97%);/* Made with https://codepen.io/jsm91/embed/ZEEawyZ */
+  --gitea-color-primary-dark-4: 44, 171, 227;
+}

frontend/src/Content/Theme.Park/Themes/overseerr.css

@@ -0,0 +1,30 @@
+:root {
+  --main-bg-color:  linear-gradient(360deg, hsl(221, 39%, 11%) 65%, hsl(215, 28%, 17%) 100%);
+  
+  --modal-bg-color: #1f2937; 
+  --modal-header-color: #1f2937;
+  --modal-footer-color: #1f2937;
+
+  --drop-down-menu-bg: #374151;
+
+  --button-color: #4f46e5;
+  --button-color-hover: #6366f1;
+  --button-text: #e5e7eb;
+  --button-text-hover: #fff;
+
+  --accent-color: 167, 139, 250;
+  --accent-color-hover: rgb(var(--accent-color),.8);
+  --link-color: #6366f1;
+  --link-color-hover: #a78bfa;
+  --label-text-color: #000;
+
+  --text: #d1d5db;
+  --text-hover: #fff;
+  --text-muted: #9ca3af;
+  
+  /*Specials*/
+  --arr-queue-color: #6366f1; /* Servarr apps + Bazarr*/
+  --plex-poster-unwatched: #6366f1;
+  --petio-spinner: invert(24%) sepia(59%) saturate(3411%) hue-rotate(237deg) brightness(91%) contrast(96%); /* Made with https://codepen.io/jsm91/embed/ZEEawyZ */
+  --gitea-color-primary-dark-4: 98, 116, 145;
+}

frontend/src/Content/Theme.Park/Themes/plex.css

@@ -0,0 +1,28 @@
+:root {
+  --main-bg-color: url("Resources/blur-noise.png") repeat scroll 0% 0%, radial-gradient(circle at 0% 100%, rgba(54, 66, 84, 0.55) 0%, rgba(54, 66, 84, 0.043) 70%, rgba(54, 66, 84, 0) 80%), radial-gradient(circle at 100% 100%, rgba(113, 135, 153, 0.55) 0%, rgba(113, 135, 153, 0.043) 70%, rgba(113, 135, 153, 0) 80%), radial-gradient(circle at 100% 0%, rgba(54, 66, 84, 0.55) 0%, rgba(54, 66, 84, 0.043) 70%, rgba(54, 66, 84, 0) 80%), radial-gradient(circle at 0% 0%, rgba(91, 114, 135, 0.55) 0%, rgba(91, 114, 135, 0.043) 70%, rgba(91, 114, 135, 0) 80%), rgb(0, 0, 0) center center/cover no-repeat fixed;
+
+  --modal-bg-color: #1f2326;
+  --modal-header-color: #1f2326;
+  --modal-footer-color: #323232;
+
+  --drop-down-menu-bg: #191a1c;
+
+  --button-color: #cc7b19;
+  --button-color-hover: #e59029;
+  --button-text: #eee;
+  --button-text-hover: #fff;
+
+  --accent-color: 229, 160, 13;
+  --accent-color-hover: #ffc107;
+  --link-color: #e5a00d;
+  --link-color-hover: #fff;
+  --label-text-color: #fff;
+
+  --text:#ddd;
+  --text-hover: #fff;
+  --text-muted: #999;
+
+  --arr-queue-color: #27c24c;
+  --petio-spinner: invert(0%) sepia(0%) saturate(100%) hue-rotate(0deg) brightness(100%) contrast(100%);
+  --gitea-color-primary-dark-4: 255, 193, 7;
+}

frontend/src/Content/Theme.Park/Themes/radarr-darker.css

@@ -0,0 +1,124 @@
+:root {
+    --main-bg-color: #454545;
+
+    --modal-bg-color: #595959;
+    --modal-header-color: #595959;
+    --modal-footer-color: #595959;
+
+    --drop-down-menu-bg: #606060;
+
+    --button-color: #5899eb;
+    --button-color-hover: #4b91ea;
+    --button-text: #eee;
+    --button-text-hover: #fff;
+
+    --accent-color: 255, 194, 48;
+    --accent-color-hover: rgb(255, 194, 48, .8);
+    --link-color: rgb(255, 194, 48);
+    --link-color-hover: rgb(255, 194, 48, .8);
+    --label-text-color: #eee;
+
+    --text: #ccc;
+    --text-hover: #fff;
+    --text-muted: #999;
+
+    /*Specials*/
+    --arr-queue-color: #5d9cec;
+    --side-menu-active: #333333;
+    --scroller-hover: #606060;
+    --scroller: #707070;
+    --border-color: #606060;
+    --label-color: #707070;
+    --label-info: #5d9cec;
+    --header-color: #464b51;
+    --side-menu-color: #595959;
+}
+
+/* HEADER */
+
+[class*="PageHeader-header-"] {
+    background-color: var(--header-color);
+    color: #fff;
+}
+
+[class*="PageToolbar-toolbar-"] {
+    background-color: #707070;
+    color: var(--text);
+}
+
+/* SIDE MENU */
+
+[class*="PageSidebar-sidebar-"] {
+    background-color: var(--side-menu-color);
+    color: #fff;
+}
+
+[class*=PageSidebarItem-link-]:focus {
+    color: rgb(var(--accent-color)) !important;
+}
+
+[class*=PageSidebarItem-isActiveLink-] {
+    color: var(--link-color) !important;
+}
+
+[class*=PageSidebarItem-isActiveParentLink-] {
+    background-color: var(--side-menu-active);
+}
+
+/* SCROLLER */
+[class*=ImportSeriesSelectSeries-results-]::-webkit-scrollbar-thumb:hover,
+[class*=OverlayScroller-thumb-]:hover {
+    background-color: var(--scroller-hover) !important;
+}
+
+[class*="OverlayScroller-thumb-"],
+[class*=Scroller-scroller-]::-webkit-scrollbar-thumb {
+    background-color: var(--scroller) !important;
+}
+
+/* MODALS */
+
+[class*=ModalHeader-modalHeader-],
+[class*=FieldSet-legend-] {
+    border-bottom: 1px solid var(--border-color);
+}
+
+[class*=ModalFooter-modalFooter-] {
+    border-top: 1px solid var(--border-color);
+}
+
+/* LABLES */
+
+[class*="Label-default-"] {
+    border-color: var(--label-color);
+    background-color: var(--label-color);
+    color: white;
+}
+
+[class*="Label-info-"]:not([class*="PageSidebarItem-status-"] [class*="Label-info-"]) {
+    border-color: var(--label-info);
+    background-color: var(--label-info);
+    color: #fff;
+}
+
+/* SETTINGS */
+
+[class*=Settings-link-] {
+    border-bottom: 1px solid var(--border-color);
+}
+
+/* SEARCH DROP DOWN */
+
+[class*="MovieSearchInput-containerOpen-"] [class*="MovieSearchInput-movieContainer-"] {
+    border: 1px solid var(--drop-down-menu-bg);
+    background-color: var(--drop-down-menu-bg);
+    box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
+    color: #e1e2e3;
+}
+
+/* SERIES PAGE */
+
+[class*="MovieIndexPoster-controls-"] {
+    background-color: var(--label-color) !important;
+    color: #fff !important;
+}

frontend/src/Content/Theme.Park/Themes/space-gray.css

@@ -0,0 +1,30 @@
+:root {
+  --main-bg-color: radial-gradient(ellipse at center, rgba(87, 108, 117, 1) 0%, rgba(37, 50, 55, 1) 100.2%) center center/cover no-repeat fixed;
+
+  --modal-bg-color: radial-gradient(ellipse at top, rgba(87, 108, 117, 1) 0%, rgba(37, 50, 55, 1) 100.2%) center center/cover no-repeat fixed;
+  --modal-header-color: radial-gradient(ellipse at top, rgba(87, 108, 117, 1) 0%, rgba(37, 50, 55, 1) 100.2%) center center/cover no-repeat fixed;
+  --modal-footer-color: radial-gradient(ellipse at top, rgba(87, 108, 117, 1) 0%, rgba(37, 50, 55, 1) 100.2%) center center/cover no-repeat fixed;
+
+  --drop-down-menu-bg: radial-gradient(ellipse at top, rgba(87, 108, 117, 1) 0%, rgba(37, 50, 55, 1) 100.2%) center center/cover no-repeat fixed;
+
+  --button-color: #607D8B;
+  --button-color-hover: #81a6b7;
+  --button-text: #eee;
+  --button-text-hover: #fff;
+
+  --accent-color: 129, 166, 183;
+  --accent-color-hover: rgb(var(--accent-color),.8);
+  --link-color: #81a6b7;
+  --link-color-hover: #9adfff;
+  --label-text-color: #fff;
+
+  --text:#bbb;
+  --text-hover: #fff;
+  --text-muted: #999;
+
+  /*Specials*/
+  --arr-queue-color: #81a6b7; /* Servarr apps + Bazarr*/
+  --plex-poster-unwatched: #70aeca;
+  --petio-spinner: invert(50%) sepia(31%) saturate(341%) hue-rotate(155deg) brightness(88%) contrast(85%);/* Made with https://codepen.io/jsm91/embed/ZEEawyZ */
+  --gitea-color-primary-dark-4: 129, 166, 183;
+}

frontend/src/Settings/UI/UISettings.js

@@ -48,6 +48,21 @@ export const movieRuntimeFormatOptions = [
   { key: 'minutes', value: '75 mins' }
 ];
 
+export const themeOptions = [
+  { key: 'default', value: 'Default' },
+  { key: 'aquamarine', value: 'Aquamarine' },
+  { key: 'dark', value: 'Dark' },
+  { key: 'dracula', value: 'Dracula' },
+  { key: 'hotline', value: 'Hotline' },
+  { key: 'hotpink', value: 'Hotpink' },
+  { key: 'nord', value: 'Nord' },
+  { key: 'organizr', value: 'Organizr' },
+  { key: 'overseerr', value: 'Overseerr' },
+  { key: 'plex', value: 'Plex' },
+  { key: 'radarr-darker', value: 'Radarr Darker' },
+  { key: 'space-gray', value: 'Space Gray' }
+];
+
 class UISettings extends Component {
 
   //
@@ -184,6 +199,21 @@ class UISettings extends Component {
                 </FieldSet>
 
                 <FieldSet legend={translate('Style')}>
+                  <FormGroup>
+                    <FormLabel>{translate('Theme')}</FormLabel>
+                    <FormInputGroup
+                      type={inputTypes.SELECT}
+                      name="theme"
+                      helpText={translate('ThemeHelpText', ['Theme.Park'])}
+                      inlineLink="https://github.com/GilbN/theme.park"
+                      tooltip="Theme.Park Github"
+                      helpTextWarning={translate('ThemeHelpTextWarning')}
+                      values={themeOptions}
+                      onChange={onInputChange}
+                      {...settings.theme}
+                    />
+                  </FormGroup>
+
                   <FormGroup>
                     <FormLabel>{translate('SettingsEnableColorImpairedMode')}</FormLabel>
                     <FormInputGroup

frontend/src/index.js

@@ -1,6 +1,7 @@
 import { createBrowserHistory } from 'history';
 import React from 'react';
 import { render } from 'react-dom';
+import ThemeSelector from 'App/ThemeSelector';
 import createAppStore from 'Store/createAppStore';
 import App from './App/App';
 
@@ -13,9 +14,11 @@ const history = createBrowserHistory();
 const store = createAppStore(history);
 
 render(
-  <App
-    store={store}
-    history={history}
-  />,
+  <ThemeSelector>
+    <App
+      store={store}
+      history={history}
+    />
+  </ThemeSelector>,
   document.getElementById('root')
 );

src/NzbDrone.Core/Configuration/ConfigFileProvider.cs

@@ -43,6 +43,7 @@ namespace NzbDrone.Core.Configuration
         string SslCertPassword { get; }
         string UrlBase { get; }
         string UiFolder { get; }
+        string Theme { get; }
         bool UpdateAutomatically { get; }
         UpdateMechanism UpdateMechanism { get; }
         string UpdateScriptPath { get; }
@@ -140,6 +141,8 @@ namespace NzbDrone.Core.Configuration
 
         public int SslPort => GetValueInt("SslPort", 9898);
 
+        public string Theme => GetValue("Theme", "default");
+
         public bool EnableSsl => GetValueBoolean("EnableSsl", false);
 
         public bool LaunchBrowser => GetValueBoolean("LaunchBrowser", true);

src/NzbDrone.Core/Localization/Core/en.json

@@ -976,6 +976,9 @@
   "TestAllIndexers": "Test All Indexers",
   "TestAllLists": "Test All Lists",
   "TheLogLevelDefault": "The log level defaults to 'Info' and can be changed in",
+  "Theme": "Theme",
+  "ThemeHelpText": "Themes maintained by {0}!",
+  "ThemeHelpTextWarning": "Reload required after saving",
   "ThisCannotBeCancelled": "This cannot be cancelled once started without restarting Radarr.",
   "ThisConditionMatchesUsingRegularExpressions": "This condition matches using Regular Expressions. Note that the characters {0} have special meanings and need escaping with a {1}",
   "Time": "Time",

src/Radarr.Api.V3/Config/ConfigController.cs

@@ -10,7 +10,7 @@ namespace Radarr.Api.V3.Config
     public abstract class ConfigController<TResource> : RestController<TResource>
         where TResource : RestResource, new()
     {
-        private readonly IConfigService _configService;
+        protected readonly IConfigService _configService;
 
         protected ConfigController(IConfigService configService)
         {
@@ -32,7 +32,7 @@ namespace Radarr.Api.V3.Config
         }
 
         [RestPutById]
-        public ActionResult<TResource> SaveConfig(TResource resource)
+        public virtual ActionResult<TResource> SaveConfig(TResource resource)
         {
             var dictionary = resource.GetType()
                 .GetProperties(BindingFlags.Instance | BindingFlags.Public)

src/Radarr.Api.V3/Config/HostConfigController.cs

@@ -86,7 +86,7 @@ namespace Radarr.Api.V3.Config
         [HttpGet]
         public HostConfigResource GetHostConfig()
         {
-            var resource = _configFileProvider.ToResource(_configService);
+            var resource = HostConfigResourceMapper.ToResource(_configFileProvider, _configService);
             resource.Id = 1;
 
             var user = _userService.FindUser();

src/Radarr.Api.V3/Config/UiConfigController.cs

@@ -1,19 +1,39 @@
+using System.Linq;
+using System.Reflection;
+using Microsoft.AspNetCore.Mvc;
 using NzbDrone.Core.Configuration;
 using Radarr.Http;
+using Radarr.Http.REST.Attributes;
 
 namespace Radarr.Api.V3.Config
 {
     [V3ApiController("config/ui")]
     public class UiConfigController : ConfigController<UiConfigResource>
     {
-        public UiConfigController(IConfigService configService)
+        private readonly IConfigFileProvider _configFileProvider;
+
+        public UiConfigController(IConfigService configService, IConfigFileProvider configFileProvider)
             : base(configService)
         {
+            _configFileProvider = configFileProvider;
         }
 
         protected override UiConfigResource ToResource(IConfigService model)
         {
-            return UiConfigResourceMapper.ToResource(model);
+            return UiConfigResourceMapper.ToResource(_configFileProvider, model);
+        }
+
+        [RestPutById]
+        public override ActionResult<UiConfigResource> SaveConfig(UiConfigResource resource)
+        {
+            var dictionary = resource.GetType()
+                                     .GetProperties(BindingFlags.Instance | BindingFlags.Public)
+                                     .ToDictionary(prop => prop.Name, prop => prop.GetValue(resource, null));
+
+            _configFileProvider.SaveConfigDictionary(dictionary);
+            _configService.SaveConfigDictionary(dictionary);
+
+            return Accepted(resource.Id);
         }
     }
 }

src/Radarr.Api.V3/Config/UiConfigResource.cs

@@ -21,27 +21,29 @@ namespace Radarr.Api.V3.Config
         public bool EnableColorImpairedMode { get; set; }
         public int MovieInfoLanguage { get; set; }
         public int UILanguage { get; set; }
+        public string Theme { get; set; }
     }
 
     public static class UiConfigResourceMapper
     {
-        public static UiConfigResource ToResource(IConfigService model)
+        public static UiConfigResource ToResource(this IConfigFileProvider model, IConfigService configService)
         {
             return new UiConfigResource
             {
-                FirstDayOfWeek = model.FirstDayOfWeek,
-                CalendarWeekColumnHeader = model.CalendarWeekColumnHeader,
+                FirstDayOfWeek = configService.FirstDayOfWeek,
+                CalendarWeekColumnHeader = configService.CalendarWeekColumnHeader,
 
-                MovieRuntimeFormat = model.MovieRuntimeFormat,
+                MovieRuntimeFormat = configService.MovieRuntimeFormat,
 
-                ShortDateFormat = model.ShortDateFormat,
-                LongDateFormat = model.LongDateFormat,
-                TimeFormat = model.TimeFormat,
-                ShowRelativeDates = model.ShowRelativeDates,
+                ShortDateFormat = configService.ShortDateFormat,
+                LongDateFormat = configService.LongDateFormat,
+                TimeFormat = configService.TimeFormat,
+                ShowRelativeDates = configService.ShowRelativeDates,
 
-                EnableColorImpairedMode = model.EnableColorImpairedMode,
-                MovieInfoLanguage = model.MovieInfoLanguage,
-                UILanguage = model.UILanguage
+                EnableColorImpairedMode = configService.EnableColorImpairedMode,
+                MovieInfoLanguage = configService.MovieInfoLanguage,
+                UILanguage = configService.UILanguage,
+                Theme = model.Theme
             };
         }
     }

src/Radarr.Http/Frontend/InitializeJsController.cs

@@ -46,6 +46,7 @@ namespace Radarr.Http.Frontend
             builder.AppendLine("window.Radarr = {");
             builder.AppendLine($"  apiRoot: '{_urlBase}/api/v3',");
             builder.AppendLine($"  apiKey: '{_apiKey}',");
+            builder.AppendLine($"  theme: '{_configFileProvider.Theme}',");
             builder.AppendLine($"  release: '{BuildInfo.Release}',");
             builder.AppendLine($"  version: '{BuildInfo.Version.ToString()}',");
             builder.AppendLine($"  branch: '{_configFileProvider.Branch.ToLower()}',");