_header.scss

.header {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 20px;
  // Default
  background: $light-background-header;

  @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 {
    display: flex;
    flex-direction: row;
    align-items: center;

    @media #{$media-size-phone} {
      flex-direction: row-reverse;
    }
  }

  &__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 auto;
    width: 760px;
    max-width: 100%;
  }
}

.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  cursor: pointer;
}

.theme-toggler {
  fill: currentColor;
}

.not-selectable {
  user-select: none;
  -webkit-user-select: none;  
  -moz-user-select: none;    
  -ms-user-select: none;      
}