diff --git a/ui/component/common/unsupported-on-web.jsx b/ui/component/common/unsupported-on-web.jsx
deleted file mode 100644
index d3667a0e5..000000000
--- a/ui/component/common/unsupported-on-web.jsx
+++ /dev/null
@@ -1,22 +0,0 @@
-// @flow
-import React from 'react';
-import Button from 'component/button';
-
-type Props = {
-  type?: string,
-};
-
-export default function UnsupportedOnWeb(props: Props) {
-  const { type = 'page' } = props;
-
-  return (
-    IS_WEB && (
-      <div className="section__subtitle--status">
-        {type === 'page' && __('This page is not currently supported on the web')}
-        {type === 'feature' && __('This feature is not currently supported on the web')}.{' '}
-        <Button button="link" label={__('Download the desktop app')} href="https://lbry.com/get" /> for full feature
-        support.
-      </div>
-    )
-  );
-}
diff --git a/ui/modal/modalWalletEncrypt/view.jsx b/ui/modal/modalWalletEncrypt/view.jsx
index f4f7746a2..80d64375e 100644
--- a/ui/modal/modalWalletEncrypt/view.jsx
+++ b/ui/modal/modalWalletEncrypt/view.jsx
@@ -127,7 +127,7 @@ class ModalWalletEncrypt extends React.PureComponent<Props, State> {
               placeholder={__('Shh...')}
               type="password"
               name="wallet-new-password"
-              onChange={event => this.onChangeNewPassword(event)}
+              onChange={(event) => this.onChangeNewPassword(event)}
             />
           </fieldset-section>
           <fieldset-section>
@@ -137,7 +137,7 @@ class ModalWalletEncrypt extends React.PureComponent<Props, State> {
               placeholder={__('Your eyes only')}
               type="password"
               name="wallet-new-password-confirm"
-              onChange={event => this.onChangeNewPasswordConfirm(event)}
+              onChange={(event) => this.onChangeNewPasswordConfirm(event)}
             />
           </fieldset-section>
           <fieldset-section>
@@ -145,12 +145,12 @@ class ModalWalletEncrypt extends React.PureComponent<Props, State> {
               label={__('Remember Password')}
               type="checkbox"
               name="wallet-remember-password"
-              onChange={event => this.onChangeRememberPassword(event)}
+              onChange={(event) => this.onChangeRememberPassword(event)}
               checked={this.state.rememberPassword}
             />
           </fieldset-section>
 
-          <div className="section__subtitle--status">
+          <div className="help--warning">
             {__(
               'If your password is lost, it cannot be recovered. You will not be able to access your wallet without a password.'
             )}
@@ -166,7 +166,7 @@ class ModalWalletEncrypt extends React.PureComponent<Props, State> {
             placeholder={__('Type "%acknowledgement_text%"', { acknowledgement_text: acknowledgementText })}
             type="text"
             name="wallet-understand"
-            onChange={event => this.onChangeUnderstandConfirm(event)}
+            onChange={(event) => this.onChangeUnderstandConfirm(event)}
           />
           {failMessage && <div className="error__text">{__(failMessage)}</div>}
         </Form>
diff --git a/ui/scss/all.scss b/ui/scss/all.scss
index c6588e0ba..2b88d2873 100644
--- a/ui/scss/all.scss
+++ b/ui/scss/all.scss
@@ -4,7 +4,7 @@
 @import 'init/vars';
 @import 'init/mixins';
 @import 'init/gui';
-@import 'init/color';
+@import 'init/base-theme';
 @import 'themes/light.scss';
 @import 'themes/dark.scss';
 @import 'component/ads';
diff --git a/ui/scss/component/_badge.scss b/ui/scss/component/_badge.scss
index 53c92d5d8..0baeab65b 100644
--- a/ui/scss/component/_badge.scss
+++ b/ui/scss/component/_badge.scss
@@ -26,13 +26,6 @@
   color: var(--color-tertiary);
 }
 
-.badge--cost {
-  @extend .badge;
-  background-color: var(--color-cost);
-  color: var(--color-black);
-  line-height: 1;
-}
-
 .badge--free {
   @extend .badge;
   background-color: var(--color-secondary-alt);
diff --git a/ui/scss/component/_button.scss b/ui/scss/component/_button.scss
index 96c91525b..35fb45512 100644
--- a/ui/scss/component/_button.scss
+++ b/ui/scss/component/_button.scss
@@ -556,7 +556,7 @@ svg + .button__label {
   &:hover {
     cursor: default;
     text-decoration: none;
-    background-color: var(--color-primary-alt);
+    background-color: var(--color-button-toggle-bg);
   }
 }
 
diff --git a/ui/scss/component/_header.scss b/ui/scss/component/_header.scss
index 6a5d89749..0c1d0fbd8 100644
--- a/ui/scss/component/_header.scss
+++ b/ui/scss/component/_header.scss
@@ -65,14 +65,6 @@
   svg {
     stroke: var(--color-text);
   }
-
-  &:hover {
-    color: var(--color-link-active);
-
-    svg {
-      stroke: var(--color-link-active);
-    }
-  }
 }
 
 .header__navigation-item--back,
@@ -84,7 +76,7 @@
   margin-right: var(--spacing-s);
 
   &:hover {
-    background-color: var(--color-primary-alt);
+    background-color: var(--color-header-button-hover);
   }
 
   @media (min-width: $breakpoint-small) {
diff --git a/ui/scss/component/_table.scss b/ui/scss/component/_table.scss
index 99171c794..db8ac028d 100644
--- a/ui/scss/component/_table.scss
+++ b/ui/scss/component/_table.scss
@@ -30,10 +30,6 @@
         border-bottom: 1px solid var(--color-border);
       }
     }
-
-    &:nth-child(2n) {
-      background-color: var(--color-table-highlight);
-    }
   }
 
   th,
diff --git a/ui/scss/component/menu-button.scss b/ui/scss/component/menu-button.scss
index ddfdaad37..cb96d4c81 100644
--- a/ui/scss/component/menu-button.scss
+++ b/ui/scss/component/menu-button.scss
@@ -54,7 +54,7 @@
 
 .menu__title {
   &[aria-expanded='true'] {
-    background-color: var(--color-primary-alt);
+    background-color: var(--color-header-button-active);
   }
 }
 
diff --git a/ui/scss/component/section.scss b/ui/scss/component/section.scss
index 5eae20b0e..ece1ca22e 100644
--- a/ui/scss/component/section.scss
+++ b/ui/scss/component/section.scss
@@ -90,12 +90,6 @@
   font-size: var(--font-body);
 }
 
-.section__subtitle--status {
-  @extend .section__subtitle;
-  padding: var(--spacing-s);
-  background-color: var(--color-text-warning);
-}
-
 .section__divider {
   display: flex;
   align-items: center;
diff --git a/ui/scss/init/_base-theme.scss b/ui/scss/init/_base-theme.scss
new file mode 100644
index 000000000..c518969d5
--- /dev/null
+++ b/ui/scss/init/_base-theme.scss
@@ -0,0 +1,193 @@
+//
+// Colors are taken from this color pallette
+// https://tailwindcss.com/docs/customizing-colors
+// New colors should be also taken from the same color palette (if possible)
+//
+:root {
+  // Generic colors
+  --color-primary: #047857;
+  --color-primary-alt: #e4f4ef;
+  --color-primary-alt-2: #065f46;
+  --color-primary-alt-3: #10b981;
+  --color-secondary: #1e3a8a;
+  --color-secondary-alt: #dbeafe;
+  --color-secondary-alt-2: #bfdbfe;
+  --color-secondary-alt-3: #1e40af;
+  --color-tertiary: #5b21b6;
+  --color-tertiary-alt: #f5f3ff;
+  --color-danger: #991b1b;
+  --color-danger-alt: #fecaca;
+  --color-warning: #fff58c;
+  --color-black: #111;
+  --color-white: #fdfdfd;
+  --color-white-alt: #fafafa;
+  --color-gray-1: #f3f4f6;
+  --color-gray-2: #e5e7eb;
+  --color-gray-3: #d1d5db;
+  --color-gray-4: #9ca3af;
+  --color-gray-5: #6b7280;
+  --color-gray-6: #4b5563;
+  --color-gray-7: #374151;
+  --color-gray-8: #1f2937;
+  --color-gray-9: #1f2c47;
+  --color-gray-10: #111827;
+  --color-amber: #f26522;
+
+  // Structure
+  --color-text: var(--color-black);
+  --color-text-subtitle: var(--color-gray-5);
+  --color-text-inverse: #fdfdfd;
+  --color-background: #fafafa;
+  --color-background--splash: #212529;
+  --color-border: #ededed;
+  --color-background-overlay: #21252980;
+  --color-card-background: #ffffff;
+  --color-card-background-highlighted: #f1f7fe;
+
+  // Text
+  --color-text-selection-bg: var(--color-secondary-alt);
+  --color-text-selection: var(--color-secondary);
+  --color-text-empty: #999999;
+  --color-text-help: #999999;
+  --color-text-subtitle: #767676;
+  --color-text-warning: #212529;
+  --color-help-warning-bg: #fef3c7;
+  --color-help-warning-text: #555555;
+  --color-text-warning--background: var(--lbry-yellow-1);
+  --color-blockquote: var(--color-gray-3);
+  --color-blockquote-bg: var(--color-gray-1);
+  --color-text-error: var(--color-danger);
+  --color-error: var(--color-danger-alt);
+  --color-tooltip-bg: #222;
+  --color-tooltip-text: #fafafa;
+
+  // Header
+  --color-header-background: #ffffff;
+  --color-header-button: var(--color-button-alt-bg);
+  --color-header-button-active: var(--color-primary-alt);
+  --color-header-button-hover: var(--color-primary-alt);
+
+  // Button
+  --color-button-primary-bg: var(--color-primary);
+  --color-button-primary-text: var(--color-primary-alt);
+  --color-button-primary-bg-hover: var(--color-primary-alt-2);
+  --color-button-primary-hover-text: var(--color-primary-alt);
+  --color-button-secondary-bg: var(--color-secondary-alt);
+  --color-button-secondary-border: var(--color-secondary-alt);
+  --color-button-secondary-text: var(--color-secondary);
+  --color-button-secondary-bg-hover: var(--color-secondary-alt-2);
+  --color-button-alt-bg: var(--color-gray-1);
+  --color-button-alt-text: var(--color-text);
+  --color-button-alt-bg-hover: var(--color-gray-2);
+  --color-button-toggle-text: var(--color-primary);
+  --color-button-toggle-bg: var(--color-primary-alt);
+  --color-button-border: var(--color-gray-3);
+  --color-link: var(--color-primary);
+  --color-link-hover: var(--color-black);
+  --color-link-focus-bg: var(--color-gray-1);
+
+  // Input
+  --color-input-color: var(--color-black);
+  --color-input-label: var(--color-gray-5);
+  --color-input-placeholder: var(--color-gray-8);
+  --color-input-bg: var(--color-gray-1);
+  --color-input-border: var(--color-border);
+  --color-input-border-active: var(--color-secondary);
+  --color-input-toggle: var(--color-secondary);
+  --color-input-toggle-bg: var(--color-gray-1);
+  --color-input-toggle-bg-hover: var(--color-secondary-alt);
+  --color-input-prefix-bg: var(--color-gray-2);
+  --color-input-prefix-border: var(--color-gray-5);
+  --color-input-bg-selected: var(--color-primary-alt);
+  --select-toggle-background: url("data:image/svg+xml,%3Csvg viewBox='0 0 96 96' xmlns='http://www.w3.org/2000/svg' fill='%23212529'%3E%3Cpath d='M17.172, 31.172c1.562, -1.562 4.095, -1.562 5.656, 0l25.172, 25.171l25.172, -25.171c1.562, -1.562 4.095, -1.562 5.656, 0c1.562, 1.562 1.562, 4.095 0, 5.656l-28, 28c-1.562, 1.562 -4.095, 1.562 -5.656, 0l-28, -28c-0.781, -0.781 -1.172, -1.805 -1.172, -2.828c0, -1.023 0.391, -2.047 1.172, -2.828Z'/%3E%3C/svg%3E%0A");
+
+  // Navigation
+  --color-navigation-icon: var(--color-gray-5);
+  --color-navigation-link: var(--color-gray-5);
+  --color-navigation-active: var(--color-primary-alt);
+  --color-navigation-active-text: var(--color-primary);
+  --color-navigation-hover: var(--color-gray-1);
+  --color-navigation-hover-text: var(--color-primary);
+
+  // Tags
+  --color-tag: var(--color-gray-5);
+  --color-tag-bg: var(--color-button-alt-bg);
+  --color-tag-hover: var(--color-primary-alt);
+  --color-tag-bg-hover: var(--color-button-primary-bg);
+
+  // Menu
+  --color-menu-background: var(--color-header-background);
+  --color-menu-background--active: var(--color-card-background-highlighted);
+  --color-menu-icon: var(--color-navigation-link);
+
+  // Comments
+  --color-comment-menu: var(--color-gray-3);
+  --color-comment-menu-hovering: var(--color-gray-6);
+  --color-comment-highlighted: #fff2d9;
+  --color-comment-threadline: var(--color-gray-1);
+  --color-comment-threadline-hover: var(--color-gray-4);
+
+  // Icons
+  --color-follow-bg: #ffd4da;
+  --color-follow-icon: #e2495e;
+  --color-view-bg: var(--color-secondary-alt);
+  --color-view-icon: var(--color-secondary);
+
+  // Snack
+  --color-snack-bg: var(--color-primary);
+  --color-snack: var(--color-white);
+  --color-snack-bg-error: var(--color-danger);
+  --color-snack-upgrade: var(--color-tertiary);
+
+  // Superchat
+  --color-superchat-text: var(--color-black);
+  --color-superchat: var(--color-cost);
+  --color-superchat__light: #fcd34d50;
+  --color-superchat-2: #fde68a;
+  --color-superchat-3: #fef3c7;
+  --color-superchat-3__light: #fef3c750;
+  --color-superchat-4: #fffbeb;
+
+  // Editor
+  --color-editor-cursor: var(--color-text);
+  --color-editor-quote: #707070;
+  --color-editor-tag: #ea9400;
+  --color-editor-attr: #04b0f4;
+  --color-editor-string: #ff7451;
+  --color-editor-inline-code-fg: var(--color-text);
+  --color-editor-inline-code-fg-preview: #2e3439;
+  --color-editor-inline-code-bg: rgba(157, 161, 165, 0.3);
+  --color-editor-inline-code-bg-preview: #d0e8ff;
+  --color-editor-selected: #add6ff;
+  --color-editor-link: var(--color-link);
+  --color-editor-url: var(--color-editor-string);
+  --color-editor-hr: var(--color-editor-tag);
+  --color-editor-hr-preview: #cccccc;
+
+  // Other
+  --color-focus: #bfdbfe;
+  --color-notification: #cc190f;
+  --color-live: #cc190f;
+  --color-nag: var(--color-orange);
+  --color-cost: #fcd34d;
+  --color-notice: #fef3ca;
+  --color-purchased: var(--color-cost);
+  --color-purchased-alt: #ffebc2;
+  --color-purchased-text: var(--color-gray-5);
+  --color-thumbnail-background: var(--color-gray-1);
+  --color-spinner-light: var(--color-white);
+  --color-spinner-dark: var(--color-black);
+  --color-placeholder-background: var(--color-gray-1);
+  --color-file-viewer-background: var(--color-card-background);
+  --color-tabs-background: var(--color-card-background);
+  --color-tab-divider: var(--color-primary);
+  --color-modal-background: var(--color-card-background);
+
+  // Ads
+  --color-ads-background: #fae5ff;
+  --color-ads-link: var(--color-link);
+
+  // Scrollbar
+  --color-scrollbar-thumb-bg: rgba(0, 0, 0, 0.2);
+  --color-scrollbar-track-bg: transparent;
+}
diff --git a/ui/scss/themes/dark.scss b/ui/scss/themes/dark.scss
index 4926db6dd..d7c96aafe 100644
--- a/ui/scss/themes/dark.scss
+++ b/ui/scss/themes/dark.scss
@@ -1,89 +1,58 @@
-/* #2c3237 - 5% */
-/* #383f45 - 10% */
-/* #434b53;  - 15% */
-/* #4e5862;  - 20% */
-/* #5a6570;  - 25% */
-
 [theme='dark'] {
-  --color-primary-alt: #3e675d;
-  --color-primary: #2bbb90;
+  // Color overides
+  --color-secondary: #1d3b63;
+  --color-secondary-alt: #dbeafe;
+  --color-secondary-alt-2: #bfdbfe;
+  --color-secondary-alt-3: #172f4f;
 
-  // Button
-  --color-link: var(--color-primary);
-  --color-link-hover: #60e1ba;
-  --color-link-active: #60e1ba;
-
-  --color-navigation-icon: #76808a;
-  --color-navigation-link: #b9c3ce;
-  --color-navigation-active: #333a41;
-  --color-navigation-active-text: #bac5d0;
-  --color-navigation-hover: #272c32;
-  --color-navigation-hover-text: #bac5d0;
-
-  --color-button-primary-bg: var(--color-primary-alt);
-  --color-button-primary-bg-hover: #44796c;
-  --color-button-primary-text: white;
-  --color-button-primary-hover-text: var(--color-text);
-  --color-button-secondary-bg: #395877;
-  --color-button-secondary-border: #395877;
-  --color-button-secondary-bg-hover: #4b6d8f;
-  --color-button-secondary-text: #a3c1e0;
-  --color-button-alt-bg: #33383d;
-  --color-button-alt-bg-hover: #3e464d;
-  --color-button-alt-text: #e2e9f0;
-  --color-header-button: #434b54;
-  --color-button-border: var(--color-gray-5);
-  --color-link-focus-bg: #333a41;
-  --color-button-toggle-text: var(--color-primary);
-  --color-button-toggle-bg: var(--color-primary-alt);
-  --color-button-toggle-bg-hover: var(--color-primary-alt);
-
-  // Color
-  --color-focus: #2d69a5;
-  --color-background-overlay: #212529d7;
-  --color-background: #1c1f22;
-  --color-background-overlay: #21252999;
-  --color-border: #2f3337;
-  --color-card-background: #232629;
-  --color-card-background-highlighted: #384046;
-  --color-header-background: #2a2e32;
-  --color-tab-text: var(--color-white);
-  --color-tabs-background: var(--color-card-background);
-  --color-tab-divider: var(--color-white);
-  --color-modal-background: var(--color-card-background);
-  --color-comment-menu: #6a6a6a;
-  --color-comment-menu-hovering: #e0e0e0;
-  --color-notice: #58563b;
-  --color-error: #61373f;
-  --color-purchased: #ffd580;
-  --color-purchased-alt: var(--color-purchased);
-  --color-purchased-text: var(--color-gray-5);
-  --color-comment-highlighted: #484734;
-  --color-thumbnail-background: var(--color-gray-5);
-  --color-comment-threadline: #434b54;
-  --color-comment-threadline-hover: var(--color-gray-4);
-  --color-tooltip-bg: #2f3337;
+  // Structure
+  --color-background: var(--color-gray-10);
+  --color-background-overlay: #11182795;
+  --color-border: var(--color-gray-7);
+  --color-card-background: var(--color-gray-8);
+  --color-card-background-highlighted: var(--color-gray-9);
 
   // Text
-  --color-text: #d8d8d8;
-  --color-text-error: #f5748c;
-  --color-help-warning-bg: #fbbf2450;
-  --color-help-warning-text: white;
+  --color-text: var(--color-white);
+  --color-text-subtitle: var(--color-gray-4);
   --color-text-empty: var(--color-text-subtitle);
-
   --color-text-help: #bbbbbb;
-  --color-text-subtitle: #9fafc0;
   --color-text-warning: #212529;
   --color-text-warning--background: var(--lbry-yellow-1);
-  --color-blockquote: var(--color-gray-5);
-  --color-blockquote-bg: var(--color-card-background-highlighted);
+  --color-text-error: var(--color-danger);
+  --color-error: var(--color-danger-alt);
+
+  // Header
+  --color-header-background: var(--color-gray-8);
+  --color-header-button: var(--color-gray-7);
+  --color-header-button-hover: var(--color-gray-6);
+  --color-header-button-active: var(--color-gray-6);
+
+  // Button
+  --color-button-primary-bg: var(--color-primary);
+  --color-button-primary-bg-hover: var(--color-primary-alt-2);
+  --color-button-primary-text: var(--color-primary-alt);
+  --color-button-primary-hover-text: var(--color-primary-alt);
+  --color-button-secondary-bg: var(--color-secondary);
+  --color-button-secondary-border: var(--color-secondary);
+  --color-button-secondary-bg-hover: var(--color-secondary-alt-3);
+  --color-button-secondary-text: var(--color-secondary-alt);
+  --color-button-alt-bg: var(--color-gray-7);
+  --color-button-alt-bg-hover: var(--color-gray-6);
+  --color-button-alt-text: var(--color-gray-1);
+  --color-button-border: var(--color-gray-5);
+  --color-button-toggle-bg: var(--color-secondary);
+  --color-button-toggle-text: var(--color-text);
+  --color-link: var(--color-primary-alt-3);
+  --color-link-hover: var(--color-text);
+  --color-link-focus-bg: var(--color-gray-7);
 
   // Input
-  --color-input: #f4f4f5;
-  --color-input-label: #a7a7a7;
-  --color-input-placeholder: #f4f4f5;
-  --color-input-bg: #464d53;
-  --color-input-bg-copyable: #4f5861;
+  --color-input: var(--color-white);
+  --color-input-label: var(--color-gray-3);
+  --color-input-placeholder: var(--color-gray-1);
+  --color-input-bg: var(--color-gray-7);
+  --color-input-bg-copyable: var(--color-gray-6);
   --color-input-border: var(--color-border);
   --color-input-border-active: var(--color-secondary);
   --color-input-toggle: var(--color-primary);
@@ -94,32 +63,67 @@
   --color-input-prefix-border: var(--color-gray-4);
   --select-toggle-background: url("data:image/svg+xml,%3Csvg viewBox='0 0 96 96' xmlns='http://www.w3.org/2000/svg' fill='%23ffffff'%3E%3Cpath d='M17.172, 31.172c1.562, -1.562 4.095, -1.562 5.656, 0l25.172, 25.171l25.172, -25.171c1.562, -1.562 4.095, -1.562 5.656, 0c1.562, 1.562 1.562, 4.095 0, 5.656l-28, 28c-1.562, 1.562 -4.095, 1.562 -5.656, 0l-28, -28c-0.781, -0.781 -1.172, -1.805 -1.172, -2.828c0, -1.023 0.391, -2.047 1.172, -2.828Z'/%3E%3C/svg%3E%0A");
 
-  // Menu
-  --color-menu-background: var(--color-header-background);
-  --color-menu-background--active: #3a4045;
-  --color-menu-icon: #a7a7a7;
-  --color-menu-icon-active: #464d53;
-
-  // Table
-  --color-table-highlight: #3a444e;
-
-  // Search
-  --color-search-suggestion: var(--color-text);
-  --color-search-suggestion-background: #313d46;
-  --color-placeholder-background: #4e5862;
-  --color-spinner-light: #5a6570;
-  --color-spinner-dark: #212529;
-  --color-wunderbar: #89939e;
+  // Navigation
+  --color-navigation-icon: var(--color-gray-4);
+  --color-navigation-link: var(--color-gray-4);
+  --color-navigation-active: var(--color-gray-7);
+  --color-navigation-active-text: var(--color-gray-3);
+  --color-navigation-hover: var(--color-gray-6);
+  --color-navigation-hover-text: var(--color-gray-3);
 
   // Tags
-  --color-tag: var(--color-primary);
-  --color-tag-bg: var(--color-primary-alt);
+  --color-tag: var(--color-primary-alt-3);
+  --color-tag-bg: var(--color-gray-6);
   --color-tag-hover: var(--color-white);
-  --color-tag-bg-hover: var(--color-primary-alt-2);
+  --color-tag-bg-hover: var(--color-primary);
+
+  // Menu
+  --color-menu-background: var(--color-header-background);
+  --color-menu-background--active: var(--color-gray-7);
+  --color-menu-icon: var(--color-gray-4);
+
+  // Comments
+  --color-comment-menu: var(--color-gray-5);
+  --color-comment-menu-hovering: var(--color-gray-2);
+  --color-comment-threadline: #434b54;
+  --color-comment-threadline-hover: var(--color-gray-4);
+  --color-comment-highlighted: #484734;
 
   // Snack
   --color-snack-bg: var(--color-secondary);
 
+  // Superchat
+  --color-superchat-text: var(--color-black);
+  --color-superchat-text__light: var(--color-text);
+  --color-superchat: #fcd34d;
+  --color-superchat__light: #ef4e1647;
+  --color-superchat-2: #fde68a;
+  --color-superchat-3: #fef3c7;
+  --color-superchat-3__light: #58066087;
+  --color-superchat-4: #fffbeb;
+
+  // Other
+  --color-focus: #93c5fd50;
+  --color-nag: var(--color-orange);
+  --color-tab-text: var(--color-white);
+  --color-tabs-background: var(--color-card-background);
+  --color-tab-divider: var(--color-white);
+  --color-modal-background: var(--color-card-background);
+  --color-notice: #58563b;
+  --color-error: #61373f;
+  --color-purchased: #ffd580;
+  --color-purchased-alt: var(--color-purchased);
+  --color-purchased-text: var(--color-gray-5);
+  --color-thumbnail-background: var(--color-gray-5);
+  --color-tooltip-bg: #2f3337;
+  --color-help-warning-bg: #d97706;
+  --color-help-warning-text: white;
+  --color-blockquote: var(--color-gray-5);
+  --color-blockquote-bg: var(--color-card-background-highlighted);
+  --color-placeholder-background: #4e5862;
+  --color-spinner-light: #5a6570;
+  --color-spinner-dark: #212529;
+
   // Editor
   --color-editor-cursor: var(--color-text);
   --color-editor-quote: #d3d3d3;
@@ -144,14 +148,4 @@
   // Scrollbar
   --color-scrollbar-thumb-bg: rgba(255, 255, 255, 0.2);
   --color-scrollbar-track-bg: transparent;
-
-  // Superchat
-  --color-superchat-text: var(--color-black);
-  --color-superchat-text__light: var(--color-text);
-  --color-superchat: #fcd34d;
-  --color-superchat__light: #ef4e1647;
-  --color-superchat-2: #fde68a;
-  --color-superchat-3: #fef3c7;
-  --color-superchat-3__light: #58066087;
-  --color-superchat-4: #fffbeb;
 }
diff --git a/ui/scss/themes/light.scss b/ui/scss/themes/light.scss
index 8a94b691b..5a4260fca 100644
--- a/ui/scss/themes/light.scss
+++ b/ui/scss/themes/light.scss
@@ -1,131 +1,2 @@
 :root {
-  --color-navigation-icon: var(--color-gray-5);
-  --color-link-active: var(--color-primary);
-  --color-navigation-link: var(--color-gray-5);
-  --color-navigation-active: var(--color-primary-alt);
-  --color-navigation-active-text: var(--color-primary);
-  --color-navigation-hover: var(--color-gray-1);
-  --color-navigation-hover-text: #3f3f3f;
-  --color-link-focus-bg: #f1f1f1;
-
-  --color-header-button: var(--color-button-alt-bg);
-  --color-button-border: var(--color-gray-3);
-
-  // Color
-  --color-background: #fafafa;
-  --color-background--splash: #212529;
-  --color-border: #ededed;
-  --color-background-overlay: #21252980;
-  --color-nag: #f26522;
-  --color-error: #fcafca;
-  --color-comment-menu: #e0e0e0;
-  --color-comment-menu-hovering: #6a6a6a;
-  --color-notice: #fef3ca;
-  --color-purchased: var(--color-cost);
-  --color-purchased-alt: #ffebc2;
-  --color-purchased-text: var(--color-gray-5);
-  --color-comment-highlighted: #fff2d9;
-  --color-comment-threadline: var(--color-gray-1);
-  --color-comment-threadline-hover: var(--color-gray-4);
-  --color-thumbnail-background: var(--color-gray-1);
-  --color-button-toggle-text: var(--color-primary);
-  --color-button-toggle-bg: var(--color-primary-alt);
-  --color-button-toggle-bg-hover: var(--color-primary-alt);
-  --color-tooltip-bg: #222;
-  --color-tooltip-text: #fafafa;
-
-  // Icons
-  --color-follow-bg: #ffd4da;
-  --color-follow-icon: #e2495e;
-  --color-view-bg: var(--color-secondary-alt);
-  --color-view-icon: var(--color-secondary);
-
-  // Text
-  --color-text-selection-bg: var(--color-secondary-alt);
-  --color-text-selection: var(--color-secondary);
-  --color-text-error: var(--color-danger);
-  --color-text-empty: #999999;
-  --color-text-help: #999999;
-  --color-text-subtitle: #767676;
-  --color-text-warning: #212529;
-  --color-help-warning-bg: #fef3c7;
-  --color-help-warning-text: #555555;
-  --color-text-warning--background: var(--lbry-yellow-1);
-  --color-blockquote: var(--color-gray-3);
-  --color-blockquote-bg: var(--color-gray-1);
-  --color-input-color: #111111;
-  --color-input-label: var(--color-gray-5);
-  --color-input-placeholder: #212529;
-  --color-input-bg: var(--color-gray-1);
-  --color-input-border: var(--color-border);
-  --color-input-border-active: var(--color-secondary);
-  --color-input-toggle: var(--color-secondary);
-  --color-input-toggle-bg: var(--color-gray-1);
-  --color-input-toggle-bg-hover: var(--color-secondary-alt);
-  --color-input-prefix-bg: var(--color-gray-2);
-  --color-input-prefix-border: var(--color-gray-5);
-  --color-input-bg-selected: var(--color-primary-alt);
-  --select-toggle-background: url("data:image/svg+xml,%3Csvg viewBox='0 0 96 96' xmlns='http://www.w3.org/2000/svg' fill='%23212529'%3E%3Cpath d='M17.172, 31.172c1.562, -1.562 4.095, -1.562 5.656, 0l25.172, 25.171l25.172, -25.171c1.562, -1.562 4.095, -1.562 5.656, 0c1.562, 1.562 1.562, 4.095 0, 5.656l-28, 28c-1.562, 1.562 -4.095, 1.562 -5.656, 0l-28, -28c-0.781, -0.781 -1.172, -1.805 -1.172, -2.828c0, -1.023 0.391, -2.047 1.172, -2.828Z'/%3E%3C/svg%3E%0A");
-
-  --color-spinner-light: #ffffff;
-  --color-spinner-dark: #212529;
-  --color-placeholder-background: #f0f0f0;
-  --color-header-background: #ffffff;
-  --color-card-background: #ffffff;
-  --color-card-background-highlighted: #f1f7fe;
-  --color-list-header: #fff;
-  --color-file-viewer-background: var(--color-card-background);
-  --color-tabs-background: var(--color-card-background);
-  --color-tab-divider: var(--color-primary);
-  --color-modal-background: var(--color-card-background);
-
-  // Menu
-  --color-menu-background: var(--color-header-background);
-  --color-menu-background--selected: var(--color-secondary-alt);
-  --color-menu-background--active: #f0f7ff;
-  --color-menu-icon: var(--color-navigation-link);
-  --color-menu-icon-active: var(--color-navigation-link);
-
-  // Search
-  --color-search-suggestion: #212529;
-  --color-search-suggestion-background: #cce6fb;
-
-  // Snack
-  --color-snack-bg: var(--color-primary);
-  --color-snack: var(--color-white);
-  --color-snack-bg-error: var(--color-danger);
-  --color-snack-upgrade: var(--color-tertiary);
-
-  // Editor
-  --color-editor-cursor: var(--color-text);
-  --color-editor-quote: #707070;
-  --color-editor-tag: #ea9400;
-  --color-editor-attr: #04b0f4;
-  --color-editor-string: #ff7451;
-  --color-editor-inline-code-fg: var(--color-text);
-  --color-editor-inline-code-fg-preview: #2e3439;
-  --color-editor-inline-code-bg: rgba(157, 161, 165, 0.3);
-  --color-editor-inline-code-bg-preview: #d0e8ff;
-  --color-editor-selected: #add6ff;
-  --color-editor-link: var(--color-link);
-  --color-editor-url: var(--color-editor-string);
-  --color-editor-hr: var(--color-editor-tag);
-  --color-editor-hr-preview: #cccccc;
-
-  // Ads
-  --color-ads-background: #fae5ff;
-  --color-ads-link: var(--color-link);
-
-  // Scrollbar
-  --color-scrollbar-thumb-bg: rgba(0, 0, 0, 0.2);
-  --color-scrollbar-track-bg: transparent;
-
-  // Superchat
-  --color-superchat-text: var(--color-black);
-  --color-superchat: #fcd34d;
-  --color-superchat__light: #fcd34d50;
-  --color-superchat-2: #fde68a;
-  --color-superchat-3: #fef3c7;
-  --color-superchat-3__light: #fef3c750;
-  --color-superchat-4: #fffbeb;
 }