Skip to content
/ Zehn Public

A Steam skin based on Windows 10's Metro/Fluent transitional design language.

Notifications You must be signed in to change notification settings

yurisuika/Zehn

Repository files navigation

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

Light Mode Previews

zehn

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:

  • The library window's menu button toggles the visibility of the root menu bar and the navigation menu bar.
  • You can toggle the visibility of the current user container on the friends window using the navigation button in the upper-left corner.
  • The library sidebar can be toggled by an added button. You will find this button on the sidebar when opened and in the bottom-right corner when closed while the window is focused and hovered.
  • The game page details panel is hidden by default. A button has been added to the playbar to toggle it.
  • The game event and community content feeds can be toggled, with the event feed displayed by default. The button is also in the playbar.

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.

About

A Steam skin based on Windows 10's Metro/Fluent transitional design language.

Resources

Stars

Watchers

Forks

Packages

No packages published