diff --git a/gradle/changelog/fix_styles.yaml b/gradle/changelog/fix_styles.yaml
index e7c7a379ee..0f2ed565fe 100644
--- a/gradle/changelog/fix_styles.yaml
+++ b/gradle/changelog/fix_styles.yaml
@@ -1,2 +1,2 @@
 - type: fixed
-  description: Color for available plugins and namespace
+  description: Color for available plugins, namespace and code header
diff --git a/scm-ui/ui-styles/src/components/_main.scss b/scm-ui/ui-styles/src/components/_main.scss
index 18179ee020..30b11f276f 100644
--- a/scm-ui/ui-styles/src/components/_main.scss
+++ b/scm-ui/ui-styles/src/components/_main.scss
@@ -110,19 +110,6 @@ footer.footer {
   background-color: $blue-light;
 }
 
-// TODO
-/*
-.has-text-high-contrast-warning {
-  color: $warning;
-}
-.has-text-high-contrast-danger{
-  color: $high-contrast-danger-50;
-}
-.has-text-high-contrast-light-gray {
-  color: $high-contrast-light-gray;
-}*/
-
-
 // border and background colors
 .has-background-dark-75 {
   background-color: $dark-75;
@@ -836,3 +823,7 @@ form .field:not(.is-grouped) {
 .has-text-default {
   color: $text !important;
 }
+
+.has-background-accent {
+  background: $background-accent;
+}
diff --git a/scm-ui/ui-styles/src/highcontrast.scss b/scm-ui/ui-styles/src/highcontrast.scss
index 0b2c7e8488..49841fb2ee 100644
--- a/scm-ui/ui-styles/src/highcontrast.scss
+++ b/scm-ui/ui-styles/src/highcontrast.scss
@@ -30,6 +30,8 @@ $background: $grey-dark;
 $text: $white-ter;
 $text-strong: $white-bis;
 
+$background-accent: $grey-darker;
+
 $red: #e63453;
 // TODO check if we could replace red in commons,
 // without breaking the light mode
diff --git a/scm-ui/ui-styles/src/light.scss b/scm-ui/ui-styles/src/light.scss
index 914283b51b..40670c246e 100644
--- a/scm-ui/ui-styles/src/light.scss
+++ b/scm-ui/ui-styles/src/light.scss
@@ -28,6 +28,8 @@ $subtitle-color: #666;
 $warning-invert: #88550D;
 $button-disabled-opacity: .25;
 
+$background-accent: $white-ter;
+
 @import "utils/_post.scss";
 
 :root {
diff --git a/scm-ui/ui-webapp/src/repos/codeSection/components/CodeActionBar.tsx b/scm-ui/ui-webapp/src/repos/codeSection/components/CodeActionBar.tsx
index 0dafb693f1..acde30e8d8 100644
--- a/scm-ui/ui-webapp/src/repos/codeSection/components/CodeActionBar.tsx
+++ b/scm-ui/ui-webapp/src/repos/codeSection/components/CodeActionBar.tsx
@@ -30,10 +30,8 @@ import { useTranslation } from "react-i18next";
 import { Branch } from "@scm-manager/ui-types";
 
 const ActionBar = styled.div`
-  background-color: whitesmoke;
   border: 1px solid #dbdbdb;
   border-radius: 4px;
-  color: #363636;
   font-size: 1.25em;
   font-weight: 300;
   line-height: 1.25;
@@ -60,7 +58,7 @@ const CodeActionBar: FC<Props> = ({ selectedBranch, branches, onSelectBranch, sw
   const location = useLocation();
 
   return (
-    <ActionBar>
+    <ActionBar className={"has-background-accent"}>
       <FlexShrinkLevel
         left={
           branches &&