diff --git a/app/soapbox/actions/soapbox.js b/app/soapbox/actions/soapbox.js
index d85bd0f0f..cc266aeb3 100644
--- a/app/soapbox/actions/soapbox.js
+++ b/app/soapbox/actions/soapbox.js
@@ -40,6 +40,7 @@ export const makeDefaultConfig = features => {
     logo: '',
     banner: '',
     brandColor: '', // Empty
+    accentColor: '',
     customCss: ImmutableList(),
     promoPanel: ImmutableMap({
       items: ImmutableList(),
diff --git a/app/soapbox/containers/soapbox.js b/app/soapbox/containers/soapbox.js
index 301de4c01..c08e643a6 100644
--- a/app/soapbox/containers/soapbox.js
+++ b/app/soapbox/containers/soapbox.js
@@ -64,6 +64,7 @@ const mapStateToProps = (state) => {
 
   // In demo mode, force the default brand color
   const brandColor = settings.get('demo') ? '#0482d8' : soapboxConfig.get('brandColor');
+  const accentColor = settings.get('demo') ? null : soapboxConfig.get('accentColor');
 
   return {
     showIntroduction,
@@ -75,7 +76,7 @@ const mapStateToProps = (state) => {
     dyslexicFont: settings.get('dyslexicFont'),
     demetricator: settings.get('demetricator'),
     locale: validLocale(locale) ? locale : 'en',
-    themeCss: generateThemeCss(brandColor),
+    themeCss: generateThemeCss(brandColor, accentColor),
     brandColor: soapboxConfig.get('brandColor'),
     themeMode: settings.get('themeMode'),
     halloween: settings.get('halloween'),
diff --git a/app/soapbox/features/soapbox_config/components/site_preview.js b/app/soapbox/features/soapbox_config/components/site_preview.js
index a51604695..5d6749452 100644
--- a/app/soapbox/features/soapbox_config/components/site_preview.js
+++ b/app/soapbox/features/soapbox_config/components/site_preview.js
@@ -3,7 +3,7 @@ import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 
 import { defaultSettings } from 'soapbox/actions/settings';
-import { brandColorToCSS } from 'soapbox/utils/theme';
+import { themeColorsToCSS } from 'soapbox/utils/theme';
 
 export default function SitePreview({ soapbox }) {
 
@@ -20,7 +20,7 @@ export default function SitePreview({ soapbox }) {
 
   return (
     <div className={bodyClass}>
-      <style>{`.site-preview {${brandColorToCSS(soapbox.get('brandColor'))}}`}</style>
+      <style>{`.site-preview {${themeColorsToCSS(soapbox.get('brandColor'), soapbox.get('accentColor'))}}`}</style>
       <div className='app-holder'>
         <div>
           <div className='ui'>
diff --git a/app/soapbox/features/soapbox_config/index.js b/app/soapbox/features/soapbox_config/index.js
index 5ec7f0b39..1b3fb51d3 100644
--- a/app/soapbox/features/soapbox_config/index.js
+++ b/app/soapbox/features/soapbox_config/index.js
@@ -235,6 +235,12 @@ class SoapboxConfig extends ImmutablePureComponent {
                     value={soapbox.get('brandColor')}
                     onChange={this.handleChange(['brandColor'], (e) => e.hex)}
                   />
+                  <ColorWithPicker
+                    buttonId='accent_color'
+                    label={<FormattedMessage id='soapbox_config.fields.accent_color_label' defaultMessage='Accent color' />}
+                    value={soapbox.get('accentColor')}
+                    onChange={this.handleChange(['accentColor'], (e) => e.hex)}
+                  />
                   <div className='input with_label toggle'>
                     <div className='label_input'>
                       <label><FormattedMessage id='soapbox_config.fields.theme_label' defaultMessage='Default theme' /></label>
diff --git a/app/soapbox/locales/pl.json b/app/soapbox/locales/pl.json
index 470bac41b..d26164d62 100644
--- a/app/soapbox/locales/pl.json
+++ b/app/soapbox/locales/pl.json
@@ -856,6 +856,7 @@
   "soapbox_config.crypto_donate_panel_limit.meta_fields.limit_placeholder": "Liczba elementów do wyświetlenia w widżecie krypto na stronie głównej",
   "soapbox_config.custom_css.meta_fields.url_placeholder": "Adres URL",
   "soapbox_config.display_fqn_label": "Wyświetlaj domenę (np. @użytkownik@domena) dla lokalnych kont.",
+  "soapbox_config.fields.accent_color_label": "Kolor akcentu",
   "soapbox_config.fields.brand_color_label": "Kolor marki",
   "soapbox_config.fields.crypto_address.add": "Dodaj nowy adres krypto",
   "soapbox_config.fields.crypto_addresses_label": "Adresy kryptowalut",
diff --git a/app/soapbox/locales/uk.json b/app/soapbox/locales/uk.json
index 47b914491..1ab59de14 100644
--- a/app/soapbox/locales/uk.json
+++ b/app/soapbox/locales/uk.json
@@ -844,6 +844,7 @@
   "soapbox_config.crypto_donate_panel_limit.meta_fields.limit_placeholder": "Number of items to display in the crypto homepage widget",
   "soapbox_config.custom_css.meta_fields.url_placeholder": "URL",
   "soapbox_config.display_fqn_label": "Display domain (eg @user@domain) for local accounts.",
+  "soapbox_config.fields.accent_color_label": "Акцентний колір",
   "soapbox_config.fields.brand_color_label": "Brand color",
   "soapbox_config.fields.crypto_address.add": "Add new crypto address",
   "soapbox_config.fields.crypto_addresses_label": "Cryptocurrency addresses",
diff --git a/app/soapbox/utils/theme.js b/app/soapbox/utils/theme.js
index b398145bf..1b3c85dfe 100644
--- a/app/soapbox/utils/theme.js
+++ b/app/soapbox/utils/theme.js
@@ -1,8 +1,8 @@
 import { Map as ImmutableMap } from 'immutable';
 
-export const generateThemeCss = brandColor => {
+export const generateThemeCss = (brandColor, accentColor) => {
   if (!brandColor) return null;
-  return themeDataToCss(brandColorToThemeData(brandColor));
+  return themeDataToCss(brandColorToThemeData(brandColor).merge(accentColorToThemeData(brandColor, accentColor)));
 };
 
 // https://stackoverflow.com/a/5624139
@@ -74,10 +74,29 @@ export const brandColorToThemeData = brandColor => {
   });
 };
 
+export const accentColorToThemeData = (brandColor, accentColor) => {
+  if (accentColor) {
+    const { h, s, l } = rgbToHsl(hexToRgb(accentColor));
+
+    return ImmutableMap({
+      'accent-color_h': h,
+      'accent-color_s': `${s}%`,
+      'accent-color_l': `${l}%`,
+    });
+  }
+
+  const { h } = rgbToHsl(hexToRgb(brandColor));
+  return ImmutableMap({
+    'accent-color_h': h - 15,
+    'accent-color_s': '86%',
+    'accent-color_l': '44%',
+  });
+};
+
 export const themeDataToCss = themeData => (
   themeData
     .entrySeq()
     .reduce((acc, cur) => acc + `--${cur[0]}:${cur[1]};`, '')
 );
 
-export const brandColorToCSS = brandColor => themeDataToCss(brandColorToThemeData(brandColor));
+export const themeColorsToCSS = (brandColor, accentColor) => themeDataToCss(brandColorToThemeData(brandColor).merge(accentColorToThemeData(brandColor, accentColor)));
diff --git a/app/styles/forms.scss b/app/styles/forms.scss
index 64ab2fb4d..53551941a 100644
--- a/app/styles/forms.scss
+++ b/app/styles/forms.scss
@@ -418,6 +418,10 @@ code {
     margin-bottom: 10px;
     margin-right: 10px;
 
+    &#accent_color {
+      background: var(--accent-color);
+    }
+
     &:last-child {
       margin-right: 0;
     }
@@ -510,7 +514,7 @@ code {
 
   .label_input {
     &__color {
-      display: inline-flex;
+      display: flex;
       font-size: 14px;
 
       .color-swatch {
diff --git a/app/styles/themes.scss b/app/styles/themes.scss
index 032f8ce4d..de6a6b1bf 100644
--- a/app/styles/themes.scss
+++ b/app/styles/themes.scss
@@ -41,9 +41,6 @@ body,
   --background-color_hsl: var(--background-color_h), var(--background-color_s), var(--background-color_l);
   --foreground-color_hsl: var(--foreground-color_h), var(--foreground-color_s), var(--foreground-color_l);
   --warning-color_hsl: var(--warning-color_h), var(--warning-color_s), var(--warning-color_l);
-  --accent-color_h: calc(var(--brand-color_h) - 15);
-  --accent-color_s: 86%;
-  --accent-color_l: 44%;
 
   // Modifiers
   --brand-color--faint: hsla(var(--brand-color_hsl), 0.1);