use accent color for header by default (#7224)

* use accent color for header by default

* update etalon for surveyjs/survey-creator#4728

---------

Co-authored-by: OlgaLarina <olga.larina.dev@gmail.com>

src/defaultV2-theme/variables.scss

@@ -31,7 +31,7 @@ $foreground-light: var(--sjs-general-forecolor-light, var(--foreground-light, #9
 $foreground-dim: var(--sjs-general-dim-forecolor, rgba(0, 0, 0, 0.91));
 $foreground-dim-light: var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45));
 
-$header-backcolor: var(--sjs-header-backcolor);
+$header-backcolor: var(--sjs-header-backcolor, #{$primary});
 
 $border: var(--sjs-border-default, var(--border, #d6d6d6));
 $border-light: var(--sjs-border-light, var(--border-light, #eaeaea));

src/header.ts

@@ -78,7 +78,7 @@ export class Cover extends Base {
   private updateHeaderClasses(): void {
     this.headerClasses = new CssClassBuilder()
       .append("sv-header")
-      .append("sv-header__without-background", (!this.backgroundColor || this.backgroundColor === "trasparent") && !this.backgroundImage)
+      .append("sv-header__without-background", (this.backgroundColor === "trasparent") && !this.backgroundImage)
       .append("sv-header__overlap", this.overlapEnabled)
       .toString();
   }