diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index 86113995dca..f8e3154ae53 100644
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -279,8 +279,9 @@ module ApplicationHelper
 
   def theme_options_for_select
     [
-      [t('themes.light'), 'light'],
-      [t('themes.light_high_contrast'), 'light_high_contrast']
+      [t("themes.light"), "light"],
+      [t("themes.light_high_contrast"), "light_high_contrast"],
+      [t("themes.dark"), "dark"]
     ]
   end
 
diff --git a/app/views/custom_styles/_primer_color_mapping.erb b/app/views/custom_styles/_primer_color_mapping.erb
index 424b9edb419..01064dfe61c 100644
--- a/app/views/custom_styles/_primer_color_mapping.erb
+++ b/app/views/custom_styles/_primer_color_mapping.erb
@@ -13,7 +13,8 @@
     --button-primary-bgColor-rest: var(--button--primary-background-color) !important;
     --button-primary-bgColor-hover: var(--button--primary-background-hover-color) !important;
   }
-  [data-light-theme=light_high_contrast]{
+  [data-light-theme=light_high_contrast],
+  [data-light-theme=dark] {
     --avatar-border-color: var(--color-avatar-border);
     --list-item-hover--border-color: var(--color-action-list-item-default-active-border);
     --list-item-hover--color: var(--color-fg-default);
diff --git a/config/locales/en.yml b/config/locales/en.yml
index b11d56224dc..df06d144235 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -431,6 +431,7 @@ en:
       no_results_content_text: Add a new status
 
   themes:
+    dark: "Dark"
     light: "Light"
     light_high_contrast: "Light high contrast"
 
diff --git a/config/schemas/user_preferences.schema.json b/config/schemas/user_preferences.schema.json
index 8953b4ef48c..b6dfb34596a 100644
--- a/config/schemas/user_preferences.schema.json
+++ b/config/schemas/user_preferences.schema.json
@@ -14,7 +14,7 @@
                 },
                 "theme": {
                   "type": "string",
-                  "enum": ["light", "light_high_contrast"]
+                  "enum": ["light", "light_high_contrast", "dark"]
                 },
                 "warn_on_leaving_unsaved": {
                     "type": "boolean"
diff --git a/frontend/src/app/shared/components/colors/colors.service.ts b/frontend/src/app/shared/components/colors/colors.service.ts
index 065462cdb89..d8739273be5 100644
--- a/frontend/src/app/shared/components/colors/colors.service.ts
+++ b/frontend/src/app/shared/components/colors/colors.service.ts
@@ -3,6 +3,7 @@ import { Injectable } from '@angular/core';
 export const colorModes = {
   lightHighContrast: 'lightHighContrast',
   light: 'light',
+  dark: 'dark',
 };
 
 @Injectable({ providedIn: 'root' })
@@ -25,6 +26,16 @@ export class ColorsService {
   }
 
   public colorMode():string {
-    return document.body.getAttribute('data-light-theme') === 'light_high_contrast' ? colorModes.lightHighContrast : colorModes.light;
+    switch (document.body.getAttribute('data-light-theme')) {
+      case 'light_high_contrast':
+        return colorModes.lightHighContrast;
+      case 'dark':
+        return colorModes.dark;
+      case 'light':
+        return colorModes.light;
+      default: {
+        return colorModes.light;
+      }
+    }
   }
 }