common/static/common/styles/_extension.sass

@@ -27,7 +27,7 @@
 
   .hero-overlay
     background-color: transparent
-    background-image: linear-gradient(0deg, var(--color-bg), hsla(213, 10%, 14%, 0))
+    background-image: linear-gradient(0deg, hsl(213, 10%, 12%), hsla(213, 10%, 14%, 0)) // --color-bg theme dark
 
   &.extension-review
     --hero-min-height: 21.0rem

common/static/common/styles/_hero.sass

@@ -6,6 +6,8 @@
     --hero-max-height: 0
     --hero-min-height: 24.0rem
     background: transparent
+    color: var(--color-text)
+    text-shadow: none
 
     .hero-content
       margin-top: initial

common/static/common/styles/_list.sass

@@ -12,7 +12,7 @@
 
 .list-filters
   +box-card
-  background-color: var(--color-bg-tertiary)
+  background-color: var(--color-bg-primary)
   +padding(3)
 
   h3

common/static/common/styles/main.sass

@@ -9,6 +9,7 @@ $container-width: map-get($container-max-widths, 'xl')
 
 /* Web Assets. */
 @import '../../../../assets_shared/src/styles/main.sass'
+@import '../../../../assets_shared/src/styles/_theme_system.sass'
 
 /* Extension Platform specific styling. */
 @import '_mixins.sass'

common/templates/common/base.html

@@ -107,6 +107,9 @@
           </ul>
 
           <ul class="nav-global-links-right">
+            <li>
+              <button class="js-toggle-theme-btn px-2"><i class="js-toggle-theme-btn-icon i-adjust"></i></button>
+            </li>
             <li>
               <search>
                 <form action="{% url "extensions:search" %}" method="GET" class="navbar-search">

ratings/static/ratings/styles/_stars.sass

@@ -1,5 +1,5 @@
 \:root
-  --stars-bg: hsla(213, 40%, 100%, .2)
+  --stars-bg: var(--color-bg-secondary)
   --stars-bg-highlight: hsl(42, 86%, 48%)
   --stars-bg-hover: hsl(42, 86%, 54%)