hyper-liquid-glass

Requirements

• A Liquid Glass-compatible version of macOS.

Install

hyper i hyper-liquid-glass

Configure

You can set a tint color and alpha value in your .hyper.js file:

module.exports = {
  config: {
    // add the following:
    liquidGlass: {
      tint: "#000000", // HEX color
      alpha: 0.3, // number between 0 and 1
    },
  },
};

After editing .hyper.js, fully restart Hyper to apply the changes. Hot reload won't be enough.

Variants (experimental)

This is an unstable feature because it uses private macOS APIs and may break in future versions.

You can add a variant property to the config to get different Liquid Glass styles. Keep in mind that each variant may require tweaking the tint and alpha values.

module.exports = {
  config: {
    liquidGlass: {
      variant: 2,
    },
  },
};

Incompatibilities

This plugin uses native Liquid Glass from macOS, powered by electron-liquid-glass.

This comes with a few things to bear in mind:

• Not compatible with hyper-opacity. This is because macOS Liquid Glass handles focus and blur states in its own way.
• The liquid glass is always in sync with the OS appearance (light/dark).
  • If your macOS appearance is set to Auto, things can get messy: when macOS switches between light and dark, the terminal background updates, but your Hyper theme stays the same. That mismatch can make text hard to read.
  • For that reason, using macOS appearance in Auto mode is not recommended when using this plugin.
  • Your Hyper theme and your macOS appearance should match: both light or both dark.

Gallery