Import theme

assets/scss/modules/_color_theme.scss

@@ -0,0 +1,55 @@
+@use 'modules/variables' as var;
+@use 'sass:map';
+
+$themes: (
+  light: (
+    accent: var.$accent--lightmode,
+    primary: var.$primary--lightmode,
+    primary-light: var.$primary-light--lightmode,
+    primary-lighter: var.$primary-lighter--lightmode,
+    info: var.$info,
+    shadow: var.$shadow--lightmode,
+    border: 1px solid var.$primary-lighter--lightmode,
+    alert: var.$warning,
+    success: var.$success,
+    warning: var.$warning,
+    danger: var.$danger,
+  ),
+  dark: (
+    accent: var.$accent--darkmode,
+    primary: var.$primary--darkmode,
+    primary-light: var.$primary-light--darkmode,
+    primary-lighter: var.$primary-lighter--darkmode,
+    info: var.$info,
+    shadow: var.$shadow--darkmode,
+    border: 1px solid var.$primary-lighter--darkmode,
+    alert: var.$warning,
+    success: var.$success,
+    warning: var.$warning,
+    danger: var.$danger,
+  ),
+);
+
+$theme-map: ();
+
+@mixin themed() {
+  @each $theme, $map in $themes {
+    .theme--#{$theme} & {
+      @each $key, $submap in $map {
+        $value: map.get(map.get($themes, $theme), '#{$key}');
+        $theme-map: map.merge(
+          $theme-map,
+          (
+            $key: $value,
+          )
+        ) !global;
+      }
+      @content;
+      $theme-map: ();
+    }
+  }
+}
+
+@function t($key) {
+  @return map.get($theme-map, $key);
+}

assets/scss/modules/_config.scss

@@ -0,0 +1,31 @@
+@use 'hugo:vars' as hugo;
+
+@mixin desktop {
+  @media screen and (min-width: 961px) {
+    @content;
+  }
+}
+
+@mixin widescreen {
+  @media screen and (min-width: 1921px) {
+    @content;
+  }
+}
+
+@mixin print {
+  @media print {
+    @content;
+  }
+}
+
+@mixin ltr {
+  @if hugo.$text-direction == ltr {
+    @content;
+  }
+}
+
+@mixin rtl {
+  @if hugo.$text-direction == rtl {
+    @content;
+  }
+}

assets/scss/modules/_variables.scss

@@ -0,0 +1,19 @@
+$accent--lightmode: #fff;
+$primary--lightmode: #464646;
+$primary-light--lightmode: #9f9f9f;
+$primary-lighter--lightmode: #eeeeee;
+$shadow--lightmode: 0 8px 16px rgba(10, 10, 10, 0.1);
+
+$accent--darkmode: #152028;
+$primary--darkmode: #eeeeee;
+$primary-light--darkmode: #9f9f9f;
+$primary-lighter--darkmode: #464646;
+$shadow--darkmode: 0 8px 16px rgba(226, 226, 226, 0.1);
+
+$warning: #ffc107;
+$info: #6086b4;
+$success: #51d88a;
+$danger: #ef5753;
+
+$thumbnail-height: 15em;
+$body-max-width: 1920px;