diff --git a/app/lib/frontend/templates/views/shared/layout.dart b/app/lib/frontend/templates/views/shared/layout.dart
index e410ac3c40..0e2a210023 100644
--- a/app/lib/frontend/templates/views/shared/layout.dart
+++ b/app/lib/frontend/templates/views/shared/layout.dart
@@ -241,7 +241,7 @@ d.Node pageLayoutNode({
             ),
             if (searchBanner != null)
               d.div(
-                classes: ['_banner-bg'],
+                classes: ['_banner-bg', 'pub-dark-bg'],
                 child: d.div(
                   classes: ['container', if (isLanding) 'home-banner'],
                   children: [
@@ -343,7 +343,7 @@ d.Node _siteFooterNode({
 
   return d.element(
     'footer',
-    classes: ['site-footer'],
+    classes: ['site-footer', 'pub-dark-bg'],
     children: [
       link('${urls.dartSiteRoot}/', 'Dart language', sep: false),
       if (moderationNode != null) moderationNode,
diff --git a/app/lib/frontend/templates/views/shared/site_header.dart b/app/lib/frontend/templates/views/shared/site_header.dart
index 0c44ee1a7b..a88577b207 100644
--- a/app/lib/frontend/templates/views/shared/site_header.dart
+++ b/app/lib/frontend/templates/views/shared/site_header.dart
@@ -18,7 +18,7 @@ d.Node siteHeaderNode({
   required SearchForm? searchForm,
 }) {
   return d.div(
-    classes: ['site-header'],
+    classes: ['site-header', 'pub-dark-bg'],
     children: [
       d.button(classes: ['hamburger'], ariaLabel: 'menu toggle'),
       if (pageType != PageType.landing)
diff --git a/pkg/web_css/lib/src/_base.scss b/pkg/web_css/lib/src/_base.scss
index 688d51cea3..b224e75e60 100644
--- a/pkg/web_css/lib/src/_base.scss
+++ b/pkg/web_css/lib/src/_base.scss
@@ -126,6 +126,18 @@ a {
   @include variables.brightness-on-hover;
 }
 
+// Sections with a permanently dark background (header, footer, banner) use
+// brightness(120%) on hover in both themes, overriding the light-mode default.
+.light-theme .pub-dark-bg a:hover {
+  filter: brightness(120%);
+}
+
+// Links directly wrapping a monochrome icon rely on the icon's opacity-based
+// hover feedback; suppress the brightness filter to avoid stacking effects.
+a:has(> .pub-monochrome-icon):hover {
+  filter: none;
+}
+
 main {
   min-height: calc(100vh - 130px); // top nav (50) + footer (80)
   margin-bottom: 32px;
diff --git a/pkg/web_css/lib/src/_site_header.scss b/pkg/web_css/lib/src/_site_header.scss
index 9ef89e6327..3c3757c233 100644
--- a/pkg/web_css/lib/src/_site_header.scss
+++ b/pkg/web_css/lib/src/_site_header.scss
@@ -175,7 +175,8 @@
     opacity: 1.0;
 
     &:hover {
-      opacity: 0.8;
+      // The header has a dark background; brighten on hover instead of dimming.
+      filter: brightness(120%);
     }
   }