diff --git a/source/css/molecules/switch.pcss b/source/css/molecules/switch.pcss
index 7e5c37badee7c9b7b4384c7617e689c2c89866de..1e999650ae5bbc7317e900980e0e6b87d1e11c69 100644
--- a/source/css/molecules/switch.pcss
+++ b/source/css/molecules/switch.pcss
@@ -11,5 +11,5 @@
 }
 .switch__item--active,
 .switch__item--active:hover {
-@apply bg-cyan-300;
+	background-color: theme('colors.fxactivecolor');
 }
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
index 8a7b46d676d347c656c927a3c4860479dc7bf1ad..aafb2c60254c18ff7ed2c0a9231d873d90beedfb 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -171,6 +171,7 @@ module.exports = {
         '400': '#840048',
         '500': '#670047',
       },
+      'fxactivecolor': '#3e8793', // used in switch active state, cyan 300
     },
     container: {
       center: true,