diff --git a/admin-ui/src/layout/components/Sidebar/Logo.vue b/admin-ui/src/layout/components/Sidebar/Logo.vue
index be73dcb..7cd95ee 100644
--- a/admin-ui/src/layout/components/Sidebar/Logo.vue
+++ b/admin-ui/src/layout/components/Sidebar/Logo.vue
@@ -15,7 +15,7 @@
 
 <script>
 
-import variables from '@/styles/variables.scss'
+import variables from '@/styles/runtime-variables'
 import { mapGetters } from 'vuex'
 
 export default {
diff --git a/admin-ui/src/layout/components/Sidebar/index.vue b/admin-ui/src/layout/components/Sidebar/index.vue
index d963596..2f4f37d 100644
--- a/admin-ui/src/layout/components/Sidebar/index.vue
+++ b/admin-ui/src/layout/components/Sidebar/index.vue
@@ -29,7 +29,7 @@
 import { mapGetters } from 'vuex'
 import Logo from './Logo'
 import SidebarItem from './SidebarItem'
-import variables from '@/styles/variables.scss'
+import variables from '@/styles/runtime-variables'
 
 export default {
   components: { SidebarItem, Logo },
diff --git a/admin-ui/src/layout/index.vue b/admin-ui/src/layout/index.vue
index 5844b73..0324c39 100644
--- a/admin-ui/src/layout/index.vue
+++ b/admin-ui/src/layout/index.vue
@@ -20,7 +20,7 @@ import RightPanel from '@/components/RightPanel'
 import { AppMain, Navbar, Settings, Sidebar, TagsView } from './components'
 import ResizeMixin from './mixin/ResizeHandler'
 import { mapState } from 'vuex'
-import variables from '@/styles/variables.scss'
+import variables from '@/styles/runtime-variables'
 
 export default {
   name: 'MainLayout',
diff --git a/admin-ui/src/store/modules/settings.js b/admin-ui/src/store/modules/settings.js
index 983a28a..6f71b7d 100644
--- a/admin-ui/src/store/modules/settings.js
+++ b/admin-ui/src/store/modules/settings.js
@@ -1,4 +1,4 @@
-import variables from '@/styles/element-variables.scss'
+import variables from '@/styles/runtime-variables'
 import defaultSettings from '@/settings'
 
 const { showSettings, topNav, tagsView, fixedHeader, sidebarLogo, themeStyle } = defaultSettings
diff --git a/admin-ui/src/styles/runtime-variables.js b/admin-ui/src/styles/runtime-variables.js
new file mode 100644
index 0000000..1d19c0a
--- /dev/null
+++ b/admin-ui/src/styles/runtime-variables.js
@@ -0,0 +1,14 @@
+export default {
+  theme: '#1890ff',
+  menuActiveText: '#1677ff',
+  subMenuActiveText: '#69b1ff',
+  menuBg: '#001529',
+  menuHover: '#000c17',
+  menuLightBg: '#ffffff',
+  menuLightHover: '#e6f4ff',
+  subMenuBg: '#000c17',
+  subMenuHover: '#001528',
+  sideBarWidth: '210px',
+  sidebarTitle: '#ffffff',
+  sidebarLightTitle: '#001d66'
+}
diff --git a/admin-ui/tests/unit/styles/runtime-variables.spec.js b/admin-ui/tests/unit/styles/runtime-variables.spec.js
new file mode 100644
index 0000000..0bb6c53
--- /dev/null
+++ b/admin-ui/tests/unit/styles/runtime-variables.spec.js
@@ -0,0 +1,12 @@
+import variables from '@/styles/runtime-variables'
+
+describe('runtime style variables', () => {
+  it('keeps the JavaScript theme values aligned with the current SCSS theme', () => {
+    expect(variables).toMatchObject({
+      theme: '#1890ff',
+      menuBg: '#001529',
+      menuLightBg: '#ffffff',
+      sideBarWidth: '210px'
+    })
+  })
+})