Theme picker fixes and improvements to dark mode styling

bridgetownrb · Sep 21, 2023 · cc21978 · cc21978
1 parent c8c49cf
commit cc21978
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 41 deletions.
diff --git a/bridgetown-website/Gemfile.lock b/bridgetown-website/Gemfile.lock
@@ -1,13 +1,13 @@
 PATH
   remote: ../bridgetown-builder
   specs:
-    bridgetown-builder (1.3.0)
-      bridgetown-core (= 1.3.0)
+    bridgetown-builder (1.3.1)
+      bridgetown-core (= 1.3.1)
 
 PATH
   remote: ../bridgetown-core
   specs:
-    bridgetown-core (1.3.0)
+    bridgetown-core (1.3.1)
       activemodel (>= 6.0, < 8.0)
       activesupport (>= 6.0, < 8.0)
       addressable (~> 2.4)
@@ -33,16 +33,16 @@ PATH
 PATH
   remote: ../bridgetown-paginate
   specs:
-    bridgetown-paginate (1.3.0)
-      bridgetown-core (= 1.3.0)
+    bridgetown-paginate (1.3.1)
+      bridgetown-core (= 1.3.1)
 
 PATH
   remote: ../bridgetown
   specs:
-    bridgetown (1.3.0)
-      bridgetown-builder (= 1.3.0)
-      bridgetown-core (= 1.3.0)
-      bridgetown-paginate (= 1.3.0)
+    bridgetown (1.3.1)
+      bridgetown-builder (= 1.3.1)
+      bridgetown-core (= 1.3.1)
+      bridgetown-paginate (= 1.3.1)
 
 GEM
   remote: https://rubygems.org/

diff --git a/bridgetown-website/config/ruby2js.rb b/bridgetown-website/config/ruby2js.rb
@@ -1,6 +1,5 @@
 preset
 
 filter :camelCase
-filter :lit
 
 eslevel 2020
diff --git a/bridgetown-website/frontend/javascript/theme_picker.js.rb b/bridgetown-website/frontend/javascript/theme_picker.js.rb
@@ -5,35 +5,35 @@ class ThemePicker < HTMLElement
   DARK = "dark"
   DEFAULT = "default"
 
-  def options_icons()
+  def options_icons
     @_options_icons ||= {
-      LIGHT => "sun",
-      DARK => "moon",
-      DEFAULT => media_prefers_color_scheme_dark() ? "moon" : "sun"
+      LIGHT   => "sun",
+      DARK    => "moon",
+      DEFAULT => media_prefers_color_scheme_dark ? "moon" : "sun",
     }
   end
 
-  def media_prefers_color_scheme_dark()
-    window.matchMedia("(prefers-color-scheme: #{ DARK })").matches
+  def media_prefers_color_scheme_dark
+    window.matchMedia("(prefers-color-scheme: #{DARK})").matches
   end
 
   def build_template(option_name)
     <<~COMPONENT
       <sl-dropdown>
         <sl-button slot="trigger" caret size="small" outline>
-          <sl-icon id="dropdown-button-icon" name="#{ options_icons()[option_name] }" label="Choose color theme"></sl-icon>
+          <sl-icon id="dropdown-button-icon" name="#{options_icons[option_name]}" label="Choose color theme"></sl-icon>
         </sl-button>
 
         <sl-menu>
           #{
-            Object.entries(options_icons()).map do |entry|
+            Object.entries(options_icons).map do |entry|
               option, icon = entry
 
               <<~MENU_ITEM
-                #{ option == DEFAULT ? "<sl-divider></sl-divider>" : "" }
-                <sl-menu-item #{ "checked" if option_name == option } value="#{ option }">
-                  #{ option }
-                  <sl-icon slot="prefix" name="#{ icon }"></sl-icon>
+                #{option == DEFAULT ? "<sl-divider></sl-divider>" : ""}
+                <sl-menu-item #{"checked" if option_name == option} value="#{option}">
+                  #{option}
+                  <sl-icon slot="prefix" name="#{icon}"></sl-icon>
                 </sl-menu-item>
               MENU_ITEM
             end.join("")
@@ -43,16 +43,16 @@ def build_template(option_name)
     COMPONENT
   end
 
-  def initialize()
+  def initialize
     super()
 
     option_name = local_storage.get_item(THEME_STORAGE_KEY)
 
-    unless option_name
-      if self.media_prefers_color_scheme_dark()
-        option_name = DEFAULT
+    option_name ||= begin # fixes Ruby2JS issue # rubocop:disable Style/RedundantBegin
+      if media_prefers_color_scheme_dark
+        DEFAULT
       else
-        option_name = LIGHT
+        LIGHT
       end
     end
 
@@ -94,11 +94,11 @@ def on_theme_toggle(option_name)
 
     set_theme_classes(option_name)
 
-    @dropdown_button_icon.set_attribute("name", options_icons()[option_name])
+    @dropdown_button_icon.set_attribute("name", options_icons[option_name])
   end
 
   def set_theme_classes(option_name)
-    if option_name == DARK || (option_name == DEFAULT && self.media_prefers_color_scheme_dark())
+    if option_name == DARK || (option_name == DEFAULT && media_prefers_color_scheme_dark)
       document.document_element.class_list.add("theme-dark", "sl-theme-dark")
       search_results = document.query_selector("bridgetown-search-results")
       search_results.set_attribute("theme", "dark") if search_results

diff --git a/bridgetown-website/frontend/styles/global.css b/bridgetown-website/frontend/styles/global.css
@@ -23,12 +23,12 @@
   --color-syntax-fern-green: #2f772b;
   --color-syntax-dark-beige: #8a7f6e;
   --color-syntax-dark-green: #101916;
-  --color-syntax-dark-red: #923538;
-  --color-syntax-beige: #8A786E;
-  --color-syntax-charcoal: #67717E;
+  --color-syntax-dark-red: #b44e51;
+  --color-syntax-beige: #b2998c;
+  --color-syntax-charcoal: #818e9e;
   --color-syntax-steel-teal: #568684;
   --color-syntax-mid-blue: #4b83d4;
-  --color-syntax-rose-vale: #b25658;
+  --color-syntax-rose-vale: #ce6163;
 
   --body-background: white;
   --body-color: var(--color-dark-gray);

diff --git a/bridgetown-website/frontend/styles/theme-dark.css b/bridgetown-website/frontend/styles/theme-dark.css
@@ -17,10 +17,10 @@
   & h3,
   & h4,
   & h5 {
-    color: var(--color-light-gray);
+    color: var(--color-lighter-green);
 
     &.colorful {
-      color: var(--color-light-green);
+      color: var(--color-brick);
     }
   }
 
@@ -42,7 +42,7 @@
   }
 
   & .info-grid q {
-    color: var(--color-orange);
+    color: var(--color-wintermint);
   }
 
   & div.highlight {
@@ -84,7 +84,7 @@
     color: var(--color-syntax-dark-red);
   }
 
-  & .highlight .k {
+  & .highlight :is(.k, .mi) {
     color: var(--color-syntax-light-beige);
   }
 
@@ -110,8 +110,7 @@
     color: var(--color-syntax-steel-teal);
   }
 
-  & .highlight .c,
-  & .highlight .c1 {
+  & .highlight :is(.c, .c1, .nx) {
     color: var(--color-syntax-charcoal);
   }
 
@@ -140,7 +139,7 @@
   }
 
   & .highlight .nn {
-    color: var(--color-dark-brick);
+    color: var(--color-syntax-dark-red);
   }
 
   & .highlight .no {
@@ -163,7 +162,7 @@
     color: var(--color-syntax-steel-teal);
   }
 
-  & .highlight .gs {
+  & .highlight :is(.gs, .kd) {
     color: var(--color-syntax-mid-blue);
   }
 
@@ -202,4 +201,8 @@
       background-color: var(--sl-color-primary-600);
     }
   }
+
+  & table.settings p.default code {
+    color: var(--color-light-orange);
+  }
 }