Add dark mode (only available with prefers-color-scheme currently)

6 files changed, 53 insertions, 0 deletions

diff --git a/sass/src/common/_variables.scss b/sass/src/common/_variables.scss
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/sass/src/common/_variables.scss
diff --git a/sass/src/common/index.scss b/sass/src/common/index.scss
new file mode 100644
index 0000000..1a47a11
--- /dev/null
+++ b/sass/src/common/index.scss
@@ -0,0 +1,18 @@
+$customColors: (
+  'caution': $error-color,
+  'info': $info-color,
+  'contrast': $off-black,
+);
+
+@each $name, $color in $customColors {
+  .#{$name}-color {
+    background-color: $color;
+  }
+  .#{$name}-color-text {
+    color: $color;
+  }
+}
+
+html {
+  background-color: $bg-color;
+}
diff --git a/sass/src/dark/_variables.scss b/sass/src/dark/_variables.scss
new file mode 100644
index 0000000..fb64911
--- /dev/null
+++ b/sass/src/dark/_variables.scss
@@ -0,0 +1,18 @@
+$bg-color: color('grey', 'darken-4') !default;
+$info-color: color('yellow', 'darken-4');
+
+$off-black: color('shades', 'white');
+
+$primary-color: color('materialize-red', 'darken-2');
+$secondary-color: color('teal', 'darken-2');
+$link-color: color('light-blue', 'darken-1');
+$collection-link-color: color('teal', 'darken-4');
+$success-color: color('green', 'darken-2');
+$error-color: color('red', 'darken-2');
+$input-border-color: $off-black;
+$radio-empty-color: $off-black !default;
+
+$table-striped-color: color('grey', 'darken-3');
+$button-flat-color: $off-black;
+$card-bg-color: color('grey', 'darken-2');
+$card-link-color: $link-color;
diff --git a/sass/src/dark/index.scss b/sass/src/dark/index.scss
new file mode 100644
index 0000000..783a103
--- /dev/null
+++ b/sass/src/dark/index.scss
@@ -0,0 +1,8 @@
+@import '../../node_modules/materialize-css/sass/components/color-variables';
+@import 'variables.scss';
+@import '../../node_modules/materialize-css/sass/materialize.scss';
+@import '../common/index.scss';
+
+html {
+  background-color: $bg-color;
+}
diff --git a/sass/src/light/_variables.scss b/sass/src/light/_variables.scss
new file mode 100644
index 0000000..abd4f6a
--- /dev/null
+++ b/sass/src/light/_variables.scss
@@ -0,0 +1,5 @@
+$bg-color: #fff;
+$info-color: color('yellow', 'lighten-4');
+$link-color: color('light-blue', 'darken-1');
+$card-link-color: $link-color;
+$card-bg-color: color('blue-grey', 'lighten-5');
diff --git a/sass/src/light/index.scss b/sass/src/light/index.scss
new file mode 100644
index 0000000..b26dad0
--- /dev/null
+++ b/sass/src/light/index.scss
@@ -0,0 +1,4 @@
+@import '../../node_modules/materialize-css/sass/components/color-variables';
+@import 'variables.scss';
+@import '../../node_modules/materialize-css/sass/materialize.scss';
+@import '../common/index.scss';