Materia-theme: -dark-background in new style

Created on 5 Apr 2021 · 8Comments · Source: nana-4/materia-theme

Dear developers,
Till the last time, in src/_colors.scss, I used to modify -dark-background to another number.
Now, the files has been splitted, and I can't find how to change my theme accordingly. I have changed the pallet and surface-z0 in src/_theme-color.scss. But what should I change for -dark-background?

I am in gnome 40, fedora 34 beta.

This is my previous setup in old format: Any help is appreciated.

// When color definition differs for dark and light variant,
// it gets @if ed depending on $variant

@import 'color-palette';

@function gtkalpha($color, $alpha) {
  @return unquote("alpha(#{$color}, #{$alpha})");
}

// Determine whether the color has alpha.
@function has-alpha($color) {
  @return if(alpha($color) < 1, true, false);
}

// Determine whether the color is "light" or "dark".
@function tone($color) {
  // Calculate color brightness as per https://www.w3.org/TR/AERT/#color-contrast
  $brightness: (red($color) * 299 + green($color) * 587 + blue($color) * 114) / 1000;

  @if $brightness >= 128 {
    @return "light";
  } @else {
    @return "dark";
  }
}

$on-light: #000;
$on-dark: #fff;

// Determine whether to use dark or light color on top of given color
// to meet accessibility standards for contrast.
@function on($color) {
  $contrast-color: if(tone($color) == "dark", $on-dark, $on-light);

  @if saturation($color) > 50% or alpha($color) < 1 {
    @return $contrast-color;
  } @else {
    @return rgba($contrast-color, .87);
  }
}

// Determine the strength of highlight on top of given color.
@function highlight($color) {
  @if lightness($color) >= 80% {
    @return rgba(white, .4);
  } @else if lightness($color) >= 40% {
    @return rgba(white, .2);
  } @else {
    @return rgba(white, .1);
  }
}

// Make translucent color opaque by blending with the background color.
@function opacify($color, $bg) {
  @return mix(change-color($color, $alpha: 1), $bg, alpha($color) * 100%);
}

// Set the accessible opacity for the overlay depending on the given color.
@function overlay($state, $color, $background: transparent, $opacity-modifier: 0) {
  @if saturation($color) > 50% or saturation($background) > 50% {
    $opacity-modifier: .04;
  }

  $opacity: ();

  @if $state == "hover" {
    $opacity: .08 + $opacity-modifier;
  } @else if $state == "hover-alt" {
    $opacity: .04 + $opacity-modifier;
  } @else if $state == "focus" {
    $opacity: .08 + $opacity-modifier;
  } @else if $state == "pressed" {
    $opacity: .12 + $opacity-modifier;
  } @else if $state == "activated" {
    $opacity: .12 + $opacity-modifier;
  } @else if $state == "selected" {
    @return rgba($color, .24);
  } @else {
    @error "Invalid type: '#{$state}'";
  }

  @return mix(rgba($color, 1), $background, $opacity * 100%);
}

// Private variables for dark background colors
$-dark-background: #37474F;
$-dark-surface-1dp: mix(white, $-dark-background, 5%);
$-dark-surface-4dp: mix(white, $-dark-background, 9%);
$-dark-surface-8dp: mix(white, $-dark-background, 12%);
$-dark-surface-switch: mix(white, $-dark-background, 60%);

//
// Main colors
//

$background: $-dark-background;
$base: $-dark-background; // for views
$base-alt: #fafafa;
$surface: #fff;
$switch-surface: #fff; // Special case for switches
$on-surface: on($surface);

$primary-on-light: #1A73E8;
$primary-on-dark: #AEC4C0;
$primary: $primary-on-dark;
$on-primary: on($primary);

$error-on-light: #d93025;
$error-on-dark: #f28b82;
$error: $error-on-light;
$on-error: on($error);

$warning-on-light: #f4b400;
$warning-on-dark: #fdd633;
$warning: $warning-on-light;
$on-warning: on($warning);

$success-on-light: #0f9d58;
$success-on-dark: #81c995;
$success: $success-on-light;
$on-success: on($success);

$visited-on-light: $purple-500;
$visited-on-dark: $purple-200;
$visited: $visited-on-light;
$on-visited: on($visited);

$os-background: $-dark-background;
$on-os-background: on($os-background);

$tooltip: rgba(#616161, .9);
$on-tooltip: on($tooltip);

$scrim: rgba(black, .6);
$on-scrim: on($scrim);

$scrim-alt: rgba(black, .3);
$on-scrim-alt: on($scrim-alt);

$panel: #142730;
$on-panel: on($panel);

// for Unity panel which doesn't allow translucent colors
$panel-solid: $panel;
$on-panel-solid: on($panel-solid);

$titlebar: #383838;
$titlebar-backdrop: #303030;
$on-titlebar: on($titlebar);

$titlebar-indicator: currentcolor;

@if $variant == "dark" {
  $background: $-dark-background;
  $base: $-dark-surface-1dp;
  $base-alt: $-dark-surface-1dp;
  $surface: #202f36;
  $switch-surface: $-dark-surface-switch;
  $on-surface: on($surface);

  $primary: $primary-on-dark;
  $on-primary: on($primary);

  $error: $error-on-dark;
  $on-error: on($error);

  $warning: $warning-on-dark;
  $on-warning: on($warning);

  $success: $success-on-dark;
  $on-success: on($success);

  $visited: $visited-on-dark;
  $on-visited: on($visited);

  $titlebar: #202f36;
  $titlebar-backdrop: $-dark-background;
  $on-titlebar: on($titlebar);
}

@if $topbar == "light" {
  $panel: $scrim;
  $on-panel: on($panel);

  $panel-solid: #ccc;
  $on-panel-solid: on($panel-solid);

  $titlebar: #e0e0e0;
  $titlebar-backdrop: #d6d6d6;
  $on-titlebar: on($titlebar);

  $titlebar-indicator: $primary;
}

//
// Overlay state colors
//

$overlay-selected: rgba($primary, .24);

//
// For “on” colors
//

@function primary($color) {
  @return if(tone($color) == "dark", $primary-on-light, $primary-on-dark);
}

@function error($color) {
  @return if(tone($color) == "dark", $error-on-light, $error-on-dark);
}

@function hint($color) {
  @return rgba($color, if(has-alpha($color), .6, .7));
}

@function disabled($color) {
  @return rgba($color, if(has-alpha($color), .38, .5));
}

@function disabled-hint($color) {
  @return rgba($color, if(has-alpha($color), .26, .3));
}

@function stroke($color) {
  @return rgba($color, if(has-alpha($color), .26, .3));
}

@function disabled-stroke($color) {
  @return rgba($color, if(has-alpha($color), .12, .2));
}

@function divider($color) {
  @return rgba($color, if(has-alpha($color), .12, .2));
}

@function fill($color) {
  @return rgba($color, if(has-alpha($color), .08, .08));
}

@function entry-fill($color) {
  @return rgba($color, if(has-alpha($color), .04, .04));
}

question

Source

rudrab

All 8 comments

$-dark-background has been removed. It was previously used for $system and $surface-z0 in theme.$dark-theme :)

nana-4 on 5 Apr 2021

Thanks a lot. Also, please what is the $surface in the new format?

rudrab on 5 Apr 2021

btw does the latest build of Materia looks fine for you in gtk4-widget-factory?

my current laptop can't run it because of vdpau bug in gtk4

but last time i checked from other PC less than a week ago it seems what some of those background changes affected it, and in normal Materia variant (not light or dark), the headerbar color is used also for some surfaces