diff --git a/packages/view/src/App.scss b/packages/view/src/App.scss
index 35bf6e17..2a845fc6 100644
--- a/packages/view/src/App.scss
+++ b/packages/view/src/App.scss
@@ -1,3 +1,5 @@
+@import "styles/_custom";
+
 // FIXME
 :root {
   --primary-color: #ff8272;
diff --git a/packages/view/src/styles/_custom.scss b/packages/view/src/styles/_custom.scss
new file mode 100644
index 00000000..b9fa5031
--- /dev/null
+++ b/packages/view/src/styles/_custom.scss
@@ -0,0 +1,44 @@
+:root {
+  --color-black: #000000;
+  --color-white: #ffffff;
+}
+
+html[custom-type="aqua"] {
+  --color-primary: #25d4bf;
+  --color-secondary: #0687a3;
+  --color-tertiary: #35ffff;
+  --color-success: #0373b2;
+  --color-failed: #ee2479;
+}
+
+html[custom-type="hacker-blue"] {
+  --color-primary: #456cf7;
+  --color-secondary: #0c216f;
+  --color-tertiary: #6c60f0;
+  --color-success: #1fc7a9;
+  --color-failed: #ee2479;
+}
+
+html[custom-type="cotton"] {
+  --color-primary: #ffcccb;
+  --color-secondary: #feffd1;
+  --color-tertiary: #8979ca;
+  --color-success: #7ad5c4;
+  --color-failed: #ff8bbc;
+}
+
+html[custom-type="githru"] {
+  --color-primary: #f14f8c;
+  --color-secondary: #8421c9;
+  --color-tertiary: #ffcb7d;
+  --color-success: #07bebe;
+  --color-failed: #ee2479;
+}
+
+html[custom-type="mono"] {
+  --color-primary: #5f6f86;
+  --color-secondary: #3a4776;
+  --color-tertiary: #9499c3;
+  --color-success: #42b8b8;
+  --color-failed: #ee2479;
+}
diff --git a/packages/view/src/styles/app.scss b/packages/view/src/styles/app.scss
index 9d616292..034905a5 100644
--- a/packages/view/src/styles/app.scss
+++ b/packages/view/src/styles/app.scss
@@ -1,3 +1,4 @@
+@import "custom";
 @import "colors";
 @import "font";
 @import "pallete";