diff --git a/app/assets/stylesheets/common/foundation/variables.scss b/app/assets/stylesheets/common/foundation/variables.scss
index 29e1ebbba47..41afa8dad82 100644
--- a/app/assets/stylesheets/common/foundation/variables.scss
+++ b/app/assets/stylesheets/common/foundation/variables.scss
@@ -64,7 +64,7 @@ $line-height-large: 1.4; // Normal or small text
 // These files don't actually exist. They're injected by Stylesheet::Compiler.
 // --------------------------------------------------
 
-@import "theme_variables";
+@import "theme_colors";
 @import "plugins_variables";
 @import "common/foundation/math";
 
diff --git a/app/models/theme_field.rb b/app/models/theme_field.rb
index 4064cabf162..9d62dc27610 100644
--- a/app/models/theme_field.rb
+++ b/app/models/theme_field.rb
@@ -261,7 +261,7 @@ class ThemeField < ActiveRecord::Base
   def ensure_scss_compiles!
     if ThemeField.scss_fields.include?(self.name)
       begin
-        Stylesheet::Compiler.compile("@import \"theme_variables\"; @import \"theme_field\";",
+        Stylesheet::Compiler.compile("@import \"common/foundation/variables\"; @import \"theme_variables\"; @import \"theme_field\";",
                                      "theme.scss",
                                      theme_field: self.value.dup,
                                      theme: self.theme
diff --git a/lib/stylesheet/compiler.rb b/lib/stylesheet/compiler.rb
index 9f7b3b9bb0b..1c2a165e3b5 100644
--- a/lib/stylesheet/compiler.rb
+++ b/lib/stylesheet/compiler.rb
@@ -10,7 +10,7 @@ module Stylesheet
 
       if Importer.special_imports[asset.to_s]
         filename = "theme.scss"
-        file = "@import \"theme_variables\"; @import \"#{asset}\";"
+        file = "@import \"common/foundation/variables\"; @import \"theme_variables\"; @import \"#{asset}\";"
       else
         filename = "#{asset}.scss"
         path = "#{ASSET_ROOT}/#{filename}"
diff --git a/lib/stylesheet/importer.rb b/lib/stylesheet/importer.rb
index 635645c5c79..49ff26d8e70 100644
--- a/lib/stylesheet/importer.rb
+++ b/lib/stylesheet/importer.rb
@@ -33,12 +33,19 @@ module Stylesheet
       import_files(DiscoursePluginRegistry.sass_variables)
     end
 
-    register_import "theme_variables" do
+    register_import "theme_colors" do
       contents = ""
       colors = (@theme_id && theme.color_scheme) ? theme.color_scheme.resolved_colors : ColorScheme.base_colors
       colors.each do |n, hex|
         contents << "$#{n}: ##{hex} !default;\n"
       end
+      contents
+
+      Import.new("theme_colors.scss", source: contents)
+    end
+
+    register_import "theme_variables" do
+      contents = ""
 
       theme&.all_theme_variables&.each do |field|
         if field.type_id == ThemeField.types[:theme_upload_var]
diff --git a/spec/models/theme_spec.rb b/spec/models/theme_spec.rb
index a799ac0306b..0b4a332c9a7 100644
--- a/spec/models/theme_spec.rb
+++ b/spec/models/theme_spec.rb
@@ -290,7 +290,7 @@ HTML
       theme.reload
       expect(theme.theme_fields.find_by(name: :scss).error).to eq(nil)
 
-      scss, _map = Stylesheet::Compiler.compile('@import "theme_variables"; @import "desktop_theme"; ', "theme.scss", theme_id: theme.id)
+      scss, _map = Stylesheet::Compiler.compile('@import "common/foundation/variables"; @import "theme_variables"; @import "desktop_theme"; ', "theme.scss", theme_id: theme.id)
       expect(scss).to include(upload.url)
     end
   end