yurisuika / Zehn

A Steam skin based on Windows 10's Metro/Fluent transitional design language.
80 stars 0 forks source link

Zehn

Zehn is a Steam skin based on Windows 10's Metro/Fluent transitional design language. It comes in both dark and light modes!

Why the name "Zehn"? Well, I wanted to make my own attempt to match Steam to a stock Windows 10 experience. The design language behind this OS is known as MDL2, the first iteration of Fluent Design. It isn't quite the Metro of Windows 8 or the Fluent 2 of Windows 11. Rather, it is a transitional design language that retains the sharp lines and minimalistic icons of Metro and merges them with reactive Fluent effects such as Acrylic and Reveal that evolved into Fluent 2 for Windows 11. Both of these names were already used for other skins, but still neither quite fit anyways. So, I took the German word for "ten", as it also sounds like the Japanese "禅". My mind is clear knowing that this theme fits seamlessly into a Windows 10 environment.

zehn

Dark Mode Previews ![zehn](https://raw.githubusercontent.com/yurisuika/Zehn/master/assets/zehn-dark.png?raw=true)
Light Mode Previews ![zehn](https://raw.githubusercontent.com/yurisuika/Zehn/master/assets/zehn-light.png?raw=true)

Versions

Zehn features both a static and a live version!

The static version contains the whole skin source. You will need to download the latest release for any updates, which come often as rolling releases!

The live version references the latest static version on the web, so each time Steam is started or reloaded you will have the latest improvements while not having to overwrite your config. This is only updated when configurable options have changed. This version is recommended for most users.

Installation

  1. Download your preferred version.
  2. Extract the archive Zehn.
  3. Navigate to your Steam folder.
  4. Place the extracted skin folder in ~/steamui/skins.
  5. Enable JavaScript support in your patcher of choice.
  6. Select the skin in the patcher.

Currently this skin works fine on both SteamFriendsPatcher and Millennium.

Customization

Zehn now supports Millennium's built-in configuration screen! You may select both config options and use the color editor from it. Some variables deemed not necessary to be turned into options may still be found in the ~/css/variables/ folder.

Features

On Windows, the accent color will take your system's accent color by default. If you are on a system that does not support this variable, there is a fallback value. If you wish to change this, please manually enter the value in ~/config/theme/<theme>/colors.css.

Zehn features several added buttons for an improved experience:

Zehn uses Windows 10's Segoe UI for the most seamless experience. If you are using Linux, you will want to install some form of Segoe UI for the best experience.

Zehn features optional Fluent Reveal effects. If enabled, certain buttons are given the reactive background and border effect. This may perform poorly on some systems.

Discussion

If you have inquires, you can use either GitHub Discussions or come by my Discord.