├── .editorconfig
├── .github
└── CODEOWNERS
├── INSTALL.md
├── LICENSE.md
├── README.md
├── SpotifyNoControl.exe
├── assets
└── glue-resources
│ └── fonts
│ ├── GoogleSansDisplayMedium.woff2
│ ├── GoogleSansDisplayRegular.woff2
│ ├── Roboto.woff2
│ └── RobotoMedium.woff2
├── color.ini
├── omni.js
├── screenshot.png
├── user.css
└── windows-shortcut-instruction.png
/.editorconfig:
--------------------------------------------------------------------------------
1 | root = true
2 |
3 | [*]
4 | indent_style = space
5 | indent_size = 2
6 | end_of_line = lf
7 | charset = utf-8
8 | trim_trailing_whitespace = true
9 | insert_final_newline = true
10 |
11 | [*.md]
12 | trim_trailing_whitespace = false
13 |
--------------------------------------------------------------------------------
/.github/CODEOWNERS:
--------------------------------------------------------------------------------
1 | # Learn how to add code owners here:
2 | # https://help.github.com/en/articles/about-code-owners
3 |
4 | * @birobirobiro
5 | .github/* @jpedroschmitz
6 | *.md @jpedroschmitz
7 |
--------------------------------------------------------------------------------
/INSTALL.md:
--------------------------------------------------------------------------------
1 | ### [Spicetify v2](https://github.com/khanhas/spicetify-cli)
2 |
3 | #### Linux and MacOS:
4 |
5 | In **Bash**:
6 |
7 | ```bash
8 | cd "$(dirname "$(spicetify -c)")/Themes"
9 | git clone https://github.com/getomni/spicetify.git omni
10 | cd omni
11 | cp omni.js ~/.config/spicetify/Extensions
12 | spicetify config extensions omni.js
13 | spicetify config current_theme omni color_scheme base
14 | spicetify config inject_css 1 replace_colors 1 overwrite_assets 1
15 | spicetify apply
16 | ```
17 |
18 | #### Windows
19 |
20 | In **Powershell**:
21 |
22 | ```powershell
23 | cd "$(spicetify -c | Split-Path)\Themes"
24 | git clone https://github.com/getomni/spicetify.git omni
25 | cd omni
26 | Copy-Item omni.js %appdata%\spicetify\Extensions\
27 | spicetify config extensions omni.js
28 | spicetify config current_theme omni color_scheme base
29 | spicetify config inject_css 1 replace_colors 1 overwrite_assets 1
30 | spicetify apply
31 | ```
32 |
33 | From Spotify > v1.1.62, in sidebar, they use an adaptive render mechanic to actively show and hide items on scroll. It helps reducing number of items to render, hence there is significant performance boost if you have a large playlists collection. But the drawbacks is that item height is hard-coded, it messes up user interaction when we explicity change, in CSS, playlist item height bigger than original value. So you need to add these 2 lines in Patch section in config file:
34 |
35 | ```ini
36 | [Patch]
37 | xpui.js_find_8008 = ,(\w+=)32,
38 | xpui.js_repl_8008 = ,${1}56,
39 | ```
40 |
41 | #### Hide Window Controls
42 |
43 | Windows user, please edit your Spotify shortcut and add flag `--transparent-window-controls` after the Spotify.exe:
44 | 
45 |
46 | Alternatively, you can use `SpotifyNoControl.exe`, included in this theme package, to completely remove all windows controls and title menu (three dot at top left corner). Title menu still can be access via Alt key. Closing, minimizing can be done via right click menu at top window region.
47 | `SpotifyNoControl.exe` could be used as Spotify launcher, it opens Spotify and hides controls right after. So you should make a shortcut for it, change icon and add to desktop or start menu.
48 | Moreover, by default, Spotify adjusted sidebar items and profile menu icon to stay out of Windows native controls region. If you decided to use `SpotifyNoControl.exe` from now on, please open `user.css` file and change variable `--os-windows-icon-dodge` value to 0 as instruction to snap icons back to their original position.
49 |
50 | 
51 |
52 | #### How to uninstall
53 |
54 | Remove the omni script with the following commands
55 |
56 | ```
57 | spicetify config extensions omni.js-
58 | spicetify apply
59 | ```
60 |
--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2021 Omni Theme
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
6 |
7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
8 |
9 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
10 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 | Spicetify v2
6 |
8 |
9 |
10 | Dark theme for Spicetify v2
11 |
12 |
13 |
14 |
18 |
19 |
20 | Info •
21 | Install •
22 | Team •
23 | License
24 |
25 |
26 |
27 |
29 |
30 | ## Info
31 |
32 | With the new versions of Spotify and Spicetify the main branch theme became outdated and doesn't work anymore. Using this version (v2), you can enjoy all Spotify functionalities from new releases using the Omni theme.
33 |
34 | ## Install
35 |
36 | All instructions can be found at [INSTALL.md](./INSTALL.md).
37 |
38 | ## Team
39 |
40 | This theme version (v2) is maintained by the following person(s) and a bunch of [awesome contributors](https://github.com/getomni/spicetify/graphs/contributors).
41 |
42 | | [](https://github.com/ianlibanio) |
43 | | ------------------------------------------------------------------------------------------- |
44 | | [Ian Libânio](https://github.com/ianlibanio) |
45 |
46 | ## License
47 |
48 | [MIT License](./LICENSE.md)
49 |
50 | ---
51 |
52 | Based on [Dribbblish v2](https://github.com/morpheusthewhite/spicetify-themes/tree/v2/Dribbblish)
53 |
--------------------------------------------------------------------------------
/SpotifyNoControl.exe:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getomni/spicetify/253ae45d2cac2dc3d92a43193ea8f6d9e7e1d3aa/SpotifyNoControl.exe
--------------------------------------------------------------------------------
/assets/glue-resources/fonts/GoogleSansDisplayMedium.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getomni/spicetify/253ae45d2cac2dc3d92a43193ea8f6d9e7e1d3aa/assets/glue-resources/fonts/GoogleSansDisplayMedium.woff2
--------------------------------------------------------------------------------
/assets/glue-resources/fonts/GoogleSansDisplayRegular.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getomni/spicetify/253ae45d2cac2dc3d92a43193ea8f6d9e7e1d3aa/assets/glue-resources/fonts/GoogleSansDisplayRegular.woff2
--------------------------------------------------------------------------------
/assets/glue-resources/fonts/Roboto.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getomni/spicetify/253ae45d2cac2dc3d92a43193ea8f6d9e7e1d3aa/assets/glue-resources/fonts/Roboto.woff2
--------------------------------------------------------------------------------
/assets/glue-resources/fonts/RobotoMedium.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getomni/spicetify/253ae45d2cac2dc3d92a43193ea8f6d9e7e1d3aa/assets/glue-resources/fonts/RobotoMedium.woff2
--------------------------------------------------------------------------------
/color.ini:
--------------------------------------------------------------------------------
1 | [base]
2 | text = E1E1E6
3 | subtext = E1E1E6
4 | sidebar-text = F7F7FB
5 | main = 191622
6 | sidebar = 191622
7 | player = 191622
8 | card = 191622
9 | shadow = 000000
10 | selected-row = 988BC7
11 | button = 5A4B81
12 | button-active = 988BC7
13 | button-disabled = 5A4B81
14 | tab-active = 5A4B81
15 | notification = 5A4B81
16 | notification-error = E96379
17 | misc = FFFFFF
18 |
--------------------------------------------------------------------------------
/omni.js:
--------------------------------------------------------------------------------
1 | // Hide popover message
2 | // document.getElementById("popover-container").style.height = 0;
3 | const DribbblishShared = {
4 | configMenu: new Spicetify.Menu.SubMenu("Dribbblish", []),
5 | rightBigCover: localStorage.getItem("dribs-right-big-cover") === "true",
6 | setRightBigCover: () => {
7 | if (DribbblishShared.rightBigCover) {
8 | document.documentElement.classList.add("right-expanded-cover");
9 | } else {
10 | document.documentElement.classList.remove("right-expanded-cover");
11 | }
12 | }
13 | };
14 |
15 | DribbblishShared.configMenu.register();
16 | DribbblishShared.configMenu.addItem(new Spicetify.Menu.Item(
17 | "Right expanded cover",
18 | DribbblishShared.rightBigCover,
19 | (self) => {
20 | self.isEnabled = !self.isEnabled;
21 | DribbblishShared.rightBigCover = self.isEnabled;
22 | localStorage.setItem("dribs-right-big-cover", self.isEnabled);
23 | DribbblishShared.setRightBigCover();
24 | }
25 | ));
26 | DribbblishShared.setRightBigCover();
27 |
28 | function waitForElement(els, func, timeout = 100) {
29 | const queries = els.map(el => document.querySelector(el));
30 | if (queries.every(a => a)) {
31 | func(queries);
32 | } else if (timeout > 0) {
33 | setTimeout(waitForElement, 300, els, func, --timeout);
34 | }
35 | }
36 |
37 | waitForElement([
38 | `.main-rootlist-rootlistPlaylistsScrollNode ul[tabindex="0"]`,
39 | `.main-rootlist-rootlistPlaylistsScrollNode ul[tabindex="0"] li`
40 | ], ([root, firstItem]) => {
41 | const listElem = firstItem.parentElement;
42 | root.classList.add("dribs-playlist-list");
43 |
44 | /** Replace Playlist name with their pictures */
45 | function loadPlaylistImage() {
46 | for (const item of listElem.children) {
47 | let link = item.querySelector("a");
48 | if (!link) continue;
49 |
50 | let [_, app, uid ] = link.pathname.split("/");
51 | let uri;
52 | if (app === "playlist") {
53 | uri = Spicetify.URI.playlistV2URI(uid);
54 | } else if (app === "folder") {
55 | const base64 = localStorage.getItem("dribbblish:folder-image:" + uid);
56 | let img = link.querySelector("img");
57 | if (!img) {
58 | img = document.createElement("img");
59 | img.classList.add("playlist-picture");
60 | link.prepend(img);
61 | }
62 | img.src = base64 || "/images/tracklist-row-song-fallback.svg";
63 | continue;
64 | }
65 |
66 | Spicetify.CosmosAsync.get(
67 | `sp://core-playlist/v1/playlist/${uri.toURI()}/metadata`,
68 | { policy: { picture: true } }
69 | ).then(res => {
70 | const meta = res.metadata;
71 | let img = link.querySelector("img");
72 | if (!img) {
73 | img = document.createElement("img");
74 | img.classList.add("playlist-picture");
75 | link.prepend(img);
76 | }
77 | img.src = meta.picture || "/images/tracklist-row-song-fallback.svg";
78 | });
79 | }
80 | }
81 |
82 | DribbblishShared.loadPlaylistImage = loadPlaylistImage;
83 | loadPlaylistImage();
84 |
85 | new MutationObserver(loadPlaylistImage)
86 | .observe(listElem, {childList: true});
87 | });
88 |
89 | waitForElement([".Root__main-view"], ([mainView]) => {
90 | const shadow = document.createElement("div");
91 | shadow.id = "dribbblish-back-shadow";
92 | mainView.prepend(shadow);
93 | });
94 |
95 | waitForElement([".main-rootlist-rootlistPlaylistsScrollNode"], (queries) => {
96 | const fade = document.createElement("div");
97 | fade.id = "dribbblish-sidebar-fade-in";
98 | queries[0].append(fade);
99 | });
100 |
101 | waitForElement([
102 | ".Root__nav-bar .LayoutResizer__input, .Root__nav-bar .LayoutResizer__resize-bar input"
103 | ], ([resizer]) => {
104 | const observer = new MutationObserver(updateVariable);
105 | observer.observe(resizer, { attributes: true, attributeFilter: ["value"]});
106 | function updateVariable() {
107 | let value = resizer.value;
108 | if (value < 121) {
109 | value = 72;
110 | document.documentElement.classList.add("sidebar-hide-text");
111 | } else {
112 | document.documentElement.classList.remove("sidebar-hide-text");
113 | }
114 | document.documentElement.style.setProperty(
115 | "--sidebar-width", value + "px");
116 | }
117 | updateVariable();
118 | });
119 |
120 | waitForElement([".Root__main-view .os-resize-observer-host"], ([resizeHost]) => {
121 | const observer = new ResizeObserver(updateVariable);
122 | observer.observe(resizeHost);
123 | function updateVariable([ event ]) {
124 | document.documentElement.style.setProperty(
125 | "--main-view-width", event.contentRect.width + "px");
126 | document.documentElement.style.setProperty(
127 | "--main-view-height", event.contentRect.height + "px");
128 | if (event.contentRect.width < 700) {
129 | document.documentElement.classList.add("minimal-player");
130 | } else {
131 | document.documentElement.classList.remove("minimal-player");
132 | }
133 | if (event.contentRect.width < 550) {
134 | document.documentElement.classList.add("extra-minimal-player");
135 | } else {
136 | document.documentElement.classList.remove("extra-minimal-player");
137 | }
138 | }
139 | });
140 |
141 | (function Dribbblish() {
142 | const progBar = document.querySelector(".playback-bar");
143 |
144 | if (!Spicetify.Player.origin || !progBar) {
145 | setTimeout(Dribbblish, 300);
146 | return;
147 | }
148 |
149 | const tooltip = document.createElement("div");
150 | tooltip.className = "prog-tooltip";
151 | progBar.append(tooltip);
152 |
153 | const progKnob = progBar.querySelector(".progress-bar__slider");
154 |
155 | Spicetify.Player.addEventListener("onprogress", ({ data: e }) => {
156 | const offsetX = progKnob.offsetLeft + progKnob.offsetWidth / 2;
157 | const maxWidth = progBar.offsetWidth;
158 | const curWidth = Spicetify.Player.getProgressPercent() * maxWidth;
159 | const ttWidth = tooltip.offsetWidth / 2;
160 | if (curWidth < ttWidth) {
161 | tooltip.style.left = String(offsetX) + "px";
162 | } else if (curWidth > maxWidth - ttWidth) {
163 | tooltip.style.left = String(offsetX - ttWidth * 2) + "px";
164 | } else {
165 | tooltip.style.left = String(offsetX - ttWidth) + "px";
166 | }
167 | tooltip.innerText = Spicetify.Player.formatTime(e) + " / " +
168 | Spicetify.Player.formatTime(Spicetify.Player.getDuration());
169 | });
170 |
171 | const filePickerForm = document.createElement("form");
172 | filePickerForm.setAttribute("aria-hidden", true);
173 | filePickerForm.innerHTML = ' 
4 | 
15 |
16 | 
28 |