Options

Introduction

Zehn offers a wide variety of settings to both match Windows 10 options and offer some personalization of your Steam as well.

Keeping It Consistent

Zehn's options are organized into categories and sections. This organization is reflected in both SFP and Millennium's configs. How you may configure Zehn depends on which patcher you are using, but both ways offer the same options.

Note

Millennium

Configure Zehn via the integrated Library Manager.

SFP

Edit ~/options.json. This config is ignored when using Millennium.

The Structure of Zehn's Options

There are three types of values that Zehn's config supports:

Booleans

This is your basic true or false. Do not use quotations.

Important

These values are mapped to on and off respectively to match their patch filenames.

Enum Strings

These values directly reference the filenames of their patches. See the available choices further down.

Unit Strings

Strings that are detected to end in units (px, %, etc.) are handled differently. Instead of a specific patch being applied, these are turned into variables that are combined into a singular patch :root block.

This allows you to set whatever value you want, as long as it is compatible with how the variable is applied.

How It Works

Zehn makes great use of variables, and all config options in Zehn set variables instead of directly defining styles. These option variables are then applied against a fallback value under the primary variables in ~/css/variables.css that are used throughout the skin.

In The Config

For example, say we have a simple config:

{
  "show example": true,
  "example style": "fancy",
  "example size": "400px"
}

In The Patches

A patch at ~/option/show example/on.css would be loaded and injected to the document head. If it were to be used to change the display property of something, it may look like this:

:root {
  --option-show-example: flex;
}

As well, a patch at ~/option/example style/fancy.css would be loaded. It could be just as simple, or perhaps contain multiple variables:

:root {
  --option-example-style-border-size: 1px;
  --option-example-style-border-color: red;
  --option-example-style-background-color: #0A0A0A;
}

As well, it would generate a :root block like this applied to the document head:

:root {
  --option-example-size: 400px;
}

Warning

There are no safeguards to ensure that these patch files actually exist or that your variables will work as defined, so please mind that your config is correct, or else Zehn will use the fallback values.

In The End

To ensure that all variables actually exist, these option variables are not used directly. Instead, they are applied to zehn variables with fallback values. So, the example config would be used in ~/css/variables.css like so:

:root {
  --zehn-show-example: var(--option-show-example, none);
  --zehn-example-style-border-size: var(--option-example-style-border-size, 1px);
  --zehn-example-style-border-color: var(--option-example-style-border-color, blue);
  --zehn-example-style-background-color: var(--option-example-style-background-color, rgb(50, 50, 50));
  --zehn-example-size: var(--option-example-size, 400px);
}

The fallback values are whatever the default config options are set to have. These final variables are either used directly in the skin or are used within other variables, as Zehn strives for consistency. This may be to use the same color with a different opacity, to be referenced in variables used in very specific cases (such as the padding of panels found in the downloads page), or many other ways.

The Config

Now that we've explained how the config works, here is the actual default config for Zehn.

{
  "personalization": {
    "appearance": {
      "avatar shape": "round",
      "scrollbar style": "hidden"
    },
    "colors": {
      "color mode": "auto",
      "transparency effects": true,
      "show accent color on window borders": true
    },
    "themes": {
      "background color mix": "0%",
      "foreground color mix": "0%",
      "color space": "srgb"
    }
  },
  "scale and layout": {
    "general": {
      "show tooltips": true
    },
    "navigation": {
      "titlebar size": "normal",
      "navbar size": "normal",
      "download progress preview": "250px",
      "show account avatar": true,
      "show url bar": true
    },
    "library": {
      "content mode": "panel",
      "show add shelf": true,
      "show whats new": true
    }
  },
  "features": {
    "waifu": {
      "display waifu": true,
      "waifu position": "bottom right",
      "waifu presence": "fade"
    }
  }
}

Note

Please note that JSON keys and values are in lowercase.

Picking Colors

Several colors are available to modify directly through Millennium's Library Manager. These are referenced in ~/css/variables.css as usual.

These colors include the user status colors and the colors used for background and foreground color blending.

Important

SFP users may find these in ~/config/colors.css to edit. Overriding them in ~/custom.css may be preferential.

Millennium also offers the ability to override the system accent colors in its main settings.

Custom CSS

You can further modify Zehn to your own liking with your own CSS.

All global variables in Zehn are stored in ~/css/variables.css. Every patch Zehn uses includes this file, so you may always use these variables when making your own CSS.

Note

Millennium

Use Millennium's Quick CSS feature!

SFP

Add your own CSS in ~/custom.css.

All Options

Here are all options available in Zehn.

Personalization

Appearance

Avatar Shape

Select the avatar shape.

• Round
• Square

Scrollbar Style

Select the style of scrollbar.

• None
• Windows
• Steam

Colors

Color Mode

Choose your color.

Auto mode will select either light or dark mode based on your system settings.

• Auto
• Dark
• Light

Transparency Effects

Windows and surfaces appear translucent. Enables support for Reveal and Acrylic effects.

Allows behind-window blur when used with DWMX plugin.

• On
• Off

Show Accent Color on Window Borders

Show accent color on window borders when focused.

• On
• Off

Themes

Background Color Mix

Adjust how much color is blended into the background.

[min: 0%] <- - -> [max: 100%]

Foreground Color Mix

Adjust how much color is blended into the foreground.

[min: 0%] <- - -> [max: 100%]

Color Space

Select the color space used in blending.

• sRGB
• LAB
• okLAB

Scale and Layout

General

Show Tooltips

Show tooltips and miniprofiles in the client.

• On
• Off

Navigation

Titlebar Size

Choose the size of window titlebars.

• Normal
• Thick

Navbar Size

Choose the size of the navbar (the titlebar of the library window).

• Normal
• Thick

Download Preview Width

Adjust the width of the download preview.

[min: 200px] <- - -> [max: 500px]

Show Account Avatar

Show your avatar on the account button instead of an icon.

• On
• Off

Show URL Bar

Show the URL bar on internal browser tab pages.

• On
• Off

Library

Content Mode

Select how content is displayed in the library.

Presently only affects collections and showcases. WIP!

• Panel
• Flat

Show Add Shelf

Show the Add Shelf panel.

• On
• Off

Show What's New

Show the What's New panel.

• On
• Off

Features

Waifu

Display Waifu

Display your waifu on the library.

List your waifus directly in waifus.json within the skin folder or in /waifus/waifus.json within the Steam loopback directory.

• On
• Off

Waifu Position

Select where your waifu is placed.

• Top
• Bottom
• Left
• Right
• Top Left
• Top Right
• Bottom Left
• Bottom Right

Waifu Presence

Select what your waifu does when you leave or come back to Steam.

• Stay
• Fade