Implement Dark Theme

voc · Jan 17, 2025 · 7a52c88 · 7a52c88
1 parent 23beb18
commit 7a52c88
Show file tree

Hide file tree

Showing 25 changed files with 255 additions and 116 deletions.
diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
@@ -20,6 +20,7 @@
 //= require handlebars.min-latest
 //= require jquery.bxslider-v4.2.1d-ssfrontend
 //= require slider
+//= require theme
 //= require feed_toggle
 //= require mastodon-share
 

diff --git a/app/assets/javascripts/theme.js b/app/assets/javascripts/theme.js
@@ -0,0 +1,10 @@
+let currentTheme = localStorage.getItem('theme') || 'light';
+
+function toggleTheme(theme) {
+    const newTheme = theme || (currentTheme === 'light' ? 'dark' : 'light');
+    localStorage.setItem('theme', newTheme);
+    document.documentElement.classList.toggle('dark', newTheme === 'dark');
+    currentTheme = newTheme;
+}
+
+toggleTheme(currentTheme);
diff --git a/app/assets/stylesheets/frontend/base/_base.scss b/app/assets/stylesheets/frontend/base/_base.scss
@@ -29,3 +29,7 @@ body {
 .btn-secondary {
   @include button-variant(white, $gray, $gray-dark);
 }
+
+.alert {
+  border-radius: .5em;
+}
diff --git a/app/assets/stylesheets/frontend/base/_breadcrumb.scss b/app/assets/stylesheets/frontend/base/_breadcrumb.scss
@@ -1,5 +1,5 @@
 .breadcrumb {
-  background-color: $gray;
+  background-color: var(--surface-300);
   font-size: 16px;
   padding: 0;
   margin-bottom: 0;
@@ -16,9 +16,13 @@
 
     .icon {
       font-size: 9px;
-      color: #eee;
+      color: var(--text-secondary);
       padding: 0 3px;
     }
+
+    a {
+      color: var(--text-primary);
+    }
   }
 
   > .active {

diff --git a/app/assets/stylesheets/frontend/base/_footer.scss b/app/assets/stylesheets/frontend/base/_footer.scss
@@ -1,7 +1,11 @@
 footer {
   padding: 0.7em;
   margin-top: 2em;
-  color: $gray-light;
-  background-color: $gray-dark;
+  color: var(--text-secondary);
+  background-color: var(--surface-200);
   text-align: center;
+
+  a:any-link {
+    color: var(--text-primary);
+  }
 }
diff --git a/app/assets/stylesheets/frontend/base/_navbar.scss b/app/assets/stylesheets/frontend/base/_navbar.scss
@@ -24,22 +24,20 @@
   }
 
   .btn.btn-default {
+    /* the button is always white, so no theme-dependent color is needed here */
+    color: var(--neutral-800);
+
     padding: 0.2em;
     height: 1.8em;
     max-width: 2em;
-    &:hover, &:focus, &:active {
-      color: $brand-primary;
-      background-color: #fff;
-      border-color: #fff;
-    }
   }
 
   .navbar-form {
     padding-left: 0.2em;
     margin-top: 0.8em;
     margin-bottom: 0.8em;
 
-    &.dropdown {
+    &.compact {
       padding-right: 0.0em;
     }
   }
@@ -55,3 +53,7 @@
     display: inline-block;
   }
 }
+
+.navbar-default {
+  background-color: var(--surface-200);
+}
diff --git a/app/assets/stylesheets/frontend/base/_theme.scss b/app/assets/stylesheets/frontend/base/_theme.scss
@@ -0,0 +1,89 @@
+:root {
+    --neutral-950: #0a0a0a;
+    --neutral-900: #171717;
+    --neutral-800: #262626;
+    --neutral-700: #404040;
+    --neutral-600: #525252;
+    --neutral-500: #737373;
+    --neutral-400: #a3a3a3;
+    --neutral-300: #d4d4d4;
+    --neutral-200: #e5e5e5;
+    --neutral-100: #f5f5f5;
+    --neutral-50: #fafafa;
+
+    --indigo-950: #1e1b4b;
+    --indigo-900: #312e81;
+    --indigo-800: #3730a3;
+    --indigo-700: #4338ca;
+    --indigo-600: #4f46e5;
+    --indigo-500: #6366f1;
+    --indigo-400: #818cf8;
+}
+
+html {
+    --primary-100: var(--indigo-700);
+    --primary-200: var(--indigo-600);
+    --primary-300: var(--indigo-500);
+    --primary-400: var(--indigo-400);
+
+    --surface-50: var(--neutral-50);
+    --surface-100: var(--neutral-100);
+    --surface-200: var(--neutral-200);
+    --surface-300: var(--neutral-300);
+    --surface-400: var(--neutral-400);
+    --surface-500: var(--neutral-500);
+
+
+    --text-primary: rgb(0, 0, 0);
+    --text-secondary: rgba(0, 0, 0, 0.80);
+    --text-muted: rgba(0, 0, 0, 0.65);
+    --text-link: var(--primary-400);
+    --text-visited: var(--primary-300);
+    --text-heading: var(--text-secondary);
+
+    --border-50: var(--surface-50);
+    --border-100: var(--surface-100);
+    --border-200: var(--surface-200);
+    --border-300: var(--surface-300);
+    --border-400: var(--surface-400);
+    --border-500: var(--surface-500);
+    --border-divider: var(--text-secondary);
+}
+
+.dark {
+    --primary-100: var(--indigo-700);
+    --primary-200: var(--indigo-600);
+    --primary-300: var(--indigo-500);
+    --primary-400: var(--indigo-400);
+
+    --surface-50: var(--neutral-950);
+    --surface-100: var(--neutral-900);
+    --surface-200: var(--neutral-800);
+    --surface-300: var(--neutral-700);
+    --surface-400: var(--neutral-600);
+    --surface-400: var(--neutral-500);
+
+    --text-primary: rgb(255, 255, 255);
+    --text-secondary: rgba(255, 255, 255, 0.80);
+    --text-muted: rgba(255, 255, 255, 0.65);
+}
+
+body {
+    background-color: var(--surface-50);
+    color: var(--text-primary);
+}
+
+a:link { color: var(--text-link); }
+a:visited { color: var(--text-visited); }
+
+h1, h2, h3, h4, h5, h6 {
+    color: var(--text-heading);
+}
+
+/* we don't want link colors to apply to button style links */
+a.btn {
+    color: var(--text-primary);
+}
+.btn.btn-primary, .btn.btn-secondary {
+    color: white;
+}
diff --git a/app/assets/stylesheets/frontend/lib/_variables.scss b/app/assets/stylesheets/frontend/lib/_variables.scss
@@ -412,13 +412,13 @@ $nav-link-hover-bg:                         #fff;
 // $nav-open-link-hover-color:                 #fff
 
 //== Tabs
-$nav-tabs-border-color:                     #e3e3e3;
+$nav-tabs-border-color:                     none;
 
-// $nav-tabs-link-hover-border-color:          $gray-lighter
+$nav-tabs-link-hover-border-color:          var(--border-500);
 
 // $nav-tabs-active-link-hover-bg:             $body-bg
-// $nav-tabs-active-link-hover-color:          $gray
-// $nav-tabs-active-link-hover-border-color:   #ddd
+$nav-tabs-active-link-hover-color:          var(--text-primary);
+$nav-tabs-active-link-hover-border-color:   var(--border-300);
 
 // $nav-tabs-justified-link-border-color:            #ddd
 // $nav-tabs-justified-active-link-border-color:     $body-bg
@@ -729,8 +729,8 @@ $thumbnail-border-radius:     $border-radius-base;
 //
 //##
 
-// $well-bg:                     #f5f5f5
-// $well-border:                 darken($well-bg, 7%)
+$well-bg:                     var(--surface-100);
+$well-border:                 var(--border-300);
 
 //== Badges
 //

diff --git a/app/assets/stylesheets/frontend/pages/_browse.scss b/app/assets/stylesheets/frontend/pages/_browse.scss
@@ -17,8 +17,8 @@ body.page-browse {
     }
 
     &.folder {
-      background-color: $brand-primary;
-      color: white;
+      background-color: var(--primary-200);
+      color: var(--text-primary);
 
       .header {
         margin-bottom: $padding-large-vertical;
@@ -30,7 +30,7 @@ body.page-browse {
       }
 
       &:hover, &:focus, &:active {
-        background-color: $gray-dark;
+        background-color: var(--primary-100);
       }
 
       .caption {

diff --git a/app/assets/stylesheets/frontend/pages/_list.scss b/app/assets/stylesheets/frontend/pages/_list.scss
@@ -4,13 +4,20 @@ body.page-list {
     display: table-cell; 
     vertical-align: middle;
 
-    img {
-      float: left;
+    .conference-title-container {
+      display: flex;
+      gap: 1em;
+    }
+
+    .logo {
+      box-sizing: content-box;
+      background: white;
+      padding: .5em;
+      border-radius: .5em;
+      margin-top: .5em;
+
       max-height: 160px;
       max-width: 300px;
-
-      margin-right: $padding-small-horizontal;
-      margin-top: 16px;
     }
 
     #sorting {
@@ -20,43 +27,42 @@ body.page-list {
   }
 
   .event-preview {
-    margin: 16px 0;
-    display: block;
-    clear: both;
     min-height: 120px;
-    background-color: $gray-lightest;
-    position: relative;
+
+    margin: .5em 0;
+    padding: .5em;
+    border-radius: .5em;
+
+    clear: both;
+    background-color: var(--surface-100);
 
     &:nth-child(odd) {
-      background-color: #ffffff;
+      background-color: var(--surface-50);
     }
 
     &:hover {
-      background-color: $gray-even-lighter;
+      background-color: var(--surface-200);
     }
 
     .thumbnail-badge-container {
-      float: left;
       height: 117px;
       width: 208px;
 
-      background-color: $gray-dark;
-      display: flex;
+      /* neutral background here, not depending on theme */
       align-items: center;
       justify-content: center;
 
       img.video-thumbnail {
         width: auto;
         height: 100%;
-        display: block;
       }
     }
 
     .conference {
       float: right;
 
       &, a {
-        color: lighten(#333333, 25%);
+        color: var(--text-muted);
       }
     }
 
@@ -69,15 +75,12 @@ body.page-list {
       margin-top: 4px;
     }
 
-    color: black;
-
     .caption {
-      margin-left: 208px;
-      padding-left: $padding-large-horizontal;
+      flex-grow: 1;
+
       h3 {
         margin-top: 0;
         padding-top: 3px;
-        color: black;
       }
     }