From 2ba3362bbd1d0a3f88f119b3d24d13ce209b3e2a Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Wed, 1 Jan 2025 06:23:02 +0000
Subject: [PATCH 1/8] Bump docker/setup-buildx-action from 2 to 3

Bumps [docker/setup-buildx-action](https://github.com/docker/setup-buildx-action) from 2 to 3.
- [Release notes](https://github.com/docker/setup-buildx-action/releases)
- [Commits](https://github.com/docker/setup-buildx-action/compare/v2...v3)

---
updated-dependencies:
- dependency-name: docker/setup-buildx-action
  dependency-type: direct:production
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 .github/workflows/container-images.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/container-images.yml b/.github/workflows/container-images.yml
index 924c07e6..172245fa 100644
--- a/.github/workflows/container-images.yml
+++ b/.github/workflows/container-images.yml
@@ -28,7 +28,7 @@ jobs:
           images: voc/voctoweb
       -
         name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v2
+        uses: docker/setup-buildx-action@v3
       -
         name: Login to GitHub Container Registry
         uses: docker/login-action@v2

From d1d8c668dacfda9c7e113da78e119080870674dd Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Wed, 1 Jan 2025 06:23:04 +0000
Subject: [PATCH 2/8] Bump docker/login-action from 2 to 3

Bumps [docker/login-action](https://github.com/docker/login-action) from 2 to 3.
- [Release notes](https://github.com/docker/login-action/releases)
- [Commits](https://github.com/docker/login-action/compare/v2...v3)

---
updated-dependencies:
- dependency-name: docker/login-action
  dependency-type: direct:production
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 .github/workflows/container-images.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/container-images.yml b/.github/workflows/container-images.yml
index 924c07e6..45e9af5d 100644
--- a/.github/workflows/container-images.yml
+++ b/.github/workflows/container-images.yml
@@ -31,7 +31,7 @@ jobs:
         uses: docker/setup-buildx-action@v2
       -
         name: Login to GitHub Container Registry
-        uses: docker/login-action@v2
+        uses: docker/login-action@v3
         with:
           registry: ghcr.io
           username: ${{ github.repository_owner }}

From f9f19ea305fbaecbb6b65e719394a929108722e0 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Wed, 1 Jan 2025 06:23:06 +0000
Subject: [PATCH 3/8] Bump docker/metadata-action from 4 to 5

Bumps [docker/metadata-action](https://github.com/docker/metadata-action) from 4 to 5.
- [Release notes](https://github.com/docker/metadata-action/releases)
- [Commits](https://github.com/docker/metadata-action/compare/v4...v5)

---
updated-dependencies:
- dependency-name: docker/metadata-action
  dependency-type: direct:production
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 .github/workflows/container-images.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/container-images.yml b/.github/workflows/container-images.yml
index 924c07e6..aca0427b 100644
--- a/.github/workflows/container-images.yml
+++ b/.github/workflows/container-images.yml
@@ -23,7 +23,7 @@ jobs:
       -
         name: Docker meta
         id: meta
-        uses: docker/metadata-action@v4
+        uses: docker/metadata-action@v5
         with:
           images: voc/voctoweb
       -

From 754411a03b987c2d9e073bd00c9df8ce47ab74eb Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Wed, 1 Jan 2025 06:23:10 +0000
Subject: [PATCH 4/8] Bump actions/checkout from 3 to 4

Bumps [actions/checkout](https://github.com/actions/checkout) from 3 to 4.
- [Release notes](https://github.com/actions/checkout/releases)
- [Changelog](https://github.com/actions/checkout/blob/main/CHANGELOG.md)
- [Commits](https://github.com/actions/checkout/compare/v3...v4)

---
updated-dependencies:
- dependency-name: actions/checkout
  dependency-type: direct:production
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 .github/workflows/ci.yml               | 4 ++--
 .github/workflows/container-images.yml | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 41d87107..e53a2907 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -36,7 +36,7 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Set up Ruby
         uses: ruby/setup-ruby@v1
@@ -73,7 +73,7 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Cleanup
         run: docker system prune --all --force --volumes
diff --git a/.github/workflows/container-images.yml b/.github/workflows/container-images.yml
index 924c07e6..07579041 100644
--- a/.github/workflows/container-images.yml
+++ b/.github/workflows/container-images.yml
@@ -16,7 +16,7 @@ jobs:
     steps:
       -
         name: Checkout code
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
       # -
       #   name: Set up QEMU
       #   uses: docker/setup-qemu-action@v1

From 37138b1c77e571aa9c87ee05f3032127da112981 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Wed, 1 Jan 2025 06:23:15 +0000
Subject: [PATCH 5/8] Bump actions/cache from 3.2.4 to 4.2.0

Bumps [actions/cache](https://github.com/actions/cache) from 3.2.4 to 4.2.0.
- [Release notes](https://github.com/actions/cache/releases)
- [Changelog](https://github.com/actions/cache/blob/main/RELEASES.md)
- [Commits](https://github.com/actions/cache/compare/v3.2.4...v4.2.0)

---
updated-dependencies:
- dependency-name: actions/cache
  dependency-type: direct:production
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 .github/workflows/ci.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 41d87107..a6acbb4a 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -49,7 +49,7 @@ jobs:
           cp config/database.yml.template config/database.yml
 
       - name: Cache dependencies
-        uses: actions/cache@v3.2.4
+        uses: actions/cache@v4.2.0
         with:
           path: vendor/bundle
           key: ${{ runner.os }}-gems-${{ hashFiles('**/Gemfile.lock') }}

From 768deb2821e7362f1ae1241699c8cbfc9fe697ed Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Wed, 1 Jan 2025 06:28:41 +0000
Subject: [PATCH 6/8] Bump pg from 1.5.8 to 1.5.9

Bumps [pg](https://github.com/ged/ruby-pg) from 1.5.8 to 1.5.9.
- [Changelog](https://github.com/ged/ruby-pg/blob/master/History.md)
- [Commits](https://github.com/ged/ruby-pg/compare/v1.5.8...v1.5.9)

---
updated-dependencies:
- dependency-name: pg
  dependency-type: direct:development
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 Gemfile.lock | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Gemfile.lock b/Gemfile.lock
index 1821b01b..cc8081af 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -323,7 +323,7 @@ GEM
     parser (3.3.5.0)
       ast (~> 2.4.1)
       racc
-    pg (1.5.8)
+    pg (1.5.9)
     pry (0.14.2)
       coderay (~> 1.1)
       method_source (~> 1.0)

From d27ad66ff1cb23bd50eaf62c1eac1df4c387868e Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Thu, 16 Jan 2025 23:28:43 +0000
Subject: [PATCH 7/8] Bump rexml from 3.3.8 to 3.3.9

Bumps [rexml](https://github.com/ruby/rexml) from 3.3.8 to 3.3.9.
- [Release notes](https://github.com/ruby/rexml/releases)
- [Changelog](https://github.com/ruby/rexml/blob/master/NEWS.md)
- [Commits](https://github.com/ruby/rexml/compare/v3.3.8...v3.3.9)

---
updated-dependencies:
- dependency-name: rexml
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 Gemfile.lock | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Gemfile.lock b/Gemfile.lock
index 1821b01b..735c7a32 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -409,7 +409,7 @@ GEM
       railties (>= 5.2)
     reverse_markdown (2.1.1)
       nokogiri
-    rexml (3.3.8)
+    rexml (3.3.9)
     rss (0.3.1)
       rexml
     rubocop (1.66.1)

From 7a52c88a68d8b1cfdb85935102bda978356c785c Mon Sep 17 00:00:00 2001
From: Qb <qb@qbit.moe>
Date: Sun, 12 Jan 2025 00:18:43 +0100
Subject: [PATCH 8/8] Implement Dark Theme

---
 app/assets/javascripts/application.js         |  1 +
 app/assets/javascripts/theme.js               | 10 +++
 .../stylesheets/frontend/base/_base.scss      |  4 +
 .../frontend/base/_breadcrumb.scss            |  8 +-
 .../stylesheets/frontend/base/_footer.scss    |  8 +-
 .../stylesheets/frontend/base/_navbar.scss    | 14 +--
 .../stylesheets/frontend/base/_theme.scss     | 89 +++++++++++++++++++
 .../stylesheets/frontend/lib/_variables.scss  | 12 +--
 .../stylesheets/frontend/pages/_browse.scss   |  6 +-
 .../stylesheets/frontend/pages/_list.scss     | 47 +++++-----
 .../stylesheets/frontend/pages/_show.scss     | 29 +++---
 .../stylesheets/frontend/pages/_start.scss    | 32 +++----
 .../frontend/shared/_eventpreview_meta.scss   | 21 +++--
 .../stylesheets/frontend/shared/_label.scss   | 12 ++-
 .../frontend/shared/_promoted.scss            |  5 +-
 app/assets/stylesheets/frontend/styles.scss   |  1 +
 app/views/frontend/conferences/show.html.haml | 25 +++---
 app/views/frontend/events/_event.html.haml    |  2 +-
 app/views/frontend/home/index.html.haml       | 16 ++--
 .../frontend/shared/_event_metadata.haml      |  6 +-
 app/views/frontend/shared/_event_thumb.haml   |  2 +-
 .../shared/_event_with_conference.html.haml   |  5 +-
 app/views/frontend/shared/_footer.haml        |  2 +-
 app/views/frontend/shared/_navbar.haml        | 12 ++-
 app/views/frontend/shared/_promoted.haml      |  2 +-
 25 files changed, 255 insertions(+), 116 deletions(-)
 create mode 100644 app/assets/javascripts/theme.js
 create mode 100644 app/assets/stylesheets/frontend/base/_theme.scss

diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index 75e25d3b..df62e817 100644
--- 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
new file mode 100644
index 00000000..972484cf
--- /dev/null
+++ 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);
\ No newline at end of file
diff --git a/app/assets/stylesheets/frontend/base/_base.scss b/app/assets/stylesheets/frontend/base/_base.scss
index ce2ef944..c3ac9875 100644
--- 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;
+}
\ No newline at end of file
diff --git a/app/assets/stylesheets/frontend/base/_breadcrumb.scss b/app/assets/stylesheets/frontend/base/_breadcrumb.scss
index 199b2851..fddc0732 100644
--- 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
index 6ecd4e2b..98db0e6c 100644
--- 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
index a27d7bf3..b304568c 100644
--- a/app/assets/stylesheets/frontend/base/_navbar.scss
+++ b/app/assets/stylesheets/frontend/base/_navbar.scss
@@ -24,14 +24,12 @@
   }
 
   .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 {
@@ -39,7 +37,7 @@
     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);
+}
\ No newline at end of file
diff --git a/app/assets/stylesheets/frontend/base/_theme.scss b/app/assets/stylesheets/frontend/base/_theme.scss
new file mode 100644
index 00000000..279d3357
--- /dev/null
+++ 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
index a2a7647c..ca1885fd 100644
--- 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
index 166eb832..2ed004dd 100644
--- 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
index 52e120a4..26774567 100644
--- 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,35 +27,34 @@ 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;
       }
     }
 
@@ -56,7 +62,7 @@ body.page-list {
       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;
       }
     }
 
diff --git a/app/assets/stylesheets/frontend/pages/_show.scss b/app/assets/stylesheets/frontend/pages/_show.scss
index a0bd0107..21e5b7ae 100644
--- a/app/assets/stylesheets/frontend/pages/_show.scss
+++ b/app/assets/stylesheets/frontend/pages/_show.scss
@@ -1,6 +1,6 @@
 body.page-show {
   h3 {
-    border-bottom: 1px solid #ccc;
+    border-bottom: 1px solid var(--border-divider);
     margin-top: 50px;
     margin-bottom: 12px;
   }
@@ -27,6 +27,7 @@ body.page-show {
       } 
       margin-left: $padding-small-horizontal;
       margin-top: -$padding-large-horizontal;
+      border-radius: .5em;
     }
   }
 
@@ -38,7 +39,7 @@ body.page-show {
     list-style: none;
     padding: $padding-small-vertical 0;
     text-align: center;
-    border-bottom: 1px solid $gray;
+    border-bottom: 1px solid var(--border-divider);
     font-size: 16px;
 
     li {
@@ -85,11 +86,11 @@ body.page-show {
         display: block;
         color: white;
 
-        background: $gray-light;
+        background-color: var(--neutral-500);
         text-decoration: none;
 
         &:hover {
-          background-color: $gray;
+          background-color: var(--neutral-600);
         }
 
         width: 48px;
@@ -113,8 +114,8 @@ body.page-show {
     padding: 5px;
     line-height: 130%;
 
-    background-color: $gray-lighter;
-    border: 1px solid #e3e3e3;
+    background-color: var(--surface-100);
+    border: 1px solid var(--border-500);
   }
 
   .downloads {
@@ -131,22 +132,20 @@ body.page-show {
       li > a {
         padding: 10px 20px;
 
-        background-color: $gray;
-        color: $gray-lighter;
+        background-color: var(--surface-300);
+        color: var(--text-muted);
 
         font-size: 16px;
       }
       li.active a {
-        background-color: $gray-lighter;
-        color: $gray-dark;
+        background-color: var(--surface-100);
+        color: var(--text-primary);
       }
     }
 
     .tab-content, .content {
-      background-color: $gray-lighter;
-      border-bottom: 1px solid #e3e3e3;
-      border-left: 1px solid #e3e3e3;
-      border-right: 1px solid #e3e3e3;
+      background-color: var(--surface-100);
+      border: 1px solid var(--border-300);
       padding: 10px;
 
       overflow: hidden;
@@ -197,7 +196,7 @@ body.page-show {
 
     .subtitle {
       h4 {
-        -webkit-hyphens: none;
+        hyphens: none;
       }
       .improve {
         display: block;
diff --git a/app/assets/stylesheets/frontend/pages/_start.scss b/app/assets/stylesheets/frontend/pages/_start.scss
index 27e3a569..ef08c79c 100644
--- a/app/assets/stylesheets/frontend/pages/_start.scss
+++ b/app/assets/stylesheets/frontend/pages/_start.scss
@@ -38,7 +38,7 @@ body.page-start {
 
     .tagline {
       text-align: center;
-      color: $gray-light;
+      color: var(--text-muted);
       font-size: 18px;
     }
   }
@@ -50,7 +50,6 @@ body.page-start {
 
     .btn-lg {
       margin: $padding-small-vertical $padding-small-horizontal;
-
       padding: 5px 25px;
 
       @media #{$xs-or-smaller} {
@@ -105,7 +104,7 @@ body.page-start {
       }
 
       .date {
-        color: $gray-light;
+        color: var(--text-muted);
         .icon {
           margin-right: 3px;
         }
@@ -113,14 +112,9 @@ body.page-start {
 
       // left/right view
       @media #{$sm-or-bigger} {
-        .event-preview {
+        .event-preview .thumbnail-badge-container {
+          height: 62px;
           width: 110px;
-          float: left;
-          margin: 0 12px 12px 0;
-          background-color: #333333;
-          img {
-            max-height: 62px;
-          }
         }
 
         .date {
@@ -144,7 +138,8 @@ body.page-start {
         padding: 6px;
 
         &:nth-child(odd) {
-          background-color: $gray-even-lighter;
+          background-color: var(--surface-100);
+          border-radius: .5em;
         }
 
         > a {
@@ -162,8 +157,9 @@ body.page-start {
 
     .conferences .conference {
       margin-bottom: 25px;
+
       h3 {
-        border-bottom: 1px solid #ccc;
+        border-bottom: 1px solid var(--border-divider);
       }
 
 
@@ -178,19 +174,15 @@ body.page-start {
 
       @media #{$md-or-bigger} {
         position: relative;
-        height: 375px;
+        height: 400px;
 
         &:nth-child(odd) {
-          background-color: $gray-even-lighter;
+          background-color: var(--surface-100);
+          border-radius: .5em;
         }
 
         a.more {
-          position: absolute;
-          bottom: 0;
-          left: 15px;
-          right: 0;
-
-          border-top: 1px solid #ccc;
+          border-top: 1px solid var(--border-divider);
           padding-top: 10px;
           display: block;
         }
diff --git a/app/assets/stylesheets/frontend/shared/_eventpreview_meta.scss b/app/assets/stylesheets/frontend/shared/_eventpreview_meta.scss
index badce9c3..7997f6fd 100644
--- a/app/assets/stylesheets/frontend/shared/_eventpreview_meta.scss
+++ b/app/assets/stylesheets/frontend/shared/_eventpreview_meta.scss
@@ -1,5 +1,10 @@
 .event-preview {
-  position: relative;
+  display: flex;
+  gap: 1em;
+
+  .caption {
+    flex-grow: 1;
+  }
 
   .metadata {
     text-align: left;
@@ -17,10 +22,9 @@
 
       padding: $padding-xs-vertical;
       padding-right: $padding-xs-horizontal;
-      color: $gray-dark;
       min-width: inherit;
 
-      color: lighten(#333333, 25%);
+      color: var(--text-muted);
 
       &.duration { display: none; }
 
@@ -32,12 +36,17 @@
 
   .thumbnail-badge-container {
     position: relative;
-    top: 0;
-    left: 0;
+    aspect-ratio: 16/9;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    
+    background-color: var(--neutral-700);
 
     img.video-thumbnail {
-      width: 100%;
+      width: auto;
       height: auto;
+      max-height: 100%;
       max-width: 100%;
       display: block;
     }
diff --git a/app/assets/stylesheets/frontend/shared/_label.scss b/app/assets/stylesheets/frontend/shared/_label.scss
index 151cde25..1a5bd185 100644
--- a/app/assets/stylesheets/frontend/shared/_label.scss
+++ b/app/assets/stylesheets/frontend/shared/_label.scss
@@ -1,4 +1,4 @@
-.label {
+a.label {
   display: inline-block;
 
   border-radius: $border-radius-base;
@@ -12,4 +12,14 @@
 
   margin-right: 2px;
   margin-bottom: $padding-small-vertical;
+
+  &.label-default {
+    background-color: var(--neutral-700);
+    /* white color here as the background is always dark */
+    color: white;
+
+    &:hover, &:focus, &:active {
+      background-color: var(--neutral-600);
+    }
+  }
 }
diff --git a/app/assets/stylesheets/frontend/shared/_promoted.scss b/app/assets/stylesheets/frontend/shared/_promoted.scss
index 1c47b738..c2f11899 100644
--- a/app/assets/stylesheets/frontend/shared/_promoted.scss
+++ b/app/assets/stylesheets/frontend/shared/_promoted.scss
@@ -72,7 +72,7 @@
         background: none;
         margin-bottom: 0;
         span {
-          color: #000;
+          color: var(--text-primary);
         }
       }
     }
@@ -113,8 +113,11 @@
 }
 
 .themed-banner {
+  /* Black fallback background */
+  background-color: #000;
   background-image: url('https://static.media.ccc.de/media/promoted_bg.png');
   background-position: center; 
+  
   .bx-wrapper .bx-viewport .bx-caption {
     font-size: 25px;
 
diff --git a/app/assets/stylesheets/frontend/styles.scss b/app/assets/stylesheets/frontend/styles.scss
index c9083bf4..1a545ad4 100644
--- a/app/assets/stylesheets/frontend/styles.scss
+++ b/app/assets/stylesheets/frontend/styles.scss
@@ -6,6 +6,7 @@
 
 // general page layout
 @import "base/typography";
+@import "base/theme";
 @import "base/base";
 @import "base/navbar";
 @import "base/feeds_dropdown";
diff --git a/app/views/frontend/conferences/show.html.haml b/app/views/frontend/conferences/show.html.haml
index 880f3519..95e922f1 100644
--- a/app/views/frontend/conferences/show.html.haml
+++ b/app/views/frontend/conferences/show.html.haml
@@ -6,21 +6,22 @@
 
 .container-fluid
   .events-header
-    .logo
-      %img{src: @conference.logo_url, alt: 'conference logo'}
-    %h1= @conference.title or @conference.acronym.gsub(/[\-_]/,' ')
-    -if @tag
-      %h2= @tag
+    .conference-title-container
+      %img.logo{src: @conference.logo_url, alt: 'conference logo'}
+      %div
+        %h1= @conference.title or @conference.acronym.gsub(/[\-_]/,' ')
+        -if @tag
+          %h2= @tag
+        - if @events.present?
+          Full playlist:
+          = link_to 'Video', playlist_conference_path(slug: @conference.first_slug), method: :get
+          - if @conference.audio_recordings?
+            \/
+            = link_to 'Audio', audio_playlist_conference_path(slug: @conference.first_slug), method: :get
 
-    - if @events.present?
-      Full playlist:
-      = link_to 'Video', playlist_conference_path(slug: @conference.first_slug), method: :get
-      - if @conference.audio_recordings?
-        \/
-        = link_to 'Audio', audio_playlist_conference_path(slug: @conference.first_slug), method: :get
 
+    
     - if @conference.description.present?
-      %br{ clear: 'all' }
       %br
       .description
         = @conference.description.html_safe
diff --git a/app/views/frontend/events/_event.html.haml b/app/views/frontend/events/_event.html.haml
index 2a6dfdad..2f27f179 100644
--- a/app/views/frontend/events/_event.html.haml
+++ b/app/views/frontend/events/_event.html.haml
@@ -1,4 +1,4 @@
 - cache([event.conference, event]) do
   .event-preview
     = render partial: 'frontend/shared/event_thumb', locals: { event: event }
-    = render partial: 'frontend/shared/event_metadata', locals: { event: event }
+    = render partial: 'frontend/shared/event_metadata', locals: { event: event, show_conference: false }
diff --git a/app/views/frontend/home/index.html.haml b/app/views/frontend/home/index.html.haml
index a2981c93..2d969902 100644
--- a/app/views/frontend/home/index.html.haml
+++ b/app/views/frontend/home/index.html.haml
@@ -38,11 +38,11 @@
           %span.icon.icon-clock-o
           Recent
 
-        %a.btn.btn-primary.btn-lg{role: 'button', href: browse_start_path}
+        %a.btn.btn-secondary.btn-lg{role: 'button', href: browse_start_path}
           %span.icon.icon-folder
           Browse
 
-        %a.btn.btn-primary.btn-lg{role: 'button', href: all_conferences_path}
+        %a.btn.btn-secondary.btn-lg{role: 'button', href: all_conferences_path}
           %span.icon.icon-th
           All Events
           
@@ -67,12 +67,12 @@
                     %li.event
                       .event-preview
                         = render partial: 'frontend/shared/event_thumb', locals: { event: event }
-
-                      %a.title{href: event_path(slug: event.slug), title: event.title.length > 55 ? event.title : ''}
-                        = truncate(event.title, length: 55, separator: ' ', omission: '…')
-                      .date
-                        %span.icon.icon-calendar-o{title: display_release_date_title(event)}
-                        = event.display_date
+                        .caption
+                          %a.title{href: event_path(slug: event.slug), title: event.title.length > 55 ? event.title : ''}
+                            = truncate(event.title, length: 55, separator: ' ', omission: '…')
+                          .date
+                            %span.icon.icon-calendar-o{title: display_release_date_title(event)}
+                            = event.display_date
 
 
               - if conference.events.count > Frontend::HomeController::EVENT_LIMIT
diff --git a/app/views/frontend/shared/_event_metadata.haml b/app/views/frontend/shared/_event_metadata.haml
index 2b4477c8..90e04f79 100644
--- a/app/views/frontend/shared/_event_metadata.haml
+++ b/app/views/frontend/shared/_event_metadata.haml
@@ -26,4 +26,8 @@
       %span.icon.icon-eye
       = event.view_count
     %li.persons
-      = render partial: 'frontend/shared/event_persons', locals: { persons: event.persons }
\ No newline at end of file
+      = render partial: 'frontend/shared/event_persons', locals: { persons: event.persons }
+    - if show_conference && event.conference.present?
+      .conference
+        %a{href: conference_path(acronym: event.conference.acronym)}
+          = event.conference.title
\ No newline at end of file
diff --git a/app/views/frontend/shared/_event_thumb.haml b/app/views/frontend/shared/_event_thumb.haml
index f374fe00..830933a4 100644
--- a/app/views/frontend/shared/_event_thumb.haml
+++ b/app/views/frontend/shared/_event_thumb.haml
@@ -1,4 +1,4 @@
-%a{href: event_path(slug: event.slug)}
+%a.thumbnail-link{href: event_path(slug: event.slug)}
   .thumbnail-badge-container
     %img.video-thumbnail{src: h(event.thumb_url), alt: h(event.title), loading: 'lazy'}
     - if event.duration > 0
diff --git a/app/views/frontend/shared/_event_with_conference.html.haml b/app/views/frontend/shared/_event_with_conference.html.haml
index b7ca83c3..67b1ea24 100644
--- a/app/views/frontend/shared/_event_with_conference.html.haml
+++ b/app/views/frontend/shared/_event_with_conference.html.haml
@@ -1,7 +1,4 @@
 - cache([event.conference, event], expires_in: 2.hours) do
   .event-preview.has-conference
     = render partial: 'frontend/shared/event_thumb', locals: { event: event }
-    = render partial: 'frontend/shared/event_metadata', locals: { event: event }
-    .conference
-      %a{href: conference_path(acronym: event.conference.acronym)}
-        = event.conference.title
+    = render partial: 'frontend/shared/event_metadata', locals: { event: event, show_conference: true }
diff --git a/app/views/frontend/shared/_footer.haml b/app/views/frontend/shared/_footer.haml
index 6ca8ac48..183197b1 100644
--- a/app/views/frontend/shared/_footer.haml
+++ b/app/views/frontend/shared/_footer.haml
@@ -1,4 +1,4 @@
-%footer
+%footer.dark
   by 
   %a.inverted{href: '//ccc.de'} Chaos Computer Club e.V
   ––
diff --git a/app/views/frontend/shared/_navbar.haml b/app/views/frontend/shared/_navbar.haml
index 9504b088..78b19d7d 100644
--- a/app/views/frontend/shared/_navbar.haml
+++ b/app/views/frontend/shared/_navbar.haml
@@ -1,4 +1,4 @@
-.navbar.navbar-default.navbar-fixed-top(role="navigation")
+.navbar.navbar-default.navbar-fixed-top.dark(role="navigation")
   .container-fluid
     .navbar-header
       %a.navbar-brand(href='/')
@@ -7,12 +7,18 @@
 
     - if content_for?(:navbar)
       = yield :navbar
+    
+    
 
     .nav.navbar-form.navbar-right.button-wrapper
       %a.form-control.btn.btn-default{href: '/about.html'}
         %span.icon.icon-info
+    
+    .nav.navbar-form.navbar-right.compact.button-wrapper
+      %a.form-control.btn.btn-default{onclick: 'toggleTheme()'}
+        %span.icon.icon-moon-o
 
-    .nav.navbar-form.navbar-right.dropdown
+    .nav.navbar-form.navbar-right.compact.dropdown
       %button#feedMenu.btn.btn-default.dropdown-toggle{"aria-expanded" => "true", "aria-haspopup" => "true", "data-toggle" => "dropdown", :type => "button"}
         %span.icon.icon-rss
       %div.dropdown-menu.feeds_dropdown{"aria-labelledby" => "feedMenu"}
@@ -30,7 +36,7 @@
 
 
 - breadcrumbs_trail do |parts, last|
-  .breadcrumb
+  .breadcrumb.dark
     %ol.container-fluid.breadcrumb
       %li
         %a.inverted{href: browse_start_path}
diff --git a/app/views/frontend/shared/_promoted.haml b/app/views/frontend/shared/_promoted.haml
index 1aa7645a..9edf8be8 100644
--- a/app/views/frontend/shared/_promoted.haml
+++ b/app/views/frontend/shared/_promoted.haml
@@ -1,4 +1,4 @@
-.promoted.themed-banner
+.promoted.dark.themed-banner
   .titlebar
   .slider
     - Frontend::Event.promoted(10).includes(:conference).each_with_index do |event, i|