diff --git a/assets/_defaults.scss b/assets/_defaults.scss
index 4c8669736a71603fc733ba15e17d7acea6e339b7..f40475855bfcb725e5a197e6d9dcdf76fe118613 100644
--- a/assets/_defaults.scss
+++ b/assets/_defaults.scss
@@ -64,3 +64,22 @@ $hint-colors: (
   --hint-color-warning: #fd6;
   --hint-color-danger: #f66;
 }
+
+@mixin theme-tetras {
+  // Custom variable for Tetras theme
+  --gray-100: rgba(255, 255, 255, 0.1);
+  --gray-200: rgba(255, 255, 255, 0.2);
+  --gray-500: rgba(255, 255, 255, 0.5);
+
+  --color-link: #0000ff;
+  --color-visited-link: #7d36fc;
+
+  --body-background: #fdf6e3;
+  --body-font-color: black;
+
+  --icon-filter: black;
+
+  --hint-color-info: #6bf;
+  --hint-color-warning: #fd6;
+  --hint-color-danger: #f66;
+}
diff --git a/assets/themes/_tetras.scss b/assets/themes/_tetras.scss
new file mode 100644
index 0000000000000000000000000000000000000000..d137436812bd4cfebfc38689ed66bc4fae6e7c25
--- /dev/null
+++ b/assets/themes/_tetras.scss
@@ -0,0 +1,10 @@
+:root {
+  @include theme-tetras;
+}
+
+// Auto dark theme disabled until all new Macao elements are adapted for it
+//@media (prefers-color-scheme: dark) {
+//  :root {
+//    @include theme-dark;
+//  }
+//}