Spicetify theme inspired by Microsoft's Fluent Design System

  • By William Ha
  • Last update: Jan 3, 2023
  • Comments: 17

Fluent

Spicetify theme inspired by Microsoft's Fluent Design System.

dark-1


dark-2


light-1

Dependencies

  • Spicetify version 2.7.0 or newer, latest version always recommended.
  • Segoe UI font family, comes pre-installed on Windows Vista and newer. Segoe UI versions older than 5.37 (older than Windows 8.0) are not officially supported but may work.

Installation

Windows (PowerShell)

Invoke-WebRequest -UseBasicParsing "https://raw.githubusercontent.com/williamckha/spicetify-fluent/master/install.ps1" | Invoke-Expression

Linux/macOS (Bash)

curl -fsSL https://raw.githubusercontent.com/williamckha/spicetify-fluent/master/install.sh | sh

Spicetify Marketplace

You may alternatively install spicetify-fluent from within the Spicetify Marketplace.
Simply install the spicetify-marketplace by following it's installation instructions and look for and install the theme from within the Marketplace Button.

Important

For the sidebar playlists to show properly, ensure that these two lines are added in the Patch section of your config-xpui.ini file:

[Patch]
xpui.js_find_8008 = ,(\w+=)32,
xpui.js_repl_8008 = ,${1}56,

Customization

Four color schemes are available: light, dark, dracula, and comfy. Change scheme with commands:

spicetify config color_scheme 
   
    
spicetify apply

More Options

  • You can change the accent color in the theme folder's color.ini file.
  • If you are using Windows, you can hide the window controls by adding the flag --transparent-window-controls after Spotify.exe in your Spotify shortcut.
  • Use "Sidebar config" in the Spotify profile menu to hide/unhide and stick/unstick the Liked Songs and My Episodes icons in the sidebar.

Credits

Based off Ziro theme by schnensch
Fluent UI System Icons by Microsoft Corporation
Phosphor Icons by Phosphor Icons

License

MIT License

Github

https://github.com/williamckha/spicetify-fluent

Comments(17)

  • 1

    Home, Search, Library Icons Misaligned After The Theme Is Applied

    I Have A Problem Here... After These Failed Tries, I Got It Working Again But Those Icons Like Home, Search, & Library Are Misaligned. Is There A Way To Fix It? image

  • 2

    Control Bar has white Play Button

    **Describe the bug White Play button using Fluent skin

    To Reproduce Steps to reproduce the behavior:

    1. Open spotify
    2. See the play button is white

    Screenshots image

    Specifics:

    • OS: Windows 10 21H1 / 19043.1266
    • Spotify version: 1.1.69.612.gb7409abc
    • Spicetify version: 2.7
    • Theme name: Fluent (Latest Version)

    I even cleared backup, redownloaded the theme file, etc. Same issue**

  • 3

    Double listing in Marketplace

    Hey I just noticed that your theme is listed twice in Spicetify Marketplace. I thought it was a bug, but it looks like it's because it's listed in the manifest here as well as in the community themes repo. Would it be alright with you if we removed it from the community themes manifest? It would still be included in the community themes github, it just wouldn't be in the manifest file so it wouldn't show up twice anymore. Or we can do the other way around if you'd like, but I figure it makes more sense to list this one.

  • 4

    xpui.js not found

    in powershell, in the patching section: xpui.js not found

    I can find config-xpui.ini but I don't know what to do with the xpui.js Also some things are duplicated in the UI image

  • 5

    Various CSS no longer functioning in latest Spotify release

    image

    As you can see the sidebar has various issues, the top bar's back/forward is messed up.

    There are possibly other issues but that's what I've noticed.

  • 6

    Play button not displayed properly.

    ℹ Computer information

    • Spotify version: 1.1.63.568.gda8cb5ac-a
    • Spicetify version: 2.5.0-itsmeow-patch4

    📝 Provide detailed reproduction steps (if any)

    just install theme in powershell as normal

    ✔️ Expected result

    The play button should be displayed normally

    ❌ Actual result

    The play button is displayed as a round rectangle

    📷 Screenshots

    image

  • 7

    Fluent theme is broken

    Computer info

    Spotify version: 1.71.560.gc21c3367 Spicetify version: 2.7.1

    Issue

    Play and track control buttons don't work, alongside other pieces of UI that seem to be broken.

    Screenshot

    IMG-20211101-WA0039.jpg

  • 8

    Fix horizontal alignment of Sticky Header, remove rectangles from sides

    This patch is similar to #57 but does the job more effectively. I've confirmed this patch to do the job no matter how wide the window is. The alignment of the header columns also match without any manual adjustment to a column as well.

    Before:

    Before

    After: After

  • 9

    Fix spacing symmetry on Playlist Add icon

    Before / After before after

    As you can see, it's now more accurate to the original images seen in the README, yet still better as the margin-top seems too large in the README example: image

  • 10

    Fix sidebar icons for Spotify v1.1.78.765

    Fixes #22

    Before / After

    image image image

    Note: The navigation button fixes on the top left were fixed by somewhere between spicetify-cli v2.8.3 and v2.9.0, not by this pull request.

  • 11

    Is the sidebar resizable?

    Not sure if this is where I can post such a question, so apologies if I'm in the wrong place. I was wondering if any of the sidebars are sizable (normal sidebar and friends activity). If not, is there a way I can get the name of the playlist that's in the sidebar? It would be nice, since when I don't know what the playlist cover looks like, I need to click each one to find the one I'm looking for.

  • 12

    Menu and playlist error

    🔍 Is there already an issue for your problem?

    • [X] I have checked older issues, open and closed

    ℹ Environment / Computer Info

    - Spotify version: Spotify for Windows 1.2.0.1165.gabf054ab
- Spicetify version: 2.14.3
- Fluent installation method: (e.g., GitHub Readme, Spicetify Marketplace)

    📝 Description

    When I unstick library, new playlist and favorite song, it is skewed to the left. The menus that are centered will be overlaid on accounts when I minimize the Spotify windows.

    📸 Screenshots

    Screenshot 2022-12-09 094028

    image

    image

    image

  • 13

    Misaligned everything

    🔍 Is there already an issue for your problem?

    • [X] I have checked older issues, open and closed

    ℹ Environment / Computer Info

    - Spotify version: Spotify for Windows 1.1.94.872.g7a9200fe
- Spicetify version: v2.13.1
- Fluent installation method: tried both

    📝 Description

    I don't know what happened and how to solve this issue. Maybe new restyle of Spotify UI broke everything.

    📸 Screenshots

    image

  • 14

    misaligned icons

    🔍 Is there already an issue for your problem?

    • [X] I have checked older issues, open and closed

    ℹ Environment / Computer Info

    - Spotify version: 1.1.94.870.gf994cb0b
- Spicetify version: 2.13.1
- Fluent installation method: GitHub Readme

    📝 Description

    Installed theme, edited the patch value in cofig and applied the theme

    I saw this issue already asked but now it arises again

    📸 Screenshots

    image

  • 15

    Floating Control Bar Bouncing + Unaligned Icons

    🔍 Is there already an issue for your problem?

    • [x] I have checked older issues, open and closed

    ℹ Environment / Computer Info

    - Spotify version: Spotify for Windows 1.1.89.862.g94554d24
- Spicetify version: Spicetify v2.10.2
- Fluent installation method: (e.g., GitHub Readme, Spicetify Marketplace): Github (tried both manual and automatci

    📝 Description

    Icons are not aligned and the floating control bar keeps bouncing up and down. I have also used the patch. I have attached a screenshot and gif. (Sorry if the gif is low quality)

    Edit: It seems like a new UI 'footer' is appear causing the control bar to be pushed up while it is active.

    📸 Screenshots

    image nefikjov

  • 16

    Some UI is now showing

    🔍 Is there already an issue for your problem?

    • [X] I have checked older issues, open and closed

    ℹ Environment / Computer Info

    Display 1920x1280
Thinkpad t450

    📝 Description

    The UI is gone

    📸 Screenshots

    image

  • 17

    All icon assets are not showing

    🔍 Is there already an issue for your problem?

    • [X] I have checked older issues, open and closed

    ℹ Environment / Computer Info

    - Spotify version: 1.1.79.763
- Spicetify version: 2.9.8
- Fluent installation method: (e.g., GitHub Readme, Spicetify Marketplace): GitHub Readme

    📝 Description

    1. Load Fluent theme
    2. Load fluent.js
    3. apply the theme
    4. Open Spotify

    No icons will be loaded including media controls

    📸 Screenshots

    image

Popular Tag

Related