diff --git a/app/models/theme_field.rb b/app/models/theme_field.rb
index ac8ffdd53af..1eeb40831fa 100644
--- a/app/models/theme_field.rb
+++ b/app/models/theme_field.rb
@@ -24,10 +24,28 @@ class ThemeField < ActiveRecord::Base
 
   belongs_to :theme
 
+  def settings(source)
+
+    settings = {}
+
+    theme.cached_settings.each do |k, v|
+      if source.include?("settings.#{k}")
+        settings[k] = v
+      end
+    end
+
+    if settings.length > 0
+      "let settings = #{settings.to_json};"
+    else
+      ""
+    end
+  end
+
   def transpile(es6_source, version)
     template = Tilt::ES6ModuleTranspilerTemplate.new {}
     wrapped = <<PLUGIN_API_JS
 Discourse._registerPluginCode('#{version}', api => {
+  #{settings(es6_source)}
   #{es6_source}
 });
 PLUGIN_API_JS
diff --git a/app/models/theme_setting.rb b/app/models/theme_setting.rb
index 43336ba3830..782d2148649 100644
--- a/app/models/theme_setting.rb
+++ b/app/models/theme_setting.rb
@@ -7,6 +7,8 @@ class ThemeSetting < ActiveRecord::Base
 
   after_save do
     theme.clear_cached_settings!
+    theme.remove_from_cache!
+    theme.theme_fields.update_all(value_baked: nil)
   end
 
   def self.types
diff --git a/spec/models/theme_spec.rb b/spec/models/theme_spec.rb
index beb26a1a9fa..352147e3680 100644
--- a/spec/models/theme_spec.rb
+++ b/spec/models/theme_spec.rb
@@ -214,7 +214,7 @@ HTML
   end
 
   context "theme settings" do
-    it "values can be used in scss" do
+    it "allows values to be used in scss" do
       theme = Theme.new(name: "awesome theme", user_id: -1)
       theme.set_field(target: :settings, name: :yaml, value: "background_color: red\nfont_size: 25px")
       theme.set_field(target: :common, name: :scss, value: 'body {background-color: $background_color; font-size: $font-size}')
@@ -223,7 +223,42 @@ HTML
       scss, _map = Stylesheet::Compiler.compile('@import "theme_variables"; @import "desktop_theme"; ', "theme.scss", theme_id: theme.id)
       expect(scss).to include("background-color:red")
       expect(scss).to include("font-size:25px")
+
+      setting = theme.settings.find { |s| s.name == :font_size }
+      setting.value = '30px'
+
+      scss, _map = Stylesheet::Compiler.compile('@import "theme_variables"; @import "desktop_theme"; ', "theme.scss", theme_id: theme.id)
+      expect(scss).to include("font-size:30px")
     end
+
+    it "allows values to be used in JS" do
+      theme = Theme.new(name: "awesome theme", user_id: -1)
+      theme.set_field(target: :settings, name: :yaml, value: "name: bob")
+      theme.set_field(target: :common, name: :after_header, value: '<script type="text/discourse-plugin" version="1.0">alert(settings.name); let a = ()=>{};</script>')
+      theme.save!
+
+      transpiled = <<~HTML
+      <script>Discourse._registerPluginCode('1.0', function (api) {
+        var settings = { "name": "bob" };
+        alert(settings.name);var a = function a() {};
+      });</script>
+      HTML
+
+      expect(Theme.lookup_field(theme.key, :desktop, :after_header)).to eq(transpiled.strip)
+
+      setting = theme.settings.find { |s| s.name == :name }
+      setting.value = 'bill'
+
+      transpiled = <<~HTML
+      <script>Discourse._registerPluginCode('1.0', function (api) {
+        var settings = { "name": "bill" };
+        alert(settings.name);var a = function a() {};
+      });</script>
+      HTML
+      expect(Theme.lookup_field(theme.key, :desktop, :after_header)).to eq(transpiled.strip)
+
+    end
+
   end
 
   it 'correctly caches theme keys' do