diff --git a/material.angular.io/src/app/shared/theme-picker/theme-picker.scss b/material.angular.io/src/app/shared/theme-picker/theme-picker.scss
index 5f015ebf3ab3..17a64f9cec41 100644
--- a/material.angular.io/src/app/shared/theme-picker/theme-picker.scss
+++ b/material.angular.io/src/app/shared/theme-picker/theme-picker.scss
@@ -1,5 +1,16 @@
+@use '@angular/material' as mat;
+
 button.docs-theme-picker-trigger {
   color: inherit;
+
+  &.mat-mdc-icon-button {
+    @include mat.icon-button-overrides(
+      (
+        state-layer-color: var(--mat-sys-primary),
+        ripple-color: color-mix(in srgb, var(--mat-sys-primary) 10%, transparent),
+      )
+    );
+  }
 }
 
 .docs-theme-picker-menu {