diff --git a/app/javascript/styles/_variables.scss b/app/javascript/styles/_variables.scss
index be24d352..aba65ce3 100644
--- a/app/javascript/styles/_variables.scss
+++ b/app/javascript/styles/_variables.scss
@@ -56,6 +56,10 @@ $avatar-sizes: (
   "xl": 160px,
 );
 
+$spacers: (
+  10: (1rem * 6)
+);
+
 :root {
   --background: #f0edf4;
   --input-bg: var(--background);
diff --git a/app/javascript/styles/application.scss b/app/javascript/styles/application.scss
index 44aa9883..b98740da 100644
--- a/app/javascript/styles/application.scss
+++ b/app/javascript/styles/application.scss
@@ -87,6 +87,7 @@
 "components/profile",
 "components/question",
 "components/smiles",
+"components/themes",
 "components/totp-setup",
 "components/userbox";
 
diff --git a/app/javascript/styles/components/_themes.scss b/app/javascript/styles/components/_themes.scss
new file mode 100644
index 00000000..e45e42d3
--- /dev/null
+++ b/app/javascript/styles/components/_themes.scss
@@ -0,0 +1,15 @@
+.theme-success {
+  --background: #f4fcf6;
+  --primary: var(--success);
+}
+
+.theme-warning {
+  --background: #fcfaf4;
+  --primary: var(--warning);
+  --primary-text: 0, 0, 0;
+}
+
+.theme-danger {
+  --background: #fceff1;
+  --primary: var(--danger);
+}
\ No newline at end of file