diff --git a/app/assets/stylesheets/framework/super_sidebar.scss b/app/assets/stylesheets/framework/super_sidebar.scss
index 5fcc24a1827d8695890d545fa26d1f066f958d74..5a9a739fb13199e8cf277b2562fce0aede8d710f 100644
--- a/app/assets/stylesheets/framework/super_sidebar.scss
+++ b/app/assets/stylesheets/framework/super_sidebar.scss
@@ -22,7 +22,8 @@ $super-sidebar-transition-hint-duration: $super-sidebar-transition-duration / 4;
 .super-sidebar {
   --super-sidebar-bg: #{$gray-10};
   --super-sidebar-border-color: #{$t-gray-a-08};
-  --super-sidebar-primary: #{$blue-500};
+  --super-sidebar-context-header-color: inherit;
+  --super-sidebar-active-indicator-color: #{$blue-500};
   --super-sidebar-notification-dot: #{$blue-500};
   --super-sidebar-user-bar-bg: #{$t-gray-a-04};
 
@@ -42,6 +43,8 @@ $super-sidebar-transition-hint-duration: $super-sidebar-transition-duration / 4;
   --super-sidebar-nav-item-current-bg: #{$t-gray-a-08};
   --super-sidebar-nav-item-icon-color: #{$gray-500};
 
+  --super-sidebar-hr-mix-blend-mode: normal;
+
   .gl-dark & {
     --super-sidebar-border-color: #{$t-white-a-08};
     --super-sidebar-user-bar-bg: #{$t-white-a-04};
@@ -58,7 +61,148 @@ $super-sidebar-transition-hint-duration: $super-sidebar-transition-duration / 4;
     --super-sidebar-nav-item-current-bg: #{$t-white-a-08};
     --super-sidebar-nav-item-icon-color: #{$gray-600};
   }
+}
+
+@mixin super-sidebar-theme(
+  $background,
+  $user-bar-background,
+  $user-bar-button-color,
+  $user-bar-button-icon-color,
+  $context-header,
+  $active-indicator,
+  $notification-dot,
+) {
+  .super-sidebar {
+    --super-sidebar-bg: #{$background};
+    --super-sidebar-user-bar-bg: #{$user-bar-background};
+    --super-sidebar-context-header-color: #{$context-header};
+    --super-sidebar-active-indicator-color: #{$active-indicator};
+    --super-sidebar-notification-dot: #{$notification-dot};
+
+    --super-sidebar-user-bar-button-bg: #{$t-white-a-16};
+    --super-sidebar-user-bar-button-color: #{$user-bar-button-color};
+    --super-sidebar-user-bar-button-border-color: #{$t-white-a-16};
+    --super-sidebar-user-bar-button-hover-bg: #{$t-white-a-24};
+    --super-sidebar-user-bar-button-hover-color: #{$white};
+    --super-sidebar-user-bar-button-active-bg: #{$t-white-a-36};
+
+    --super-sidebar-user-bar-button-icon-color: #{$user-bar-button-icon-color};
+    --super-sidebar-user-bar-button-icon-hover-color: #{$user-bar-button-icon-color};
+    --super-sidebar-user-bar-button-icon-mix-blend-mode: screen;
+
+    --super-sidebar-hr-mix-blend-mode: multiply;
+  }
+}
+
+.ui-blue {
+  @include super-sidebar-theme(
+    $background: $theme-blue-10,
+    $user-bar-background: $theme-blue-900,
+    $user-bar-button-color: $theme-blue-50,
+    $user-bar-button-icon-color: $theme-blue-100,
+    $context-header: $theme-blue-900,
+    $active-indicator: $theme-blue-900,
+    $notification-dot: $theme-blue-900,
+  );
+}
+
+.ui-gray {
+  @include super-sidebar-theme(
+    $background: $gray-10,
+    $user-bar-background: $gray-900,
+    $user-bar-button-color: $gray-50,
+    $user-bar-button-icon-color: $gray-100,
+    $context-header: $gray-900,
+    $active-indicator: $gray-900,
+    $notification-dot: $gray-900,
+  );
+}
+
+.ui-green {
+  @include super-sidebar-theme(
+    $background: $theme-green-10,
+    $user-bar-background: $theme-green-900,
+    $user-bar-button-color: $theme-green-50,
+    $user-bar-button-icon-color: $theme-green-100,
+    $context-header: $theme-green-900,
+    $active-indicator: $theme-green-900,
+    $notification-dot: $theme-green-900,
+  );
+}
+
+.ui-indigo {
+  @include super-sidebar-theme(
+    $background: $theme-indigo-10,
+    $user-bar-background: $theme-indigo-900,
+    $user-bar-button-color: $theme-indigo-50,
+    $user-bar-button-icon-color: $theme-indigo-100,
+    $context-header: $theme-indigo-900,
+    $active-indicator: $theme-indigo-900,
+    $notification-dot: $theme-indigo-900,
+  );
+}
+
+.ui-light-blue {
+  @include super-sidebar-theme(
+    $background: $theme-light-blue-10,
+    $user-bar-background: $theme-light-blue-700,
+    $user-bar-button-color: $theme-light-blue-50,
+    $user-bar-button-icon-color: $theme-light-blue-100,
+    $context-header: $theme-light-blue-900,
+    $active-indicator: $theme-light-blue-900,
+    $notification-dot: $theme-light-blue-900,
+  );
+}
+
+.ui-light-green {
+  @include super-sidebar-theme(
+    $background: $theme-green-10,
+    $user-bar-background: $theme-green-700,
+    $user-bar-button-color: $theme-green-50,
+    $user-bar-button-icon-color: $theme-green-100,
+    $context-header: $theme-green-900,
+    $active-indicator: $theme-green-900,
+    $notification-dot: $theme-green-900,
+  );
+}
+
+.ui-light-indigo {
+  @include super-sidebar-theme(
+    $background: $theme-indigo-10,
+    $user-bar-background: $theme-indigo-700,
+    $user-bar-button-color: $theme-indigo-50,
+    $user-bar-button-icon-color: $theme-indigo-100,
+    $context-header: $theme-indigo-900,
+    $active-indicator: $theme-indigo-900,
+    $notification-dot: $theme-indigo-900,
+  );
+}
+
+.ui-light-red {
+  @include super-sidebar-theme(
+    $background: $theme-light-red-10,
+    $user-bar-background: $theme-light-red-700,
+    $user-bar-button-color: $theme-light-red-50,
+    $user-bar-button-icon-color: $theme-light-red-100,
+    $context-header: $theme-light-red-900,
+    $active-indicator: $theme-light-red-900,
+    $notification-dot: $theme-light-red-900,
+  );
+}
+
+.ui-red {
+  @include super-sidebar-theme(
+    $background: $theme-red-10,
+    $user-bar-background: $theme-red-900,
+    $user-bar-button-color: $theme-red-50,
+    $user-bar-button-icon-color: $theme-red-100,
+    $context-header: $theme-red-900,
+    $active-indicator: $theme-red-900,
+    $notification-dot: $theme-red-900,
+  );
+}
 
+.super-sidebar {
   display: flex;
   flex-direction: column;
   position: fixed;
@@ -167,8 +311,12 @@ $super-sidebar-transition-hint-duration: $super-sidebar-transition-duration / 4;
     color: var(--super-sidebar-nav-item-icon-color);
   }
 
+  hr {
+    mix-blend-mode: var(--super-sidebar-hr-mix-blend-mode);
+  }
+
   .active-indicator {
-    background-color: var(--super-sidebar-primary);
+    background-color: var(--super-sidebar-active-indicator-color);
   }
 
   .btn-with-notification {
@@ -200,6 +348,10 @@ $super-sidebar-transition-hint-duration: $super-sidebar-transition-duration / 4;
   }
 }
 
+.super-sidebar-context-header {
+  color: var(--super-sidebar-context-header-color);
+}
+
 .super-sidebar-overlay {
   display: none;
 }
diff --git a/app/assets/stylesheets/themes/dark_mode_overrides.scss b/app/assets/stylesheets/themes/dark_mode_overrides.scss
index 3ab3e195b0642a5cd260f8ba59df2e4ef8016a69..59c2391d2e97c6c14030ecedf0acea1310e3c252 100644
--- a/app/assets/stylesheets/themes/dark_mode_overrides.scss
+++ b/app/assets/stylesheets/themes/dark_mode_overrides.scss
@@ -1,7 +1,6 @@
 @import './themes/dark';
 @import '@gitlab/ui/dist/tokens/css/tokens.dark';
 @import 'page_bundles/mixins_and_variables_and_functions';
-@import './themes/theme_helper';
 
 :root {
   color-scheme: dark;
diff --git a/app/assets/stylesheets/themes/theme_blue.scss b/app/assets/stylesheets/themes/theme_blue.scss
deleted file mode 100644
index 1a373fbfeda4f90522ed1d69431fad17af44b945..0000000000000000000000000000000000000000
--- a/app/assets/stylesheets/themes/theme_blue.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-@import './theme_helper';
-
-:root {
-  &.ui-blue {
-    .page-with-super-sidebar {
-      @include gitlab-theme-super-sidebar(
-        $theme-blue-50,
-        $theme-blue-100,
-        $theme-blue-900,
-        $theme-blue-900,
-      );
-    }
-  }
-}
diff --git a/app/assets/stylesheets/themes/theme_gray.scss b/app/assets/stylesheets/themes/theme_gray.scss
deleted file mode 100644
index 9a24142f28677e6bc21dfa490cd82e2dd49fa9d7..0000000000000000000000000000000000000000
--- a/app/assets/stylesheets/themes/theme_gray.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-@import './theme_helper';
-
-:root {
-  &.ui-gray {
-    .page-with-super-sidebar {
-      @include gitlab-theme-super-sidebar(
-        $gray-50,
-        $gray-100,
-        $gray-900,
-        $gray-900,
-      );
-    }
-  }
-}
diff --git a/app/assets/stylesheets/themes/theme_green.scss b/app/assets/stylesheets/themes/theme_green.scss
deleted file mode 100644
index a766fdddc78fdd503380a86ec853ee8898b5492a..0000000000000000000000000000000000000000
--- a/app/assets/stylesheets/themes/theme_green.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-@import './theme_helper';
-
-:root {
-  &.ui-green {
-    .page-with-super-sidebar {
-      @include gitlab-theme-super-sidebar(
-        $theme-green-50,
-        $theme-green-100,
-        $theme-green-900,
-        $theme-green-900,
-      );
-    }
-  }
-}
diff --git a/app/assets/stylesheets/themes/theme_helper.scss b/app/assets/stylesheets/themes/theme_helper.scss
deleted file mode 100644
index c94a32891f6019a10b2eab6603c5a866778a52fb..0000000000000000000000000000000000000000
--- a/app/assets/stylesheets/themes/theme_helper.scss
+++ /dev/null
@@ -1,36 +0,0 @@
-@import '../page_bundles/mixins_and_variables_and_functions';
-/**
- * Styles the GitLab application with a specific color theme
- */
-@mixin gitlab-theme-super-sidebar(
-  $theme-color-lightest,
-  $theme-color-light,
-  $theme-color,
-  $theme-color-darkest,
-) {
-  .super-sidebar {
-    --super-sidebar-bg: #{mix(white, $theme-color-lightest, 50%)};
-    --super-sidebar-user-bar-bg: #{$theme-color};
-    --super-sidebar-primary: #{$theme-color};
-    --super-sidebar-notification-dot: #{$theme-color-darkest};
-
-    --super-sidebar-user-bar-button-bg: #{$t-white-a-16};
-    --super-sidebar-user-bar-button-color: #{$theme-color-lightest};
-    --super-sidebar-user-bar-button-border-color: #{$t-white-a-16};
-    --super-sidebar-user-bar-button-hover-bg: #{$t-white-a-24};
-    --super-sidebar-user-bar-button-hover-color: #{$white};
-    --super-sidebar-user-bar-button-active-bg: #{$t-white-a-36};
-
-    --super-sidebar-user-bar-button-icon-color: #{$theme-color-light};
-    --super-sidebar-user-bar-button-icon-hover-color: #{$theme-color-light};
-    --super-sidebar-user-bar-button-icon-mix-blend-mode: screen;
-
-    hr {
-      mix-blend-mode: multiply;
-    }
-
-    .super-sidebar-context-header {
-      color: var(--super-sidebar-primary);
-    }
-  }
-}
diff --git a/app/assets/stylesheets/themes/theme_indigo.scss b/app/assets/stylesheets/themes/theme_indigo.scss
deleted file mode 100644
index d0a8d597b599b6bf53ef6c8fb803928c8954e5e0..0000000000000000000000000000000000000000
--- a/app/assets/stylesheets/themes/theme_indigo.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-@import './theme_helper';
-
-:root {
-  &.ui-indigo {
-    .page-with-super-sidebar {
-      @include gitlab-theme-super-sidebar(
-        $theme-indigo-50,
-        $theme-indigo-100,
-        $theme-indigo-900,
-        $theme-indigo-900,
-      );
-    }
-  }
-}
diff --git a/app/assets/stylesheets/themes/theme_light_blue.scss b/app/assets/stylesheets/themes/theme_light_blue.scss
deleted file mode 100644
index e712b6ae859dc846fa8429c40f6fff407093e302..0000000000000000000000000000000000000000
--- a/app/assets/stylesheets/themes/theme_light_blue.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-@import './theme_helper';
-
-:root {
-  &.ui-light-blue {
-    .page-with-super-sidebar {
-      @include gitlab-theme-super-sidebar(
-        $theme-light-blue-50,
-        $theme-light-blue-100,
-        $theme-light-blue-700,
-        $theme-light-blue-900,
-      );
-    }
-  }
-}
diff --git a/app/assets/stylesheets/themes/theme_light_gray.scss b/app/assets/stylesheets/themes/theme_light_gray.scss
deleted file mode 100644
index 5cb9bee37b003d288d6af90c9daca2f0dad0003a..0000000000000000000000000000000000000000
--- a/app/assets/stylesheets/themes/theme_light_gray.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-// "Light gray" is the default unthemed state of the sidebar.
-// Nothing to do here.
diff --git a/app/assets/stylesheets/themes/theme_light_green.scss b/app/assets/stylesheets/themes/theme_light_green.scss
deleted file mode 100644
index 44e19b02e365595d1b44d44e5bab60569e742028..0000000000000000000000000000000000000000
--- a/app/assets/stylesheets/themes/theme_light_green.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-@import './theme_helper';
-
-:root {
-  &.ui-light-green {
-    .page-with-super-sidebar {
-      @include gitlab-theme-super-sidebar(
-        $theme-green-50,
-        $theme-green-100,
-        $theme-green-700,
-        $theme-green-900,
-      );
-    }
-  }
-}
diff --git a/app/assets/stylesheets/themes/theme_light_indigo.scss b/app/assets/stylesheets/themes/theme_light_indigo.scss
deleted file mode 100644
index ab299ca9d8408578a9b8c3b3b91ad68865080a69..0000000000000000000000000000000000000000
--- a/app/assets/stylesheets/themes/theme_light_indigo.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-@import './theme_helper';
-
-:root {
-  &.ui-light-indigo {
-    .page-with-super-sidebar {
-      @include gitlab-theme-super-sidebar(
-        $theme-indigo-50,
-        $theme-indigo-100,
-        $theme-indigo-700,
-        $theme-indigo-900,
-      );
-    }
-  }
-}
diff --git a/app/assets/stylesheets/themes/theme_light_red.scss b/app/assets/stylesheets/themes/theme_light_red.scss
deleted file mode 100644
index 499cdace7720f957e3376392453bfb582d73c413..0000000000000000000000000000000000000000
--- a/app/assets/stylesheets/themes/theme_light_red.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-@import './theme_helper';
-
-:root {
-  &.ui-light-red {
-    .page-with-super-sidebar {
-      @include gitlab-theme-super-sidebar(
-        $theme-light-red-50,
-        $theme-light-red-100,
-        $theme-light-red-700,
-        $theme-light-red-900,
-      );
-    }
-  }
-}
diff --git a/app/assets/stylesheets/themes/theme_red.scss b/app/assets/stylesheets/themes/theme_red.scss
deleted file mode 100644
index 9a17f98aa8047684b8540f1233f1078996a84f9e..0000000000000000000000000000000000000000
--- a/app/assets/stylesheets/themes/theme_red.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-@import './theme_helper';
-
-:root {
-  &.ui-red {
-    .page-with-super-sidebar {
-      @include gitlab-theme-super-sidebar(
-        $theme-red-50,
-        $theme-red-100,
-        $theme-red-900,
-        $theme-red-900,
-      );
-    }
-  }
-}
diff --git a/app/helpers/preferences_helper.rb b/app/helpers/preferences_helper.rb
index 204e3b149b9ff20f43561bc9611cef138e649b1a..da8ef2277f19662ca3ec9af6210de25ca89b02c7 100644
--- a/app/helpers/preferences_helper.rb
+++ b/app/helpers/preferences_helper.rb
@@ -75,10 +75,6 @@ def user_application_dark_mode?
     user_application_theme == 'gl-dark'
   end
 
-  def user_application_theme_css_filename
-    @user_application_theme_css_filename ||= Gitlab::Themes.for_user(current_user).css_filename
-  end
-
   def user_theme_primary_color
     Gitlab::Themes.for_user(current_user).primary_color
   end
diff --git a/app/views/layouts/_head.html.haml b/app/views/layouts/_head.html.haml
index 5f038ac467d4cb9c0e85deed40e5023fa8fff7bb..79fa5bfeac095eafccb056542545a9bbbc97ad31 100644
--- a/app/views/layouts/_head.html.haml
+++ b/app/views/layouts/_head.html.haml
@@ -19,7 +19,6 @@
   = yield :prefetch_asset_tags
 
   - diffs_colors = user_diffs_colors
-  = stylesheet_link_tag "themes/#{user_application_theme_css_filename}" if user_application_theme_css_filename
   = render 'layouts/diffs_colors_css', diffs_colors if diffs_colors.present? || request.path == profile_preferences_path
 
   - if user_application_theme == 'gl-dark'
diff --git a/app/views/profiles/preferences/show.html.haml b/app/views/profiles/preferences/show.html.haml
index 96375412f9447b6c2c0981857476b0b05cbb6ee3..5435297d6c66dd6f611800bfad2835e7a2962ab5 100644
--- a/app/views/profiles/preferences/show.html.haml
+++ b/app/views/profiles/preferences/show.html.haml
@@ -9,9 +9,6 @@
 - data_attributes = { themes: @themes, integration_views: integration_views.to_json, user_fields: user_fields, body_classes: Gitlab::Themes.body_classes, profile_preferences_path: profile_preferences_path }
 - @force_desktop_expanded_sidebar = true
 
-- Gitlab::Themes.each do |theme|
-  = stylesheet_link_tag "themes/#{theme.css_filename}" if theme.css_filename
-
 = gitlab_ui_form_for @user, url: profile_preferences_path, remote: true, method: :put, html: { id: "profile-preferences-form" } do |f|
   = render_if_exists 'profiles/preferences/code_suggestions_settings_self_assignment'
   .settings-section.js-preferences-form.js-search-settings-section.application-theme#navigation-theme
diff --git a/lib/gitlab/themes.rb b/lib/gitlab/themes.rb
index 102104644f7fc213e18659a9cb219a0e1fb054c9..a26b4d5bbcb88fc0f082b0faee119593c46ecbff 100644
--- a/lib/gitlab/themes.rb
+++ b/lib/gitlab/themes.rb
@@ -10,22 +10,22 @@ module Themes
     APPLICATION_DEFAULT = 3
 
     # Struct class representing a single Theme
-    Theme = Struct.new(:id, :name, :css_class, :css_filename, :primary_color)
+    Theme = Struct.new(:id, :name, :css_class, :primary_color)
 
     # All available Themes
     def available_themes
       [
-        Theme.new(1, s_('NavigationTheme|Indigo'), 'ui-indigo', 'theme_indigo', '#222261'),
-        Theme.new(6, s_('NavigationTheme|Light Indigo'), 'ui-light-indigo', 'theme_light_indigo', '#41419f'),
-        Theme.new(4, s_('NavigationTheme|Blue'), 'ui-blue', 'theme_blue', '#0b2640'),
-        Theme.new(7, s_('NavigationTheme|Light Blue'), 'ui-light-blue', 'theme_light_blue', '#145aa1'),
-        Theme.new(5, s_('NavigationTheme|Green'), 'ui-green', 'theme_green', '#0e4328'),
-        Theme.new(8, s_('NavigationTheme|Light Green'), 'ui-light-green', 'theme_light_green', '#1b653f'),
-        Theme.new(9, s_('NavigationTheme|Red'), 'ui-red', 'theme_red', '#580d02'),
-        Theme.new(10, s_('NavigationTheme|Light Red'), 'ui-light-red', 'theme_light_red', '#a02e1c'),
-        Theme.new(2, s_('NavigationTheme|Gray'), 'ui-gray', 'theme_gray', '#333238'),
-        Theme.new(3, s_('NavigationTheme|Light Gray'), 'ui-light-gray', 'theme_light_gray', '#ececef'),
-        Theme.new(11, s_('NavigationTheme|Dark Mode (alpha)'), 'gl-dark', nil, '#1f1e24')
+        Theme.new(1, s_('NavigationTheme|Indigo'), 'ui-indigo', '#222261'),
+        Theme.new(6, s_('NavigationTheme|Light Indigo'), 'ui-light-indigo', '#41419f'),
+        Theme.new(4, s_('NavigationTheme|Blue'), 'ui-blue', '#0b2640'),
+        Theme.new(7, s_('NavigationTheme|Light Blue'), 'ui-light-blue', '#145aa1'),
+        Theme.new(5, s_('NavigationTheme|Green'), 'ui-green', '#0e4328'),
+        Theme.new(8, s_('NavigationTheme|Light Green'), 'ui-light-green', '#1b653f'),
+        Theme.new(9, s_('NavigationTheme|Red'), 'ui-red', '#580d02'),
+        Theme.new(10, s_('NavigationTheme|Light Red'), 'ui-light-red', '#a02e1c'),
+        Theme.new(2, s_('NavigationTheme|Gray'), 'ui-gray', '#333238'),
+        Theme.new(3, s_('NavigationTheme|Light Gray'), 'ui-light-gray', '#ececef'),
+        Theme.new(11, s_('NavigationTheme|Dark Mode (alpha)'), 'gl-dark', '#1f1e24')
       ]
     end
 
diff --git a/spec/lib/gitlab/themes_spec.rb b/spec/lib/gitlab/themes_spec.rb
index a41f7d927fee5c755ca8cb36070b52bcab1854ac..a5d429451016f5ff5808417f73e1f58d5d77e51f 100644
--- a/spec/lib/gitlab/themes_spec.rb
+++ b/spec/lib/gitlab/themes_spec.rb
@@ -47,18 +47,4 @@
       expect(ids).not_to be_empty
     end
   end
-
-  describe 'theme.css_filename' do
-    described_class.each do |theme|
-      next unless theme.css_filename
-
-      context "for #{theme.name}" do
-        it 'returns an existing CSS filename' do
-          css_file_path = Rails.root.join('app/assets/stylesheets/themes', theme.css_filename + '.scss')
-
-          expect(File.exist?(css_file_path)).to eq(true)
-        end
-      end
-    end
-  end
 end
diff --git a/spec/views/profiles/preferences/show.html.haml_spec.rb b/spec/views/profiles/preferences/show.html.haml_spec.rb
index c20b4424129b3f2b1e6ba5eac3943553b00e4928..c68c48a08288042f1590216019c261d7003d2393 100644
--- a/spec/views/profiles/preferences/show.html.haml_spec.rb
+++ b/spec/views/profiles/preferences/show.html.haml_spec.rb
@@ -20,14 +20,6 @@
     it 'has an id for anchoring' do
       expect(rendered).to have_css('#navigation-theme')
     end
-
-    it 'has correct stylesheet tags' do
-      Gitlab::Themes.each do |theme|
-        next unless theme.css_filename
-
-        expect(rendered).to have_selector("link[href*=\"themes/#{theme.css_filename}\"]", visible: false)
-      end
-    end
   end
 
   context 'syntax highlighting theme' do