diff --git a/ui/src/App.scss b/ui/src/App.scss
index c0934ec24..85e38c8c4 100644
--- a/ui/src/App.scss
+++ b/ui/src/App.scss
@@ -1,40 +1,8 @@
 // bundled font assets, so we don't need to talk to Google Fonts API
 @import "src/Fonts.scss";
 
-$lead-font-weight: 400;
+@import "Theme.scss";
 
-// custom "dark" color, little less dark than flatly
-$blue: #455a64;
-// body background color should be same as navbar, so it blends into one
-$body-bg: $blue;
-// default is ~0.97rem
-$font-size-base: 1rem;
-
-// make links light gray by default instead of green
-$link-color: #7b8a8b; // $gray-700
-
-// make dark darker, default it's $gray-700
-$dark: #3b4247;
-
-// fix active tab color, for some reason it ends up with $primary as bg color
-$nav-tabs-link-active-bg: #fff;
-
-// pagination tweaks
-$pagination-color: #fff;
-$pagination-bg: #b4bcc2; // gray-500
-$pagination-hover-color: #fff;
-$pagination-hover-bg: #7b8a8b; // gray-700
-$pagination-active-bg: $pagination-hover-bg;
-$pagination-disabled-color: #fff;
-$pagination-disabled-bg: #dee2e6; // gray-300
-
-$enable-shadows: true;
-
-$btn-box-shadow: 0;
-$btn-focus-box-shadow: 0;
-$btn-active-box-shadow: 0;
-
-@import "~bootswatch/dist/flatly/variables";
 @import "~bootstrap/scss/bootstrap";
 @import "~bootswatch/dist/flatly/bootswatch";
 
diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/index.scss b/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/index.scss
index 49df98330..717db8fec 100644
--- a/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/index.scss
+++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/index.scss
@@ -1,4 +1,4 @@
-@import "src/App.scss";
+@import "src/Theme.scss";
 
 .components-grid-alertgrid-alertgroup-alert {
   &:hover {
diff --git a/ui/src/Components/Labels/BaseLabel/index.scss b/ui/src/Components/Labels/BaseLabel/index.scss
index 1ea4c9196..b6ba66874 100644
--- a/ui/src/Components/Labels/BaseLabel/index.scss
+++ b/ui/src/Components/Labels/BaseLabel/index.scss
@@ -1,4 +1,4 @@
-@import "src/App.scss";
+@import "src/Theme.scss";
 
 .components-label-with-hover:hover {
   filter: brightness(0.85);
diff --git a/ui/src/Components/Labels/FilterInputLabel/index.scss b/ui/src/Components/Labels/FilterInputLabel/index.scss
index 2574b1963..f27886d97 100644
--- a/ui/src/Components/Labels/FilterInputLabel/index.scss
+++ b/ui/src/Components/Labels/FilterInputLabel/index.scss
@@ -1,4 +1,4 @@
-@import "src/App.scss";
+@import "src/Theme.scss";
 
 .components-filteredinputlabel-text {
   font-size: 1rem;
@@ -62,7 +62,7 @@ button.components-label.btn {
     background-color: $light;
   }
   &.btn-dark:hover {
-    // same as in App.scss
+    // same as in Theme.scss
     background-color: #3b4247;
   }
 }
diff --git a/ui/src/Components/Labels/LabelWithPercent/index.scss b/ui/src/Components/Labels/LabelWithPercent/index.scss
index 5b66ae02d..c9583364b 100644
--- a/ui/src/Components/Labels/LabelWithPercent/index.scss
+++ b/ui/src/Components/Labels/LabelWithPercent/index.scss
@@ -1,4 +1,4 @@
-@import "src/App.scss";
+@import "src/Theme.scss";
 
 .components-labelWithPercent-percent {
   padding-top: 0.25rem;
diff --git a/ui/src/Components/MainModal/Configuration/InputRange.scss b/ui/src/Components/MainModal/Configuration/InputRange.scss
index d1a474d2b..d06778eec 100644
--- a/ui/src/Components/MainModal/Configuration/InputRange.scss
+++ b/ui/src/Components/MainModal/Configuration/InputRange.scss
@@ -1,5 +1,5 @@
 // customize colors and fonts using bootstrap variables
-@import "src/App.scss";
+@import "src/Theme.scss";
 
 $input-range-font-family: $font-family-sans-serif;
 $input-range-primary-color: $primary;
diff --git a/ui/src/Components/ManagedSilence/index.scss b/ui/src/Components/ManagedSilence/index.scss
index 55bae8b2d..de33f712c 100644
--- a/ui/src/Components/ManagedSilence/index.scss
+++ b/ui/src/Components/ManagedSilence/index.scss
@@ -1,4 +1,4 @@
-@import "src/App.scss";
+@import "src/Theme.scss";
 
 .components-managed-silence {
   .card,
diff --git a/ui/src/Components/Modal/index.scss b/ui/src/Components/Modal/index.scss
index 26ef4b137..08a6ec37d 100644
--- a/ui/src/Components/Modal/index.scss
+++ b/ui/src/Components/Modal/index.scss
@@ -1,4 +1,4 @@
-@import "src/App.scss";
+@import "src/Theme.scss";
 
 .components-tab-inactive {
   &:hover {
diff --git a/ui/src/Components/NavBar/index.scss b/ui/src/Components/NavBar/index.scss
index 4bdbdd4ad..83b88aaf8 100644
--- a/ui/src/Components/NavBar/index.scss
+++ b/ui/src/Components/NavBar/index.scss
@@ -1,4 +1,4 @@
-@import "src/App.scss";
+@import "src/Theme.scss";
 
 .navbar-brand {
   min-width: 2.5rem;
diff --git a/ui/src/Components/OverviewModal/index.scss b/ui/src/Components/OverviewModal/index.scss
index 38c11d571..90ad08332 100644
--- a/ui/src/Components/OverviewModal/index.scss
+++ b/ui/src/Components/OverviewModal/index.scss
@@ -1,4 +1,4 @@
-@import "src/App.scss";
+@import "src/Theme.scss";
 
 .navbar-brand {
   &:hover,
diff --git a/ui/src/Components/SilenceModal/DateTimeSelect/index.scss b/ui/src/Components/SilenceModal/DateTimeSelect/index.scss
index 9b1d91ad1..2dfe297dd 100644
--- a/ui/src/Components/SilenceModal/DateTimeSelect/index.scss
+++ b/ui/src/Components/SilenceModal/DateTimeSelect/index.scss
@@ -1,4 +1,4 @@
-@import "src/App.scss";
+@import "src/Theme.scss";
 
 $datepicker__background-color: $white;
 $datepicker__border-color: $gray-300;
diff --git a/ui/src/DarkTheme.scss b/ui/src/DarkTheme.scss
index 6162fcbe0..a46ad3ef0 100644
--- a/ui/src/DarkTheme.scss
+++ b/ui/src/DarkTheme.scss
@@ -1,4 +1,4 @@
-@import "src/App.scss";
+@import "src/Theme.scss";
 
 $alertgroup-body-bg: #5a6e7b;
 $alertgroup-header-bg: #515658;
diff --git a/ui/src/Theme.scss b/ui/src/Theme.scss
new file mode 100644
index 000000000..311afb249
--- /dev/null
+++ b/ui/src/Theme.scss
@@ -0,0 +1,37 @@
+$lead-font-weight: 400;
+
+// custom "dark" color, little less dark than flatly
+$blue: #455a64;
+// body background color should be same as navbar, so it blends into one
+$body-bg: $blue;
+// default is ~0.97rem
+$font-size-base: 1rem;
+
+// make links light gray by default instead of green
+$link-color: #7b8a8b; // $gray-700
+
+// make dark darker, default it's $gray-700
+$dark: #3b4247;
+
+// fix active tab color, for some reason it ends up with $primary as bg color
+$nav-tabs-link-active-bg: #fff;
+
+// pagination tweaks
+$pagination-color: #fff;
+$pagination-bg: #b4bcc2; // gray-500
+$pagination-hover-color: #fff;
+$pagination-hover-bg: #7b8a8b; // gray-700
+$pagination-active-bg: $pagination-hover-bg;
+$pagination-disabled-color: #fff;
+$pagination-disabled-bg: #dee2e6; // gray-300
+
+$enable-shadows: true;
+
+$btn-box-shadow: 0;
+$btn-focus-box-shadow: 0;
+$btn-active-box-shadow: 0;
+
+@import "~bootswatch/dist/flatly/variables";
+@import "~bootstrap/scss/functions";
+@import "~bootstrap/scss/variables";
+@import "~bootstrap/scss/mixins";