23 files changed, 397 insertions, 115 deletions

diff --git a/package-lock.json b/package-lock.json
index 12ae35ed5..fb3b675fb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4117,8 +4117,7 @@
     "atob": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
-      "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==",
-      "dev": true
+      "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg=="
     },
     "atob-lite": {
       "version": "2.0.0",
@@ -6334,6 +6333,17 @@
       "integrity": "sha1-ojD2T1aDEOFJgAmUB5DsmVRbyn4=",
       "dev": true
     },
+    "css": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/css/-/css-2.2.4.tgz",
+      "integrity": "sha512-oUnjmWpy0niI3x/mPL8dVEI1l7MnG3+HHyRPHf+YFSbK+svOhXpmSOcDURUh2aOCgl2grzrOPt1nHLuCVFULLw==",
+      "requires": {
+        "inherits": "^2.0.3",
+        "source-map": "^0.6.1",
+        "source-map-resolve": "^0.5.2",
+        "urix": "^0.1.0"
+      }
+    },
     "css-select": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/css-select/-/css-select-1.2.0.tgz",
@@ -6569,8 +6579,7 @@
     "decode-uri-component": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz",
-      "integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU=",
-      "dev": true
+      "integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU="
     },
     "decompress-response": {
       "version": "3.3.0",
@@ -19379,8 +19388,7 @@
     "resolve-url": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
-      "integrity": "sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo=",
-      "dev": true
+      "integrity": "sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo="
     },
     "responselike": {
       "version": "1.0.2",
@@ -20489,7 +20497,6 @@
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.5.2.tgz",
       "integrity": "sha512-MjqsvNwyz1s0k81Goz/9vRBe9SZdB09Bdw+/zYyO+3CuPk6fouTaxscHkgtE8jKvf01kVfl8riHzERQ/kefaSA==",
-      "dev": true,
       "requires": {
         "atob": "^2.1.1",
         "decode-uri-component": "^0.2.0",
@@ -20510,8 +20517,7 @@
     "source-map-url": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/source-map-url/-/source-map-url-0.4.0.tgz",
-      "integrity": "sha1-PpNdfd1zYxuXZZlW1VEo6HtQhKM=",
-      "dev": true
+      "integrity": "sha1-PpNdfd1zYxuXZZlW1VEo6HtQhKM="
     },
     "sparkles": {
       "version": "1.0.1",
@@ -22285,8 +22291,7 @@
     "urix": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/urix/-/urix-0.1.0.tgz",
-      "integrity": "sha1-2pN/emLiH+wf0Y1Js1wpNQZ6bHI=",
-      "dev": true
+      "integrity": "sha1-2pN/emLiH+wf0Y1Js1wpNQZ6bHI="
     },
     "url": {
       "version": "0.11.0",
diff --git a/package.json b/package.json
index d574bfeb9..e016f7359 100644
--- a/package.json
+++ b/package.json
@@ -30,7 +30,8 @@
     "uidev": "cd uidev && webpack-dev-server",
     "postinstall": "npx lerna run prepare",
     "apply-branding": "node ./src/i18n/apply-branding.js",
-    "prepare-code": "npm run lint && npm run reformat-files && npm run manage-translations && npm run apply-branding"
+    "prepare-code": "npm run lint && npm run reformat-files && npm run manage-translations && npm run apply-branding",
+    "build-theme-info": "node src/scripts/build-theme-info.js"
   },
   "keywords": [],
   "author": "Amine Mouafik <amine@mouafik.fr>",
@@ -47,6 +48,7 @@
     "auto-launch": "5.0.5",
     "classnames": "2.2.6",
     "cld3-asm": "1.0.1",
+    "css": "2.2.4",
     "darkreader": "4.7.15",
     "du": "^0.1.0",
     "electron-dl": "1.14.0",
diff --git a/src/assets/themeInfo.json b/src/assets/themeInfo.json
new file mode 100644
index 000000000..d6017de23
--- /dev/null
+++ b/src/assets/themeInfo.json
@@ -0,0 +1 @@
+{"color":".theme__dark .app .sidebar .sidebar__button.is-muted, .theme__dark .app .sidebar .sidebar__button.is-active, .sidebar .sidebar__button.is-muted, .sidebar .sidebar__button.is-active, .settings .account .invoices .invoices__action button, .settings-navigation .settings-navigation__link.is-active .badge, a.button, a.link, .auth .welcome .button:hover, .auth .welcome .button__inverted, .franz-form .franz-form__radio.is-selected, .theme__dark .franz-form__button.franz-form__button--inverted, .franz-form__button.franz-form__button--inverted","border-left-color":".tab-item.is-active","border-color":".theme__dark .settings .premium-info, a.button, .franz-form .franz-form__radio.is-selected","background":".settings .settings__header, .settings .settings__close, .settings .settings__close:hover, .settings-navigation .settings-navigation__link.is-active, a.button:hover, .info-bar, .info-bar.info-bar--primary, .infobox.infobox--primary, .theme__dark .badge.badge--primary, .theme__dark .badge.badge--premium, .badge.badge--primary, .badge.badge--premium, .content-tabs .content-tabs__tabs .content-tabs__item.is-active, #electron-app-title-bar .toolbar-dropdown:not(.open) > .toolbar-button > button:hover, #electron-app-title-bar .list-item.selected .menu-item, #electron-app-title-bar .list-item.selected:focus .menu-item, .theme__dark .quick-switch .active, .franz-form .franz-form__toggle-wrapper .franz-form__toggle.is-active .franz-form__toggle-button, .theme__dark .franz-form__button, .theme__dark .franz-form__button:hover, .theme__dark .franz-form__button.franz-form__button--inverted:hover, .franz-form__button, .franz-form__button:hover, .franz-form__button.franz-form__button--inverted:hover","border-right-color":".settings .settings__header .separator"}
\ No newline at end of file
diff --git a/src/components/settings/settings/EditSettingsForm.js b/src/components/settings/settings/EditSettingsForm.js
index b01368f69..a826479ad 100644
--- a/src/components/settings/settings/EditSettingsForm.js
+++ b/src/components/settings/settings/EditSettingsForm.js
@@ -79,6 +79,10 @@ const messages = defineMessages({
     id: 'settings.app.headlineAppearance',
     defaultMessage: '!!!Appearance',
   },
+  accentColorInfo: {
+    id: 'settings.app.accentColorInfo',
+    defaultMessage: '!!!Write your accent color in a CSS-compatible format. (Default: #7367f0)',
+  },
   headlineAdvanced: {
     id: 'settings.app.headlineAdvanced',
     defaultMessage: '!!!Advanced',
@@ -373,6 +377,12 @@ export default @observer class EditSettingsForm extends Component {
             <Toggle field={form.$('showDisabledServices')} />
             <Toggle field={form.$('showMessageBadgeWhenMuted')} />
             <Toggle field={form.$('darkMode')} />
+            <Input
+              placeholder="Accent Color"
+              onChange={e => this.submit(e)}
+              field={form.$('accentColor')}
+            />
+            <p>{intl.formatMessage(messages.accentColorInfo)}</p>
 
             {/* Language */}
             <h2 id="language">{intl.formatMessage(messages.headlineLanguage)}</h2>
diff --git a/src/components/ui/Button.js b/src/components/ui/Button.js
index e2d7cea83..f46fd34ea 100644
--- a/src/components/ui/Button.js
+++ b/src/components/ui/Button.js
@@ -1,10 +1,10 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { observer } from 'mobx-react';
+import { observer, inject } from 'mobx-react';
 import Loader from 'react-loader';
 import classnames from 'classnames';
 
-export default @observer class Button extends Component {
+export default @observer @inject('stores') class Button extends Component {
   static propTypes = {
     className: PropTypes.string,
     label: PropTypes.string.isRequired,
@@ -14,6 +14,13 @@ export default @observer class Button extends Component {
     buttonType: PropTypes.string,
     loaded: PropTypes.bool,
     htmlForm: PropTypes.string,
+    stores: PropTypes.shape({
+      settings: PropTypes.shape({
+        app: PropTypes.shape({
+          accentColor: PropTypes.string.isRequired,
+        }).isRequired,
+      }).isRequired,
+    }).isRequired,
   };
 
   static defaultProps = {
@@ -69,7 +76,7 @@ export default @observer class Button extends Component {
           loaded={loaded}
           lines={10}
           scale={0.4}
-          color={buttonType !== 'secondary' ? '#FFF' : '#7367F0'}
+          color={buttonType !== 'secondary' ? '#FFF' : this.props.stores.settings.app.accentColor}
           component="span"
         />
         {label}
diff --git a/src/components/ui/FullscreenLoader/index.js b/src/components/ui/FullscreenLoader/index.js
index 06dab1eb6..334bb6c4a 100644
--- a/src/components/ui/FullscreenLoader/index.js
+++ b/src/components/ui/FullscreenLoader/index.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { observer } from 'mobx-react';
+import { observer, inject } from 'mobx-react';
 import injectSheet, { withTheme } from 'react-jss';
 import classnames from 'classnames';
 
@@ -8,7 +8,7 @@ import Loader from '../Loader';
 
 import styles from './styles';
 
-export default @observer @withTheme @injectSheet(styles) class FullscreenLoader extends Component {
+export default @observer @inject('stores') @withTheme @injectSheet(styles) class FullscreenLoader extends Component {
   static propTypes = {
     className: PropTypes.string,
     title: PropTypes.string.isRequired,
@@ -16,6 +16,13 @@ export default @observer @withTheme @injectSheet(styles) class FullscreenLoader
     theme: PropTypes.object.isRequired,
     spinnerColor: PropTypes.string,
     children: PropTypes.node,
+    stores: PropTypes.shape({
+      settings: PropTypes.shape({
+        app: PropTypes.shape({
+          accentColor: PropTypes.string.isRequired,
+        }).isRequired,
+      }).isRequired,
+    }).isRequired,
   };
 
   static defaultProps = {
@@ -32,10 +39,16 @@ export default @observer @withTheme @injectSheet(styles) class FullscreenLoader
       spinnerColor,
       className,
       theme,
+      stores,
     } = this.props;
 
     return (
-      <div className={classes.wrapper}>
+      <div
+        className={classes.wrapper}
+        style={{
+          background: stores.app.accentColor,
+        }}
+      >
         <div
           className={classnames({
             [`${classes.component}`]: true,
diff --git a/src/components/ui/FullscreenLoader/styles.js b/src/components/ui/FullscreenLoader/styles.js
index d516781a8..64d24e4ce 100644
--- a/src/components/ui/FullscreenLoader/styles.js
+++ b/src/components/ui/FullscreenLoader/styles.js
@@ -4,7 +4,6 @@ export default {
     alignItems: 'center',
     position: 'absolute',
     width: '100%',
-    background: 'linear-gradient( 135deg, #CE9FFC 10%, #7367F0 100%)',
   },
   component: {
     width: '100%',
diff --git a/src/components/ui/Loader.js b/src/components/ui/Loader.js
index de8769b6c..627749273 100644
--- a/src/components/ui/Loader.js
+++ b/src/components/ui/Loader.js
@@ -1,22 +1,30 @@
 import React, { Component } from 'react';
+import { observer, inject } from 'mobx-react';
 import PropTypes from 'prop-types';
 import Loader from 'react-loader';
 
 import { oneOrManyChildElements } from '../../prop-types';
 
-export default class LoaderComponent extends Component {
+export default @observer @inject('stores') class LoaderComponent extends Component {
   static propTypes = {
     children: oneOrManyChildElements,
     loaded: PropTypes.bool,
     className: PropTypes.string,
     color: PropTypes.string,
+    stores: PropTypes.shape({
+      settings: PropTypes.shape({
+        app: PropTypes.shape({
+          accentColor: PropTypes.string.isRequired,
+        }).isRequired,
+      }).isRequired,
+    }).isRequired,
   };
 
   static defaultProps = {
     children: null,
     loaded: false,
     className: '',
-    color: '#7367F0',
+    color: 'ACCENT',
   };
 
   render() {
@@ -24,9 +32,10 @@ export default class LoaderComponent extends Component {
       children,
       loaded,
       className,
-      color,
     } = this.props;
 
+    const color = this.props.color !== 'ACCENT' ? this.props.color : this.props.stores.settings.app.accentColor;
+
     return (
       <Loader
         loaded={loaded}
diff --git a/src/config.js b/src/config.js
index 924d139a2..d9ef67530 100644
--- a/src/config.js
+++ b/src/config.js
@@ -76,6 +76,7 @@ export const DEFAULT_APP_SETTINGS = {
   hibernationStrategy: 300,
   noUpdates: false,
   showServiceNavigationBar: false,
+  accentColor: '#7367f0',
 };
 
 export const DEFAULT_FEATURES_CONFIG = {
@@ -100,7 +101,7 @@ export const DEFAULT_WINDOW_OPTIONS = {
   y: 0,
 };
 
-export const FRANZ_SERVICE_REQUEST = 'https://github.com/getferdi/recipes/issues';
+export const FRANZ_SERVICE_REQUEST = 'https://github.com/getferdi/recipes/issues/new/choose';
 export const FRANZ_TRANSLATION = 'https://crowdin.com/project/getferdi';
 export const FRANZ_DEV_DOCS = 'http://bit.ly/franz-dev-hub';
 
diff --git a/src/containers/settings/EditSettingsScreen.js b/src/containers/settings/EditSettingsScreen.js
index f0ceeb8e6..7b0633f79 100644
--- a/src/containers/settings/EditSettingsScreen.js
+++ b/src/containers/settings/EditSettingsScreen.js
@@ -98,6 +98,10 @@ const messages = defineMessages({
     id: 'settings.app.form.darkMode',
     defaultMessage: '!!!Dark Mode',
   },
+  accentColor: {
+    id: 'settings.app.form.accentColor',
+    defaultMessage: '!!!Accent color',
+  },
   showDisabledServices: {
     id: 'settings.app.form.showDisabledServices',
     defaultMessage: '!!!Display disabled services tabs',
@@ -172,6 +176,7 @@ export default @inject('stores', 'actions') @observer class EditSettingsScreen e
         enableGPUAcceleration: settingsData.enableGPUAcceleration,
         showDisabledServices: settingsData.showDisabledServices,
         darkMode: settingsData.darkMode,
+        accentColor: settingsData.accentColor,
         showMessageBadgeWhenMuted: settingsData.showMessageBadgeWhenMuted,
         enableSpellchecking: settingsData.enableSpellchecking,
         spellcheckerLanguage: settingsData.spellcheckerLanguage,
@@ -340,6 +345,11 @@ export default @inject('stores', 'actions') @observer class EditSettingsScreen e
           value: settings.all.app.darkMode,
           default: DEFAULT_APP_SETTINGS.darkMode,
         },
+        accentColor: {
+          label: intl.formatMessage(messages.accentColor),
+          value: settings.all.app.accentColor,
+          default: DEFAULT_APP_SETTINGS.accentColor,
+        },
         enableGPUAcceleration: {
           label: intl.formatMessage(messages.enableGPUAcceleration),
           value: settings.all.app.enableGPUAcceleration,
diff --git a/src/features/accentColor/index.js b/src/features/accentColor/index.js
new file mode 100644
index 000000000..a0f57a2fa
--- /dev/null
+++ b/src/features/accentColor/index.js
@@ -0,0 +1,55 @@
+import { reaction } from 'mobx';
+import themeInfo from '../../assets/themeInfo.json';
+import { DEFAULT_APP_SETTINGS } from '../../config';
+
+const STYLE_ELEMENT_ID = 'accent-color';
+
+function createAccentStyleElement() {
+  const styles = document.createElement('style');
+  styles.id = STYLE_ELEMENT_ID;
+
+  document.querySelector('head').appendChild(styles);
+}
+
+function setAccentStyle(style) {
+  const styleElement = document.getElementById(STYLE_ELEMENT_ID);
+  styleElement.innerHTML = style;
+}
+
+function generateAccentStyle(color) {
+  let style = '';
+
+  Object.keys(themeInfo).forEach((property) => {
+    style += `
+      ${themeInfo[property]} {
+        ${property}: ${color};
+      }
+    `;
+  });
+
+  return style;
+}
+
+export default function initAccentColor(stores) {
+  const { settings } = stores;
+  createAccentStyleElement();
+
+  // Update accent color
+  reaction(
+    () => (
+      settings.all.app.accentColor
+    ),
+    (color) => {
+      if (color === DEFAULT_APP_SETTINGS.accentColor) {
+        // Reset accent style to return to default color scheme
+        setAccentStyle('');
+      } else {
+        const style = generateAccentStyle(color);
+        setAccentStyle(style);
+      }
+    },
+    {
+      fireImmediately: true,
+    },
+  );
+}
diff --git a/src/features/announcements/api.js b/src/features/announcements/api.js
index a7995d6db..f33980d0f 100644
--- a/src/features/announcements/api.js
+++ b/src/features/announcements/api.js
@@ -12,7 +12,7 @@ export const announcementsApi = {
 
   async getChangelog(version) {
     debug('fetching release changelog from Github');
-    const url = `https://api.github.com/repos/meetfranz/franz/releases/tags/v${version}`;
+    const url = `https://api.github.com/repos/getferdi/ferdi/releases/tags/v${version}`;
     const request = await window.fetch(url, { method: 'GET' });
     if (!request.ok) return null;
     const data = await request.json();
diff --git a/src/i18n/locales/defaultMessages.json b/src/i18n/locales/defaultMessages.json
index 3fc86c266..f9afe6213 100644
--- a/src/i18n/locales/defaultMessages.json
+++ b/src/i18n/locales/defaultMessages.json
@@ -2657,172 +2657,185 @@
         }
       },
       {
-        "defaultMessage": "!!!Advanced",
+        "defaultMessage": "!!!Write your accent color in a CSS-compatible format. (Default: #7367f0)",
         "end": {
           "column": 3,
           "line": 85
         },
         "file": "src/components/settings/settings/EditSettingsForm.js",
+        "id": "settings.app.accentColorInfo",
+        "start": {
+          "column": 19,
+          "line": 82
+        }
+      },
+      {
+        "defaultMessage": "!!!Advanced",
+        "end": {
+          "column": 3,
+          "line": 89
+        },
+        "file": "src/components/settings/settings/EditSettingsForm.js",
         "id": "settings.app.headlineAdvanced",
         "start": {
           "column": 20,
-          "line": 82
+          "line": 86
         }
       },
       {
         "defaultMessage": "!!!Help us to translate Ferdi into your language.",
         "end": {
           "column": 3,
-          "line": 89
+          "line": 93
         },
         "file": "src/components/settings/settings/EditSettingsForm.js",
         "id": "settings.app.translationHelp",
         "start": {
           "column": 19,
-          "line": 86
+          "line": 90
         }
       },
       {
         "defaultMessage": "!!!Cache",
         "end": {
           "column": 3,
-          "line": 93
+          "line": 97
         },
         "file": "src/components/settings/settings/EditSettingsForm.js",
         "id": "settings.app.subheadlineCache",
         "start": {
           "column": 20,
-          "line": 90
+          "line": 94
         }
       },
       {
         "defaultMessage": "!!!Ferdi cache is currently using {size} of disk space.",
         "end": {
           "column": 3,
-          "line": 97
+          "line": 101
         },
         "file": "src/components/settings/settings/EditSettingsForm.js",
         "id": "settings.app.cacheInfo",
         "start": {
           "column": 13,
-          "line": 94
+          "line": 98
         }
       },
       {
         "defaultMessage": "!!!Clear cache",
         "end": {
           "column": 3,
-          "line": 101
+          "line": 105
         },
         "file": "src/components/settings/settings/EditSettingsForm.js",
         "id": "settings.app.buttonClearAllCache",
         "start": {
           "column": 23,
-          "line": 98
+          "line": 102
         }
       },
       {
         "defaultMessage": "!!!Check for updates",
         "end": {
           "column": 3,
-          "line": 105
+          "line": 109
         },
         "file": "src/components/settings/settings/EditSettingsForm.js",
         "id": "settings.app.buttonSearchForUpdate",
         "start": {
           "column": 25,
-          "line": 102
+          "line": 106
         }
       },
       {
         "defaultMessage": "!!!Restart & install update",
         "end": {
           "column": 3,
-          "line": 109
+          "line": 113
         },
         "file": "src/components/settings/settings/EditSettingsForm.js",
         "id": "settings.app.buttonInstallUpdate",
         "start": {
           "column": 23,
-          "line": 106
+          "line": 110
         }
       },
       {
         "defaultMessage": "!!!Is searching for update",
         "end": {
           "column": 3,
-          "line": 113
+          "line": 117
         },
         "file": "src/components/settings/settings/EditSettingsForm.js",
         "id": "settings.app.updateStatusSearching",
         "start": {
           "column": 25,
-          "line": 110
+          "line": 114
         }
       },
       {
         "defaultMessage": "!!!Update available, downloading...",
         "end": {
           "column": 3,
-          "line": 117
+          "line": 121
         },
         "file": "src/components/settings/settings/EditSettingsForm.js",
         "id": "settings.app.updateStatusAvailable",
         "start": {
           "column": 25,
-          "line": 114
+          "line": 118
         }
       },
       {
         "defaultMessage": "!!!You are using the latest version of Ferdi",
         "end": {
           "column": 3,
-          "line": 121
+          "line": 125
         },
         "file": "src/components/settings/settings/EditSettingsForm.js",
         "id": "settings.app.updateStatusUpToDate",
         "start": {
           "column": 24,
-          "line": 118
+          "line": 122
         }
       },
       {
         "defaultMessage": "!!!Current version:",
         "end": {
           "column": 3,
-          "line": 125
+          "line": 129
         },
         "file": "src/components/settings/settings/EditSettingsForm.js",
         "id": "settings.app.currentVersion",
         "start": {
           "column": 18,
-          "line": 122
+          "line": 126
         }
       },
       {
         "defaultMessage": "!!!Changes require restart",
         "end": {
           "column": 3,
-          "line": 129
+          "line": 133
         },
         "file": "src/components/settings/settings/EditSettingsForm.js",
         "id": "settings.app.restartRequired",
         "start": {
           "column": 29,
-          "line": 126
+          "line": 130
         }
       },
       {
         "defaultMessage": "!!!Official translations are English & German. All other languages are community based translations.",
         "end": {
           "column": 3,
-          "line": 133
+          "line": 137
         },
         "file": "src/components/settings/settings/EditSettingsForm.js",
         "id": "settings.app.languageDisclaimer",
         "start": {
           "column": 22,
-          "line": 130
+          "line": 134
         }
       }
     ],
@@ -4019,107 +4032,120 @@
         }
       },
       {
-        "defaultMessage": "!!!Display disabled services tabs",
+        "defaultMessage": "!!!Accent color",
         "end": {
           "column": 3,
           "line": 104
         },
         "file": "src/containers/settings/EditSettingsScreen.js",
+        "id": "settings.app.form.accentColor",
+        "start": {
+          "column": 15,
+          "line": 101
+        }
+      },
+      {
+        "defaultMessage": "!!!Display disabled services tabs",
+        "end": {
+          "column": 3,
+          "line": 108
+        },
+        "file": "src/containers/settings/EditSettingsScreen.js",
         "id": "settings.app.form.showDisabledServices",
         "start": {
           "column": 24,
-          "line": 101
+          "line": 105
         }
       },
       {
         "defaultMessage": "!!!Show unread message badge when notifications are disabled",
         "end": {
           "column": 3,
-          "line": 108
+          "line": 112
         },
         "file": "src/containers/settings/EditSettingsScreen.js",
         "id": "settings.app.form.showMessagesBadgesWhenMuted",
         "start": {
           "column": 29,
-          "line": 105
+          "line": 109
         }
       },
       {
         "defaultMessage": "!!!Enable spell checking",
         "end": {
           "column": 3,
-          "line": 112
+          "line": 116
         },
         "file": "src/containers/settings/EditSettingsScreen.js",
         "id": "settings.app.form.enableSpellchecking",
         "start": {
           "column": 23,
-          "line": 109
+          "line": 113
         }
       },
       {
         "defaultMessage": "!!!Enable GPU Acceleration",
         "end": {
           "column": 3,
-          "line": 116
+          "line": 120
         },
         "file": "src/containers/settings/EditSettingsScreen.js",
         "id": "settings.app.form.enableGPUAcceleration",
         "start": {
           "column": 25,
-          "line": 113
+          "line": 117
         }
       },
       {
         "defaultMessage": "!!!Include beta versions",
         "end": {
           "column": 3,
-          "line": 120
+          "line": 124
         },
         "file": "src/containers/settings/EditSettingsScreen.js",
         "id": "settings.app.form.beta",
         "start": {
           "column": 8,
-          "line": 117
+          "line": 121
         }
       },
       {
         "defaultMessage": "!!!Disable updates",
         "end": {
           "column": 3,
-          "line": 124
+          "line": 128
         },
         "file": "src/containers/settings/EditSettingsScreen.js",
         "id": "settings.app.form.noUpdates",
         "start": {
           "column": 13,
-          "line": 121
+          "line": 125
         }
       },
       {
         "defaultMessage": "!!!Enable Franz Todos",
         "end": {
           "column": 3,
-          "line": 128
+          "line": 132
         },
         "file": "src/containers/settings/EditSettingsScreen.js",
         "id": "settings.app.form.enableTodos",
         "start": {
           "column": 15,
-          "line": 125
+          "line": 129
         }
       },
       {
         "defaultMessage": "!!!Keep all workspaces loaded",
         "end": {
           "column": 3,
-          "line": 132
+          "line": 136
         },
         "file": "src/containers/settings/EditSettingsScreen.js",
         "id": "settings.app.form.keepAllWorkspacesLoaded",
         "start": {
           "column": 27,
-          "line": 129
+          "line": 133
         }
       }
     ],
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index b4649c03c..d3dabc364 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -214,11 +214,13 @@
   "settings.account.upgradeToPro.label": "Upgrade to Ferdi Professional",
   "settings.account.userInfoRequestFailed": "Could not load user information",
   "settings.account.yourLicense": "Your Ferdi License",
+  "settings.app.accentColorInfo": "Write your accent color in a CSS-compatible format. (Default: #7367f0)",
   "settings.app.buttonClearAllCache": "Clear cache",
   "settings.app.buttonInstallUpdate": "Restart & install update",
   "settings.app.buttonSearchForUpdate": "Check for updates",
   "settings.app.cacheInfo": "Ferdi cache is currently using {size} of disk space.",
   "settings.app.currentVersion": "Current version:",
+  "settings.app.form.accentColor": "Accent color",
   "settings.app.form.autoLaunchInBackground": "Open in background",
   "settings.app.form.autoLaunchOnStart": "Launch Ferdi on start",
   "settings.app.form.beta": "Include beta versions",
diff --git a/src/i18n/messages/src/components/settings/settings/EditSettingsForm.json b/src/i18n/messages/src/components/settings/settings/EditSettingsForm.json
index 97ecf4b5d..16d8e7816 100644
--- a/src/i18n/messages/src/components/settings/settings/EditSettingsForm.json
+++ b/src/i18n/messages/src/components/settings/settings/EditSettingsForm.json
@@ -182,15 +182,28 @@
     }
   },
   {
+    "id": "settings.app.accentColorInfo",
+    "defaultMessage": "!!!Write your accent color in a CSS-compatible format. (Default: #7367f0)",
+    "file": "src/components/settings/settings/EditSettingsForm.js",
+    "start": {
+      "line": 82,
+      "column": 19
+    },
+    "end": {
+      "line": 85,
+      "column": 3
+    }
+  },
+  {
     "id": "settings.app.headlineAdvanced",
     "defaultMessage": "!!!Advanced",
     "file": "src/components/settings/settings/EditSettingsForm.js",
     "start": {
-      "line": 82,
+      "line": 86,
       "column": 20
     },
     "end": {
-      "line": 85,
+      "line": 89,
       "column": 3
     }
   },
@@ -199,11 +212,11 @@
     "defaultMessage": "!!!Help us to translate Ferdi into your language.",
     "file": "src/components/settings/settings/EditSettingsForm.js",
     "start": {
-      "line": 86,
+      "line": 90,
       "column": 19
     },
     "end": {
-      "line": 89,
+      "line": 93,
       "column": 3
     }
   },
@@ -212,11 +225,11 @@
     "defaultMessage": "!!!Cache",
     "file": "src/components/settings/settings/EditSettingsForm.js",
     "start": {
-      "line": 90,
+      "line": 94,
       "column": 20
     },
     "end": {
-      "line": 93,
+      "line": 97,
       "column": 3
     }
   },
@@ -225,11 +238,11 @@
     "defaultMessage": "!!!Ferdi cache is currently using {size} of disk space.",
     "file": "src/components/settings/settings/EditSettingsForm.js",
     "start": {
-      "line": 94,
+      "line": 98,
       "column": 13
     },
     "end": {
-      "line": 97,
+      "line": 101,
       "column": 3
     }
   },
@@ -238,11 +251,11 @@
     "defaultMessage": "!!!Clear cache",
     "file": "src/components/settings/settings/EditSettingsForm.js",
     "start": {
-      "line": 98,
+      "line": 102,
       "column": 23
     },
     "end": {
-      "line": 101,
+      "line": 105,
       "column": 3
     }
   },
@@ -251,11 +264,11 @@
     "defaultMessage": "!!!Check for updates",
     "file": "src/components/settings/settings/EditSettingsForm.js",
     "start": {
-      "line": 102,
+      "line": 106,
       "column": 25
     },
     "end": {
-      "line": 105,
+      "line": 109,
       "column": 3
     }
   },
@@ -264,11 +277,11 @@
     "defaultMessage": "!!!Restart & install update",
     "file": "src/components/settings/settings/EditSettingsForm.js",
     "start": {
-      "line": 106,
+      "line": 110,
       "column": 23
     },
     "end": {
-      "line": 109,
+      "line": 113,
       "column": 3
     }
   },
@@ -277,11 +290,11 @@
     "defaultMessage": "!!!Is searching for update",
     "file": "src/components/settings/settings/EditSettingsForm.js",
     "start": {
-      "line": 110,
+      "line": 114,
       "column": 25
     },
     "end": {
-      "line": 113,
+      "line": 117,
       "column": 3
     }
   },
@@ -290,11 +303,11 @@
     "defaultMessage": "!!!Update available, downloading...",
     "file": "src/components/settings/settings/EditSettingsForm.js",
     "start": {
-      "line": 114,
+      "line": 118,
       "column": 25
     },
     "end": {
-      "line": 117,
+      "line": 121,
       "column": 3
     }
   },
@@ -303,11 +316,11 @@
     "defaultMessage": "!!!You are using the latest version of Ferdi",
     "file": "src/components/settings/settings/EditSettingsForm.js",
     "start": {
-      "line": 118,
+      "line": 122,
       "column": 24
     },
     "end": {
-      "line": 121,
+      "line": 125,
       "column": 3
     }
   },
@@ -316,11 +329,11 @@
     "defaultMessage": "!!!Current version:",
     "file": "src/components/settings/settings/EditSettingsForm.js",
     "start": {
-      "line": 122,
+      "line": 126,
       "column": 18
     },
     "end": {
-      "line": 125,
+      "line": 129,
       "column": 3
     }
   },
@@ -329,11 +342,11 @@
     "defaultMessage": "!!!Changes require restart",
     "file": "src/components/settings/settings/EditSettingsForm.js",
     "start": {
-      "line": 126,
+      "line": 130,
       "column": 29
     },
     "end": {
-      "line": 129,
+      "line": 133,
       "column": 3
     }
   },
@@ -342,11 +355,11 @@
     "defaultMessage": "!!!Official translations are English & German. All other languages are community based translations.",
     "file": "src/components/settings/settings/EditSettingsForm.js",
     "start": {
-      "line": 130,
+      "line": 134,
       "column": 22
     },
     "end": {
-      "line": 133,
+      "line": 137,
       "column": 3
     }
   }
diff --git a/src/i18n/messages/src/containers/settings/EditSettingsScreen.json b/src/i18n/messages/src/containers/settings/EditSettingsScreen.json
index 54a8868bf..bd5efb82e 100644
--- a/src/i18n/messages/src/containers/settings/EditSettingsScreen.json
+++ b/src/i18n/messages/src/containers/settings/EditSettingsScreen.json
@@ -234,15 +234,28 @@
     }
   },
   {
+    "id": "settings.app.form.accentColor",
+    "defaultMessage": "!!!Accent color",
+    "file": "src/containers/settings/EditSettingsScreen.js",
+    "start": {
+      "line": 101,
+      "column": 15
+    },
+    "end": {
+      "line": 104,
+      "column": 3
+    }
+  },
+  {
     "id": "settings.app.form.showDisabledServices",
     "defaultMessage": "!!!Display disabled services tabs",
     "file": "src/containers/settings/EditSettingsScreen.js",
     "start": {
-      "line": 101,
+      "line": 105,
       "column": 24
     },
     "end": {
-      "line": 104,
+      "line": 108,
       "column": 3
     }
   },
@@ -251,11 +264,11 @@
     "defaultMessage": "!!!Show unread message badge when notifications are disabled",
     "file": "src/containers/settings/EditSettingsScreen.js",
     "start": {
-      "line": 105,
+      "line": 109,
       "column": 29
     },
     "end": {
-      "line": 108,
+      "line": 112,
       "column": 3
     }
   },
@@ -264,11 +277,11 @@
     "defaultMessage": "!!!Enable spell checking",
     "file": "src/containers/settings/EditSettingsScreen.js",
     "start": {
-      "line": 109,
+      "line": 113,
       "column": 23
     },
     "end": {
-      "line": 112,
+      "line": 116,
       "column": 3
     }
   },
@@ -277,11 +290,11 @@
     "defaultMessage": "!!!Enable GPU Acceleration",
     "file": "src/containers/settings/EditSettingsScreen.js",
     "start": {
-      "line": 113,
+      "line": 117,
       "column": 25
     },
     "end": {
-      "line": 116,
+      "line": 120,
       "column": 3
     }
   },
@@ -290,11 +303,11 @@
     "defaultMessage": "!!!Include beta versions",
     "file": "src/containers/settings/EditSettingsScreen.js",
     "start": {
-      "line": 117,
+      "line": 121,
       "column": 8
     },
     "end": {
-      "line": 120,
+      "line": 124,
       "column": 3
     }
   },
@@ -303,11 +316,11 @@
     "defaultMessage": "!!!Disable updates",
     "file": "src/containers/settings/EditSettingsScreen.js",
     "start": {
-      "line": 121,
+      "line": 125,
       "column": 13
     },
     "end": {
-      "line": 124,
+      "line": 128,
       "column": 3
     }
   },
@@ -316,11 +329,11 @@
     "defaultMessage": "!!!Enable Franz Todos",
     "file": "src/containers/settings/EditSettingsScreen.js",
     "start": {
-      "line": 125,
+      "line": 129,
       "column": 15
     },
     "end": {
-      "line": 128,
+      "line": 132,
       "column": 3
     }
   },
@@ -329,11 +342,11 @@
     "defaultMessage": "!!!Keep all workspaces loaded",
     "file": "src/containers/settings/EditSettingsScreen.js",
     "start": {
-      "line": 129,
+      "line": 133,
       "column": 27
     },
     "end": {
-      "line": 132,
+      "line": 136,
       "column": 3
     }
   }
diff --git a/src/index.js b/src/index.js
index 2ee404c0b..4dcabb599 100644
--- a/src/index.js
+++ b/src/index.js
@@ -144,6 +144,13 @@ const createWindow = () => {
   }
 
   // Create the browser window.
+  let backgroundColor = '#7367F0';
+  if (settings.get('accentColor') !== '#7367f0') {
+    backgroundColor = settings.get('accentColor');
+  } else if (settings.get('darkMode')) {
+    backgroundColor = '#1E1E1E';
+  }
+
   mainWindow = new BrowserWindow({
     x: posX,
     y: posY,
@@ -153,7 +160,7 @@ const createWindow = () => {
     minHeight: 500,
     titleBarStyle: isMac ? 'hidden' : '',
     frame: isLinux,
-    backgroundColor: !settings.get('darkMode') ? '#7367F0' : '#1E1E1E',
+    backgroundColor,
     webPreferences: {
       nodeIntegration: true,
       webviewTag: true,
diff --git a/src/scripts/build-theme-info.js b/src/scripts/build-theme-info.js
new file mode 100644
index 000000000..4df5a022b
--- /dev/null
+++ b/src/scripts/build-theme-info.js
@@ -0,0 +1,95 @@
+/**
+ * Script to get information on which selectors use the brand color.
+ * This is needed to provide the accent color feature - the feature will create CSS rules
+ * to overwrite the color of these selectors.
+ */
+const css = require('css');
+const fs = require('fs-extra');
+const path = require('path');
+
+// Colors that should be replaced with the accent color
+const accentColors = [
+  '#7367f0',
+  '#5e50ee',
+];
+
+const cssFile = path.join(__dirname, '../../', 'build', 'styles', 'main.css');
+const outputFile = path.join(__dirname, '../', 'assets', 'themeInfo.json');
+
+// Parse and extract the rules from a CSS stylesheet file
+async function getRulesFromCssFile(file) {
+  const cssSrc = (await fs.readFile(file)).toString();
+  const cssTree = css.parse(cssSrc);
+
+  return cssTree.stylesheet.rules;
+}
+
+/**
+ * Get all selectors from a list of parsed CSS rules that set any property to one of the specified
+ * values.
+ * 
+ * This function will output an object in this format:
+ * {
+ *  'property-name': [ array of selectors ]
+ * }
+ * 
+ * e.g.
+ * {
+ *  'background-color': [
+ *   '.background',
+ *   '.input-dark'
+ *  ]
+ * }
+ * 
+ * @param {Array} rules Rules as outputted by the `css` module
+ * @param {Array} values Array of values that should be searched for
+ */
+function getSelectorsDeclaringValues(rules, values) {
+  const output = {};
+
+  rules.forEach((rule) => {
+    if (rule.declarations) {
+      rule.declarations.forEach((declaration) => {
+        if (declaration.type === 'declaration'
+            && values.includes(declaration.value.toLowerCase())) {
+          if (!output[declaration.property]) {
+            output[declaration.property] = [];
+          }
+          output[declaration.property] = output[declaration.property].concat(rule.selectors);
+        }
+      });
+    }
+  });
+
+  return output;
+}
+
+async function generateThemeInfo() {
+  if (!await fs.pathExists(cssFile)) {
+    console.log('Please make sure to build the project first.');
+    return;
+  }
+
+  // Read and parse css bundle
+  const rules = await getRulesFromCssFile(cssFile);
+
+  console.log(`Found ${rules.length} rules`);
+
+  // Get rules specifying the brand colors
+  const brandRules = getSelectorsDeclaringValues(rules, accentColors);
+
+  console.log(`Found ${Object.keys(brandRules).join(', ')} properties that set color to brand color`);
+
+  // Join array of declarations into a single string
+  Object.keys(brandRules).forEach((rule) => {
+    brandRules[rule] = brandRules[rule].join(', ');
+  });
+
+  // Write object with theme info to file
+  fs.writeFile(
+    outputFile,
+    JSON.stringify(brandRules),
+  );
+}
+
+generateThemeInfo();
diff --git a/src/stores/FeaturesStore.js b/src/stores/FeaturesStore.js
index c39b6d7f3..3d9542245 100644
--- a/src/stores/FeaturesStore.js
+++ b/src/stores/FeaturesStore.js
@@ -20,6 +20,7 @@ import settingsWS from '../features/settingsWS';
 import serviceLimit from '../features/serviceLimit';
 import communityRecipes from '../features/communityRecipes';
 import todos from '../features/todos';
+import accentColor from '../features/accentColor';
 
 import { DEFAULT_FEATURES_CONFIG } from '../config';
 
@@ -83,5 +84,6 @@ export default class FeaturesStore extends Store {
     serviceLimit(this.stores, this.actions);
     communityRecipes(this.stores, this.actions);
     todos(this.stores, this.actions);
+    accentColor(this.stores, this.actions);
   }
 }
diff --git a/src/styles/radio.scss b/src/styles/radio.scss
index 87d401215..b1e148ca0 100644
--- a/src/styles/radio.scss
+++ b/src/styles/radio.scss
@@ -30,7 +30,9 @@
 
     &.is-selected {
       background: #FFF;
-      border: 2px solid $theme-brand-primary;
+      border-width: 2px;
+      border-style: solid;
+      border-color: $theme-brand-primary;
       color: $theme-brand-primary;
     }
 
diff --git a/src/styles/settings.scss b/src/styles/settings.scss
index 071861f16..753288b8d 100644
--- a/src/styles/settings.scss
+++ b/src/styles/settings.scss
@@ -59,7 +59,9 @@
 
     .premium-info {
       background: $dark-theme-gray-darker;
-      border: 2px solid $theme-brand-primary;
+      border-width: 2px;
+      border-style: solid;
+      border-color: $theme-brand-primary;
     }
     .legal { color: $theme-gray-light; }
   }
@@ -170,7 +172,9 @@
     }
 
     .separator {
-      border-right: 1px solid darken($theme-brand-primary, 8%);
+      border-right-width: 1px;
+      border-right-style: solid;
+      border-right-color: $theme-brand-primary;
       height: 100%;
       margin: 0 15px;
       transform: skew(15deg) rotate(2deg);
@@ -224,7 +228,7 @@
 
   .settings__close {
     background: $theme-brand-primary;
-    border-left: 1px solid darken($theme-brand-primary, 8%);
+    // border-left: 1px solid darken($theme-brand-primary, 8%);
     color: #FFF;
     font-size: 20px;
     height: 50px;
@@ -233,7 +237,9 @@
     right: 0;
     transition: background $theme-transition-time;
     border-top-right-radius: $theme-border-radius;
+    cursor: pointer;
 
+    &::before { cursor: pointer; }
     &:hover { background: darken($theme-brand-primary, 5%); }
   }
 
diff --git a/src/styles/tabs.scss b/src/styles/tabs.scss
index ee0858687..e500830ed 100644
--- a/src/styles/tabs.scss
+++ b/src/styles/tabs.scss
@@ -34,7 +34,9 @@
 
   &.is-active {
     background: lighten($theme-brand-primary, 35%);
-    border-left: 4px solid $theme-brand-primary;
+    border-left-width: 4px;
+    border-left-style: solid;
+    border-left-color: $theme-brand-primary;
 
     .tab-item__icon { margin-left: -4px; }
   }
diff --git a/src/styles/type.scss b/src/styles/type.scss
index 135d32da0..e0b27fe34 100644
--- a/src/styles/type.scss
+++ b/src/styles/type.scss
@@ -39,7 +39,9 @@ a {
 
   &.button {
     background: none;
-    border: 2px solid $theme-brand-primary;
+    border-width: 2px;
+    border-style: solid;
+    border-color: $theme-brand-primary;
     border-radius: 3px;
     color: $theme-brand-primary;
     display: inline-block;