6 files changed, 61 insertions, 0 deletions
diff --git a/app/src/web/scss/themes/.gitignore b/app/src/web/scss/themes/.gitignore
new file mode 100644
index 00000000..4c46adff
--- /dev/null
+++ b/app/src/web/scss/themes/.gitignore
@@ -0,0 +1 @@
+test.scss
diff --git a/app/src/web/scss/themes/custom.scss b/app/src/web/scss/themes/custom.scss
new file mode 100644
index 00000000..50c029fb
--- /dev/null
+++ b/app/src/web/scss/themes/custom.scss
@@ -0,0 +1,14 @@
+$bg_transparent: unquote('$BT$');
+$text: unquote('$T$');
+$link: unquote('$TT$');
+$accent: unquote('$A$');
+$accent_text: unquote('$AT$');
+$background: unquote('$B$');
+$background2: unquote('$BBT$');
+$bg_opaque: unquote('$O$');
+$bg_opaque2: unquote('$OO$');
+$divider: unquote('$D$');
+$card: unquote('$C$');
+$tint: unquote('$TI$');
+
+@import "../core/main";
diff --git a/app/src/web/scss/themes/material_amoled.scss b/app/src/web/scss/themes/material_amoled.scss
new file mode 100644
index 00000000..19190126
--- /dev/null
+++ b/app/src/web/scss/themes/material_amoled.scss
@@ -0,0 +1,11 @@
+$text: #fff;
+$accent_text: #fff;
+$link: #5d86dd;
+$accent: #5d86dd;
+$background: #000;
+$background2: rgba($background, 0.35);
+$bg_transparent: $background;
+$card: $background2;
+$tint: rgba(#fff, 0.2);
+
+@import "../core/main";
diff --git a/app/src/web/scss/themes/material_dark.scss b/app/src/web/scss/themes/material_dark.scss
new file mode 100644
index 00000000..18b8b461
--- /dev/null
+++ b/app/src/web/scss/themes/material_dark.scss
@@ -0,0 +1,10 @@
+$text: #fff;
+$accent_text: #fff;
+$link: #5d86dd;
+$accent: #5d86dd;
+$background: #303030;
+$bg_transparent: $background;
+$card: #353535;
+$tint: rgba(#fff, 0.2);
+
+@import "../core/main";
diff --git a/app/src/web/scss/themes/material_glass.scss b/app/src/web/scss/themes/material_glass.scss
new file mode 100644
index 00000000..0c61a38c
--- /dev/null
+++ b/app/src/web/scss/themes/material_glass.scss
@@ -0,0 +1,10 @@
+$text: #fff;
+$accent_text: #fff;
+$link: #5d86dd;
+$accent: #5d86dd;
+$background: rgba(#000, 0.1);
+$bg_transparent: transparent;
+$card: rgba(#000, 0.25);
+$tint: rgba(#fff, 0.15);
+
+@import "../core/main";
diff --git a/app/src/web/scss/themes/material_light.scss b/app/src/web/scss/themes/material_light.scss
new file mode 100644
index 00000000..7ec58463
--- /dev/null
+++ b/app/src/web/scss/themes/material_light.scss
@@ -0,0 +1,15 @@
+$text: #000;
+$accent_text: #fff;
+$link: #3b5998;
+$accent: #3b5998;
+$background: #fafafa;
+// this is actually the inverse of material light (bg should be gray, cards should be white),
+// but it looks better than the alternative
+$background2: rgba(darken($background, 8%), 0.35);
+
+$bg_transparent: $background;
+
+$card: #fff;
+$tint: #ddd;
+
+@import "../core/main";
+\ No newline at end of file