Firefox-UI-Fix/src/utils/_theme.scss

@use "sass:selector";

//== Privated Variables ========================================================
$lwtheme: ":is(:-moz-lwtheme, [lwtheme])";
$not_lwtheme: ":is(:not([lwtheme]), :not(:-moz-lwtheme))";

$_lightdark: "[lwtheme-mozlightdark]"; // Legacy - FF v96
$_lightText: '[lwthemetextcolor="bright"]';
$_darkText:  ":not(#{$_lightText})";

$_sysDark: "[lwt-default-theme-in-dark-mode]";
$builtInLightStyle: ':is([style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], [builtintheme][devtoolstheme="light"])';
$builtInDarkStyle: ':is([style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], [builtintheme][devtoolstheme="dark"])';

//== Mixin =====================================================================
@function built-in-default-theme() {
  $oldDefault: selector.append(":root", $_lightdark);
  $newDefault: selector.append(":root", ":is(#{$builtInLightStyle}, #{$builtInDarkStyle})");

  @return "#{$oldDefault}, #{$newDefault}";
}

@function system-default-theme() {
  $sysLight: selector.append(":root", "#{$not_lwtheme}");
  $sysDark: selector.append(":root", $_sysDark);

  @return "#{$sysLight}, #{$sysDark}";
}

@function built-in-light-theme() {
  $oldLight: selector.append(":root", $_lightdark, $_darkText);
  $newLight: selector.append(":root", $builtInLightStyle);

  @return "#{$oldLight}, #{$newLight}";
}

@function built-in-dark-theme() {
  $oldDark: selector.append(":root", $_lightdark, $_lightText);
  $newDark: selector.append(":root", $builtInDarkStyle);

  @return "#{$oldDark}, #{$newDark}";
}

@mixin lwtheme($toplevel: true) {
  @if $toplevel {
    :root#{$lwtheme} {
      @content;
    }
  }
  @else {
    :root#{$lwtheme} & {
      @content;
    }
  }
}

@mixin not_lwtheme($toplevel: true) {
  @if $toplevel {
    :root#{$not_lwtheme} {
      @content;
    }
  }
  @else {
    :root#{$not_lwtheme} & {
      @content;
    }
  }
}