Styling iTerm2 (incl. automatic dark & night color schemes and switching)

[seidtgeist]

I just posted this issue over here tinted-theming/tinted-terminal#14

tl;dr:

iterm2-auto-theme-switch.mov

• Create an iTerm2 Dynamic Profile at ~/Library/Application\ Support/iTerm2/DynamicProfiles/<profile_name>.json
• Within, set any iTerm2 profile colors, e.g.: Foreground, background, cursor, ansi color 0–15, etc
• You can set each color 3 times: standard, light and dark. There's also a "Use Separate Colors for Light and Dark Mode" setting.
• Last time I checked, stylix had no concept of dark/light variants, however: Within iTerm, when macOS switches between dark and light colors, any shell programs which use the regular 16 ansi color codes (e.g. helix, btop) should inherit whatever iTerm controls. This explanation might be wrong here, but ¯_(ツ)_/¯ it works.

Hope this helps or gives some ideas. Here's my iterm2-profiles.nix:

{ pkgs, lib, darkTheme ? "darkviolet", lightTheme ? "primer-light" }:

let
  # Convert YAML themes to JSON at build time
  darkThemeData = builtins.fromJSON (builtins.readFile (
    pkgs.runCommand "dark-theme-yaml-to-json" {} ''
      ${pkgs.yq-go}/bin/yq eval -o=json '.' ${pkgs.base16-schemes}/share/themes/${darkTheme}.yaml > $out
    ''
  ));
  
  lightThemeData = builtins.fromJSON (builtins.readFile (
    pkgs.runCommand "light-theme-yaml-to-json" {} ''
      ${pkgs.yq-go}/bin/yq eval -o=json '.' ${pkgs.base16-schemes}/share/themes/${lightTheme}.yaml > $out
    ''
  ));

  # Convert hex color to iTerm2 RGB components (0.0-1.0)
  hexToRgb = hex:
    let
      # Remove # if present
      cleanHex = lib.removePrefix "#" hex;
      # Convert hex to decimal using Nix builtins
      hexToDec = hex:
        let
          hexChars = lib.stringToCharacters hex;
          hexValues = {
            "0" = 0; "1" = 1; "2" = 2; "3" = 3; "4" = 4; "5" = 5; "6" = 6; "7" = 7;
            "8" = 8; "9" = 9; "a" = 10; "b" = 11; "c" = 12; "d" = 13; "e" = 14; "f" = 15;
            "A" = 10; "B" = 11; "C" = 12; "D" = 13; "E" = 14; "F" = 15;
          };
          digit1 = hexValues.${builtins.elemAt hexChars 0};
          digit2 = hexValues.${builtins.elemAt hexChars 1};
        in
          digit1 * 16 + digit2;
      
      r = hexToDec (builtins.substring 0 2 cleanHex) / 255.0;
      g = hexToDec (builtins.substring 2 2 cleanHex) / 255.0; 
      b = hexToDec (builtins.substring 4 2 cleanHex) / 255.0;
    in {
      "Red Component" = r;
      "Green Component" = g;
      "Blue Component" = b;
    };

  # Generate unified iTerm2 profile with light/dark mode support
  makeUnifiedProfile = { darkColors, lightColors }:
    let
      # Helper to create color entries for all three variants
      makeColorSet = colorName: darkColor: lightColor: {
        "${colorName}" = hexToRgb lightColor;  # Base uses light variant
        "${colorName} (Light)" = hexToRgb lightColor;
        "${colorName} (Dark)" = hexToRgb darkColor;
      };
    in {
      "Name" = "tmux";
      "Guid" = "AAAAAAAA-BBBB-CCCC-DDDD-EEEEEEEEEEEE";
      
      # Enable separate colors for light/dark mode
      "Use Separate Colors for Light and Dark Mode" = true;
      
      # Unrelated visual settings
      "Transparency" = 0;
      "Blur" = true;
      "Blur Radius" = 10;
      "Use Bright Bold" = true;
    } // 
    # Basic colors
    makeColorSet "Background Color" darkColors.base00 lightColors.base00 //
    makeColorSet "Foreground Color" darkColors.base05 lightColors.base05 //
    makeColorSet "Bold Color" darkColors.base07 lightColors.base07 //
    makeColorSet "Cursor Color" darkColors.base05 lightColors.base05 //
    makeColorSet "Cursor Text Color" darkColors.base00 lightColors.base00 //
    makeColorSet "Selection Color" darkColors.base02 lightColors.base02 //
    makeColorSet "Selected Text Color" darkColors.base05 lightColors.base05 //
    # ANSI colors
    makeColorSet "Ansi 0 Color" darkColors.base00 lightColors.base00 //
    makeColorSet "Ansi 1 Color" darkColors.base08 lightColors.base08 //
    makeColorSet "Ansi 2 Color" darkColors.base0B lightColors.base0B //
    makeColorSet "Ansi 3 Color" darkColors.base0A lightColors.base0A //
    makeColorSet "Ansi 4 Color" darkColors.base0D lightColors.base0D //
    makeColorSet "Ansi 5 Color" darkColors.base0E lightColors.base0E //
    makeColorSet "Ansi 6 Color" darkColors.base0C lightColors.base0C //
    makeColorSet "Ansi 7 Color" darkColors.base05 lightColors.base05 //
    makeColorSet "Ansi 8 Color" darkColors.base03 lightColors.base03 //
    makeColorSet "Ansi 9 Color" darkColors.base08 lightColors.base08 //
    makeColorSet "Ansi 10 Color" darkColors.base0B lightColors.base0B //
    makeColorSet "Ansi 11 Color" darkColors.base0A lightColors.base0A //
    makeColorSet "Ansi 12 Color" darkColors.base0D lightColors.base0D //
    makeColorSet "Ansi 13 Color" darkColors.base0E lightColors.base0E //
    makeColorSet "Ansi 14 Color" darkColors.base0C lightColors.base0C //
    makeColorSet "Ansi 15 Color" darkColors.base07 lightColors.base07;

  # Generate unified profile
  unifiedProfile = makeUnifiedProfile {
    darkColors = darkThemeData.palette;
    lightColors = lightThemeData.palette;
  };

  # Create JSON file
  profileJson = builtins.toJSON { Profiles = [ unifiedProfile ]; };

in
pkgs.runCommand "iterm2-nix-profiles" {} ''
  mkdir -p $out/share/iterm2-profiles
  
  cat > $out/share/iterm2-profiles/tmux.json << 'EOF'
  ${profileJson}
  EOF
''

[trueNAHO]

Hope this helps or gives some ideas.

Thanks for sharing. The end result looks neat.

Last time I checked, stylix had no concept of dark/light variants

A more general solution is already on the roadmap:

• (7) Support automatic polarity switch based on sunset and sunrise
  • stylix: support for toggling between Light and Dark polarity #447 (comment)

-- #534

[seidtgeist]

Thank you. The more general solution looks interesting!