saiyajink / minimal-dark-for-steam

A dark minimalist skin for steam new UI

⚡ Minimal Dark for Steam ⚡

Minimal Dark is a personalized and customizable minimal theme for the new Steam interface (New UI).
I started from the basic Steam skin using the development tool (DevTools) as well as notepad++.
All the sources and tools I used are at the bottom of the description.

I am neither a coder nor a developer, I have some knowledge after several years of practice and I do this in my free time when I have it.
Be understanding if you encounter any bugs.

🧪 Restylised vanilla skin topbar + UI enhancements 🧪

I created a minimal topbar to best optimize the space compared to the vanilla base.
The home and collection button are now hidden to minimize the space taken up (they are accessible from the top bar).

🎨 Customize theme with the color of your choice 🎨

I'm not a fan of heavy interfaces with "uncoordinated" colors. So I did my best to have a theme with matching colorimetry. In building the skin, I defined a function on many elements that injects the color code defined in the configuration file across the entire skin and webkit.

How change the skin color ?

1. Open config.css with notepad++ and modify lines 4 and 5.
   
2. Open webkit.css and modify lines 8 and 9 ; save and reload Steam.
   

⚠️ note: color settings reset with each update (for now).

More simply : If you use the base color (which is Steam's default color, light blue): no problem since it is the base of the skin.

On the other hand : If you use a custom color: you will have to redefine the custom color during EACH update (for the moment) whether manual (by opening millenium from Steam settings) or automatic (when launching or restarting Steam).

Why ? : This is because Millennium, during an update reloads the entire Github directory and not just the updated files.
I passed the information on to the dev, I'm waiting for his return (the problem does not occur with SFP).

🗣️ Dev response : Millennium will be updated soon to resolve this issue to only update files changed during a skin update.

📸 Compact mode + friends 📸

👤 Profil 👤

Some profiles have neon lights around the headers, I removed them by default.
If you want to remove this, open webkit.css and remove line 100

🌐 Dark webkit 🌐

Thanks Shiina for the base of the webkit
All aspects were changed to match my theme.

✅ Quick installation with Millennium (recommanded) ✅

1️⃣ - Download & execute latest release of Millennium here
2️⃣ - Clic on Integrate and wait for the end of integration (Steam will close)
3️⃣ - Restart Steam and go Settings > Interface > Steam Skin > Open Millennium
4️⃣ - In Millennium interface click on Settings and check that JavaScript Execution is checked.
5️⃣ - Always in Millennium interface click on Community (Steam browser will open).
6️⃣ - Select the Minimal Dark for Steam theme and drag Drop onto Millennium button in the Millennium and wait download & installation
7️⃣ - Return to the Library tab and refresh the list of downloaded skins and click on Minimal Dark for Steam.

Installation documentation : https://millennium.gitbook.io/steam-patcher/getting-started/installation

🔗 Manual installation with SFP 🔗

1️⃣ - Download & extract latest release here
2️⃣ - Copy Minimal-Dark-for-Steam folder to "C:\Program Files (x86)\Steam\steamui\skins"
3️⃣ - Download the latest SFP version here
4️⃣ - Launch SFP, in settings go to Steam, check "Inject JavaScript", and now select steam skin (steam will reload automatically). If you want dev Steam, type -dev on the end of launch arguments to get -cef-enable-debugging -dev.

🛠️ Tools used 🛠️

• Steam DevTools
  
• Color picker
  
• ColorSpace
  
• CSS Gradient
  
• Free SVG collection
  

🖱️ Open Source References 🖱️

• Credits to Rose's Metro for Steam for the initial base of the theme and the inspiration it gave me.
• Shiina for the dark base of webkit
  
• Unofficial Patch for Metro for Steam for sharing reboot/reload script
  
• ShadowMonster99 for the implementation in Millennium
  
• PhantomGamers for SFP and the reboot/reload script
  
• LaserFlash for WaitForElement module
  
• Icon8 for Base64 icons

---

minimal-dark-for-steam's Issues

Idea/suggestion - Layout button

First thanks for the skin i really like it !

It's hard to explain, so i used paint to move button and attached the picture result with this message ! I don't know if is possible to move them like that but for me it's more intuitive. I know it's only my opinion and if you don't like it, it's fine :)

• 2 layout idea in the picture [Left & Right] I prefer number 2.
  

[BUG] Overlay notes collapse button not working

[REQUEST] Some minor modifications

Hello, love your theme, I have some suggerences:

• Can you please make the top left steam button just the icon, without the Steam text?
• A dedicated button in the top right for opening Steam Chat

Top left icons problem

Top left side, icons not show, how fix it?

Friends List

the friends list needs adjustment for favorited friends

VR Headset Icon issue

If you have a VR headset, the top bar gets a VR icon and with the theme, it gets put slightly behind the downloads button and doesn't have a border like the rest of the buttons do.

VR Icon Seperation not displaying correctly on full screen.

Hey, small update on the VR icon. When full screen, the icon loses its separation from the downloads button and top bar.

User profiles background does not show anymore

The animated and static background of user profiles (full profiles, not mini profiles) are entirely black. on previous releases, the backgrounds were appearing.
the same happens to game page backgrounds.

this is probably due to an update on webkit.css

Bug - Friend Tooltip not overflowing properly

When you go to a game in your library and hover over a friend in the "Friends Who Play" section, if they have a award displayed on their profile, the tooltip will overflow incorrectly and the playtime wont be visible.

Examples:

[QUESTION] How to get the default profile page in newer versions

I want to have the default profile page colors, in the previous version you have to comment this lines

/*
 background profil video/wallpaper remove static color 
.profile_animated_background > video {
    display: none !important;
}

div.profile_page.has_profile_background {
    background: var(--minimal_dark_blacker_alt) !important;
    background-image: none !important;
} 
*/

.profile_animated_background {
    background-color: #000000 !important; /* set var(--minimal_dark_blacker_alt) if you have remove the lines above */
}
/* end background profil video/wallpaper remove static color */

How can I do that in the newer version?

Demande d'amélioration visuelle

@SaiyajinK bonjour, déjà merci pour ce thème incroyable !!!
je ne suis pas bilingue je parle le franglais et comme j'ai vu que tu étais de france je mets ma demande en français. je ne sais pas si je dois déposer ça ici mais est-il possible de faire une demande d'amélioration visuelle sur une partie du skin non retravaillée ?

merci d'avance pour la réponse.

New Recording Feature issue + Transparent Overlay Background

The new Recording Feature that is on the beta branch makes all the windows invisible.

And i also need a little help here. I would like to make the background transparent when using the in-game overlay. Could you lend me a hand with that?

Theme tweaking assistance

Hi there! I love your theme, but would like to make a small number of minor tweaks. Unfortunately, my grasp of the code and where to look to make the tweaks is not strong enough to figure this out for myself. I am hoping you can point me in the right direction, but if this request is inappropriate as a Github issue, please feel free to close the question.

I'd like to make the following changes to the theme:

• Increase the font size, change case to upper, and perhaps bold for the topmost navigation (Store, Library, Community, etc.)
• Increase the font size, change text and highlight colors for the library left-hand game listing
• Increase the sizes of the game thumbnails in recent games and below library categories; I currently have the size set to "Medium" but "Large" is way larger than I would prefer.

Thanks!

Hovering issue

AFAIK it shouldn't look like this, but its next to the minimize, maximize and close buttons.
Its on the name of your profile, like said, as far as i know it shouldn't be look like this but i could be wrong.