New version of hello-friend-ng-clone

themes/hello-friend-ng-clone/assets/scss/_header.scss

@@ -1,13 +1,26 @@
 .header {
-  background: #fafafa;
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
   padding: 20px;
+  // Default
+  background: $light-background-header;
 
-  .dark-theme & {
-    background: #252627;
+  @media (prefers-color-scheme: dark) {
+    background: $dark-background-header;
+  }
+
+  @media (prefers-color-scheme: light) {
+    background: $light-background-header;
+  }
+
+  [data-theme=dark] & {
+    background: $dark-background-header;
+  }
+
+  [data-theme=light] & {
+    background: $light-background-header;
   }
 
   &__right {
@@ -42,7 +55,7 @@
   fill: currentColor;
 }
 
-.unselectable {
+.not-selectable {
   user-select: none;
   -webkit-user-select: none;  
   -moz-user-select: none;