Separate color schemes into separate files

5 files changed, 196 insertions, 230 deletions

diff --git a/data/style.scss b/data/style.scss
index 36793e3..6276708 100644
--- a/data/style.scss
+++ b/data/style.scss
@@ -1,22 +1,12 @@
 @use "sass:selector";
+@use "themes/archlinux";
+@use "themes/monokai";
+@use "themes/squirrel";
+@use "themes/zenburn";
 
 // theme colors can be found at the bottom
 $themes: squirrel, archlinux, monokai, zenburn;
 
-// This returns a selector that matches body when no theme class is set,
-// in which case the default light/dark mode themes should be used.
-// The result of this function can be used with #{...} interpolation
-// in a selector list.
-@function body_not_themed() {
-    $s: unquote("body");
-
-    @each $t in $themes {
-        $s: selector.append($s, unquote(":not(.theme_#{$t})"));
-    }
-
-    @return $s;
-}
-
 html {
     font-smoothing: antialiased;
     text-rendering: optimizeLegibility;
@@ -219,12 +209,6 @@ body:not([data-theme]) nav .theme li[data-theme="default"] a {
     @extend %active_theme_link;
 }
 
-@each $theme in $themes {
-    body[data-theme="#{$theme}"] nav .theme li[data-theme="#{$theme}"] a {
-        @extend %active_theme_link;
-    }
-}
-
 p {
     margin: 0;
     padding: 0;
@@ -567,211 +551,21 @@ th span.active span {
     }
 }
 
-
-
-@mixin theme_squirrel {
-    --background: #ffffff;
-    --text_color: #323232;
-    --directory_link_color: #d02474;
-    --directory_link_color_visited: #9b1985;
-    --file_link_color: #0086b3;
-    --file_link_color_visited: #974ec2;
-    --symlink_color: #ADD8E6;
-    --table_background: #ffffff;
-    --table_text_color: #323232;
-    --table_header_background: #323232;
-    --table_header_text_color: #f5f5f5;
-    --table_header_active_color: #ffffff;
-    --active_row_color: #f6f8fa;
-    --odd_row_background: #fbfbfb;
-    --even_row_background: #f2f2f2;
-    --root_link_color: #323232;
-    --download_button_background: #d02474;
-    --download_button_background_hover: #f52d8a;
-    --download_button_link_color: #ffffff;
-    --download_button_link_color_hover: #ffffff;
-    --back_button_background: #d02474;
-    --back_button_background_hover: #d02474;
-    --back_button_link_color: #ffffff;
-    --back_button_link_color_hover: #ffffff;
-    --date_text_color: #797979;
-    --at_color: #797979;
-    --switch_theme_background: #323232;
-    --switch_theme_link_color: #f5f5f5;
-    --switch_theme_active: #d02474;
-    --switch_theme_border: #49483e;
-    --change_theme_link_color: #f5f5f5;
-    --change_theme_link_color_hover: #f5f5f5;
-    --upload_text_color: #323232;
-    --upload_form_border_color: #d2d2d2;
-    --upload_form_background: #f2f2f2;
-    --upload_button_background: #d02474;
-    --upload_button_text_color: #ffffff;
-    --drag_background: #3333338f;
-    --drag_border_color: #ffffff;
-    --drag_text_color: #ffffff;
-    --size_background_color: #323232;
-    --size_text_color: #ffffff;
-    --error_color: #d02424;
-    --footer_color: #898989;
-}
-
-@mixin theme_archlinux {
-    --background: #383c4a;
-    --text_color: #fefefe;
-    --directory_link_color: #03a9f4;
-    --directory_link_color_visited: #0388f4;
-    --file_link_color: #ea95ff;
-    --file_link_color_visited: #a595ff;
-    --symlink_color: #66d9ef;
-    --table_background: #353946;
-    --table_text_color: #eeeeee;
-    --table_header_background: #5294e2;
-    --table_header_text_color: #eeeeee;
-    --table_header_active_color: #ffffff;
-    --active_row_color: #5194e259;
-    --odd_row_background: #404552;
-    --even_row_background: #4b5162;
-    --root_link_color: #abb2bb;
-    --download_button_background: #ea95ff;
-    --download_button_background_hover: #eea7ff;
-    --download_button_link_color: #ffffff;
-    --download_button_link_color_hover: #ffffff;
-    --back_button_background: #ea95ff;
-    --back_button_background_hover: #ea95ff;
-    --back_button_link_color: #ffffff;
-    --back_button_link_color_hover: #ffffff;
-    --date_text_color: #9ebbdc;
-    --at_color: #9ebbdc;
-    --switch_theme_background: #4b5162;
-    --switch_theme_link_color: #fefefe;
-    --switch_theme_active: #ea95ff;
-    --switch_theme_border: #6a728a;
-    --change_theme_link_color: #fefefe;
-    --change_theme_link_color_hover: #fefefe;
-    --upload_text_color: #fefefe;
-    --upload_form_border_color: #353946;
-    --upload_form_background: #4b5162;
-    --upload_button_background: #ea95ff;
-    --upload_button_text_color: #ffffff;
-    --drag_background: #3333338f;
-    --drag_border_color: #fefefe;
-    --drag_text_color: #fefefe;
-    --size_background_color: #5294e2;
-    --size_text_color: #fefefe;
-    --error_color: #e44b4b;
-    --footer_color: #8eabcc;
-}
-
-@mixin theme_zenburn {
-    --background: #3f3f3f;
-    --text_color: #efefef;
-    --directory_link_color: #f0dfaf;
-    --directory_link_color_visited: #ebc390;
-    --file_link_color: #87d6d5;
-    --file_link_color_visited: #a7b9ec;
-    --symlink_color: #11a8cd;
-    --table_background: #4a4949;
-    --table_text_color: #efefef;
-    --table_header_background: #7f9f7f;
-    --table_header_text_color: #efefef;
-    --table_header_active_color: #efef8f;
-    --active_row_color: #7e9f7f9c;
-    --odd_row_background: #777777;
-    --even_row_background: #5a5a5a;
-    --root_link_color: #dca3a3;
-    --download_button_background: #cc9393;
-    --download_button_background_hover: #dca3a3;
-    --download_button_link_color: #efefef;
-    --download_button_link_color_hover: #efefef;
-    --back_button_background: #cc9393;
-    --back_button_background_hover: #cc9393;
-    --back_button_link_color: #efefef;
-    --back_button_link_color_hover: #efefef;
-    --date_text_color: #cfbfaf;
-    --at_color: #cfbfaf;
-    --switch_theme_background: #4a4949;
-    --switch_theme_link_color: #efefef;
-    --switch_theme_active: #efef8f;
-    --switch_theme_border: #5a5a5a;
-    --change_theme_link_color: #efefef;
-    --change_theme_link_color_hover: #efefef;
-    --upload_text_color: #efefef;
-    --upload_form_border_color: #4a4949;
-    --upload_form_background: #777777;
-    --upload_button_background: #cc9393;
-    --upload_button_text_color: #efefef;
-    --drag_background: #3333338f;
-    --drag_border_color: #efefef;
-    --drag_text_color: #efefef;
-    --size_background_color: #7f9f7f;
-    --size_text_color: #efefef;
-    --error_color: #d06565;
-    --footer_color: #bfaf9f;
-}
-
-@mixin theme_monokai {
-    --background: #272822;
-    --text_color: #f8f8f2;
-    --directory_link_color: #f92672;
-    --directory_link_color_visited: #bc39a7;
-    --file_link_color: #a6e22e;
-    --file_link_color_visited: #4cb936;
-    --symlink_color: #29b8db;
-    --table_background: #3b3a32;
-    --table_text_color: #f8f8f0;
-    --table_header_background: #75715e;
-    --table_header_text_color: #f8f8f2;
-    --table_header_active_color: #e6db74;
-    --active_row_color: #ae81fe3d;
-    --odd_row_background: #3e3d32;
-    --even_row_background: #49483e;
-    --root_link_color: #66d9ef;
-    --download_button_background: #ae81ff;
-    --download_button_background_hover: #c6a6ff;
-    --download_button_link_color: #f8f8f0;
-    --download_button_link_color_hover: #f8f8f0;
-    --back_button_background: #ae81ff;
-    --back_button_background_hover: #ae81ff;
-    --back_button_link_color: #f8f8f0;
-    --back_button_link_color_hover: #f8f8f0;
-    --date_text_color: #66d9ef;
-    --at_color: #66d9ef;
-    --switch_theme_background: #3b3a32;
-    --switch_theme_link_color: #f8f8f2;
-    --switch_theme_active: #a6e22e;
-    --switch_theme_border: #49483e;
-    --change_theme_link_color: #f8f8f2;
-    --change_theme_link_color_hover: #f8f8f2;
-    --upload_text_color: #f8f8f2;
-    --upload_form_border_color: #3b3a32;
-    --upload_form_background: #49483e;
-    --upload_button_background: #ae81ff;
-    --upload_button_text_color: #f8f8f0;
-    --drag_background: #3333338f;
-    --drag_border_color: #f8f8f2;
-    --drag_text_color: #f8f8f2;
-    --size_background_color: #75715e;
-    --size_text_color: #f8f8f2;
-    --error_color: #d02929;
-    --footer_color: #56c9df;
-}
-
 @mixin theme($name) {
     @if $name == squirrel {
-        @include theme_squirrel();
+        @include squirrel.theme();
     }
 
     @else if $name == archlinux {
-        @include theme_archlinux();
+        @include archlinux.theme();
     }
 
     @else if $name == monokai {
-        @include theme_monokai();
+        @include monokai.theme();
     }
 
     @else if $name == zenburn {
-        @include theme_zenburn();
+        @include zenburn.theme();
     }
 
     @else {
@@ -779,23 +573,11 @@ th span.active span {
     }
 }
 
-body:not([data-theme]) {
-    @include theme_squirrel();
-}
-
-@media (prefers-color-scheme: dark) {
-    body:not([data-theme]) {
-        @include theme_monokai();
-    }
-}
-
-// For each of the themes, define a placeholder selector containing
-// the themes variables. Then add selectors for body when the theme:
-// - has explicitly been activated by .theme_*
-// - is set as default theme by .default_theme_* and no other theme is active
-// to the placeholder selector list by means of @extend.
 @each $theme in $themes {
     body[data-theme="#{$theme}"] {
         @include theme($theme);
+        nav .theme li[data-theme="#{$theme}"] a {
+            @extend %active_theme_link;
+        }
     }
-}
\ No newline at end of file
+}
diff --git a/data/themes/archlinux.scss b/data/themes/archlinux.scss
new file mode 100644
index 0000000..f0504ed
--- /dev/null
+++ b/data/themes/archlinux.scss
@@ -0,0 +1,46 @@
+@mixin theme {
+  --background: #383c4a;
+  --text_color: #fefefe;
+  --directory_link_color: #03a9f4;
+  --directory_link_color_visited: #0388f4;
+  --file_link_color: #ea95ff;
+  --file_link_color_visited: #a595ff;
+  --symlink_color: #66d9ef;
+  --table_background: #353946;
+  --table_text_color: #eeeeee;
+  --table_header_background: #5294e2;
+  --table_header_text_color: #eeeeee;
+  --table_header_active_color: #ffffff;
+  --active_row_color: #5194e259;
+  --odd_row_background: #404552;
+  --even_row_background: #4b5162;
+  --root_link_color: #abb2bb;
+  --download_button_background: #ea95ff;
+  --download_button_background_hover: #eea7ff;
+  --download_button_link_color: #ffffff;
+  --download_button_link_color_hover: #ffffff;
+  --back_button_background: #ea95ff;
+  --back_button_background_hover: #ea95ff;
+  --back_button_link_color: #ffffff;
+  --back_button_link_color_hover: #ffffff;
+  --date_text_color: #9ebbdc;
+  --at_color: #9ebbdc;
+  --switch_theme_background: #4b5162;
+  --switch_theme_link_color: #fefefe;
+  --switch_theme_active: #ea95ff;
+  --switch_theme_border: #6a728a;
+  --change_theme_link_color: #fefefe;
+  --change_theme_link_color_hover: #fefefe;
+  --upload_text_color: #fefefe;
+  --upload_form_border_color: #353946;
+  --upload_form_background: #4b5162;
+  --upload_button_background: #ea95ff;
+  --upload_button_text_color: #ffffff;
+  --drag_background: #3333338f;
+  --drag_border_color: #fefefe;
+  --drag_text_color: #fefefe;
+  --size_background_color: #5294e2;
+  --size_text_color: #fefefe;
+  --error_color: #e44b4b;
+  --footer_color: #8eabcc;
+}
diff --git a/data/themes/monokai.scss b/data/themes/monokai.scss
new file mode 100644
index 0000000..b477f2d
--- /dev/null
+++ b/data/themes/monokai.scss
@@ -0,0 +1,46 @@
+@mixin theme {
+  --background: #272822;
+  --text_color: #f8f8f2;
+  --directory_link_color: #f92672;
+  --directory_link_color_visited: #bc39a7;
+  --file_link_color: #a6e22e;
+  --file_link_color_visited: #4cb936;
+  --symlink_color: #29b8db;
+  --table_background: #3b3a32;
+  --table_text_color: #f8f8f0;
+  --table_header_background: #75715e;
+  --table_header_text_color: #f8f8f2;
+  --table_header_active_color: #e6db74;
+  --active_row_color: #ae81fe3d;
+  --odd_row_background: #3e3d32;
+  --even_row_background: #49483e;
+  --root_link_color: #66d9ef;
+  --download_button_background: #ae81ff;
+  --download_button_background_hover: #c6a6ff;
+  --download_button_link_color: #f8f8f0;
+  --download_button_link_color_hover: #f8f8f0;
+  --back_button_background: #ae81ff;
+  --back_button_background_hover: #ae81ff;
+  --back_button_link_color: #f8f8f0;
+  --back_button_link_color_hover: #f8f8f0;
+  --date_text_color: #66d9ef;
+  --at_color: #66d9ef;
+  --switch_theme_background: #3b3a32;
+  --switch_theme_link_color: #f8f8f2;
+  --switch_theme_active: #a6e22e;
+  --switch_theme_border: #49483e;
+  --change_theme_link_color: #f8f8f2;
+  --change_theme_link_color_hover: #f8f8f2;
+  --upload_text_color: #f8f8f2;
+  --upload_form_border_color: #3b3a32;
+  --upload_form_background: #49483e;
+  --upload_button_background: #ae81ff;
+  --upload_button_text_color: #f8f8f0;
+  --drag_background: #3333338f;
+  --drag_border_color: #f8f8f2;
+  --drag_text_color: #f8f8f2;
+  --size_background_color: #75715e;
+  --size_text_color: #f8f8f2;
+  --error_color: #d02929;
+  --footer_color: #56c9df;
+}
diff --git a/data/themes/squirrel.scss b/data/themes/squirrel.scss
new file mode 100644
index 0000000..65aea8b
--- /dev/null
+++ b/data/themes/squirrel.scss
@@ -0,0 +1,46 @@
+@mixin theme {
+  --background: #ffffff;
+  --text_color: #323232;
+  --directory_link_color: #d02474;
+  --directory_link_color_visited: #9b1985;
+  --file_link_color: #0086b3;
+  --file_link_color_visited: #974ec2;
+  --symlink_color: #ADD8E6;
+  --table_background: #ffffff;
+  --table_text_color: #323232;
+  --table_header_background: #323232;
+  --table_header_text_color: #f5f5f5;
+  --table_header_active_color: #ffffff;
+  --active_row_color: #f6f8fa;
+  --odd_row_background: #fbfbfb;
+  --even_row_background: #f2f2f2;
+  --root_link_color: #323232;
+  --download_button_background: #d02474;
+  --download_button_background_hover: #f52d8a;
+  --download_button_link_color: #ffffff;
+  --download_button_link_color_hover: #ffffff;
+  --back_button_background: #d02474;
+  --back_button_background_hover: #d02474;
+  --back_button_link_color: #ffffff;
+  --back_button_link_color_hover: #ffffff;
+  --date_text_color: #797979;
+  --at_color: #797979;
+  --switch_theme_background: #323232;
+  --switch_theme_link_color: #f5f5f5;
+  --switch_theme_active: #d02474;
+  --switch_theme_border: #49483e;
+  --change_theme_link_color: #f5f5f5;
+  --change_theme_link_color_hover: #f5f5f5;
+  --upload_text_color: #323232;
+  --upload_form_border_color: #d2d2d2;
+  --upload_form_background: #f2f2f2;
+  --upload_button_background: #d02474;
+  --upload_button_text_color: #ffffff;
+  --drag_background: #3333338f;
+  --drag_border_color: #ffffff;
+  --drag_text_color: #ffffff;
+  --size_background_color: #323232;
+  --size_text_color: #ffffff;
+  --error_color: #d02424;
+  --footer_color: #898989;
+}
diff --git a/data/themes/zenburn.scss b/data/themes/zenburn.scss
new file mode 100644
index 0000000..5c64892
--- /dev/null
+++ b/data/themes/zenburn.scss
@@ -0,0 +1,46 @@
+@mixin theme {
+  --background: #3f3f3f;
+  --text_color: #efefef;
+  --directory_link_color: #f0dfaf;
+  --directory_link_color_visited: #ebc390;
+  --file_link_color: #87d6d5;
+  --file_link_color_visited: #a7b9ec;
+  --symlink_color: #11a8cd;
+  --table_background: #4a4949;
+  --table_text_color: #efefef;
+  --table_header_background: #7f9f7f;
+  --table_header_text_color: #efefef;
+  --table_header_active_color: #efef8f;
+  --active_row_color: #7e9f7f9c;
+  --odd_row_background: #777777;
+  --even_row_background: #5a5a5a;
+  --root_link_color: #dca3a3;
+  --download_button_background: #cc9393;
+  --download_button_background_hover: #dca3a3;
+  --download_button_link_color: #efefef;
+  --download_button_link_color_hover: #efefef;
+  --back_button_background: #cc9393;
+  --back_button_background_hover: #cc9393;
+  --back_button_link_color: #efefef;
+  --back_button_link_color_hover: #efefef;
+  --date_text_color: #cfbfaf;
+  --at_color: #cfbfaf;
+  --switch_theme_background: #4a4949;
+  --switch_theme_link_color: #efefef;
+  --switch_theme_active: #efef8f;
+  --switch_theme_border: #5a5a5a;
+  --change_theme_link_color: #efefef;
+  --change_theme_link_color_hover: #efefef;
+  --upload_text_color: #efefef;
+  --upload_form_border_color: #4a4949;
+  --upload_form_background: #777777;
+  --upload_button_background: #cc9393;
+  --upload_button_text_color: #efefef;
+  --drag_background: #3333338f;
+  --drag_border_color: #efefef;
+  --drag_text_color: #efefef;
+  --size_background_color: #7f9f7f;
+  --size_text_color: #efefef;
+  --error_color: #d06565;
+  --footer_color: #bfaf9f;
+}