From f6453245edd4bb6a3bd5bd0374044ec689629241 Mon Sep 17 00:00:00 2001 From: Bao Trinh Date: Tue, 11 Jul 2023 14:37:58 -0500 Subject: simplify theme selection using data attributes --- data/style.scss | 50 +++++++++++++++++--------------------------------- 1 file changed, 17 insertions(+), 33 deletions(-) (limited to 'data') diff --git a/data/style.scss b/data/style.scss index 10c258d..36793e3 100644 --- a/data/style.scss +++ b/data/style.scss @@ -215,16 +215,16 @@ nav .theme li a:hover { color: var(--switch_theme_active); } +body:not([data-theme]) nav .theme li[data-theme="default"] a { + @extend %active_theme_link; +} + @each $theme in $themes { - body.theme_#{$theme} nav .theme li.theme_#{$theme} a { + body[data-theme="#{$theme}"] nav .theme li[data-theme="#{$theme}"] a { @extend %active_theme_link; } } -#{body_not_themed()} nav .theme li.theme_default a { - @extend %active_theme_link; -} - p { margin: 0; padding: 0; @@ -779,39 +779,23 @@ 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 { - %theme_#{$theme} { + body[data-theme="#{$theme}"] { @include theme($theme); } - - body.theme_#{$theme} { - @extend %theme_#{$theme}; - } - - #{body_not_themed()}.default_theme_#{$theme} { - @extend %theme_#{$theme}; - } -} - -// Do the same thing again for the dark mode default. -// Since the media query doesn't affect specificity, all dark mode -// defaults need to come after all light mode defaults to override -// them when dark mode is enabled. -@each $theme in $themes { - @media (prefers-color-scheme: dark) { - %theme_dark_#{$theme} { - @include theme($theme); - } - } - - // this extension will still end up inside the media query, - // because that is where %theme_dark_* was defined - #{body_not_themed()}.default_theme_dark_#{$theme} { - @extend %theme_dark_#{$theme}; - } -} +} \ No newline at end of file -- cgit v1.2.3 From b369a1a9ff3c60b67a7598d4486253c428e3a4da Mon Sep 17 00:00:00 2001 From: Bao Trinh Date: Wed, 12 Jul 2023 12:46:51 -0500 Subject: Separate color schemes into separate files --- data/style.scss | 242 +++------------------------------------------ data/themes/archlinux.scss | 46 +++++++++ data/themes/monokai.scss | 46 +++++++++ data/themes/squirrel.scss | 46 +++++++++ data/themes/zenburn.scss | 46 +++++++++ 5 files changed, 196 insertions(+), 230 deletions(-) create mode 100644 data/themes/archlinux.scss create mode 100644 data/themes/monokai.scss create mode 100644 data/themes/squirrel.scss create mode 100644 data/themes/zenburn.scss (limited to 'data') 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; +} -- cgit v1.2.3 From e84ca11eab6636904a42636455ea2cbe239fd1f4 Mon Sep 17 00:00:00 2001 From: Bao Trinh Date: Thu, 20 Jul 2023 19:14:15 -0500 Subject: use grass include macro; remove build.rs --- data/style.scss | 9 ++++----- data/themes/archlinux.scss | 8 ++++++++ data/themes/monokai.scss | 8 ++++++++ data/themes/squirrel.scss | 8 ++++++++ data/themes/zenburn.scss | 8 ++++++++ 5 files changed, 36 insertions(+), 5 deletions(-) (limited to 'data') diff --git a/data/style.scss b/data/style.scss index 6276708..909dc6f 100644 --- a/data/style.scss +++ b/data/style.scss @@ -1,8 +1,7 @@ -@use "sass:selector"; -@use "themes/archlinux"; -@use "themes/monokai"; -@use "themes/squirrel"; -@use "themes/zenburn"; +@use "themes/archlinux" with ($generate_default: false); +@use "themes/monokai" with ($generate_default: false); +@use "themes/squirrel" with ($generate_default: false); +@use "themes/zenburn" with ($generate_default: false); // theme colors can be found at the bottom $themes: squirrel, archlinux, monokai, zenburn; diff --git a/data/themes/archlinux.scss b/data/themes/archlinux.scss index f0504ed..f95b8bb 100644 --- a/data/themes/archlinux.scss +++ b/data/themes/archlinux.scss @@ -1,3 +1,5 @@ +$generate_default: true !default; + @mixin theme { --background: #383c4a; --text_color: #fefefe; @@ -43,4 +45,10 @@ --size_text_color: #fefefe; --error_color: #e44b4b; --footer_color: #8eabcc; +}; + +@if $generate_default { + body { + @include theme; + } } diff --git a/data/themes/monokai.scss b/data/themes/monokai.scss index b477f2d..4a47794 100644 --- a/data/themes/monokai.scss +++ b/data/themes/monokai.scss @@ -1,3 +1,5 @@ +$generate_default: true !default; + @mixin theme { --background: #272822; --text_color: #f8f8f2; @@ -43,4 +45,10 @@ --size_text_color: #f8f8f2; --error_color: #d02929; --footer_color: #56c9df; +}; + +@if $generate_default { + body { + @include theme; + } } diff --git a/data/themes/squirrel.scss b/data/themes/squirrel.scss index 65aea8b..9eb572e 100644 --- a/data/themes/squirrel.scss +++ b/data/themes/squirrel.scss @@ -1,3 +1,5 @@ +$generate_default: true !default; + @mixin theme { --background: #ffffff; --text_color: #323232; @@ -43,4 +45,10 @@ --size_text_color: #ffffff; --error_color: #d02424; --footer_color: #898989; +}; + +@if $generate_default { + body { + @include theme; + } } diff --git a/data/themes/zenburn.scss b/data/themes/zenburn.scss index 5c64892..9eb4d11 100644 --- a/data/themes/zenburn.scss +++ b/data/themes/zenburn.scss @@ -1,3 +1,5 @@ +$generate_default: true !default; + @mixin theme { --background: #3f3f3f; --text_color: #efefef; @@ -43,4 +45,10 @@ --size_text_color: #efefef; --error_color: #d06565; --footer_color: #bfaf9f; +}; + +@if $generate_default { + body { + @include theme; + } } -- cgit v1.2.3 From a2211fa4726336ab480cf0af7d32853edc40daa6 Mon Sep 17 00:00:00 2001 From: Bao Trinh Date: Tue, 25 Jul 2023 19:03:05 -0500 Subject: Consolidate javascript and add comments --- data/style.scss | 21 ++++++++++++--------- 1 file changed, 12 insertions(+), 9 deletions(-) (limited to 'data') diff --git a/data/style.scss b/data/style.scss index 909dc6f..6c0d284 100644 --- a/data/style.scss +++ b/data/style.scss @@ -199,15 +199,6 @@ nav .theme li a:hover { color: var(--change_theme_link_color_hover); } -%active_theme_link { - font-weight: bold; - color: var(--switch_theme_active); -} - -body:not([data-theme]) nav .theme li[data-theme="default"] a { - @extend %active_theme_link; -} - p { margin: 0; padding: 0; @@ -572,9 +563,21 @@ th span.active span { } } +%active_theme_link { + font-weight: bold; + color: var(--switch_theme_active); +} + +// when no specific theme is applied, highlight the `default` theme button in +// the theme menu +body:not([data-theme]) nav .theme li[data-theme="default"] a { + @extend %active_theme_link; +} + @each $theme in $themes { body[data-theme="#{$theme}"] { @include theme($theme); + // highlight the currently active theme in the theme selection menu nav .theme li[data-theme="#{$theme}"] a { @extend %active_theme_link; } -- cgit v1.2.3