This commit is contained in:
poslop
2022-08-02 16:31:06 -05:00
parent c528b83dec
commit 4112fb9aa0
116 changed files with 9270 additions and 0 deletions

2
.config/nvim/init.vim Normal file
View File

@@ -0,0 +1,2 @@
set clipboard=unnamedplus
syntax on

View File

@@ -0,0 +1,77 @@
ACCENT_BG=383e5b
BASE16_GENERATE_DARK=False
BASE16_INVERT_TERMINAL=False
BASE16_MILD_TERMINAL=False
BG=25283f
BTN_BG=89a1e2
BTN_FG=383e5b
BTN_OUTLINE_OFFSET=0
BTN_OUTLINE_WIDTH=6
CARET1_FG=383e5b
CARET2_FG=383e5b
CARET_SIZE=0.0
CINNAMON_OPACITY=1.0
FG=fe9bce
GRADIENT=0.0
GTK3_GENERATE_DARK=True
HDR_BG=25283f
HDR_BTN_BG=2d333d
HDR_BTN_FG=89a1e2
HDR_FG=b1d4e9
ICONS_ARCHDROID=dddddd
ICONS_DARK=282c34
ICONS_LIGHT=5294e2
ICONS_LIGHT_FOLDER=545d89
ICONS_MEDIUM=545d89
ICONS_NUMIX_STYLE=4
ICONS_STYLE=suruplus_icons
ICONS_SYMBOLIC_ACTION=545d89
ICONS_SYMBOLIC_PANEL=545d89
MATERIA_PANEL_OPACITY=0.6
MATERIA_SELECTION_OPACITY=0.32
MATERIA_STYLE_COMPACT=True
MENU_BG=303641
MENU_FG=d3dae3
NAME="Featured/Bluloco-dark"
OUTLINE_WIDTH=6
ROUNDNESS=3
SEL_BG=89a1e2
SEL_FG=383e5b
SPACING=1
SPOTIFY_PROTO_BG=282c34
SPOTIFY_PROTO_FG=ffcc00
SPOTIFY_PROTO_SEL=285bff
SURUPLUS_GRADIENT1=d3dae3
SURUPLUS_GRADIENT2=5294e2
SURUPLUS_GRADIENT_ENABLED=False
TERMINAL_ACCENT_COLOR=5294e2
TERMINAL_BACKGROUND=282c34
TERMINAL_BASE_TEMPLATE=basic
TERMINAL_COLOR0=40444c
TERMINAL_COLOR1=f81141
TERMINAL_COLOR10=37bd58
TERMINAL_COLOR11=f6be48
TERMINAL_COLOR12=199ffd
TERMINAL_COLOR13=fc58f6
TERMINAL_COLOR14=50acae
TERMINAL_COLOR15=ffffff
TERMINAL_COLOR2=23974a
TERMINAL_COLOR3=fd7e57
TERMINAL_COLOR4=285bff
TERMINAL_COLOR5=8c62fd
TERMINAL_COLOR6=3a8ab2
TERMINAL_COLOR7=cdd3e0
TERMINAL_COLOR8=8f9aae
TERMINAL_COLOR9=fc4a6d
TERMINAL_CURSOR=ffcc00
TERMINAL_FOREGROUND=ffcc00
TERMINAL_THEME_ACCURACY=128
TERMINAL_THEME_AUTO_BGFG=False
TERMINAL_THEME_EXTEND_PALETTE=True
TERMINAL_THEME_MODE=manual
THEME_STYLE=oomox
TXT_BG=89a1e2
TXT_FG=383e5b
UNITY_DEFAULT_LAUNCHER_STYLE=False
WM_BORDER_FOCUS=fe9bce
WM_BORDER_UNFOCUS=25283f

77
.config/oomox/colors/rice Normal file
View File

@@ -0,0 +1,77 @@
ACCENT_BG=fe9bce
BASE16_GENERATE_DARK=False
BASE16_INVERT_TERMINAL=False
BASE16_MILD_TERMINAL=False
BG=25283f
BTN_BG=25283f
BTN_FG=fe9bce
BTN_OUTLINE_OFFSET=5
BTN_OUTLINE_WIDTH=2
CARET1_FG=fe9bce
CARET2_FG=fe9bce
CARET_SIZE=0.05
CINNAMON_OPACITY=1.0
FG=b1d4e9
GRADIENT=0.0
GTK3_GENERATE_DARK=True
HDR_BG=25283f
HDR_BTN_BG=25283f
HDR_BTN_FG=fe9bce
HDR_FG=b1d4e9
ICONS_ARCHDROID=dddddd
ICONS_DARK=282c34
ICONS_LIGHT=5294e2
ICONS_LIGHT_FOLDER=b1d4e9
ICONS_MEDIUM=545d89
ICONS_NUMIX_STYLE=4
ICONS_STYLE=papirus_icons
ICONS_SYMBOLIC_ACTION=545d89
ICONS_SYMBOLIC_PANEL=545d89
MATERIA_PANEL_OPACITY=0.6
MATERIA_SELECTION_OPACITY=0.32
MATERIA_STYLE_COMPACT=True
MENU_BG=303641
MENU_FG=d3dae3
NAME="rice"
OUTLINE_WIDTH=2
ROUNDNESS=4
SEL_BG=89a1e2
SEL_FG=383e5b
SPACING=3
SPOTIFY_PROTO_BG=282c34
SPOTIFY_PROTO_FG=ffcc00
SPOTIFY_PROTO_SEL=285bff
SURUPLUS_GRADIENT1=d3dae3
SURUPLUS_GRADIENT2=5294e2
SURUPLUS_GRADIENT_ENABLED=False
TERMINAL_ACCENT_COLOR=89a1e2
TERMINAL_BACKGROUND=25283f
TERMINAL_BASE_TEMPLATE=lolitastic
TERMINAL_COLOR0=33405e
TERMINAL_COLOR1=8b2965
TERMINAL_COLOR10=a3c79a
TERMINAL_COLOR11=e5cf86
TERMINAL_COLOR12=90b3de
TERMINAL_COLOR13=a12b89
TERMINAL_COLOR14=89a1e2
TERMINAL_COLOR15=327178
TERMINAL_COLOR2=9db565
TERMINAL_COLOR3=e48d5f
TERMINAL_COLOR4=4c91de
TERMINAL_COLOR5=9d2891
TERMINAL_COLOR6=445898
TERMINAL_COLOR7=a3d7db
TERMINAL_COLOR8=616e8c
TERMINAL_COLOR9=b24d89
TERMINAL_CURSOR=ffcc00
TERMINAL_FOREGROUND=b1d4e9
TERMINAL_THEME_ACCURACY=128
TERMINAL_THEME_AUTO_BGFG=False
TERMINAL_THEME_EXTEND_PALETTE=True
TERMINAL_THEME_MODE=auto
THEME_STYLE=oomox
TXT_BG=25283f
TXT_FG=b1d4e9
UNITY_DEFAULT_LAUNCHER_STYLE=False
WM_BORDER_FOCUS=fe9bce
WM_BORDER_UNFOCUS=25283f

View File

@@ -0,0 +1 @@
{"gtk2_hidpi": false, "OPTION_GTK3_CURRENT_VERSION_ONLY": false, "OPTION_EXPORT_CINNAMON_THEME": false, "default_path": "/home/poslop/.themes"}

View File

@@ -0,0 +1 @@
{"default_path": "/home/poslop/.icons"}

View File

@@ -0,0 +1 @@
{"window_width": 1892, "window_height": 962, "preset_list_minimal_width": 150, "preset_list_width": 150, "preset_list_sections_expanded": {"presets": true, "plugins": true, "user": true}}

View File

@@ -0,0 +1,9 @@
# BurntSienna
## Screenshots
![BurntSienna](./screenshot.png)
## More
Montserrat Font is necessary, it is available on Google Fonts:
https://fonts.google.com/specimen/Montserrat<br>
Author: https://github.com/pjaspinski

View File

@@ -0,0 +1,6 @@
[Base]
button = ef8450
sidebar = 242629
player = 242629
main = 303336
button-active = ef8450

Binary file not shown.

After

Width:  |  Height:  |  Size: 275 KiB

View File

@@ -0,0 +1,226 @@
* {
font-family: Montserrat;
}
/* Page titles */
h1 {
font-weight: 700 !important;
}
/* Song name in player */
.main-nowPlayingWidget-nowPlaying .main-trackInfo-name {
overflow: unset;
font-size: 20px !important;
}
/* Artist name in player */
.main-nowPlayingWidget-nowPlaying .main-trackInfo-artists {
overflow: unset;
padding-top: 5px;
font-size: 15px;
}
.main-type-finale {
line-height: 17px;
}
/* Icons */
.main-trackList-rowPlayPauseIcon {
transform: scale(1.3);
}
.x-downloadButton-button svg {
height: 32px;
width: 32px;
}
/* Progress and remaining time */
.main-playbackBarRemainingTime-container,
.playback-bar__progress-time-elapsed,
.playback-bar__progress-time {
font-size: 15px;
margin-left: 5px;
margin-right: 5px;
}
/* Player play button */
.main-playPauseButton-button {
background-color: unset;
color: var(--spice-subtext);
}
.main-playPauseButton-button svg {
height: 28px;
width: 28px;
}
/* Progress bar */
.progress-bar {
--fg-color: var(--spice-button);
}
.progress-bar__bg,
.progress-bar__fg,
.progress-bar__fg_wrapper {
height: 5px;
}
.progress-bar-wrapper {
margin-left: 5px;
margin-right: 5px;
}
/* Extra controls */
.control-button::before {
font-size: 20px;
}
.ExtraControls svg {
height: 20px;
width: 20px;
}
/* Removing gradients */
.main-entityHeader-backgroundColor,
.main-actionBarBackground-background {
background-color: unset !important;
background-image: none;
}
/* Cover shadow */
.main-entityHeader-shadow {
-webkit-box-shadow: 0 4px 20px rgba(var(--spice-rgb-shadow), 0.5);
box-shadow: 0 4px 20px rgba(var(--spice-rgb-shadow), 0.5);
}
/* Top bar */
.main-topBar-background {
background-color: #3a3d42 !important;
}
/* Playing icon */
.main-trackList-playingIcon {
filter: saturate(0%);
}
/* Playlist like button */
.main-actionBar-ActionBarRow .main-addButton-button .Svg-ulyrgf-0 {
height: unset;
width: unset;
}
/* Order button */
.x-sortBox-sortDropdown {
margin-top: 3px;
}
/* Sidebar playlists menu */
.main-rootlist-rootlistDividerGradient {
background: unset;
}
.main-rootlist-rootlistDivider {
background-color: var(--spice-button);
}
/* Search box */
.x-searchInput-searchInputInput {
font-size: 18px;
}
/* Aritsts names */
.main-type-mesto {
font-size: 16px;
line-height: 20px;
}
/* Songs names */
.main-type-ballad {
font-size: 18px;
}
/* Cards descriptions */
.main-cardSubHeader-root {
overflow: hidden !important;
}
/* Ad title */
.desktoproutes-homepage-takeover-ad-hptoNativeOriginal-header {
font-weight: 700 !important;
}
/* Friends names */
.main-buddyFeed-username a {
color: var(--spice-text) !important;
font-size: 17px;
font-weight: 500;
}
/* Friends songs and artists */
.main-buddyFeed-artistAndTrackName a,
.main-buddyFeed-playbackContextLink span {
font-size: 13px;
}
/* Cover height */
.main-coverSlotExpanded-container {
height: var(--nav-bar-width) + 8px;
}
/* Scrollbars */
.os-scrollbar-handle {
background: var(--spice-button) !important;
border-radius: 8px;
}
/* Making index column wider so that lighter background that
highlights selected song contains multi-digit song numbers */
/* It looks good up to 4 digits, I figured that no one has playlists with more music than that ;) */
.main-trackList-trackList.main-trackList-indexable .main-trackList-trackListRowGrid {
grid-template-columns: [index] 48px [first] 6fr [var1] 4fr [var2] 3fr [last] minmax(120px, 1fr) !important;
}
/* Text boxes in settings */
.main-dropDown-dropDown {
background-color: var(--spice-button-disabled);
}
/* Facebook button */
.x-settings-facebookButton {
background-color: unset !important;
}
/* Playlist play button color */
.encore-dark-theme .encore-bright-accent-set,
.encore-dark-theme .encore-bright-accent-set:hover {
background-color: var(--spice-button) !important;
}
/* Volume bar margins */
.volume-bar .progress-bar {
margin: 0 0.4rem;
}
.volume-bar .playback-progressbar {
width: 70%;
}
.volume-bar {
flex: 0 150px;
}
/* Menu hidden under the button with account name - font size and family unification */
.ellipsis-one-line {
font-family: Montserrat;
}
.ellipsis-one-line.main-type-mesto {
font-size: 14px;
}
/* Removal of empty space above playlist cover and title on narrow viewports */
.main-entityHeader-container.main-entityHeader-nonWrapped {
min-height: 325px;
height: 15vh;
}

View File

@@ -0,0 +1,132 @@
# Contributor Covenant Code of Conduct
## Our Pledge
We as members, contributors, and leaders pledge to make participation in our
community a harassment-free experience for everyone, regardless of age, body
size, visible or invisible disability, ethnicity, sex characteristics, gender
identity and expression, level of experience, education, socio-economic status,
nationality, personal appearance, race, caste, color, religion, or sexual
identity and orientation.
We pledge to act and interact in ways that contribute to an open, welcoming,
diverse, inclusive, and healthy community.
## Our Standards
Examples of behavior that contributes to a positive environment for our
community include:
* Demonstrating empathy and kindness toward other people
* Being respectful of differing opinions, viewpoints, and experiences
* Giving and gracefully accepting constructive feedback
* Accepting responsibility and apologizing to those affected by our mistakes,
and learning from the experience
* Focusing on what is best not just for us as individuals, but for the overall
community
Examples of unacceptable behavior include:
* The use of sexualized language or imagery, and sexual attention or advances of
any kind
* Trolling, insulting or derogatory comments, and personal or political attacks
* Public or private harassment
* Publishing others' private information, such as a physical or email address,
without their explicit permission
* Other conduct which could reasonably be considered inappropriate in a
professional setting
## Enforcement Responsibilities
Community leaders are responsible for clarifying and enforcing our standards of
acceptable behavior and will take appropriate and fair corrective action in
response to any behavior that they deem inappropriate, threatening, offensive,
or harmful.
Community leaders have the right and responsibility to remove, edit, or reject
comments, commits, code, wiki edits, issues, and other contributions that are
not aligned to this Code of Conduct, and will communicate reasons for moderation
decisions when appropriate.
## Scope
This Code of Conduct applies within all community spaces, and also applies when
an individual is officially representing the community in public spaces.
Examples of representing our community include using an official e-mail address,
posting via an official social media account, or acting as an appointed
representative at an online or offline event.
## Enforcement
Instances of abusive, harassing, or otherwise unacceptable behavior may be
reported to the community leaders responsible for enforcement at
[INSERT CONTACT METHOD].
All complaints will be reviewed and investigated promptly and fairly.
All community leaders are obligated to respect the privacy and security of the
reporter of any incident.
## Enforcement Guidelines
Community leaders will follow these Community Impact Guidelines in determining
the consequences for any action they deem in violation of this Code of Conduct:
### 1. Correction
**Community Impact**: Use of inappropriate language or other behavior deemed
unprofessional or unwelcome in the community.
**Consequence**: A private, written warning from community leaders, providing
clarity around the nature of the violation and an explanation of why the
behavior was inappropriate. A public apology may be requested.
### 2. Warning
**Community Impact**: A violation through a single incident or series of
actions.
**Consequence**: A warning with consequences for continued behavior. No
interaction with the people involved, including unsolicited interaction with
those enforcing the Code of Conduct, for a specified period of time. This
includes avoiding interactions in community spaces as well as external channels
like social media. Violating these terms may lead to a temporary or permanent
ban.
### 3. Temporary Ban
**Community Impact**: A serious violation of community standards, including
sustained inappropriate behavior.
**Consequence**: A temporary ban from any sort of interaction or public
communication with the community for a specified period of time. No public or
private interaction with the people involved, including unsolicited interaction
with those enforcing the Code of Conduct, is allowed during this period.
Violating these terms may lead to a permanent ban.
### 4. Permanent Ban
**Community Impact**: Demonstrating a pattern of violation of community
standards, including sustained inappropriate behavior, harassment of an
individual, or aggression toward or disparagement of classes of individuals.
**Consequence**: A permanent ban from any sort of public interaction within the
community.
## Attribution
This Code of Conduct is adapted from the [Contributor Covenant][homepage],
version 2.1, available at
[https://www.contributor-covenant.org/version/2/1/code_of_conduct.html][v2.1].
Community Impact Guidelines were inspired by
[Mozilla's code of conduct enforcement ladder][Mozilla CoC].
For answers to common questions about this code of conduct, see the FAQ at
[https://www.contributor-covenant.org/faq][FAQ]. Translations are available at
[https://www.contributor-covenant.org/translations][translations].
[homepage]: https://www.contributor-covenant.org
[v2.1]: https://www.contributor-covenant.org/version/2/1/code_of_conduct.html
[Mozilla CoC]: https://github.com/mozilla/diversity
[FAQ]: https://www.contributor-covenant.org/faq
[translations]: https://www.contributor-covenant.org/translations

View File

@@ -0,0 +1,119 @@
# Contributing guidelines
Here are the guidelines for contributing to this repository.
## Before contributing
For avoiding having too many similar themes with small changes, themes are merged only if they bring **sensitive** changes to default Spotify UI and are different from existing themes.
A theme name (as well as color scheme name) should consist of one word starting with an uppercase letter and shouldn't contain `spicetify` or any whitespace in it; if a "-" is present in the name it must be followed by an uppercase letter.
## How to contribute
If you want to add your theme:
* Fork this repository
* Create another folder named after your theme name
* Create `color.ini` and `user.css` files
* Create a `README.md` in it with the following structure
```markdown
# THEME_NAME
## Screenshots
[Put at least one image per color scheme here]
## More
[Specify any needed font; (optionally) author name and/or any other info about the theme]
```
* Add the theme preview to [THEMES.md](./THEMES.md) (themes are in alphabetical order) following this structure if it has only one color scheme
```markdown
## THEME_NAME
[A single image of the theme]
```
If, instead, more than one color scheme is present
```markdown
## THEME_NAME
#### COLOR_SCHEME1_NAME
[A single image of the theme using the color scheme]
#### COLOR_SCHEME2_NAME
[A single image of the theme using the color scheme]
...
```
* Commit only once, more details in the **Commit Message**
* Open a Pull Request and mention the most important changes you've made to the UI (ignoring the color scheme)
**Thanks to all the contributors.**
## Commit Message
**NOTE: commit only once when you add a new theme or scheme (you can also commit again later, if you need to).**
### Format
<type>(<scope>): <subject>
<BLANK LINE>
<body>[optional]
**Any line of the commit message cannot be longer than 100 characters!**
* **type:** feat | fix | docs | chore
* **feat:** A new theme | A new scheme | A new feature
* **fix:** A bug fix
* **docs:** Change the `README.md` of the theme | Change the `THEMES.md`
* **chore:** Add more screenshots | Change the screentshots | Other things
* **scope:** THEMES | `<ThemeName>`
* THEMES is a fixed format: `docs(THEMES)`
* In other cases, use the theme name
* **subject:** What changes you have done
* Use the imperative, present tense: "change" not "changed" nor "changes"
* Don't capitalize first letter
* No dot (.) at the end
* **body**: More details of your changes, you can mention the most important changes here
### Example (Turntable theme)
* feat
```
feat(Turntable): add Turntable theme
```
```
feat(Turntable): control the rotation of the turntable
Rotate the turntable by playing state.
```
* fix
```
fix(Turntable): show the cursor outside the context menu
```
* docs
```
docs(Turntable): update README.md
```
```
docs(THEMES): add preview for the Turntable
```
* chore
```
chore(Turntable): add screenshots of the Turntable
```
If you want to learn more, view the [Angular - Git Commit Guidelines](https://github.com/angular/angular.js/blob/master/DEVELOPERS.md#-git-commit-guidelines).

View File

@@ -0,0 +1,13 @@
# Default
Default look of Spotify with different color schemes.
## Screenshot
![screenshot](./ocean.png)
## Info
### Ocean
Part of material ocean themes, [checkout here](https://github.com/material-ocean) for the same theme for different applications. By @Blacksuan19

View File

@@ -0,0 +1,16 @@
[Ocean]
text = FFFFFF
subtext = F1F1F1
main = 0F111A
sidebar = 0F111A
player = 0F111A
card = 00010A
shadow = 0F111A
selected-row = F1F1F1
button = FF4151
button-active = F1F1F1
button-disabled = 434C5E
tab-active = FF4151
notification = 00010A
notification-error = FF4151
misc = 00010A

Binary file not shown.

After

Width:  |  Height:  |  Size: 226 KiB

View File

@@ -0,0 +1,36 @@
# Dreary
## Screenshots
### BIB
![BIB Screenshot](bib.png)
### Psycho
![Psycho Screenshot](psycho.png)
### Deeper
![Deeper Screenshot](deeper.png)
### Mono
![Mono Screenshot](mono.png)
### Golden
![Golden Screenshot](golden.png)
### Graytone-Blue
![Graytone-Blue Screenshot](graytone-blue.png)
## Important
Certain aspects of the theme, such as the borders around playlist names, require Sidebar Config to be enabled. It is not required but recommended.
You can enable it by running `spicetify config sidebar_config 1`.
## More
A chill theme that keeps things bordered in and organized
BIB color scheme based on original [BIB-Green](https://github.com/spicetify/spicetify-themes/tree/master/BIB-Green)
Theme based on Sleek theme: https://github.com/spicetify/spicetify-themes/tree/v2/Sleek

Binary file not shown.

After

Width:  |  Height:  |  Size: 892 KiB

View File

@@ -0,0 +1,154 @@
[Psycho]
; Red on dark grey background
text = e00000
subtext = ffffff
button-text = ffffff
main = 101010
sidebar = 171717
player = 171717
subbutton-text = 101010
card = 171717
shadow = 6d1414
selected-row = 330d0d
sub-button = a20606
button = e00000
button-active = e00000
button-disabled = 404040
tab-active = 171717
notification = 5e0000
notification-error = 5e0000
playback-bar = ff4700
misc = adadad
[Deeper]
; Light blue on Dark Background
text = 4f9a87
subtext = 406560
button-text = 4f9a87
main = 040614
sidebar = 0F111A
player = 0F111A
subbutton-text = 040614
card = 0f1118
shadow = 406560
selected-row = 040614
sub-button = 4f9a87
button = 0d3a2e
button-active = 106165
button-disabled = 0C1C19
tab-active = 0a1527
notification = 051024
notification-error = 051024
playback-bar = 4f9a87
misc = 406560
[BIB]
; Green on dark grey background
text = 8bc34a
subtext = b4b4b4
button-text = 202020
main = 202020
sidebar = 202020
player = 242424
subbutton-text = 202020
card = 242424
shadow = 000000
selected-row = 2a3c17
sub-button = 6a913d
button = 537b25
button-active = 98da4b
button-disabled = 353535
tab-active = 303030
notification = 242424
notification-error = 242424
playback-bar = 8bc34a
misc = 8bc34a
[Mono]
;Grays, Blacks, Whites, You get the gist.
text = FFFFFF
subtext = d3d3d3
button-text = FFFFFF
main = 000000
sidebar = 5d5e60
subbutton-text = d3d3d3
player = 181818
card = 5d5e60
selected-row = 2D2A32
shadow = FFFFFF
sub-button = d3d3d3
button = d3d3d3
button-active = d3d3d3
button-disabled = 181818
tab-active = d3d3d3
notification = 181818
notification-error = b5cbb7
playback-bar = d3d3d3
misc = d3d3d3
[Golden]
;Gold
text = FFE002
subtext = B28228
button-text = FFE002
main = 1C1C1C
sidebar = 3B3B3B
subbutton-text = 3B3B3B
player = 1C1C1C
card = 3B3B3B
selected-row = 1c1c1c
shadow = FFE002
sub-button = B28228
button = B28228
button-active = B28228
button-disabled = FFB606
tab-active = B28228
notification = FFB606
notification-error = b5cbb7
playback-bar = B28228
misc = B28228
[Graytone-Blue]
; Gray colors with blue highlights
text = 4f9a87
subtext = 406560
button-text = 4f9a87
main = 111115
sidebar = 1e2027
subbutton-text = 040614
player = 1a1b1d
card = 0f1118
selected-row = 040614
shadow = 406560
sub-button = 4f9a87
button = 0d3a2e
button-active = 106165
button-disabled = 0C1C19
tab-active = 0a1527
notification = 051024
notification-error = 051024
playback-bar = 4f9a87
misc = 406560
; Description
; text = main text, playlist names in main field, name of playlist selected in sidebar, headings
; subtext = text in main buttons in sidebar, playlist names in sidebar, artist names, and mini infos
; button-text = text in main buttons in sidebar when active
; main = main field or main bg
; sidebar = sidebar bg
; subbutton-text = text of buttons that use the text color or subtext color as a background
; player = player bg
; card = card bg
; shadow = bg of buttons like account, pop-up lyrics, full app display in main field
; selected-row = color of the song selected
; sub-button = caption and details of playlist, download and options button
; button = playlist buttons bg in sidebar, drop-down menus, now playing song, like button
; button-active = hover on song selected
; button-disabled = seekbar bg, volume bar bg, scrollbar
; tab-active = button bg in main field (playlists, podcasts, artists, albums)
; notification = notification ('Added to liked songs' etc.)
; notification-error = error
; playback-bar = seekbar fg, main play/pause button bg
; misc = miscellaneous

Binary file not shown.

After

Width:  |  Height:  |  Size: 984 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 847 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 583 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 950 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 850 KiB

View File

@@ -0,0 +1,609 @@
/* Dreary Theme*/
.main-rootlist-rootlistDividerGradient {
display: none;
visibility: hidden !important;
}
.main-rootlist-rootlistDivider {
background-color: var(--spice-text) !important;
}
input {
background-color: unset !important;
border-bottom: solid 1px var(--spice-text) !important;
border-radius: 0 !important;
padding: 6px 10px 6px 48px;
color: var(--spice-text) !important;
}
.x-833-searchInput-searchInputSearchIcon {
color: var(--spice-text) !important;
}
.main-home-homeHeader,
.x-441-entityHeader-overlay,
.main-actionBarBackground-background,
.main-entityHeader-overlay,
.main-entityHeader-backgroundColor {
background-color: unset !important;
background-image: unset !important;
}
.main-playlistEditDetailsModal-textElement:focus {
border: 0;
}
.connect-title,
.connect-header {
display: none;
}
/* Topbar visibility bug */
.main-topBar-topbarContent:not(.main-topBar-topbarContentFadeIn) > * {
opacity: unset !important;
}
.main-entityHeader-topbarContent:not(.main-entityHeader-topbarContentFadeIn)
> * {
opacity: 0 !important;
}
/* Remove Topbar background colour */
.main-topBar-background {
background-color: unset !important;
}
.main-topBar-overlay {
background-color: var(--spice-main);
}
.main-entityHeader-shadow {
box-shadow: 0 04px 20px #21212130;
}
.main-trackList-playingIcon {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg id='playing-icon' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 24'%3E%3Cdefs%3E%3Cstyle%3E %23playing-icon %7B fill: %2320BC54; %7D @keyframes play %7B 0%25 %7Btransform: scaleY(1);%7D 3.3%25 %7Btransform: scaleY(0.9583);%7D 6.6%25 %7Btransform: scaleY(0.9166);%7D 9.9%25 %7Btransform: scaleY(0.8333);%7D 13.3%25 %7Btransform: scaleY(0.7083);%7D 16.6%25 %7Btransform: scaleY(0.5416);%7D 19.9%25 %7Btransform: scaleY(0.4166);%7D 23.3%25 %7Btransform: scaleY(0.25);%7D 26.6%25 %7Btransform: scaleY(0.1666);%7D 29.9%25 %7Btransform: scaleY(0.125);%7D 33.3%25 %7Btransform: scaleY(0.125);%7D 36.6%25 %7Btransform: scaleY(0.1666);%7D 39.9%25 %7Btransform: scaleY(0.1666);%7D 43.3%25 %7Btransform: scaleY(0.2083);%7D 46.6%25 %7Btransform: scaleY(0.2916);%7D 49.9%25 %7Btransform: scaleY(0.375);%7D 53.3%25 %7Btransform: scaleY(0.5);%7D 56.6%25 %7Btransform: scaleY(0.5833);%7D 59.9%25 %7Btransform: scaleY(0.625);%7D 63.3%25 %7Btransform: scaleY(0.6666);%7D 66.6%25 %7Btransform: scaleY(0.6666);%7D 69.9%25 %7Btransform: scaleY(0.6666);%7D 73.3%25 %7Btransform: scaleY(0.6666);%7D 76.6%25 %7Btransform: scaleY(0.7083);%7D 79.9%25 %7Btransform: scaleY(0.75);%7D 83.3%25 %7Btransform: scaleY(0.8333);%7D 86.6%25 %7Btransform: scaleY(0.875);%7D 89.9%25 %7Btransform: scaleY(0.9166);%7D 93.3%25 %7Btransform: scaleY(0.9583);%7D 96.6%25 %7Btransform: scaleY(1);%7D %7D %23bar1 %7B transform-origin: bottom; animation: play 0.9s -0.51s infinite; %7D %23bar2 %7B transform-origin: bottom; animation: play 0.9s infinite; %7D %23bar3 %7B transform-origin: bottom; animation: play 0.9s -0.15s infinite; %7D %23bar4 %7B transform-origin: bottom; animation: play 0.9s -0.75s infinite; %7D %3C/style%3E%3C/defs%3E%3Ctitle%3Eplaying-icon%3C/title%3E%3Crect id='bar1' class='cls-1' width='4' height='24'/%3E%3Crect id='bar2' class='cls-1' x='6' width='4' height='24'/%3E%3Crect id='bar3' class='cls-1' x='12' width='4' height='24'/%3E%3Crect id='bar4' class='cls-1' x='18' width='4' height='24'/%3E%3C/svg%3E");
background: var(--spice-text);
content-visibility: hidden;
}
span.artist-artistVerifiedBadge-badge svg:nth-child(1) {
fill: black;
}
/* Hide Banner Ads */
.main-leaderboardComponent-container {
display: none;
}
.desktoproutes-homepage-takeover-ad-hptoComponent-parentContainer,
.desktoproutes-homepage-takeover-ad-hptoComponent-container {
display: none !important;
}
/* Hide Upgrade Button */
.main-topBar-UpgradeButton {
display: none;
}
[aria-label="Playing"] {
color: var(--spice-text);
}
/* Fix design fault */
@media (min-width: 1024px) {
.main-trackList-trackListHeader {
border-bottom: solid 1px;
margin: 10px;
}
}
.main-trackList-trackListHeaderStuck.main-trackList-trackListHeader {
background: var(--spice-main);
border: 0;
}
.main-trackList-trackListHeaderStuck .main-trackList-trackListHeaderRow {
border-bottom: 1px solid rgba(var(--spice-rgb-button-disabled), 0.8);
}
/* Changing Playback Bar Location */
.progress-bar__bg,
.progress-bar__fg_wrapper {
border-radius: 0;
z-index: 1;
}
.playback-bar__progress-time {
display: none;
}
.playback-bar {
width: 100%;
bottom: 83px;
position: absolute;
left: -1px;
z-index: 1;
}
.main-playbackBarRemainingTime-container {
position: absolute;
left: 49.68%;
top: 60%;
border: solid 1px;
border-radius: 20px;
z-index: 5;
color: var(--spice-subtext) !important;
padding-left: 5px;
}
.player-controls__buttons {
transform: translateY(6px);
}
.main-playPauseButton-button {
background-color: var(--spice-main);
box-shadow: var(--spice-shadow) 0 5px 9px 0px;
--button-size: 50px !important;
color: var(--spice-text);
background-color: var(--spice-player) !important;
cursor: pointer;
}
.player-controls__buttons {
align-items: center;
position: relative;
left: 2.3%;
}
.main-entityTitle-subtitle.main-entityTitle-small.main-entityTitle-uppercase.main-entityTitle-bold {
border: 2px var(--spice-text) solid;
border-radius: 4px;
width: fit-content;
display: inline;
text-align: center;
padding: 0 5px;
}
.os-theme-spotify.os-host-transition
> .os-scrollbar-vertical
> .os-scrollbar-track
> .os-scrollbar-handle {
border-radius: 4px;
background-color: var(--spice-text);
}
/* Hide Profile Options in Nav Bar */
.main-userWidget-notificationIndicator {
display: none;
}
.main-avatar-userIcon {
color: white;
}
.main-userWidget-box {
background-color: var(--spice-sidebar);
text-decoration-line: underline;
}
/* Improve Sidebar Buttons */
.main-likedSongsButton-likedSongsIcon {
background: var(--spice-text);
}
.main-likedSongsButton-likedSongsIcon {
color: var(--spice-sidebar);
}
.main-trackList-trackListHeaderRow {
border-bottom: 1px solid rgba(var(--spice-rgb-button-disabled), 0.8);
}
.main-trackList-trackListHeaderStuck .main-trackList-trackListHeaderRow {
border-bottom: 1px solid rgba(var(--spice-rgb-button-disabled), 0.8);
}
.main-trackList-trackListRow.main-trackList-selected,
.main-trackList-trackListRow.main-trackList-selected:hover {
background-color: rgba(var(--spice-rgb-selected-row), 0.8) !important;
}
.main-trackList-trackListRow:focus-within,
.main-trackList-trackListRow:hover {
background-color: rgba(var(--spice-rgb-selected-row), 0.4);
}
.main-duplicateTracksDialog-container {
background-color: var(--spice-card);
color: var(--spice-subtext);
}
.main-duplicateTracksDialog-secondaryButton {
color: var(--spice-text);
}
._9eb5acf729a98d62135ca21777fef244-scss {
color: var(--spice-card);
}
.x-sortBox-sortDropdown,
.x-filterBox-expandButton {
color: var(--spice-text) !important;
}
/* Main Play Button Change */
.main-playButton-PlayButton.main-playButton-primary {
color: var(--spice-main);
background-color: var(--spice-playback-bar);
cursor: pointer !important;
}
.main-entityHeader-metaDataText.main-type-mesto:nth-child(2) {
display: none;
}
.main-entityHeader-image {
border-radius: 10%;
}
.x-downloadButton-button {
background: var(--spice-player);
border-radius: 50%;
}
/* Link playback-bar color */
.playback-bar .progress-bar__fg {
background-color: var(--spice-playback-bar);
}
:not(.no-focus-outline) .progress-bar:focus-within .progress-bar__fg {
background-color: var(--spice-playback-bar);
}
.main-navBar-navBarLinkActive {
background-color: var(--spice-main);
}
.main-navBar-navBarLinkActive,
.main-navBar-navBarLinkActive:focus,
.main-navBar-navBarLinkActive:hover,
.logo {
color: var(--spice-text) !important;
background-color: var(--spice-selected-row);
}
.progress-bar__slider {
opacity: 1 !important;
background-color: var(--spice-sidebar) !important;
height: 16px !important;
border: solid 2px var(--spice-subtext) !important;
width: 16px !important;
display: unset !important;
}
a.x-categoryCard-CategoryCard,
a.x-heroCategoryCard-HeroCategoryCard {
color: var(--spice-subtext);
}
.main-heroCard-card a,
.collection-collectionEntityHeroCard-descriptionContainer {
color: var(--spice-subtext) !important;
}
.main-buddyFeed-activityMetadata .main-buddyFeed-artistAndTrackName a,
.main-buddyFeed-activityMetadata .main-buddyFeed-username a,
.main-buddyFeed-activityMetadata .main-buddyFeed-playbackContextLink,
p.main-buddyFeed-timestamp.main-type-finale,
.main-buddyFeed-findFriendsButton .main-buddyFeed-findFriendsIcon {
color: var(--spice-subtext);
}
/* Recolor sub-buttons */
.main-moreButton-button {
color: var(--spice-sub-button);
}
.x-downloadButton-button {
color: var(--spice-sub-button) !important;
}
.x-downloadButton-button:hover {
color: var(--spice-text) !important;
}
.main-addButton-button {
color: var(--spice-sub-button);
}
.main-entityHeader-metaDataText {
color: var(--spice-sub-button);
}
.main-duration-container {
color: var(--spice-sub-button);
}
.main-tag-container {
background-color: var(--spice-sub-button);
}
.x-sortBox-sortDropdown {
background-color: var(--spice-selected-row) !important;
}
.x-filterBox-searchIconContainer {
color: var(--spice-sub-button) !important;
}
.x-filterBox-expandButton:focus,
.x-filterBox-expandButton:hover {
background-color: var(--spice-selected-row) !important;
}
.main-contextMenu-menuItemButton:not(.main-contextMenu-disabled):focus,
.main-contextMenu-menuItemButton:not(.main-contextMenu-disabled):hover {
background-color: var(--spice-selected-row) !important;
}
.view-homeShortcutsGrid-shortcut {
background-color: rgba(var(--spice-rgb-selected-row), 0.6) !important;
}
.view-homeShortcutsGrid-shortcut:focus-within,
.view-homeShortcutsGrid-shortcut:hover,
.view-homeShortcutsGrid-shortcut[data-context-menu-open="true"] {
background-color: var(--spice-selected-row) !important;
}
.main-rootlist-textWrapper.main-type-viola {
cursor: pointer !important;
}
.main-navBar-navBar {
border-right: 2px solid var(--spice-misc);
}
.cMigZB * {
color: var(--spice-misc) !important;
}
.main-trackInfo-name a {
color: var(--spice-misc) !important;
}
.main-trackInfo-artists a:link {
color: var(--spice-misc) !important;
}
[class*=" spoticon-"]:before {
color: var(--spice-misc) !important;
}
.main-connectToFacebook-headerTitle {
color: var(--spice-misc) !important;
}
.main-repeatButton-button,
.main-skipForwardButton-button,
.main-skipBackButton-button,
.main-shuffleButton-button {
cursor: pointer !important;
}
#spicetify-playlist-list {
display: inline;
height: 10%;
align-items: center;
box-sizing: border-box;
position: relative;
overflow: hidden;
overflow-y: scroll;
}
#spicetify-playlist-list > div > div:nth-child(2) > li {
margin: 4px 3.2vw;
width: 84%;
flex-shrink: 0;
padding-top: 10%;
padding-bottom: 10%;
box-sizing: border-box;
position: relative;
margin-bottom: -1px;
border-radius: 10px;
border: 2px solid var(--spice-text);
display: flex;
text-align: center;
flex-direction: column;
transition: all 500ms;
}
#spicetify-playlist-list > div > div:nth-child(2) > li:hover {
border-color: var(--spice-button);
}
.main-connectToFacebook-text,
.main-connectToFacebook-disclaimer {
color: unset !important;
}
.main-type-mesto {
color: var(--spice-button);
}
.main-rootlist-rootlistItemLink.main-rootlist-rootlistItemLinkActive,
.main-rootlist-rootlistItemLink {
transition: 500ms;
}
.main-rootlist-rootlistItemLink.main-rootlist-rootlistItemLinkActive,
.main-rootlist-rootlistItemLink:focus {
color: var(--spice-text);
}
.view-homeShortcutsGrid-shortcut {
background-color: rgba(var(--spice-rgb-selected-row), 0.6) !important;
border: solid 3px var(--spice-text);
border-radius: 10px;
padding-bottom: 80.7px;
transition: 500ms;
}
.main-card-card .main-card-cardLink {
border: solid 3px;
transition: 500ms;
border-radius: 27px;
}
.main-card-card {
border-radius: 27px !important;
}
.view-homeShortcutsGrid-shortcut:hover,
.main-card-card .main-card-cardLink:hover {
border-color: var(--spice-button);
}
.main-createPlaylistButton-button,
.main-collectionLinkButton-collectionLinkButton {
padding-left: 16px !important;
padding-top: 8px;
}
.main-trackCreditsModal-closeBtn {
color: var(--spice-button-disabled) !important;
}
.main-contextMenu-menu {
max-height: 400px;
opacity: 0.9676;
}
.main-trackList-trackList {
border-radius: 30px;
background-color: var(--spice-player);
border: 1px solid;
}
.main-buddyFeed-friendsFeedContainer {
border-left: solid 2px var(--spice-text);
}
.main-yourEpisodesButton-yourEpisodesIcon {
background: var(--spice-text);
}
.main-yourEpisodesButton-yourEpisodesIcon path {
fill: var(--spice-player);
opacity: 0.7;
}
.main-navBar-entryPoints > div:first-of-type {
margin-top: 20px;
}
.cMigZB {
cursor: pointer;
}
.control-button {
color: var(--spice-misc);
}
.main-buddyFeed-buddyFeed {
-webkit-box-shadow: none;
box-shadow: none;
}
.main-buddyFeed-friendActivity {
border-bottom: solid 1px;
}
.collection-collectionEntityHeroCard-likedSongs {
background: linear-gradient(
149.46deg,
var(--spice-sidebar),
var(--spice-main) 99.16%
) !important;
}
.main-repeatButton-button[disabled] {
color: var(--spice-button);
}
.main-shuffleButton-button[disabled] {
color: var(--spice-button);
}
.progress-bar_bg {
z-index: 20;
}
.main-deletePlaylistDialog-secondaryButton {
color: var(--spice-subbutton-text);
}
.main-connectToFacebook-facebookButton {
color: var(--spice-subbutton-text);
}
.div.GlueDropTarget.personal-library > *.active {
background: var(--spice-selected-row);
}
.main-connectBar-connectBar {
overflow: visible !important;
--triangle-position: 147px !important;
align-items: unset !important;
height: 0px !important;
position: absolute !important;
left: 80% !important;
display: flex !important;
bottom: 2% !important;
padding: unset !important;
}
#spicetify-playlist-list > div {
scroll-behavior: smooth;
overflow-y: scroll;
overflow: hidden;
contain: unset !important;
height: fit-content !important;
padding-bottom: 10px;
}
div.main-cardImage-imageWrapper.main-cardImage-roundedCorners
> div
> div
> svg
> path {
color: blue;
background-color: blue;
fill: var(--spice-sidebar);
opacity: 0.7;
}
div.main-cardImage-imageWrapper.main-cardImage-roundedCorners
> div
> div
> svg
> path {
color: blue;
background-color: blue;
fill: var(--spice-sidebar);
opacity: 0.7;
}
.main-yourEpisodes-coverContainer {
background-color: var(--spice-text);
}
.playback-bar__progress-time-elapsed {
visibility: hidden;
width: 0px;
height: 0px;
padding: 0px;
margin: 0px;
position: absolute;
}
.Root__nav-bar {
min-width: 281px !important;
}
.playback-bar__progress-time-elapsed {
display: none !important;
}
#spicetify-playlist-list > div {
height: 100% !important;
}

View File

@@ -0,0 +1,104 @@
# Dribbblish
### Base
![base](base.png)
### White
![white](white.png)
### Dark
![dark](dark.png)
### Nord-Light
![nord-light](nord-light.png)
### Nord-Dark
![nord-dark](nord-dark.png)
### Beach-Sunset
![beach-sunset](beach-sunset.png)
### Purple
![purple](purple.png)
### Samourai
![samourai](samourai.png)
### Gruvbox
![gruvbox](gruvbox.png)
## Features
### Resizable sidebar
<img src="https://i.imgur.com/1zomkmd.png" alt="img" align="center" width="500px">
### Customizable sidebar
Rearrange icons positions, stick icons to header or hide unnecessary to save space.
Turn on "Sidebar config" mode in Profile menu and hover on icon to show control buttons.
After you finish customizing, turn off Config mode in Profile menu to save.
<img src="https://i.imgur.com/86gqPe8.png" alt="img" align="center" width="500px">
### Playlist Folder image
Right click at folder and choose images for your playlist folder. Every image formats supported by Chrome can be used, but do keep image size small and in compressed format.
<img src="https://i.imgur.com/WGQ7Bev.gif" alt="img" align="center" width="500px">
### Left/Right expanded cover
In profile menu, toggle option "Right expanded cover" to change expaned current track cover image to left or right side, whereever you prefer.
## Auto-install
Make sure you are using spicetify >= v2.5.0 and Spotify >= v1.1.56.
### Windows
```powershell
Invoke-WebRequest -UseBasicParsing "https://raw.githubusercontent.com/spicetify/spicetify-themes/master/Dribbblish/install.ps1" | Invoke-Expression
```
## Manual Install
Run these commands:
### Linux and MacOS:
In **Bash**:
```bash
cd "$(dirname "$(spicetify -c)")/Themes/Dribbblish"
mkdir -p ../../Extensions
cp dribbblish.js ../../Extensions/.
spicetify config extensions dribbblish.js
spicetify config current_theme Dribbblish color_scheme base
spicetify config inject_css 1 replace_colors 1 overwrite_assets 1
spicetify apply
```
### Windows
In **Powershell**:
```powershell
cd "$(spicetify -c | Split-Path)\Themes\Dribbblish"
Copy-Item dribbblish.js ..\..\Extensions
spicetify config extensions dribbblish.js
spicetify config current_theme Dribbblish color_scheme base
spicetify config inject_css 1 replace_colors 1 overwrite_assets 1
spicetify apply
```
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:
```ini
[Patch]
xpui.js_find_8008 = ,(\w+=)32,
xpui.js_repl_8008 = ,${1}56,
```
## Change Color Schemes
There are 9 color schemes you can choose: `base`, `white`, `dark`, `dracula`, `nord-dark`, `nord-light`, `beach-sunset`, `samourai`, `purple`. Change scheme with commands:
```
spicetify config color_scheme <scheme name>
spicetify apply
```
## Auto-uninstall
### Windows
```powershell
Invoke-WebRequest -UseBasicParsing "https://raw.githubusercontent.com/spicetify/spicetify-themes/v2/Dribbblish/uninstall.ps1" | Invoke-Expression
```
## Manual uninstall
Remove the dribbblish script with the following commands
```
spicetify config extensions dribbblish.js-
```
And remove Patch lines you added in config file earlier. Finally, run:
```
spicetify apply
```

Binary file not shown.

After

Width:  |  Height:  |  Size: 772 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 532 KiB

View File

@@ -0,0 +1,180 @@
[base]
text = FFFFFF
subtext = F0F0F0
sidebar-text = FFFFFF
main = 000000
sidebar = 1ed760
player = 000000
card = 000000
shadow = 202020
selected-row = 797979
button = 1ed760
button-active = 1ed760
button-disabled = 535353
tab-active = 166632
notification = 1db954
notification-error = e22134
misc = BFBFBF
[white]
text = 363636
subtext = 3D3D3D
sidebar-text = FFF9F4
main = FFF9F4
sidebar = FFA789
player = FFF9F4
card = FFF9F4
shadow = d3d3d3
selected-row = 6D6D6D
button = ff8367
button-active = ff8367
button-disabled = 535353
tab-active = ffdace
notification = FFA789
notification-error = e22134
misc = BFBFBF
[dark]
text = F0F0F0
subtext = F0F0F0
sidebar-text = 0a0e14
main = 0a0e14
sidebar = C2D935
player = 0a0e14
card = 0a0e14
shadow = 202020
selected-row = DEDEDE
button = C2D935
button-active = C2D935
button-disabled = 535353
tab-active = 727d2b
notification = C2D935
notification-error = e22134
misc = BFBFBF
[dracula]
text = f8f8f2
subtext = f8f8f2
sidebar-text = F0F0F0
main = 44475a
sidebar = 6272a4
player = 44475a
card = 6272a4
shadow = 000000
selected-row = bd93f9
button = ffb86c
button-active = 8be9fd
button-disabled = 535353
tab-active = 6272a4
notification = bd93f9
notification-error = e22134
misc = BFBFBF
[nord-light]
text = 2e3440
subtext = 3b4252
sidebar-text = ECEFF4
main = ECEFF4
sidebar = 5E81AC
player = ECEFF4
card = ebcb8b
shadow = eceff4
selected-row = 4c566a
button = 81a1c1
button-active = 81a1c1
button-disabled = c0c0c0
tab-active = ebcb8b
notification = a3be8c
notification-error = bf616a
misc = BFBFBF
[nord-dark]
text = ECEFF4
subtext = E5E9F0
sidebar-text = 434c5e
main = 2e3440
sidebar = 88C0D0
player = 2e3440
card = 2e3440
shadow = 2E3440
selected-row = D8DEE9
button = 81A1C1
button-active = 81A1C1
button-disabled = 434C5E
tab-active = 434C5E
notification = A3BE8C
notification-error = BF616A
misc = BFBFBF
[purple]
text = f1eaff
subtext = f1eaff
sidebar-text = e0d0ff
main = 0A0E14
sidebar = 6F3C89
player = 0A0E14
card = 0A0E14
shadow = 3a2645
selected-row = EBDFFF
button = c76af6
button-active = 6F3C89
button-disabled = 535353
tab-active = 58306D
notification = ff9e00
notification-error = f61379
misc = DEDEDE
[samourai]
text = ebdbb2
subtext = ebdbb2
sidebar-text = 461217
main = 461217
sidebar = ebdbb2
player = 461217
card = 461217
shadow = 3a2645
selected-row = 909090
button = e7a52d
button-active = e7a52d
button-disabled = 535353
tab-active = e7a52d
notification = e7a52d
notification-error = e22134
misc = BFBFBF
[beach-sunset]
text = FFFFFF
subtext = F0F0F0
sidebar-text = F0F0F0
main = 262626
sidebar = bd3e3e
player = 262626
card = 262626
shadow = 000000
selected-row = d1d6e2
button = f1a84f
button-active = c98430
button-disabled = 535353
tab-active = f1a84f
notification = c98430
notification-error = e22134
misc = BFBFBF
[gruvbox]
text = fbf1c7
subtext = d5c4a1
sidebar-text = 32302f
main = 292828
sidebar = 689d6a
player = 292828
card = 3c3836
shadow = 202020
selected-row = d5c4a1
button = fb4934
button-active = cc241d
button-disabled = bdae93
tab-active = fb4934
notification = 8ec07c
notification-error = d79921
misc = BFBFBF

Binary file not shown.

After

Width:  |  Height:  |  Size: 260 KiB

View File

@@ -0,0 +1,238 @@
// Hide popover message
// document.getElementById("popover-container").style.height = 0;
const DribbblishShared = {
configMenu: new Spicetify.Menu.SubMenu("Dribbblish", []),
rightBigCover: localStorage.getItem("dribs-right-big-cover") === "true",
setRightBigCover: () => {
if (DribbblishShared.rightBigCover) {
document.documentElement.classList.add("right-expanded-cover");
} else {
document.documentElement.classList.remove("right-expanded-cover");
}
}
};
DribbblishShared.configMenu.register();
DribbblishShared.configMenu.addItem(new Spicetify.Menu.Item(
"Right expanded cover",
DribbblishShared.rightBigCover,
(self) => {
self.isEnabled = !self.isEnabled;
DribbblishShared.rightBigCover = self.isEnabled;
localStorage.setItem("dribs-right-big-cover", self.isEnabled);
DribbblishShared.setRightBigCover();
}
));
DribbblishShared.setRightBigCover();
function waitForElement(els, func, timeout = 100) {
const queries = els.map(el => document.querySelector(el));
if (queries.every(a => a)) {
func(queries);
} else if (timeout > 0) {
setTimeout(waitForElement, 300, els, func, --timeout);
}
}
waitForElement([
`ul[tabindex="0"]`,
`ul[tabindex="0"] .GlueDropTarget--playlists.GlueDropTarget--folders`
], ([root, firstItem]) => {
const listElem = firstItem.parentElement;
root.classList.add("dribs-playlist-list");
/** Replace Playlist name with their pictures */
function loadPlaylistImage() {
for (const item of listElem.children) {
let link = item.querySelector("a");
if (!link) continue;
let [_, app, uid ] = link.pathname.split("/");
let uri;
if (app === "playlist") {
uri = Spicetify.URI.playlistV2URI(uid);
} else if (app === "folder") {
const base64 = localStorage.getItem("dribbblish:folder-image:" + uid);
let img = link.querySelector("img");
if (!img) {
img = document.createElement("img");
img.classList.add("playlist-picture");
link.prepend(img);
}
img.src = base64 || "/images/tracklist-row-song-fallback.svg";
continue;
}
Spicetify.CosmosAsync.get(
`sp://core-playlist/v1/playlist/${uri.toURI()}/metadata`,
{ policy: { picture: true } }
).then(res => {
const meta = res.metadata;
let img = link.querySelector("img");
if (!img) {
img = document.createElement("img");
img.classList.add("playlist-picture");
link.prepend(img);
}
img.src = meta.picture || "/images/tracklist-row-song-fallback.svg";
});
}
}
DribbblishShared.loadPlaylistImage = loadPlaylistImage;
loadPlaylistImage();
new MutationObserver(loadPlaylistImage)
.observe(listElem, {childList: true});
});
waitForElement([".Root__main-view"], ([mainView]) => {
const shadow = document.createElement("div");
shadow.id = "dribbblish-back-shadow";
mainView.prepend(shadow);
});
waitForElement([".main-rootlist-rootlistPlaylistsScrollNode"], (queries) => {
const fade = document.createElement("div");
fade.id = "dribbblish-sidebar-fade-in";
queries[0].append(fade);
});
waitForElement([
".Root__nav-bar .LayoutResizer__input, .Root__nav-bar .LayoutResizer__resize-bar input"
], ([resizer]) => {
const observer = new MutationObserver(updateVariable);
observer.observe(resizer, { attributes: true, attributeFilter: ["value"]});
function updateVariable() {
let value = resizer.value;
if (value < 121) {
value = 72;
document.documentElement.classList.add("sidebar-hide-text");
} else {
document.documentElement.classList.remove("sidebar-hide-text");
}
document.documentElement.style.setProperty(
"--sidebar-width", value + "px");
}
updateVariable();
});
waitForElement([".Root__main-view .os-resize-observer-host"], ([resizeHost]) => {
const observer = new ResizeObserver(updateVariable);
observer.observe(resizeHost);
function updateVariable([ event ]) {
document.documentElement.style.setProperty(
"--main-view-width", event.contentRect.width + "px");
document.documentElement.style.setProperty(
"--main-view-height", event.contentRect.height + "px");
if (event.contentRect.width < 700) {
document.documentElement.classList.add("minimal-player");
} else {
document.documentElement.classList.remove("minimal-player");
}
if (event.contentRect.width < 550) {
document.documentElement.classList.add("extra-minimal-player");
} else {
document.documentElement.classList.remove("extra-minimal-player");
}
}
});
(function Dribbblish() {
const progBar = document.querySelector(".playback-bar");
const root = document.querySelector(".Root");
if (!Spicetify.Player.origin || !progBar || !root) {
setTimeout(Dribbblish, 300);
return;
}
const tooltip = document.createElement("div");
tooltip.className = "prog-tooltip";
progBar.append(tooltip);
const progKnob = progBar.querySelector(".progress-bar__slider");
function updateProgTime({ data: e }) {
const offsetX = progKnob.offsetLeft + progKnob.offsetWidth / 2;
const maxWidth = progBar.offsetWidth;
const curWidth = Spicetify.Player.getProgressPercent() * maxWidth;
const ttWidth = tooltip.offsetWidth / 2;
if (curWidth < ttWidth) {
tooltip.style.left = String(offsetX) + "px";
} else if (curWidth > maxWidth - ttWidth) {
tooltip.style.left = String(offsetX - ttWidth * 2) + "px";
} else {
tooltip.style.left = String(offsetX - ttWidth) + "px";
}
tooltip.innerText = Spicetify.Player.formatTime(e) + " / " +
Spicetify.Player.formatTime(Spicetify.Player.getDuration());
}
Spicetify.Player.addEventListener("onprogress", updateProgTime);
updateProgTime({ data: Spicetify.Player.getProgress() });
Spicetify.CosmosAsync.sub("sp://connect/v1", (state) => {
const isExternal = state.devices.some(a => a.is_active);
if (isExternal) {
root.classList.add("is-connectBarVisible");
} else {
root.classList.remove("is-connectBarVisible");
}
});
const filePickerForm = document.createElement("form");
filePickerForm.setAttribute("aria-hidden", true);
filePickerForm.innerHTML = '<input type="file" class="hidden-visually" />';
document.body.appendChild(filePickerForm);
/** @type {HTMLInputElement} */
const filePickerInput = filePickerForm.childNodes[0];
filePickerInput.accept = [
"image/jpeg",
"image/apng",
"image/avif",
"image/gif",
"image/png",
"image/svg+xml",
"image/webp"
].join(",");
filePickerInput.onchange = () => {
if (!filePickerInput.files.length) return;
const file = filePickerInput.files[0];
const reader = new FileReader;
reader.onload = (event) => {
const result = event.target.result;
const id = Spicetify.URI.from(filePickerInput.uri).id;
try {
localStorage.setItem(
"dribbblish:folder-image:" + id,
result
);
} catch {
Spicetify.showNotification("File too large");
}
DribbblishShared.loadPlaylistImage?.call();
}
reader.readAsDataURL(file);
}
new Spicetify.ContextMenu.Item("Remove folder image",
([uri]) => {
const id = Spicetify.URI.from(uri).id;
localStorage.removeItem("dribbblish:folder-image:" + id);
DribbblishShared.loadPlaylistImage?.call();
},
([uri]) => Spicetify.URI.isFolder(uri),
"x",
).register();
new Spicetify.ContextMenu.Item("Choose folder image",
([uri]) => {
filePickerInput.uri = uri;
filePickerForm.reset();
filePickerInput.click();
},
([uri]) => Spicetify.URI.isFolder(uri),
"edit",
).register();
})();

Binary file not shown.

After

Width:  |  Height:  |  Size: 425 KiB

View File

@@ -0,0 +1,59 @@
$checkSpice = Get-Command spicetify -ErrorAction Silent
if ($null -eq $checkSpice) {
Write-Host -ForegroundColor Red "Spicetify not found"
Write-Host "Follow instruction on:", "https://spicetify.app/docs/getting-started/simple-installation#windows"
return
}
Write-Host "Downloading themes package:" -ForegroundColor Green
$zipFile = "$env:TEMP\spicetify-themes.zip"
Invoke-WebRequest "https://github.com/spicetify/spicetify-themes/archive/refs/heads/master.zip" -OutFile $zipFile
Write-Host "Extracting themes package:" -ForegroundColor Green
$extractPath = "$env:TEMP\spicetify-themes-master"
if (Test-Path $extractPath) {
Remove-Item $extractPath -Recurse -Force
}
Expand-Archive $zipFile -DestinationPath $env:TEMP
# Copy to personal Themes folder
$spicePath = spicetify -c | Split-Path
$dribPath = "$extractPath\Dribbblish"
$destPath = "$spicePath\Themes\Dribbblish"
if (Test-Path $destPath) {
Remove-Item $destPath -Recurse -Force
}
Copy-Item $dribPath $destPath -Recurse
# Copy extension file
New-Item -ItemType Directory -Force "$spicePath\Extensions"
Copy-Item "$destPath\dribbblish.js" "$spicePath\Extensions"
Write-Host "Configuring:" -ForegroundColor Green
spicetify
spicetify config inject_css 1 replace_colors 1 overwrite_assets 1 current_theme Dribbblish extensions dribbblish.js
# Add patch
$configFile = Get-Content "$spicePath\config-xpui.ini"
if (-not ($configFile -match "xpui.js_find_8008")) {
$rep = @"
[Patch]
xpui.js_find_8008=,(\w+=)32,
xpui.js_repl_8008=,`${1}56,
"@
# In case missing Patch section
if (-not ($configFile -match "\[Patch\]")) {
$configFile += "`n[Patch]`n"
}
$configFile = $configFile -replace "\[Patch\]",$rep
Set-Content "$spicePath\config-xpui.ini" $configFile
}
$backupVer = $configFile -match "^version"
$version = ConvertFrom-StringData $backupVer[0]
if ($version.version.Length -gt 0) {
spicetify apply
} else {
spicetify backup apply
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 919 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 222 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 656 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 169 KiB

View File

@@ -0,0 +1,15 @@
spicetify config current_theme " " extensions dribbblish.js-
$configPath = spicetify -c
$configFile = Get-Content $configPath
$find = $configFile -match "xpui.js_find_8008"
if ($find) {
$configFile = $configFile -replace [regex]::escape($find),""
}
$repl = $configFile -match "xpui.js_repl_8008"
if ($repl) {
$configFile = $configFile -replace [regex]::escape($repl),""
}
Set-Content $configPath $configFile
spicetify apply

View File

@@ -0,0 +1,886 @@
.Root {
padding-top: 30px;
}
:root {
--bar-height: 70px;
--bar-cover-art-size: 40px;
--main-gap: 10px;
--main-corner-radius: 10px;
--scrollbar-vertical-size: 8px;
--cover-border-radius: 8px;
--os-windows-icon-dodge: 0;
}
@font-face {
font-family: "Google Sans Display";
src: url("glue-resources/fonts/GoogleSansDisplayRegular.woff2") format("woff2");
font-style: normal;
font-weight: 400;
}
@font-face {
font-family: "Google Sans Display";
src: url("glue-resources/fonts/GoogleSansDisplayMedium.woff2") format("woff2");
font-style: normal;
font-weight: 500;
}
@font-face {
font-family: "Roboto";
src: url("glue-resources/fonts/Roboto.woff2") format("woff2");
font-style: normal;
font-weight: 400;
}
@font-face {
font-family: "Roboto";
src: url("glue-resources/fonts/RobotoMedium.woff2") format("woff2");
font-style: normal;
font-weight: 500;
}
body {
--glue-font-family: "Google Sans Display","Roboto",spotify-circular,spotify-circular-cyrillic,spotify-circular-arabic,spotify-circular-hebrew,Helvetica Neue,helvetica,arial,Hiragino Kaku Gothic Pro,Meiryo,MS Gothic,sans-serif;
--info-font-family: "Roboto",spotify-circular,spotify-circular-cyrillic,spotify-circular-arabic,spotify-circular-hebrew,Helvetica Neue,helvetica,arial,Hiragino Kaku Gothic Pro,Meiryo,MS Gothic,sans-serif;
font-family: var(--glue-font-family);
letter-spacing: normal;
}
.main-type-mesto,
.main-type-mestoBold,
.main-type-ballad,
.main-type-balladBold,
.main-type-canon {
font-family: var(--info-font-family);
letter-spacing: normal;
}
.main-type-bass {
font-family: var(--glue-font-family);
}
.main-type-ballad {
font-weight: 500;
}
.lyrics-lyricsContainer-LyricsLine {
font-family: var(--glue-font-family);
letter-spacing: -.03em !important;
}
.main-rootlist-rootlistDivider {
display: none;
}
input {
background-color: unset !important;
border-bottom: solid 1px var(--spice-text) !important;
border-radius: 0 !important;
padding: 6px 10px 6px 48px;
color: var(--spice-text) !important;
}
.x-searchInput-searchInputSearchIcon,
.x-searchInput-searchInputClearButton {
color: var(--spice-text) !important;
}
.main-home-homeHeader,
.x-entityHeader-overlay,
.x-actionBarBackground-background,
.main-actionBarBackground-background,
.main-entityHeader-overlay,
.main-entityHeader-backgroundColor
{
background-color: unset !important;
background-image: unset !important;
}
.main-playButton-PlayButton.main-playButton-primary {
color: white;
}
.connect-title, .connect-header {
display: none;
}
.connect-device-list {
margin: 0px -5px;
}
/* Remove Topbar background colour */
.main-topBar-background {
background-color: unset !important;
}
.main-topBar-overlay {
background-color: var(--spice-main);
}
.main-entityHeader-shadow,
.main-contextMenu-menu,
.connect-device-list-container {
box-shadow: 0 4px 20px #21212130;
}
.main-trackList-playingIcon {
filter: grayscale(1);
}
span.artist-artistVerifiedBadge-badge svg > path:first-of-type {
fill: var(--spice-button);
}
span.artist-artistVerifiedBadge-badge svg > path:last-of-type {
fill: var(--spice-text);
}
/* Full window artist background */
.main-entityHeader-background.main-entityHeader-gradient {
opacity: 0.3;
}
.main-entityHeader-container.main-entityHeader-withBackgroundImage,
.main-entityHeader-background,
.main-entityHeader-background.main-entityHeader-overlay:after {
height: 100vh;
}
.main-entityHeader-withBackgroundImage .main-entityHeader-headerText {
justify-content: center;
}
.main-entityHeader-container.main-entityHeader-nonWrapped.main-entityHeader-withBackgroundImage {
padding-left: 9%;
}
.main-entityHeader-background.main-entityHeader-overlay:after {
background-image: linear-gradient(transparent,transparent),linear-gradient(var(--spice-main), var(--spice-main));
}
.artist-artistOverview-overview .main-entityHeader-withBackgroundImage h1 {
font-size: 120px !important;
line-height: 120px !important;
}
/** Hightlight selected playlist */
.main-rootlist-rootlistItemLink.main-rootlist-rootlistItemLinkActive {
background: var(--spice-button);
border-radius: 4px;
}
.main-navBar-navBarLinkActive {
background: var(--spice-button);
}
.main-contextMenu-menu {
background-color: var(--spice-button);
}
.main-contextMenu-menuHeading,
.main-contextMenu-menuItemButton,
.main-contextMenu-menuItemButton:not(.main-contextMenu-disabled):focus,
.main-contextMenu-menuItemButton:not(.main-contextMenu-disabled):hover {
color: var(--spice-main);
}
.main-playPauseButton-button {
background-color: var(--spice-button);
color: white;
}
/** Queue page header */
.queue-queue-title,
.queue-playHistory-title {
color: var(--spice-text) !important;
}
/** Artist page */
.artist-artistOverview-heading {
color: var(--spice-text) !important;
}
.artist-artistAbout-content .artist-artistAbout-cityBlock div,
.artist-artistAbout-content .artist-artistAbout-stats div {
color: var(--spice-text) !important;
}
.artist-artistAbout-content div {
color: var(--spice-text) !important;
}
/** Cards */
.main-cardImage-imageWrapper {
background-color: transparent;
box-shadow: unset;
-webkit-box-shadow: unset;
}
.main-cardImage-imagePlaceholder, .main-cardImage-image {
border-radius: var(--cover-border-radius);
}
.main-rootlist-rootlistDivider {
background-color: unset;
}
.main-nowPlayingBar-nowPlayingBar {
height: var(--bar-height);
}
.Root__top-bar {
border-radius: var(--main-corner-radius) var(--main-corner-radius) 0 0;
}
.main-topBar-background {
border-radius: var(--main-corner-radius) var(--main-corner-radius) 0 0;
}
.Root__main-view {
background-color: var(--spice-main);
border-radius: var(--main-corner-radius) var(--main-corner-radius) 0 0;
overflow: hidden;
}
.main-buddyFeed-buddyFeed {
box-shadow: unset;
-webkit-box-shadow: unset;
z-index: 0;
}
.main-buddyFeed-activityMetadata {
margin-left: 24px;
}
.main-buddyFeed-headerTitle,
.main-buddyFeed-activityMetadata .main-buddyFeed-username a {
color: var(--spice-sidebar-text);
}
.main-buddyFeed-activityMetadata .main-buddyFeed-artistAndTrackName a,
.main-buddyFeed-activityMetadata .main-buddyFeed-playbackContextLink,
.main-buddyFeed-activityMetadata .main-buddyFeed-timestamp {
color: rgba(var(--spice-rgb-sidebar-text), 0.8);
}
.main-buddyFeed-buddyFeedRoot .main-avatar-avatar,
.main-buddyFeed-buddyFeedRoot .main-buddyFeed-overlay {
width: 32px !important;
height: 32px !important;
}
.main-avatar-avatar.main-avatar-withBadge:after {
box-shadow: 0 0 0 2px var(--spice-sidebar);
background-color: var(--spice-notification);
right: 0;
}
.Root__now-playing-bar {
border-radius: 0 0 var(--main-corner-radius) var(--main-corner-radius);
background-color: unset;
}
.main-nowPlayingBar-container {
border-radius: 0 0 var(--main-corner-radius) var(--main-corner-radius);
background-color: unset;
background: radial-gradient(ellipse at right 50% bottom -80px, rgba(var(--spice-rgb-sidebar), 0.55), var(--spice-main) 60%);
border-top: 0;
min-width: 518px;
}
.main-connectBar-connectBar {
border-radius: 0 0 var(--main-corner-radius) var(--main-corner-radius);
border: 2px solid var(--spice-main);
border-top: 0;
color: var(--spice-sidebar-text);
}
.Root__nav-bar {
height: 100%;
z-index: 1;
width: var(--sidebar-width) !important;
}
.main-buddyFeed-buddyFeedRoot {
height: 100%;
}
.main-buddyFeed-buddyFeedRoot .os-content {
padding-top: 0 !important;
}
html,
.Root__nav-bar,
.main-buddyFeed-buddyFeed {
background-color: var(--spice-sidebar) !important;
}
html {
background-position: center;
background-repeat: no-repeat;
}
.Root__nav-bar .link-subtle,
.main-rootlist-rootlistItemLink:link,
.main-rootlist-rootlistItemLink:visited,
.main-rootlist-rootlistContent span,
.main-navBar-entryPoints span {
color: var(--spice-sidebar-text)
}
.main-navBar-navBarItem {
padding: 0 8px;
}
#spicetify-show-list >* {
padding: 0 8px;
}
.main-rootlist-statusIcons {
color: var(--spice-sidebar-text);
padding-right: 16px;
}
.main-rootlist-statusIcons .main-playButton-button {
color: var(--spice-sidebar-text);
}
.main-rootlist-expandArrow {
position: absolute;
top: 20px;
right: 12px;
width: 16px;
height: 16px;
color: var(--spice-sidebar-text) !important;
background-color: var(--spice-button);
border-radius: 50%;
box-shadow: 0 0 0 2px var(--spice-sidebar);
opacity: 0;
}
li.GlueDropTarget:hover .main-rootlist-expandArrow {
opacity: 1;
}
html:not(.sidebar-hide-text) .main-rootlist-expandArrow {
opacity: 1;
}
.main-rootlist-expandArrow::before {
font-size: 10px;
padding-bottom: 3px;
}
html.sidebar-hide-text .main-rootlist-expandArrow {
right: 4px;
}
html.sidebar-hide-text .main-navBar-navBarItem a span,
html.sidebar-hide-text .main-rootlist-rootlistContent a span,
html.sidebar-hide-text .main-rootlist-rootlistItem a span,
html.sidebar-hide-text .main-rootlist-statusIcons {
display: none;
}
.main-rootlist-rootlist {
margin-top: 0;
}
.Root__nav-bar .os-scrollbar-vertical,
.main-buddyFeed-buddyFeedRoot .os-scrollbar-vertical {
display: none;
}
/** */
.main-topBar-historyButtons .main-topBar-button {
background-color: unset;
width: 24px;
height: 24px;
}
.main-topBar-historyButtons svg {
color: var(--spice-button);
fill: var(--spice-button);
}
.playback-bar__progress-time,
.main-playbackBarRemainingTime-container,
.playback-bar__progress-time-elapsed {
display: none;
}
.playback-bar {
position: absolute;
width: var(--main-view-width);
left: var(--sidebar-width);
bottom: calc(var(--main-gap) + var(--bar-height) - 12px / 2);
}
.Root.is-connectBarVisible .playback-bar {
bottom: calc(var(--main-gap) + var(--bar-height) + 24px - 12px / 2);
}
.main-nowPlayingWidget-coverArt .cover-art {
width: var(--bar-cover-art-size) !important;
height: var(--bar-cover-art-size) !important;
}
.player-controls__buttons {
margin-bottom: 0;
width: 192px;
}
.progress-bar {
--progress-bar-height: 2px;
--fg-color: var(--spice-button);
--bg-color: rgba(var(--spice-rgb-text), .2);
}
.minimal-player .player-controls__buttons {
width: 120px;
gap: 0px;
}
.minimal-player .player-controls__left,
.minimal-player .player-controls__right {
--button-size: 16px !important;
gap: 0px;
}
.minimal-player .volume-bar {
flex: 0 1 70px;
}
.extra-minimal-player .player-controls__buttons {
width: 64px;
}
.extra-minimal-player .main-shuffleButton-button,
.extra-minimal-player .main-repeatButton-button,
.extra-minimal-player .ExtraControls__connect-device-picker,
.extra-minimal-player .volume-bar .progress-bar-wrapper {
display: none;
}
.extra-minimal-player .volume-bar {
flex: 0 0 32px;
}
.main-trackInfo-name {
font-weight: 500;
}
.main-topBar-topbarContent .main-playButton-PlayButton {
--size: 35px !important;
}
.main-entityHeader-image {
border-radius: 5px;
}
.main-entityHeader-metaDataText,
.main-duration-container {
color: var(--spice-subtext);
}
/** Sidebar */
.main-rootlist-rootlist .os-content {
padding: 0 0 8px 0 !important;
}
.main-rootlist-rootlistDividerContainer {
display: none;
}
.main-rootlist-rootlistItem a {
align-items: center;
border-radius: 4px;
display: flex;
height: 56px;
padding: 0 20px;
}
img.playlist-picture {
width: 32px;
height: 32px;
flex: 0 0 32px;
background-size: cover;
background-position: center;
border-radius: 50%;
}
.main-rootlist-rootlistItem a span {
margin-left: 24px;
}
.main-rootlist-rootlistItem {
padding-left: calc(var(--indentation)*var(--left-sidebar-item-indentation-width)) !important;
padding-right: 0 !important;
transition: padding-left .5s ease;
}
html.sidebar-hide-text .main-rootlist-rootlistItem {
padding: 0;
}
.main-rootlist-dropIndicator {
background: var(--spice-selected-row);
height: 2px;
}
.main-navBar-navBarLink {
height: 56px;
}
.main-navBar-navBarItem .collection-active-icon,
.main-navBar-navBarItem .collection-icon,
.main-navBar-navBarItem .home-active-icon,
.main-navBar-navBarItem .home-icon,
.main-navBar-navBarItem .search-active-icon,
.main-navBar-navBarItem .search-icon {
flex: 0 0 auto;
margin-right: 8px;
}
.main-collectionLinkButton-icon,
.main-createPlaylistButton-icon,
.main-collectionLinkButton-icon {
margin-right: 24px;
}
li.GlueDropTarget {
padding: 0 8px;
}
/** OS-specific window controls dodge */
.spotify__os--is-windows .main-navBar-navBar {
padding-top: calc(var(--os-windows-icon-dodge) * 24px);
}
.spotify__container--is-desktop:not(.fullscreen).spotify__os--is-windows .main-navBar-entryPoints {
padding-top: calc(var(--os-windows-icon-dodge) * 12px + 12px);
}
.spotify__os--is-windows .main-buddyFeed-header {
padding-top: calc(var(--os-windows-icon-dodge) * 32px);
}
.spotify__container--is-desktop.spotify__os--is-windows[dir=ltr] .main-topBar-container {
padding-right: calc(var(--os-windows-icon-dodge) * 135px + 32px);
}
.main-topBar-container {
max-width: unset;
}
/** Linux-specific remove padding */
.spotify__container--is-desktop:not(.fullscreen).spotify__os--is-linux .main-navBar-entryPoints,
.spotify__container--is-desktop:not(.fullscreen).spotify__os--is-linux .main-navBar-navBar {
padding-top: 0;
}
/** Custom elements */
#dribbblish-sidebar-fade-in {
position: absolute;
bottom: 0;
width: 100%;
height: 15%;
background: linear-gradient(to top, var(--spice-sidebar) 10%, transparent);
z-index: 3;
pointer-events: none;
}
.dribs-playlist-list {
padding-bottom: 56px;
}
#dribbblish-back-shadow {
position: fixed;
width: var(--main-view-width);
height: calc(var(--main-view-height) + var(--bar-height));
box-shadow: 0 0 10px 3px #0000003b;
border-radius: var(--main-corner-radius);
z-index: 2;
pointer-events: none;
}
.playback-bar .prog-tooltip {
position: absolute;
min-width: 100px;
width: unset;
height: 25px;
top: -35px;
padding: 0 5px;
border-radius: 4px;
text-align: center;
color: var(--spice-text);
background-color: var(--spice-button);
opacity: 0;
transition: opacity,left 0.2s ease;
}
.playback-bar:hover .prog-tooltip {
opacity: 1;
}
/** Rearrange player bar */
.main-nowPlayingBar-left {
order: 1;
flex: 1;
width: auto;
min-width: 0 !important;
}
.main-nowPlayingBar-center {
order: 0;
flex: 1;
width: auto;
min-width: unset !important;
}
.main-nowPlayingBar-right {
order: 2;
flex: 1;
width: auto;
min-width: unset !important;
}
.main-nowPlayingWidget-nowPlaying {
justify-content: center;
}
.main-trackInfo-container > div > div::before,
.main-trackInfo-container > div > div::after {
background: unset;
}
.player-controls {
justify-content: flex-start;
flex-direction: row;
}
.main-playPauseButton-button {
background-color: transparent;
}
.main-playPauseButton-button svg {
width: 32px !important;
height: 32px !important;
color: var(--spice-button);
}
/** Main container */
.contentSpacing,
.artist-artistDiscography-headerContainer {
padding-left: 64px;
padding-right: 64px;
}
@media (min-width: 1280px) {
.contentSpacing,
.artist-artistDiscography-headerContainer {
padding-left: 128px;
padding-right: 128px;
}
}
.main-collectionLinkButton-collectionLinkButton .main-collectionLinkButton-icon,
.main-collectionLinkButton-collectionLinkButton .main-collectionLinkButton-collectionLinkText,
.main-createPlaylistButton-button {
opacity: 1;
}
.main-likedSongsButton-likedSongsIcon,
.main-yourEpisodesButton-yourEpisodesIcon,
.main-createPlaylistButton-createPlaylistIcon {
background: unset !important;
}
.main-createPlaylistButton-icon,
.main-collectionLinkButton-icon,
.main-createPlaylistButton-icon {
height: 40px;
}
.main-likedSongsButton-likedSongsIcon svg,
.main-yourEpisodesButton-yourEpisodesIcon svg,
.main-createPlaylistButton-createPlaylistIcon svg {
fill: var(--spice-sidebar-text);
width: 32px;
height: 32px;
}
.main-yourEpisodesButton-yourEpisodesIcon svg path {
fill: var(--spice-sidebar-text);
}
/** Grid */
.Root__top-container {
grid-template-areas:
"nav-bar main-view buddy-feed"
"nav-bar now-playing-bar buddy-feed";
padding: var(--main-gap) 0;
}
html:not(.buddyfeed-visible) .Root__top-container {
padding-right: var(--main-gap);
}
/** Minimal profile button */
span.main-userWidget-displayName,
.main-userWidget-box svg {
display: none;
}
/** Sidebar config */
#dribs-hidden-list {
background-color: rgba(var(--spice-rgb-main), .3);
}
#dribs-sidebar-config {
position: relative;
width: 100%;
height: 0;
display: flex;
justify-content: space-evenly;
align-items: center;
top: -30px;
left: 0;
}
#dribs-sidebar-config button {
min-width: 60px;
border-radius: 3px;
background-color: var(--spice-main);
color: var(--spice-text);
border: 1px solid var(--spice-text);
}
#dribs-sidebar-config button:disabled {
color: var(--spice-button-disabled);
}
.main-navBar-entryPoints {
--left-sidebar-padding-left: 24px;
--left-sidebar-padding-right: 24px;
}
div.GlueDropTarget.personal-library {
padding: 0 8px;
}
div.GlueDropTarget.personal-library >* {
padding: 0 16px;
height: 56px;
border-radius: 4px;
}
div.GlueDropTarget.personal-library >*.active {
background: var(--spice-button);
}
/** Big cover, small cover */
.main-coverSlotExpanded-container {
position: fixed;
z-index: 2;
width: 250px;
height: 250px;
bottom: calc(var(--main-gap) + var(--bar-height) + 10px);
left: calc(var(--sidebar-width) + 10px);
}
.Root.is-connectBarVisible .main-coverSlotExpanded-container {
bottom: calc(var(--main-gap) + var(--bar-height) + 24px + 10px);
}
html.right-expanded-cover .main-coverSlotExpanded-container {
right: calc(var(--main-gap) + 10px);
left: unset;
}
html.right-expanded-cover.buddyfeed-visible .main-coverSlotExpanded-container {
right: calc(var(--main-gap) + var(--buddy-feed-width) + 10px);
left: unset;
}
.main-coverSlotExpanded-container img {
border-radius: 4px;
}
.cover-art {
border-radius: 4px;
}
.main-nowPlayingWidget-coverExpanded .main-coverSlotCollapsed-container {
opacity: 0;
}
.main-nowPlayingWidget-coverExpanded {
transform: translateX(-27px);
}
/** Mini dribbblish */
.x-categoryCard-CategoryCard > div {
background-color: var(--spice-main);
width: calc(100% - 14px);
height: calc(100% - 6px);
margin: 3px 10px;
border-radius: 5px;
}
.x-categoryCard-CategoryCard {
height: 100px;
}
.x-categoryCard-image {
width: 50px !important;
height: 50px !important;
}
.x-heroCategoryCard-HeroCategoryCard > div {
background-color: var(--spice-main);
width: calc(100% - 20px);
height: calc(100% - 6px);
margin: 3px 16px;
border-radius: 5px;
}
.main-dropDown-dropDown,
.x-sortBox-sortDropdown {
background-color: rgba(var(--spice-rgb-selected-row), .1) !important;
}
.connect-device-list-item:focus,
.connect-device-list-item:hover {
background-color: rgba(var(--spice-rgb-selected-row), .3);
}
.bookmark-filter {
color: var(--spice-main) !important;
}
/* 1.1.56 */
.main-navBar-navBar {
width: var(--sidebar-width) !important;
}
.main-entityHeader-container.main-entityHeader-nonWrapped {
padding-left: 64px;
padding-right: 64px;
}
@media (min-width: 1024px) {
.main-entityHeader-container.main-entityHeader-nonWrapped {
padding-left: 128px;
padding-right: 128px;
}
}
.main-userWidget-dropDownMenu > li > button {
color: rgba(var(--spice-rgb-selected-row), .7);
padding-left: 8px;
text-decoration: none;
}
.main-userWidget-dropDownMenu > li > button:hover,
.main-userWidget-dropDownMenu > li > button:focus {
color: var(--spice-text);
}
.main-userWidget-dropDownMenu svg {
position: unset;
}
.main-userWidget-dropDownMenu > li svg {
position: absolute;
}
.main-buddyFeed-buddyFeed.main-buddyFeed-buddyFeed-expanded {
z-index: 4;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 136 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

View File

@@ -0,0 +1,21 @@
MIT License
Copyright (c) 2022 @Ruixi-Zhang, @yslDevelop, @ian-Liaozy, @alexcasieri30
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:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
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.

View File

@@ -0,0 +1,25 @@
# Flow
## Screenshots
### Ocean
<img src="https://raw.githubusercontent.com/spicetify/spicetify-themes/master/Flow/screenshots/ocean.png" alt="img">
### Pink
<img src="https://raw.githubusercontent.com/spicetify/spicetify-themes/master/Flow/screenshots/pink.png" alt="img">
### Silver
<img src="https://raw.githubusercontent.com/spicetify/spicetify-themes/master/Flow/screenshots/silver.png" alt="img">
### Violet
<img src="https://raw.githubusercontent.com/spicetify/spicetify-themes/master/Flow/screenshots/violet.png" alt="img">
## Author
Made by:
* https://github.com/Ruixi-Zhang
* https://github.com/yslDevelop
* https://github.com/ian-Liaozy
* https://github.com/alexcasieri30

View File

@@ -0,0 +1,80 @@
[Pink]
text = 8f7878
gradientTop = ebaf98
gradientBottom = f5d4b7
main = ffe8d9
subtext = a9a9a9
button-active = 8f7878
button = ebaf98
sidebar = f5d4b7
player = ebaf98
card-background = e6cfd7
shadow = d9a28d
notification = f5d4b7
notification-error = f5d4b7
card-hover = ffece4
[Green]
text = 516847
gradientTop = 9bb78e
gradientBottom = b7cfac
main = e8f2e4
subtext = 797a78
button-active = 516847
button = 7d9971
sidebar = b7cfac
player = 9bb78e
card-background = e8ede6
shadow = 7d9971
notification = b7cfac
notification-error = b7cfac
card-hover = ecf8e8
[Silver]
text = 4c4d4f
gradientTop = b7bbbd
gradientBottom = d3d8db
main = d3d8db
subtext = 8d9092
button-active = a8acad
button = 8d9092
sidebar = ffffff
player = b7bbbd
card-background = e8ede6
shadow = b7bbbd
notification = ffffff
notification-error = ffffff
card-hover = e0e4e4
[Violet]
text = 78658b
gradientTop = b9adc4
gradientBottom = d4cade
main = e5dfeb
subtext = 8e7c9a
button-active = a090b0
button = 516847
sidebar = e8ede6
player = b9adc4
card-background = e8ede6
shadow = 847096
notification = b9adc4
notification-error = b9adc4
card-hover = f0e4ec
[Ocean]
text = 62828a
gradientTop = 9cb9ba
gradientBottom = c1d5d6
main = cadbdb
subtext = 7aa1a2
button-active = 9cb9ba
button = c1d5d6
sidebar = c1d5d6
player = 9cb9ba
card-background = e1ebeb
shadow = 6f9599
notification = cadbdb
notification-error = c1d5d6
card-hover = d8e4e4

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 MiB

View File

@@ -0,0 +1,309 @@
:root {
--gradient-colors: var(--spice-gradienttop),var(--spice-gradientbottom);
}
.Re403AJffPPuZmX7LRJj {
margin-left: 50px;
margin-right: 50px;
}
.VNztd{
color: rgb(100,100,100);
}
.main-rootlist-rootlistItem:hover{
background-color: var(--spice-card-background);
}
.main-navBar-navBarLinkActive, .main-navBar-navBarLinkActive:focus,
.main-navBar-navBarLinkActive:hover, .logo{
background-color: var(--spice-card-background);
}
.main-navBar-navBar{
background-image: linear-gradient(var(--gradient-colors));
}
.vUzb9hvfXJN11OcnaszM .Re403AJffPPuZmX7LRJj {
font-size: 30px;
font-weight: 700;
letter-spacing: -.04em;
line-height: 40px;
}
/* category sidebar */
.EKdvOmPl7kNCDg_yuma8, .AEfhRyqGa3vzQrgfdwWE .Re403AJffPPuZmX7LRJj {
font-size: 20px;
font-weight: 700;
letter-spacing: -.04em;
line-height: 40px;
/*color: var(--lyrics-color-background);*/
}
/* buttons */
.main-navBar-navBarLink {
border-radius: var(--border-radius-2);
color: var(--spice-text);
}
.main-addButton-active, .main-addButton-active:focus, .main-addButton-active:hover {
color: var(--spice-player);
}
/* menus */
.Z35BWOA10YGn5uc9YgAp {
background-image: linear-gradient(var(--gradient-colors));
border-radius: 10px;
}
.main-card-card {
background-image: linear-gradient(var(--gradient-colors));
border-radius: 10px;
}
.main-card-card:hover {
background-color: var(--spice-card-hover);
border-radius: 10px;
}
.main-contextMenu-menuItemButton, .main-userWidget-dropDownMenuItemButton {
/*border-radius: var(--border-radius-2);*/
color: var(--spice-text);
height: 32px;
padding-left: 8px;
}
.main-trackList-trackListHeaderStuck.main-trackList-trackListHeader {
background: transparent;
-webkit-box-shadow: 0 -1px 0 0 var(--spice-player);
box-shadow: 0 -1px 0 0 var(--spice-player);
}
.main-trackList-trackListHeaderStuck .main-trackList-trackListHeaderRow {
border-bottom: 1px solid transparent;
background: var(--spice-main);
}
.G1W6k59msDX3wNFCJ1mb.X1PI4ZcmJchyHhBzbrVI {
background: var(--spice-button);
}
.Fz5_rAxpenrV3rKWvEE0 {
background: -webkit-gradient(linear,left top,left bottom,from(var(--spice-player)),to(var(--spice-main)));
background: linear-gradient(var(--spice-button),var(--spice-main));
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: 32px;
}
.Root__now-playing-bar {
background-color: var(--spice-player);
grid-area: now-playing-bar;
width: 200px;
z-index: 4;
}
.M_Sdhr1fQomXfFpJhlAV.y1_VPBbLK5eyOtpider1 {
background-color: var(--spice-gradientTop);
border-bottom: 1px solid rgba(255,255,255,.1);
}
#spicetify-home-config button:disabled, #spicetify-sidebar-config button:disabled {
/*background-color: var(--spice-button-disabled) !important;*/
color: var(--spice-text) !important;
}
/* remove gradients */
.main-home-homeHeader, .main-actionBarBackground-background {
background-image: none;
}
.main-actionBarBackground-background, .main-home-homeHeader, .main-topBar-background, .main-topBar-overlay, .x-entityHeader-overlay, .x-actionBarBackground-background, ._UFTK833WfTNGb4agRTd, .Ic3iDUCnC09k55peZBfC {
background-color: var(--spice-main) !important;
}
.x-actionBarBackground-background, .x-entityHeader-overlay, .Ic3iDUCnC09k55peZBfC, ._UFTK833WfTNGb4agRTd {
background-image: none !important;
}
.main-entityHeader-backgroundColor {
background: var(--spice-main);
}
.player-controls__buttons--new-icons {
gap: 16px;
margin-bottom: 8px;
display: flex;
flex-direction: column;
flex: 1;
justify-content: center;
align-items: center;
}
.ythYrlFSBm1P_ltHc8e1, .aUdGtzUFX8HhUq5AdHcE, .main-buddyFeed-buddyFeedRoot {
display: none;
}
.Root__top-container {
display: grid;
grid-template-areas: "nav-bar main-view now-playing-bar";
grid-template-columns: auto 1fr;
grid-template-rows: 1fr auto;
height: 100%;
min-height: 100%;
position: relative;
width: 100%;
}
player-controls__left {
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
flex-direction: column;
}
.main-nowPlayingBar-container {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
background-color: var(--spice-player);
border-top: 1px solid var(--spice-card);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
height: 100%;
min-width: 0px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.player-controls__left,
.player-controls__right {
flex-direction: column;
}
.playback-bar {
flex-direction: column;
}
.playback-bar__progress-time-elapsed {
min-width: 0px;
}
.main-playbackBarRemainingTime-container {
min-width: 0px;
}
.main-nowPlayingBar-center {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
.mvRQWscG4lmAxOs4neBL,
.main-nowPlayingBar-nowPlayingBar {
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: row;
flex-direction: column;
justify-content: space-between;
align-items: center;
padding: 10px;
height: 100%;
background-image: linear-gradient(var(--gradient-colors));
}
.main-nowPlayingBar-right,
.main-pageErrorTemplate-errorBody {
-webkit-box-direction: normal;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-bottom: 10px;
padding: 10px;
}
/*button*/
.encore-dark-theme .encore-bright-accent-set {
--background-base: var(--spice-button-active);
--background-highlight: var(--spice-player);
--background-press: var(--spice-player);
--decorative-subdued: var(--spice-player);
}
/*tracklist*/
.main-trackList-trackListRow {
border-radius: var(--border-radius-2);
}
.main-trackList-trackListRow:hover {
background-color: var(--spice-card-background);
}
.prog-tooltip{
display:none;
}
.main-rootlist-rootlistDividerContainer {
position: relative;
/*color: var(--spice-gradientTop)*/
display: none;
}
.progress-bar {
width: 150px;
}
.playback-progressbar {
width: 150px;
}
.main-nowPlayingBar-right{
transform: translate(0px, -80px) rotate(90deg);
}
.volume-bar{
width: 0px;
height: 0px;
}
.ExtraControls > div {
transform: rotate(-90deg);
}
.ExtraControls > button {
transform: rotate(-90deg);
}
.volume-bar > .playback-progressbar {
width: 75px;
transform: translate(-40px, 0px);
}
.volume-bar > button {
transform: translate(-40px, 0px);
}
.main-nowPlayingBar-left {
transform: translate(0px, 150%)rotate(90deg);
}
.main-nowPlayingWidget-nowPlaying > div{
transform: rotate(-90deg);
}
.main-nowPlayingWidget-nowPlaying > button{
transform: rotate(-90deg);
}
.main-trackInfo-container {
margin: -10px -10px -10px -10px;
}
.main-nowPlayingWidget-nowPlaying > button{
color: var(--spice-text)
}
.main-nowPlayingBar-center{
transform: translate(0px, -10px);
}

View File

@@ -0,0 +1,21 @@
MIT License
Copyright (c) 2021 CharlieS1103
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:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
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.

View File

@@ -0,0 +1,21 @@
# Glaze
## Screenshots
### Base
<img src="https://github.com/CharlieS1103/Glaze-theme/blob/main/screenshots/base.png" alt="img">
### Dark
<img src="https://github.com/CharlieS1103/Glaze-theme/blob/main/screenshots/dark.png" alt="img">
### Gray
<img src="https://github.com/CharlieS1103/Glaze-theme/blob/main/screenshots/gray.png" alt="img">
## Important
It may be necessary to enable sidebar config in order to make certain aspects of the theme.
##### To enable: `spicetify config sidebar_config 1`
## Author
Made by: https://github.com/CharlieS1103

View File

@@ -0,0 +1,87 @@
[Base]
;Green and black
button = 1DB954
notification = 171717
playback-bar = 171717
button-disabled = 171717
shadow = 202020
selected-row = 132e18
sub-button = 080808
main = 080808
notification-error = 171717
subtext = BDC1C6
card = 080808
sidebar = 080808
button-active = 0b441f
tab-active = 0b441f
subbutton-text = 132e18
text = 1DB954
misc = 383145
player = 080808
button-text = BDC1C6
[Gray]
; Gray colors
text = EEEEEE
subtext = EEEEEE
button-text = EEEEEE
main = 888888
sidebar = 333333
player = 171717
subbutton-text = EEEEEE
card = 888888
shadow = EEEEEE
selected-row = 888888
sub-button = 888888
button = eeeeee
button-active = 171717
button-disabled = 171717
tab-active = 171717
notification = 171717
notification-error = 171717
playback-bar = 171717
misc = 171717
[Dark]
;Grays and Blues
button = 8AB4F8
notification = b4b7b4
playback-bar = b4b7b4
button-disabled = b4b7b4
shadow = 202020
selected-row = 313235
sub-button = 202124
main = 202124
notification-error = b4b7b4
subtext = BDC1C6
card = 202124
sidebar = 202124
button-active = 4285f4
tab-active = 4285f4
subbutton-text = 313235
text = 8AB4F8
misc = 383145
player = 202124
button-text = BDC1C6
; Description
; text = main text, playlist names in main field, name of playlist selected in sidebar, headings
; subtext = text in main buttons in sidebar, playlist names in sidebar, artist names, and mini infos
; button-text = text in main buttons in sidebar when active
; main = main field or main bg
; sidebar = sidebar bg
; subbutton-text = text of buttons that use the text color or subtext color as a background
; player = player bg
; card = card bg
; shadow = bg of buttons like account, pop-up lyrics, full app display in main field
; selected-row = color of the song selected
; sub-button = caption and details of playlist, download and options button
; button = playlist buttons bg in sidebar, drop-down menus, now playing song, like button
; button-active = hover on song selected
; button-disabled = seekbar bg, volume bar bg, scrollbar
; tab-active = button bg in main field (playlists, podcasts, artists, albums)
; notification = notification ('Added to liked songs' etc.)
; notification-error = error
; playback-bar = seekbar fg, main play/pause button bg
; misc = miscellaneous

Binary file not shown.

After

Width:  |  Height:  |  Size: 887 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 940 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 880 KiB

View File

@@ -0,0 +1,284 @@
/* Glaze Theme*/
#main{
height: 100%;
overflow: hidden;
background-color: var(--spice-main);
}
.main-trackList-playingIcon {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg id='playing-icon' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 24'%3E%3Cdefs%3E%3Cstyle%3E %23playing-icon %7B fill: %2320BC54; %7D @keyframes play %7B 0%25 %7Btransform: scaleY(1);%7D 3.3%25 %7Btransform: scaleY(0.9583);%7D 6.6%25 %7Btransform: scaleY(0.9166);%7D 9.9%25 %7Btransform: scaleY(0.8333);%7D 13.3%25 %7Btransform: scaleY(0.7083);%7D 16.6%25 %7Btransform: scaleY(0.5416);%7D 19.9%25 %7Btransform: scaleY(0.4166);%7D 23.3%25 %7Btransform: scaleY(0.25);%7D 26.6%25 %7Btransform: scaleY(0.1666);%7D 29.9%25 %7Btransform: scaleY(0.125);%7D 33.3%25 %7Btransform: scaleY(0.125);%7D 36.6%25 %7Btransform: scaleY(0.1666);%7D 39.9%25 %7Btransform: scaleY(0.1666);%7D 43.3%25 %7Btransform: scaleY(0.2083);%7D 46.6%25 %7Btransform: scaleY(0.2916);%7D 49.9%25 %7Btransform: scaleY(0.375);%7D 53.3%25 %7Btransform: scaleY(0.5);%7D 56.6%25 %7Btransform: scaleY(0.5833);%7D 59.9%25 %7Btransform: scaleY(0.625);%7D 63.3%25 %7Btransform: scaleY(0.6666);%7D 66.6%25 %7Btransform: scaleY(0.6666);%7D 69.9%25 %7Btransform: scaleY(0.6666);%7D 73.3%25 %7Btransform: scaleY(0.6666);%7D 76.6%25 %7Btransform: scaleY(0.7083);%7D 79.9%25 %7Btransform: scaleY(0.75);%7D 83.3%25 %7Btransform: scaleY(0.8333);%7D 86.6%25 %7Btransform: scaleY(0.875);%7D 89.9%25 %7Btransform: scaleY(0.9166);%7D 93.3%25 %7Btransform: scaleY(0.9583);%7D 96.6%25 %7Btransform: scaleY(1);%7D %7D %23bar1 %7B transform-origin: bottom; animation: play 0.9s -0.51s infinite; %7D %23bar2 %7B transform-origin: bottom; animation: play 0.9s infinite; %7D %23bar3 %7B transform-origin: bottom; animation: play 0.9s -0.15s infinite; %7D %23bar4 %7B transform-origin: bottom; animation: play 0.9s -0.75s infinite; %7D %3C/style%3E%3C/defs%3E%3Ctitle%3Eplaying-icon%3C/title%3E%3Crect id='bar1' class='cls-1' width='4' height='24'/%3E%3Crect id='bar2' class='cls-1' x='6' width='4' height='24'/%3E%3Crect id='bar3' class='cls-1' x='12' width='4' height='24'/%3E%3Crect id='bar4' class='cls-1' x='18' width='4' height='24'/%3E%3C/svg%3E");
background: var(--spice-text);
content-visibility: hidden;
}
/* Sidebar changes*/
.main-yourEpisodesButton-yourEpisodesIcon {
background: var(--spice-text);
}
.main-yourEpisodesButton-yourEpisodesIcon path {
fill: var(--spice-player); opacity: 0.7;
}
.main-rootlist-rootlistDivider, .main-rootlist-rootlistDividerContainer{
visibility: hidden !important;
}
.main-yourEpisodes-coverContainer{
background-color: var(--spice-text);
}
.collection-collectionEntityHeroCard-likedSongs {
background: linear-gradient(
149.46deg
, var(--spice-sidebar), var(--spice-main) 99.16%) !important;
}
.main-likedSongsButton-likedSongsIcon {
color: var(--spice-sidebar);
}
.main-likedSongsButton-likedSongsIcon {
background: var(--spice-text);
}
#spicetify-show-list{
width:90%;
margin-right: 1px;
position: relative !Important;
top: -5px;
z-index:20;
}
#spicetify-show-list > li{
padding-bottom: 5px;
width:110%;
}
.main-navBar-navBarLinkActive{
background-image: linear-gradient(90deg, var(--spice-sidebar), var(--spice-selected-row))
}
.main-navBar-navBarLink:hover{
background-color: var(--spice-main);
}
.main-navBar-navBarLink{
height:50px;
border-top-right-radius: 50px;
border-bottom-right-radius: 50px;
}
#spicetify-show-list > div.GlueDropTarget {
display:table-cell;
width:0px !important;
padding: 0x !important;
margin:0px !important;
border-top: var(--spice-selected-row) solid 1px;
border-bottom: var(--spice-selected-row) solid 1px;
}
#spicetify-show-list > div > a > span, #spicetify-show-list > div.GlueDropTarget.GlueDropTarget--albums.GlueDropTarget--tracks.GlueDropTarget--local-tracks.GlueDropTarget--episodes.personal-library > button > span{
display: none;
padding: 0px;
margin:0px;
}
span.main-createPlaylistButton-text.standalone-ellipsis-one-line.main-type-mestoBold {
display: none;
}
.main-coverSlotCollapsed-expandButton {
display: none;
}
.main-createPlaylistButton-button, div.GlueDropTarget.personal-library >* {
padding: 0px !important;
}
#spicetify-show-list > div.GlueDropTarget.GlueDropTarget--episodes.personal-library.podcast-item{
padding-left: 25px !important;
}
.main-entityHeader-backgroundColor{
background-color: var(--spice-selected-row);
background-image: linear-gradient(0deg, var(--spice-main), transparent);
}
.main-actionBarBackground-background {
background-color: unset !important;
background-image: unset !important;
}
#spicetify-show-list > div > a > div.main-collectionLinkButton-icon > div, .main-createPlaylistButton-createPlaylistIcon {
width:30px;
height:30px;
background: var(--spice-text);
color: var(--spice-sidebar)
}
.main-shuffleButton-button.pp1ooFGqFEUG5ucC6_KW, .main-repeatButton-button.yKo7LWUCQCEALszRxAaS {
color: var(--spice-button);
}
.main-skipBackButton-button, .main-skipForwardButton-button{
color: var(--spice-subtext);
}
#spicetify-show-list > div:nth-child(9) {
padding-right: 1100px;
}
#spicetify-show-list > div:nth-child(7) {
padding-left: 20px;
}
#spicetify-show-list > div > a > div.main-collectionLinkButton-icon > div > svg, #spicetify-show-list > div.GlueDropTarget.GlueDropTarget--albums.GlueDropTarget--tracks.GlueDropTarget--local-tracks.GlueDropTarget--episodes.personal-library > button > div > div > svg,#spicetify-show-list > div.GlueDropTarget.GlueDropTarget--albums.GlueDropTarget--tracks.GlueDropTarget--local-tracks.GlueDropTarget--episodes > button > div > div > svg{
width:20px !important;
height:20px !important;
}
#spicetify-show-list > li:nth-child(3){
border-bottom: var(--spice-selected-row) solid 1px;
}
.main-card-card {
background: var(--spice-card);
}
.Z35BWOA10YGn5uc9YgAp {
background-color: var(--spice-player) !important;
}
.main-card-card:hover{
background: var(--spice-sidebar);
}
.main-home-homeHeader {
background: unset !important;
background-color:unset !important;
}
/* Playback bar and controls*/
.main-nowPlayingBar-nowPlayingBar {
width: 100%;
bottom: -1%;
position: absolute;
left: 0.35%;
background-color: var(--spice-player);
z-index: 1;
padding-left:0px;
}
.playback-bar{
position:absolute;
width:99%;
top:5%;
}
.main-nowPlayingBar-left {
order: 1;
flex: 1;
width: auto;
min-width: 0 !important;
}
.main-nowPlayingBar-center {
order: 0;
flex: 1;
width: auto;
min-width: unset !important;
}
.main-nowPlayingBar-right {
order: 2;
flex: 1;
width: auto;
min-width: unset !important;
}
.main-nowPlayingWidget-nowPlaying {
justify-content: center;
}
.cover-art-image {
border-radius: 7.5%;
}
.main-trackInfo-container > div > div::before,
.main-trackInfo-container > div > div::after {
background: unset;
}
.player-controls {
justify-content: flex-start;
flex-direction: row;
}
.main-playPauseButton-button {
background-color: transparent;
}
.main-playPauseButton-button svg {
width: 32px !important;
height: 32px !important;
color: var(--spice-button);
}
.main-playButton-PlayButton.main-playButton-primary{
background-color:var(--spice-main);
}
.player-controls__left{
flex:0;
}
.epWhU7hHGktzlO_dop6z{
background-color: var(--spice-text);
}
.main-playPauseButton-button[disabled] {
background-color: unset !important;
}
/*Hide things and general cleanup */
nav.Root__nav-bar {
min-width: 200px !important;
max-width: 235px;
border-right: 1px solid var(--spice-selected-row);
background-color: var(--spice-sidebar);
}
.x-toggle-indicatorWrapper {
background-color: var(--spice-button-disabled) !important;
}
.os-host-resize-disabled.os-host-scrollbar-vertical-hidden>.os-scrollbar-horizontal {
display: none;
}
#main > div > div.Root__top-container > nav > div.main-navBar-navBar > div.main-rootlist-rootlist > div > div.os-host.os-host-foreign.os-theme-spotify.os-host-resize-disabled.main-rootlist-rootlistPlaylistsScrollNode.os-host-scrollbar-vertical-hidden.os-host-transition.os-host-overflow.os-host-overflow-x > div.os-padding > div > div {
overflow: hidden;
}
.main-topBar-background{
background-color:unset !important;
width:110%;
}
.main-trackList-trackListHeader{
position: unset !important;
}
div.main-cardImage-imageWrapper.main-cardImage-roundedCorners > div > div > svg > path {
color: blue;
background-color: blue;
fill: var(--spice-sidebar);
opacity: 0.7;
}
/* Block ads */
.main-leaderboardComponent-container{
display: none;
}
.desktoproutes-homepage-takeover-ad-hptoComponent-parentContainer{
display: none !important;
}
.main-yourEpisodesButton-yourEpisodesIcon path {
fill: var(--spice-sidebar);
}
.main-topBar-UpgradeButton{
display:none !important;
}
/* Modal changes*/
.main-trackCreditsModal-container {
background-color:var(--spice-misc);
}
/*Notification Changes*/
.main-notificationBubble-NotificationBubble {
color: var(--spice-main) !important;
}
/* Fixes same color on button and button text in some scenarios(Especially on modals)*/
.main-button-primary{
color:var(--spice-subtext)
}
/* Fix progress bar displacement on playing on another device popup*/
.main-connectBar-connectBar {
overflow: visible !important;
--triangle-position: 147px !important;
align-items: unset !important;
height: 0px !important;
position: absolute !important;
left: 80% !important;
display: flex !important;
bottom: 2% !important;
padding: unset !important;
}

View File

@@ -0,0 +1,21 @@
MIT License
Copyright (c) 2019 morpheusthewhite
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:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
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.

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1 @@
.DS_STORE

View File

@@ -0,0 +1,21 @@
MIT License
Copyright (c) 2021 okarin001
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:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
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.

View File

@@ -0,0 +1,46 @@
# Onepunch
## Screenshots
#### Dark
| ![dark_home](./screenshots/dark_home.png) | ![dark_album](./screenshots/dark_album.png) | ![dark_playlist](./screenshots/dark_playlist.png) |
| :-------------------------------------------: | :---------------------------------------------: | :-----------------------------------------------: |
| home | album | playlist |
| ![dark_podcast](screenshots/dark_podcast.png) | ![dark_profile](./screenshots/dark_profile.png) |
| podcat | profile |
#### Light
| ![light_home](./screenshots/light_home.png) | ![light_album](./screenshots/light_album.png) | ![light_playlist](./screenshots/light_playlist.png) |
| :---------------------------------------------: | :-----------------------------------------------: | :-------------------------------------------------: |
| home | album | playlist |
| ![light_podcast](screenshots/light_podcast.png) | ![light_profile](./screenshots/light_profile.png) |
| podcat | profile |
## More
### About
A simple gruvified spotify theme.
### Information
* To apply this theme:
```shell
# for dark theme
spicetify config current_theme Onepunch color_scheme dark
spicetify apply
#for light theme
spicetify config current_theme Onepunch color_scheme light
spicetify apply
```
* Tested on macOS only and pretty much everything worked. ヘ(・\_|
### Contact
Go **[here](https://github.com/okarin001/Onepunch/issues)** and *check/create* an issue in case you face any problem.

View File

@@ -0,0 +1,43 @@
[dark]
; onepunch dark mode
text = d5c4a1
subtext = b8bb26
extratext = fabd2f
main = 1d2021
sidebar = 1d2021
player = 1d2021
sec-player = 32302f
card = 32302f
sec-card = fb4934
shadow = 1d2021
selected-row = d3869b
button = 8ec07c
button-active = 8ec07c
button-disabled = 665c54
tab-active = fb4934
notification = fb4934
notification-error = cc2418
misc = 83a598
[light]
; onepunch light mode
text = 504945
subtext = 79740e
extratext = b57614
main = f9f5d7
sidebar = f9f5d7
player = f9f5d7
sec-player = f2e5bc
card = f2e5bc
sec-card = 9d0006
shadow = f9f5d7
selected-row = b16286
button = 427b58
button-active = 427b58
button-disabled = bdae93
tab-active = 9d0006
notification = 9d0006
notification-error = cc2418
misc = 076678

Binary file not shown.

After

Width:  |  Height:  |  Size: 276 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 465 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 337 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 455 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 427 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 25 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 282 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 474 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 345 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 507 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 440 KiB

View File

@@ -0,0 +1,407 @@
/* sidebar edits */
.main-navBar-navBarLinkActive,
.main-navBar-navBarLinkActive:focus,
.logo {
background-color: var(--spice-sec-card) !important;
color: var(--spice-main) !important;
}
.main-likedSongsButton-likedSongsIcon,
.main-createPlaylistButton-createPlaylistIcon,
.main-yourEpisodesButton-yourEpisodesIcon {
background: var(--spice-text) !important;
border-radius: unset !important;
color: var(--spice-main) !important;
}
.main-collectionLinkButton-collectionLinkButton {
color: var(--spice-main) !important;
}
.main-collectionLinkButton-collectionLinkButton .main-collectionLinkButton-collectionLinkText,
.main-createPlaylistButton-button,
.main-rootlist-rootlistItemLink,
.main-rootlist-rootlistItemLink:visited {
color: var(--spice-text) !important;
}
.main-rootlist-rootlistItemLinkActive,
.main-rootlist-rootlistItemLink:hover,
.main-rootlist-textWrapper:hover {
color: var(--spice-subtext) !important;
}
.main-collectionLinkButton-collectionLinkButton .main-collectionLinkButton-selected .main-collectionLinkButton-icon {
opacity: 0.7 !important;
}
.main-rootlist-rootlistDividerGradient {
background: linear-gradient(180deg, var(--spice-main), transparent);
}
.main-rootlist-rootlistDivider {
background-color: unset !important;
}
/* top queue */
.queue-tabBar-active {
background-color: var(--spice-card) !important;
}
.queue-tabBar-headerItemLink {
color: var(--spice-text) !important;
}
/* header colored backgrounds */
.main-home-homeHeader,
.x-441-entityHeader-overlay,
.main-actionBarBackground-background,
.main-entityHeader-overlay,
.main-entityHeader-backgroundColor,
.x-914-entityHeader-overlay,
.x-entityHeader-overlay,
.x-914-actionBarBackground-background,
.x-actionBarBackground-background {
background-color: unset !important;
background-image: unset !important;
}
/* play button in main page */
.main-playButton-PlayButton.main-playButton-primary {
color: var(--spice-main);
background-color: var(--spice-button);
}
.connect-title,
.connect-header {
display: none;
}
/* Topbar visibility bug */
.main-topBar-topbarContent:not(.main-topBar-topbarContentFadeIn)>* {
opacity: unset !important;
}
.main-entityHeader-topbarContent:not(.main-entityHeader-topbarContentFadeIn)>* {
opacity: 0 !important;
}
/* Remove Topbar background colour */
.main-topBar-background {
background-color: unset !important;
}
.main-topBar-overlay,
.x-441-actionBarBackground-background {
background-color: var(--spice-main) !important;
}
.main-entityHeader-shadow {
box-shadow: 0 0 4px 0 rgba(var(--spice-rgb-shadow), 0.5);
}
.main-trackList-playingIcon {
filter: hue-rotate(270deg);
}
span.artist-artistVerifiedBadge-badge svg:nth-child(1) {
fill: black;
}
/* details metadata */
.main-entityTitle-subtitle.main-entityTitle-gray,
.main-entityHeader-metaDataText {
color: var(--spice-text) !important;
}
.main-duration-container {
color: var(--spice-subtext);
}
/* artist page edits*/
.artist-artistOverview-artistOverviewContent {
box-shadow: 0 -2px 5px 0 rgba(var(--spice-rgb-shadow), 0.7);
}
.main-entityHeader-background.main-entityHeader-gradient {
opacity: 0.4;
}
.main-entityHeader-background.main-entityHeader-overlay:after {
background-image: linear-gradient(transparent, transparent),
linear-gradient(var(--spice-main), var(--spice-main));
}
.artist-artistPick-pickComment {
background: var(--spice-sec-player) !important;
border-radius: 25px !important;
border-bottom: solid 2px var(--spice-sec-player) !important;
color: var(--spice-text) !important;
}
.artist-artistSavedTracks-imageContainer .artist-artistSavedTracks-heartIcon {
color: var(--spice-card);
}
/* home screen edits */
.view-homeShortcutsGrid-name {
color: var(--spice-text);
}
.main-shelf-title {
color: var(--spice-subtext);
}
.view-homeShortcutsGrid-shortcut,
.view-homeShortcutsGrid-shortcut .view-homeShortcutsGrid-imageWrapper,
.main-cardImage-imageWrapper,
.main-cardImage-imagePlaceholder,
.main-cardImage-image {
border-radius: 10px !important;
}
.view-homeShortcutsGrid-shortcut .view-homeShortcutsGrid-image {
border-radius: 10px 0 0 10px !important;
}
.main-cardImage-circular,
.main-entityHeader-circle {
border-radius: 50% !important;
}
.main-entityHeader-image {
border-radius: 10px;
}
/* inside a page edits */
.main-addButton-button {
color: var(--spice-subtext) !important;
}
.main-trackList-trackListRow.main-trackList-active .main-trackList-rowMarker,
.main-trackList-trackListRow.main-trackList-active .main-trackList-rowTitle {
color: var(--spice-subtext) !important;
}
.main-trackList-rowTitle {
color: var(--spice-text) !important;
}
/* friend activity */
.main-buddyFeed-activityMetadata .main-buddyFeed-artistAndTrackName a,
.main-buddyFeed-activityMetadata .main-buddyFeed-playbackContext a,
.main-buddyFeed-activityMetadata .main-buddyFeed-usernameAndTimestamp a {
color: var(--spice-text) !important;
}
.main-buddyFeed-activityMetadata .main-buddyFeed-username a {
color: var(--spice-subtext) !important;
}
.main-avatar-avatar.main-avatar-withBadge:after {
background: var(--spice-extratext);
}
/* setting page */
.x-settings-container {
margin: 16px 180px !important;
}
.x-settings-title {
color: var(--spice-subtext) !important;
}
.main-dropDown-dropDown {
border: 0;
border-radius: 10px;
}
.main-dropDown-dropDown {
background-color: var(--spice-button-disabled) !important;
color: var(--spice-text) !important;
}
.x-toggle-indicator {
background: var(--spice-button) !important;
box-shadow: 0 2px 4px 0 rgba(var(--spice-rgb-shadow), 0.5);
}
input:checked~.x-toggle-indicatorWrapper .x-toggle-indicator {
background-color: var(--spice-button) !important;
box-shadow: 0 2px 4px 0 rgba(var(--spice-rgb-shadow), 0.5);
}
input:hover:not([disabled]):not(:active)~.x-toggle-indicatorWrapper {
background-color: rgba(var(--spice-rgb-button-disabled), 0.7) !important;
}
input:checked~.x-toggle-indicatorWrapper {
background-color: rgba(var(--spice-rgb-button), 0.6) !important;
}
input:checked:hover:not([disabled]):not(:active)~.x-toggle-indicatorWrapper {
background-color: rgba(var(--spice-rgb-button), 0.4) !important;
}
/* queue, album, recent, playlist, page edits */
.queue-queue-container,
.queue-playHistory-container {
margin: 40px 60px !important;
}
.main-actionBar-ActionBar,
.x-actionBar-ActionBar {
margin: 0 40px !important;
}
/* podcast edits */
.x-hTMLDescription-HTMLDescription,
.x-expandableDescription-paragraph {
color: var(--spice-text) !important;
}
.x-seeMore-button,
.x-expandableDescription-button {
color: var(--spice-button) !important;
}
.main-type-minuetBold {
color: var(--spice-extratext) !important;
}
.main-entityTitle-subtitle,
.main-entityTitle-subtitle.main-entityTitle-large,
.main-entityTitle-subtitle.main-entityTitle-bold {
color: var(--spice-subtext) !important;
}
/* search page edits */
input {
background-color: unset !important;
border-bottom: solid 2px var(--spice-text) !important;
border-radius: 0 !important;
color: var(--spice-text) !important;
}
.x-833-searchInput-searchInputSearchIcon {
color: var(--spice-text) !important;
}
.x-833-heroCategoryCard-heroTitle,
.x-833-categoryCard-title {
color: var(--spice-main) !important;
}
/* menu and dropdown menus including the user menu */
.main-type-mesto,
.x-533-dropDown-dropDown {
color: var(--spice-text) !important;
}
.main-userWidget-box {
background-color: var(--spice-card) !important;
border: unset !important;
color: var(--spice-subtext) !important;
}
/* card edits */
.main-card-card a,
.main-card-card button {
color: var(--spice-extratext);
}
.main-card-card:hover,
.main-card-card[data-context-menu-open="true"] {
background-color: rgba(var(--spice-rgb-sec-card), 0.3) !important;
}
.main-contextMenu-menu,
.main-card-card:focus-within,
.main-deletePlaylistDialog-container,
.main-aboutRecsModal-container {
background-color: var(--spice-card) !important;
}
.main-deletePlaylistDialog-secondaryButton {
color: var(--spice-text) !important;
}
.main-button-primary {
background-color: var(--spice-sec-card) !important;
color: var(--spice-card) !important;
}
.main-deletePlaylistDialog-title {
color: var(--spice-subtext) !important;
}
.main-keyboardShortcutsHelpModal-container,
.main-trackCreditsModal-container {
background-color: var(--spice-card) !important;
color: var(--spice-text) !important;
}
.main-keyboardShortcutsHelpModal-header,
.main-trackCreditsModal-header {
color: var(--spice-subtext) !important;
}
.main-type-canon {
color: var(--spice-extratext) !important;
}
/* profile page edits */
.main-cardImage-imageWrapper {
background-color: var(--spice-card) !important;
}
/* now playing bar edits */
.Root__now-playing-bar {
background-color: var(--spice-sec-player) !important;
box-shadow: 0 -2px 5px 0 rgba(var(--spice-rgb-shadow), 0.5) !important;
border-radius: 15px 15px 0 0 !important;
}
.main-nowPlayingBar-container {
background-color: var(--spice-sec-player) !important;
border-radius: 15px 15px 0 0 !important;
}
.main-connectBar-connectBar.main-connectBar-FullscreenModeButtonEnabled.main-type-mesto {
color: var(--spice-sidebar) !important;
}
.progress-bar {
--progress-bar-height: 5px !important;
}
.progress-bar__bg {
background-color: rgba(var(--spice-rgb-button-disabled), 0.7) !important;
}
.progress-bar--is-active .progress-bar__fg,
:not(.no-focus-outline) .progress-bar:focus-within .progress-bar__fg {
background-color: var(--fg-color);
}
.main-shuffleButton-button.main-shuffleButton-on,
.main-repeatButton-button.main-repeatButton-on {
color: var(--spice-button) !important;
}
.cover-art--with-auto-height {
border: solid var(--spice-sec-player) 5px !important;
}
.cover-art,
.cover-art .cover-art-image {
border-radius: 10px !important;
background-color: var(--spice-sec-player) !important;
}

View File

@@ -0,0 +1,76 @@
# spicetify community themes
This is a collection of themes for [spicetify](https://github.com/spicetify/spicetify-cli), a command-line tool to customize Spotify.
You can add your own theme simply by opening a Pull Request (more info in [CONTRIBUTING.md](./CONTRIBUTING.md)).
### **You can find a preview of all the themes in [THEMES.md](./THEMES.md).**
## Notes:
* **These themes require that you have the latest version of Spotify and Spicetify.**
* **To install Dribbblish and Turntable themes, follow the instructions in their READMEs**.
* **Spotify ad-blocked version is not supported.**
## Installation and usage
(If you use Arch Linux you can find this project on the [AUR](https://aur.archlinux.org/packages/spicetify-themes-git/))
1. Clone this repository. Make sure [git](https://git-scm.com/) is installed and run:
```bash
git clone https://github.com/spicetify/spicetify-themes.git
```
2. Copy the files into the [Spicetify Themes folder](https://spicetify.app/docs/development/customization#themes). Run:
**Linux**
```bash
cd spicetify-themes
cp -r * ~/.config/spicetify/Themes
```
**MacOS**
```bash
cd spicetify-themes
cp -r * ~/.config/spicetify/Themes
```
**Windows**
```powershell
cd spicetify-themes
cp * "$(spicetify -c | Split-Path)\Themes\" -Recurse
```
3. Choose which theme to apply just by running:
```bash
spicetify config current_theme THEME_NAME
```
Some themes have 2 or more different color schemes. After selecting the theme you can switch between them with:
```bash
spicetify config color_scheme SCHEME_NAME
```
### Extra
The `_Extra` folder contains additional resources for tweaking the look of
Spotify. More info in its [README](./\_Extra/README.md).
## Contributions
We've set up a separate document for our [contribution guidelines](./CONTRIBUTING.md).
## Troubleshooting
Do not open issues for general support questions as we want to keep GitHub issues for bug reports and feature requests. If you find problems when using or installing these themes, or you need help in modifying a theme then ask for suggestions on the [subreddit](https://www.reddit.com/r/spicetify/) or on the [Discord Server](https://discord.com/invite/VnevqPp2Rr).
Use GitHub issues ONLY for bugs and requesting new features.
If you are unsure about which channel to use, go for Reddit or Discord.
## Useful resources
* [Spicetify theme without free version UI elements (e.g. "Upgrade" button)](https://github.com/Daksh777/SpotifyNoPremium)
* [DribbblishDynamic theme for v2](https://github.com/JulienMaille/dribbblish-dynamic-theme)

View File

@@ -0,0 +1,68 @@
# Sleek
### BladeRunner
![BladeRunner](bladerunner.png)
### Cherry
![Cherry](cherry.png)
### Coral
![Coral](coral.png)
### Deep
![Deep](deep.png)
### Deeper
![Deeper](deeper.png)
### Elementary
![Elementary](elementary.png)
### Futura
![Futura](futura.png)
### Nord
![Nord](nord.png)
### Psycho
![Psycho](psycho.png)
### UltraBlack
![UltraBlack](ultrablack.png)
### Wealthy
![Wealthy](wealthy.png)
### Dracula
![Dracula](dracula.png)
### VantaBlack
![VantaBlack](vantablack.png)
## Info
A simple, 'sleek' theme that builds upon the basic Spotify UI to create a more stylised experience. Also removes all annoyances from free version, including banner advertisements and upgrade buttons.
Created by [@harbassan](https://github.com/harbassan)
### Changing Color Schemes
Change the scheme with these commands:
```
spicetify config color_scheme <scheme name>
spicetify apply
```

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 622 KiB

View File

@@ -0,0 +1,343 @@
[NPink]
; Pink on dark blue background
text = fe9bce
subtext = b1d4e9
nav-active-text = fe9bce
main = 25283f
sidebar = 25283f
player = 25283f
card = 25283f
shadow = 25283f
main-secondary = 545d89
button = b1d4e9
button-secondary = b1d4e9
button-active = fe9bce
button-disabled = b1d4e9
nav-active = 383e5b
play-button = fe9bce
tab-active = 383e5b
notification = 25283f
notification-error = 25283f
playback-bar = fe9bce
misc = FFFFFF
[Wealthy]
; Green on dark grey background
text = 8bc34a
subtext = b4b4b4
nav-active-text = 202020
main = 202020
sidebar = 202020
player = 242424
card = 242424
shadow = 000000
main-secondary = 171717
button = 8bc34a
button-secondary = 6a913d
button-active = 98da4b
button-disabled = 353535
nav-active = 8bc34a
play-button = 8bc34a
tab-active = 171717
notification = 242424
notification-error = 242424
playback-bar = 8bc34a
misc = FFFFFF
[Cherry]
; Pink on dark blue background
text = d98ba1
subtext = d7d7d7
nav-active-text = 131c26
main = 131c26
sidebar = 131c26
player = 131c26
card = 131c26z
shadow = 0e0e13
main-secondary = 09111b
button = d98ba1
button-secondary = d98ba1
button-active = ff84ac
button-disabled = 192531
nav-active = ff84ac
play-button = d98ba1
tab-active = 09111b
notification = 192531
notification-error = 192531
playback-bar = d98ba1
misc = FFFFFF
[Coral]
; Salmon on dark blue background
text = f88379
subtext = d7d7d7
nav-active-text = 131c26
main = 131c26
sidebar = 131c26
player = 131c26
card = 131c26
shadow = 0e0e13
main-secondary = 09111b
button = f88379
button-secondary = f88379
button-active = fb958b
button-disabled = 192531
nav-active = fb958b
play-button = f88379
tab-active = 09111b
notification = 192531
notification-error = 192531
playback-bar = f88379
misc = FFFFFF
[Deep]
; White on dark blue background
text = ffffff
subtext = ffffff
nav-active-text = ffffff
main = 020816
sidebar = 051024
player = 030b1e
card = 0a1527
shadow = 000000
main-secondary = 06142d
button = 1464b5
button-secondary = ffffff
button-active = 4a99e9
button-disabled = 21282f
nav-active = 37b778
play-button = 37b778
tab-active = 0a1527
notification = 051024
notification-error = 051024
playback-bar = 37b778
misc = FFFFFF
[Deeper]
; Light blue on dark background
text = 4f9a87
subtext = 4f9a87
nav-active-text = 4f9a87
main = 040614
sidebar = 0F111A
player = 0F111A
card = 0C1C19
shadow = 000000
main-secondary = 131520
button = 4f9a87
button-secondary = 4f9a87
button-active = 4a99e9
button-disabled = 0C1C19
nav-active = 040614
play-button = 4f9a87
tab-active = 0a1527
notification = 051024
notification-error = 051024
playback-bar = 4f9a87
misc = FFFFFF
[Psycho]
; Red on dark grey background
text = c20000
subtext = ffffff
nav-active-text = 101010
main = 101010
sidebar = 171717
player = 171717
card = 171717
shadow = 000000
main-secondary = 1f1f1f
button = c20000
button-secondary = a20606
button-active = c20000
button-disabled = 404040
nav-active = 9f0909
play-button = c20000
tab-active = 171717
notification = 5e0000
notification-error = 5e0000
playback-bar = c20000
misc = FFFFFF
[UltraBlack]
; White on black background
text = FFFFFF
subtext = DEDEDE
nav-active-text = 000000
main = 000000
sidebar = 000000
player = 000000
card = 000000
shadow = 000000
main-secondary = 292929
button = 1DB954
button-secondary = DEDEDE
button-active = 1DB954
button-disabled = 2f2f2f
nav-active = DEDEDE
play-button = DEDEDE
tab-active = 292929
notification = 292929
notification-error = 292929
playback-bar = DEDEDE
misc = FFFFFF
[Nord]
; Light grey on blue background
text = D8DEE9
subtext = E5E9F0
nav-active-text = D8DEE9
main = 2E3440
sidebar = 2E3440
player = 2E3440
card = 2E3440
shadow = 1d2128
main-secondary = 434c5e
button = 5E81AC
button-secondary = D8DEE9
button-active = 81A1C1
button-disabled = 434C5E
nav-active = 4c566a
play-button = 5E81AC
tab-active = 3b4252
notification = 3b4252
notification-error = 3b4252
playback-bar = DEDEDE
misc = FFFFFF
[Futura]
; Cyan on dark background
text = 34ad7e
subtext = DEDEDE
nav-active-text = 2E2837
main = 2E2837
sidebar = 2E2837
player = 2E2837
card = 2E2837
shadow = 000000
main-secondary = 51485b
button = 34ad7e
button-secondary = 34ad7e
button-active = 00bf76
button-disabled = 3f3c45
nav-active = 34ad7e
play-button = 34ad7e
tab-active = 51485b
notification = 51485b
notification-error = 51485b
playback-bar = 34ad7e
misc = FFFFFF
[Elementary]
; Purple and pink on dark background
text = c59dff
subtext = dedede
nav-active-text = 1d1821
main = 1f1f29
sidebar = 1d1821
player = 1d1821
card = 2E2837
shadow = 000000
main-secondary = 1d1821
button = d4516f
button-secondary = c59dff
button-active = f16d8c
button-disabled = 2E303E
nav-active = d4516f
play-button = d4516f
tab-active = 1d1821
notification = 2E2837
notification-error = 2E2837
playback-bar = c59dff
misc = FFFFFF
[BladeRunner]
; Yellow, pink and blue on dark background
text = dcd88c
subtext = 9fbfb7
nav-active-text = 1d1821
main = 181b1e
sidebar = 181b1e
player = 181b1e
card = 17191d
shadow = 000000
main-secondary = 0b0d0e
button = f6867c
button-secondary = dcd88c
button-active = f6867c
button-disabled = 242a2e
nav-active = f6867c
play-button = f6867c
tab-active = 131417
notification = 131417
notification-error = 131417
playback-bar = dcd88c
misc = FFFFFF
[Dracula]
; https://draculatheme.com/contribute
text = 50fa7b
subtext = bd93f9
nav-active-text = 282a36
main = 282a36
sidebar = 282a36
player = 282a36
card = 282a36
shadow = 000000
main-secondary = 1c1e26
button = 50fa7b
button-secondary = ff79c6
button-active = 00bf76
button-disabled = 3f3c45
nav-active = 50fa7b
play-button = 50fa7b
tab-active = 1c1e26
notification = 1c1e26
notification-error = 1c1e26
playback-bar = 50fa7b
misc = FFFFFF
[VantaBlack]
; Gray on black background
text = 666666
subtext = 666666
nav-active-text = 666666
main = 000000
sidebar = 000000
player = 000000
card = 000000
shadow = 333333
main-secondary = 000000
button = 000000
button-secondary = 000000
button-active = 333333
button-disabled = 000000
nav-active = 333333
play-button = 000000
tab-active = 333333
notification = 000000
notification-error = 000000
playback-bar = 000000
misc = 000000
; Description
; text = main text, playlist names in main field, name of playlist selected in sidebar, headings
; subtext = text in main buttons in sidebar, playlist names in sidebar, artist names, and mini infos
; nav-active-text = text in main buttons in sidebar when active
; main = main bg
; main-secondary = bg color of selected song rows, bg color of artist/track cards
; sidebar = sidebar bg
; player = player bg
; card = popup-card bg
; shadow = all shadows
; button = playlist buttons bg in sidebar, drop-down menus, now playing song, like button
; button-secondary = download and options button
; button-active = hover on song selected
; button-disabled = seekbar bg, volume bar bg, scrollbar
; nav-active = sidebar buttons bg
; play-button = color of main play button in main field
; tab-active = button bg in main field (playlists, podcasts, artists, albums)
; notification = notification ('Added to liked songs' etc.)
; playback-bar = seekbar fg, volume bar fg, main play/pause button
; misc = miscellaneous

Binary file not shown.

After

Width:  |  Height:  |  Size: 546 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 829 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 447 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 748 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 487 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 601 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 315 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 401 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 544 KiB

View File

@@ -0,0 +1,772 @@
/* Version 14/10/21 */
.encore-dark-theme .encore-bright-accent-set {
--background-highlight: var(--spice-play-button);
--background-press: var(--spice-play-button);
--background-base: var(--spice-play-button);
}
/* TOPBAR */
/* fix topbar bug */
.main-entityHeader-topbarContent.main-entityHeader-topbarContentFadeIn > * {
opacity: unset !important;
}
/* unset colors of history buttons */
.main-topBar-historyButtons .main-topBar-button {
background-color: unset;
}
/* change appearance of search icon on 'search' tab */
.x-searchInput-searchInputSearchIcon svg {
color: var(--spice-text);
height: 17px !important;
stroke: var(--spice-text);
}
/* change appearance of x icon on 'search' tab */
.x-searchInput-searchInputClearButton {
color: var(--spice-text);
}
[role='searchbox']::placeholder {
color: rgba(var(--spice-rgb-text), 0.5);
}
/* add topbar transition */
.queue-tabBar-headerItemLink {
transition-duration: 0.15s;
}
/* remove topbar background colour */
.main-topBar-background {
background-color: unset !important;
}
/* resize play-button on topbar */
.main-topBar-overlay {
background-color: var(--spice-player);
}
.main-topBar-topbarContent .main-playButton-primary {
--size: 35px !important;
}
/* simplify profile menu */
.main-userWidget-displayName,
.main-userWidget-notificationIndicator {
display: none;
}
.main-avatar-userIcon {
color: white;
}
.main-userWidget-box {
color: var(--spice-subtext);
background-color: transparent !important;
}
.main-userWidget-chevron {
display: none;
}
/* NAVBAR */
/* navbar bug fix */
ul.main-navBar-entryPoints > div.GlueDropTarget{
padding: 0 8px;
}
ul.main-navBar-entryPoints > div.GlueDropTarget >* {
padding: 0 16px;
height: 40px;
border-radius: 4px;
}
ul.main-navBar-entryPoints > div.GlueDropTarget >*.active {
background: var(--spice-card);
}
/* remove divider gradient */
.main-rootlist-rootlistDividerGradient {
display: none;
}
/* change color of divider */
.main-rootlist-rootlistDivider {
background-color: rgba(var(--spice-rgb-button-disabled), 0.8);
}
/* add gradient to navbar */
.Root__nav-bar {
background-image: linear-gradient(
to bottom left,
var(--spice-sidebar) 0%,
var(--spice-player) 100%
) !important;
}
/* change color of navbar playing icon */
[aria-label='Playing'] {
color: var(--spice-text);
}
/* change color of navbar icons */
.main-likedSongsButton-likedSongsIcon {
background: var(--spice-text);
color: var(--spice-sidebar);
}
.main-yourEpisodesButton-yourEpisodesIcon {
background: var(--spice-text);
}
.main-yourEpisodesButton-yourEpisodesIcon path {
fill: var(--spice-sidebar);
}
/* remove opacity of navbar buttons */
.main-collectionLinkButton-collectionLinkButton .main-collectionLinkButton-icon, .main-collectionLinkButton-collectionLinkButton .main-collectionLinkButton-collectionLinkText, .main-createPlaylistButton-button {
opacity: unset;
}
/* change top margin of navbar options */
.main-navBar-entryPoints > div:first-of-type {
margin-top: 20px;
}
/* change colors of active tab */
.main-navBar-navBarLinkActive {
background-color: var(--spice-nav-active);
}
.main-navBar-navBarLinkActive,
.main-navBar-navBarLinkActive:focus,
.main-navBar-navBarLinkActive:hover {
color: var(--spice-nav-active-text) !important;
transition: none;
}
/* PLAYBACK-BAR */
/* shift bar up when connect bar is visible */
.now-playing-bar-container>div:first-child:nth-last-child(2) .playback-bar, .main-nowPlayingBar-container>div:first-child:nth-last-child(2) .playback-bar {
bottom: 107px;
}
/* revert playback bar position when in full-screen mode */
._U2P19b627vsKWCNNffn .playback-bar {
bottom: auto;
}
/* round cover art when collapsed */
.main-coverSlotCollapsed-container .cover-art-image {
border-radius: 10%;
transition-duration: 0.15s;
}
.main-coverSlotExpandedCollapseButton-collapseButton {
right: 10px !important;
top: 10px !important;
}
/* hide and move progress time location */
.playback-bar__progress-time-elapsed {
opacity: 0;
position: absolute;
bottom: 13px;
left: 0;
transition-duration: 0.15s;
}
.main-playbackBarRemainingTime-container {
opacity: 0;
position: absolute;
bottom: 13px;
right: 0;
transition-duration: 0.15s;
}
/* show time on hover */
.playback-bar:hover .playback-bar__progress-time-elapsed,
.playback-bar:hover .main-playbackBarRemainingTime-container {
opacity: 1;
}
/* move progress bar */
.playback-bar {
width: 100%;
bottom: 83px;
position: absolute;
}
.player-controls__buttons {
transform: translateY(3px);
align-items: center;
}
/* change progress bar color */
.playback-bar .progress-bar__fg {
background-color: var(--spice-playback-bar);
}
/* change appearance of play-button */
.main-playPauseButton-button {
background-color: inherit;
color: var(--spice-text);
transition-duration: 0.15s !important;
}
.main-playPauseButton-button svg {
height: 19px;
width: 19px;
}
.main-playPauseButton-button:focus, .main-playPauseButton-button:hover {
transform: scale(1) !important;
-webkit-transform: scale(1) !important;
}
/* change progress bar slider color */
.progress-bar__slider {
background-color: var(--spice-subtext);
}
/* BUDDY FEED */
/* change text color */
.main-buddyFeed-activityMetadata .main-buddyFeed-artistAndTrackName a,
.main-buddyFeed-activityMetadata .main-buddyFeed-username a,
.main-buddyFeed-activityMetadata .main-buddyFeed-playbackContextLink,
p.main-buddyFeed-timestamp.main-type-finale,
.main-buddyFeed-findFriendsButton .main-buddyFeed-findFriendsIcon {
color: var(--spice-subtext);
}
/* add gradient */
.main-buddyFeed-buddyFeed {
background-image: linear-gradient(
to bottom left,
var(--spice-sidebar) 0%,
var(--spice-player) 100%
) !important;
}
/* hide buddyfeed scrollbar */
.main-buddyFeed-scrollableArea > .os-scrollbar {
display: none;
}
/* MAIN */
/* hide banner ads */
.main-leaderboardComponent-container {
display: none;
}
.WiPggcPDzbwGxoxwLWFf.contentSpacing {
display: none;
}
.desktoproutes-homepage-takeover-ad-hptoComponent-parentContainer,
.desktoproutes-homepage-takeover-ad-hptoComponent-container {
display: none !important;
}
/* hide upgrade button */
.main-topBar-UpgradeButton {
display: none;
}
/* change input box appearance */
input {
background-color: var(--spice-main-secondary) !important;
border-bottom: solid 1px var(--spice-text) !important;
border-radius: 0 !important;
padding: 6px 10px 6px 48px;
color: var(--spice-text) !important;
}
/* remove background color from main headers */
.main-home-homeHeader,
.x-441-entityHeader-overlay,
.main-actionBarBackground-background,
.main-entityHeader-overlay,
.main-entityHeader-backgroundColor {
background-color: unset !important;
background-image: unset !important;
}
/* change playlist image shadow */
.main-entityHeader-shadow {
box-shadow: 0 5px 10px rgba(var(--spice-rgb-shadow), 0.5) !important;
}
/* change playlist image border-radius */
.main-entityHeader-image {
border-radius: 10%;
}
/* change playing icon from gif to svg */
.main-trackList-playingIcon {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg id='playing-icon' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 24'%3E%3Cdefs%3E%3Cstyle%3E %23playing-icon %7B fill: %2320BC54; %7D @keyframes play %7B 0%25 %7Btransform: scaleY(1);%7D 3.3%25 %7Btransform: scaleY(0.9583);%7D 6.6%25 %7Btransform: scaleY(0.9166);%7D 9.9%25 %7Btransform: scaleY(0.8333);%7D 13.3%25 %7Btransform: scaleY(0.7083);%7D 16.6%25 %7Btransform: scaleY(0.5416);%7D 19.9%25 %7Btransform: scaleY(0.4166);%7D 23.3%25 %7Btransform: scaleY(0.25);%7D 26.6%25 %7Btransform: scaleY(0.1666);%7D 29.9%25 %7Btransform: scaleY(0.125);%7D 33.3%25 %7Btransform: scaleY(0.125);%7D 36.6%25 %7Btransform: scaleY(0.1666);%7D 39.9%25 %7Btransform: scaleY(0.1666);%7D 43.3%25 %7Btransform: scaleY(0.2083);%7D 46.6%25 %7Btransform: scaleY(0.2916);%7D 49.9%25 %7Btransform: scaleY(0.375);%7D 53.3%25 %7Btransform: scaleY(0.5);%7D 56.6%25 %7Btransform: scaleY(0.5833);%7D 59.9%25 %7Btransform: scaleY(0.625);%7D 63.3%25 %7Btransform: scaleY(0.6666);%7D 66.6%25 %7Btransform: scaleY(0.6666);%7D 69.9%25 %7Btransform: scaleY(0.6666);%7D 73.3%25 %7Btransform: scaleY(0.6666);%7D 76.6%25 %7Btransform: scaleY(0.7083);%7D 79.9%25 %7Btransform: scaleY(0.75);%7D 83.3%25 %7Btransform: scaleY(0.8333);%7D 86.6%25 %7Btransform: scaleY(0.875);%7D 89.9%25 %7Btransform: scaleY(0.9166);%7D 93.3%25 %7Btransform: scaleY(0.9583);%7D 96.6%25 %7Btransform: scaleY(1);%7D %7D %23bar1 %7B transform-origin: bottom; animation: play 0.9s -0.51s infinite; %7D %23bar2 %7B transform-origin: bottom; animation: play 0.9s infinite; %7D %23bar3 %7B transform-origin: bottom; animation: play 0.9s -0.15s infinite; %7D %23bar4 %7B transform-origin: bottom; animation: play 0.9s -0.75s infinite; %7D %3C/style%3E%3C/defs%3E%3Ctitle%3Eplaying-icon%3C/title%3E%3Crect id='bar1' class='cls-1' width='4' height='24'/%3E%3Crect id='bar2' class='cls-1' x='6' width='4' height='24'/%3E%3Crect id='bar3' class='cls-1' x='12' width='4' height='24'/%3E%3Crect id='bar4' class='cls-1' x='18' width='4' height='24'/%3E%3C/svg%3E");
background: var(--spice-button);
content-visibility: hidden;
-webkit-mask-repeat: no-repeat;
}
/* change appearance of 'playlist' tag */
.main-entityTitle-subtitle.main-entityTitle-small.main-entityTitle-uppercase.main-entityTitle-bold {
border: 2px var(--spice-text) solid;
border-radius: 3px;
width: fit-content;
display: inline;
text-align: center;
padding: 0 5px;
}
/* change scrollbar appearance */
.os-theme-spotify.os-host-transition
> .os-scrollbar-vertical
> .os-scrollbar-track
> .os-scrollbar-handle {
border-radius: 4px;
width: 6px;
background-color: var(--spice-button-disabled)
}
.os-theme-spotify.os-host-transition
> .os-scrollbar-vertical
> .os-scrollbar-track {
width: 6px;
}
/* add border under header row */
.main-trackList-trackListHeaderRow {
border-bottom: 1px solid rgba(var(--spice-rgb-button-disabled), 0.8);
}
/* change appearance of main/topbar play-button */
.main-playButton-PlayButton.main-playButton-primary {
color: var(--spice-main);
background-color: var(--spice-play-button);
box-shadow: var(--spice-shadow) 0 5px 4px 0px;
transition-duration: 0.15s !important;
}
/* change appearance of download button */
.x-downloadButton-button {
box-shadow: var(--spice-shadow) 0 5px 4px 0px;
background: var(--spice-player);
border-radius: 50%;
}
/* change text color on category cards in 'search' tab */
a.x-categoryCard-CategoryCard,
a.x-heroCategoryCard-HeroCategoryCard {
color: var(--spice-subtext);
}
/* recolor sub-buttons */
.main-moreButton-button {
color: var(--spice-button-secondary);
}
.x-downloadButton-button {
color: var(--spice-button-secondary) !important;
}
.x-downloadButton-button:hover {
color: var(--spice-text) !important;
}
.main-addButton-button {
color: var(--spice-button-secondary);
}
.main-entityHeader-metaDataText {
color: var(--spice-button-secondary);
}
.x-sortBox-sortDropdown {
background-color: var(--spice-main-secondary) !important;
}
.x-filterBox-searchIconContainer {
color: var(--spice-button-secondary) !important;
}
.x-filterBox-expandButton:focus,
.x-filterBox-expandButton:hover {
background-color: var(--spice-main-secondary) !important;
}
.x-sortBox-sortDropdown,
.x-filterBox-expandButton {
color: var(--spice-text) !important;
}
/* change background color of 'home' tab shortcut items */
.view-homeShortcutsGrid-shortcut {
background-color: rgba(var(--spice-rgb-main-secondary), .3) !important;
}
.view-homeShortcutsGrid-shortcut:focus-within,
.view-homeShortcutsGrid-shortcut:hover,
.view-homeShortcutsGrid-shortcut[data-context-menu-open='true'] {
background-color: rgba(var(--spice-rgb-main-secondary), .5) !important;
}
/* 'see more' button fix */
.artist-popularTrackList-seeMore {
color: rgba(var(--spice-rgb-text), 0.7);
}
/* card background color for editing playlist details */
.main-playlistEditDetailsModal-descriptionTextarea {
background: var(--spice-main-secondary);
}
.main-playlistEditDetailsModal-textElementLabel {
display: none;
}
/* change color of search icon for new playlists */
.playlist-inlineSearchBox-searchIcon {
fill: var(--spice-text) !important;
}
/* change appearance of verified artist badge */
.artist-artistVerifiedBadge-badge {
border: 2px solid var(--spice-text);
border-radius: 3px;
width: fit-content;
text-align: center;
padding: 0 5px;
}
span.artist-artistVerifiedBadge-badge path:nth-child(1) {
display: none;
}
span.artist-artistVerifiedBadge-badge path:last-child {
fill: var(--spice-text) !important;
stroke: var(--spice-text);
}
.artist-artistVerifiedBadge-badge span {
font-weight: bold;
}
/* change text color of hero card on 'library' tab */
.main-heroCard-card a,
.collection-collectionEntityHeroCard-descriptionContainer {
color: var(--spice-subtext) !important;
}
/* CONTEXT MENU */
/* change hover color when selecting in context menu */
.main-contextMenu-menuItemButton:not(.main-contextMenu-disabled):focus,
.main-contextMenu-menuItemButton:not(.main-contextMenu-disabled):hover {
background-color: rgba(0,0,0,.2) !important;
}
.main-contextMenu-menuItemButton[aria-expanded=true] {
background-color: rgba(0,0,0,.2) !important;
}
/* disabled options */
.main-contextMenu-disabled > span {
color: rgba(var(--spice-rgb-text), 0.5);
}
/* dividers between option subgroups */
.main-contextMenu-menuItem:not(:first-child)
> .main-contextMenu-dividerBefore:before {
border-bottom: 1px solid rgba(var(--spice-rgb-button-disabled), 0.5);
}
/* confirmation box appearance fixes */
.main-deleteFolderDialog-buttonContainer,
.main-deletePlaylistDialog-buttonContainer {
justify-content: space-between !important;
}
.main-deletePlaylistDialog-container {
background-color: var(--spice-player);
}
.main-deletePlaylistDialog-container > *:not(div) {
color: var(--spice-text);
}
.main-deletePlaylistDialog-buttonContainer > *:not(div) {
color: var(--spice-text);
}
.main-button-primary:hover {
background-color: var(--spice-button);
}
.main-button-primary {
color: white !important;
}
/* change colors on 'duplicate track' dialog */
.main-duplicateTracksDialog-container {
background-color: var(--spice-card);
color: var(--spice-subtext);
}
.main-duplicateTracksDialog-secondaryButton {
color: var(--spice-text);
}
/* TRACKS GRID */
/* change color of track titles */
.main-trackList-rowTitle {
color: var(--spice-subtext);
}
/* change color of 'explicit' badge */
.main-tag-container {
background-color: var(--spice-subtext);
}
/* change background color of selected row */
.main-trackList-trackListRow.main-trackList-selected, .main-trackList-trackListRow.main-trackList-selected:hover {
background-color: rgba(var(--spice-rgb-main-secondary), 0.6) !important;
}
.main-trackList-trackListRow:focus-within,
.main-trackList-trackListRow:hover {
background-color: rgba(var(--spice-rgb-main-secondary), 0.4);
}
/* When song is currently playing */
.main-trackList-active .main-type-mesto,
.main-trackList-active .main-trackList-rowSubTitle,
.main-trackList-active .main-trackList-rowSubTitle a,
.main-trackList-active .main-trackList-rowMarker,
.main-trackList-active .main-trackList-rowSectionVariable,
.main-trackList-active .main-trackList-rowSectionVariable a,
.main-trackList-active .main-trackList-rowSectionVariable span,
.main-trackList-active .main-trackList-rowMarker,
.main-trackList-active .main-trackList-rowDuration {
color: var(--spice-button) !important;
}
.main-trackList-active .main-tag-container {
background-color: var(--spice-button);
}
/* When song is hovered/selected */
.main-trackList-trackListRow.main-trackList-selected:not(.main-trackList-active)
.main-tag-container,
.main-trackList-trackListRow:hover:not(.main-trackList-disabled):not(.main-trackList-active)
.main-tag-container {
background-color: var(--spice-text);
}
.main-trackList-trackListRow.main-trackList-selected:not(.main-trackList-active)
.main-trackList-rowTitle,
.main-trackList-trackListRow:hover:not(.main-trackList-disabled):not(.main-trackList-active)
.main-trackList-rowTitle {
color: var(--spice-text);
}
.main-trackList-trackListRow.main-trackList-selected:not(.main-trackList-active)
.main-trackList-rowSubTitle,
.main-trackList-trackListRow:hover:not(.main-trackList-disabled):not(.main-trackList-active)
.main-trackList-rowSubTitle {
color: var(--spice-text) !important;
}
.main-trackList-trackListRow.main-trackList-selected:not(.main-trackList-active)
.main-trackList-rowSubTitle a,
.main-trackList-trackListRow:hover:not(.main-trackList-disabled):not(.main-trackList-active)
.main-trackList-rowSubTitle a {
color: unset !important;
}
.main-trackList-trackListRow.main-trackList-selected:not(.main-trackList-active)
.main-trackList-rowSectionVariable a,
.main-trackList-trackListRow:hover:not(.main-trackList-disabled):not(.main-trackList-active)
.main-trackList-rowSectionVariable a {
color: var(--spice-text) !important;
}
/* NOTIFICATION */
._9eb5acf729a98d62135ca21777fef244-scss {
color: var(--spice-card);
}
/* TEMPORARY */
/* change delete playlist dialog box colors */
.K8PtC1Way9XetxDGwCGx {
background-color: var(--spice-card);
}
.K8PtC1Way9XetxDGwCGx > *:not(div) {
color: var(--spice-text);
}
.awGNDbf1c8TGBAFR0pv8 > *:not(div) {
color: white;
}
.main-deleteFolderDialog-buttonContainer,
.reDC8RlgDXoQ_bz0umLz {
justify-content: space-between !important;
}
/* change appearance of verified artist badge */
.Ov0avbbVFKCQwhi1UwYi {
border: 2px solid var(--spice-text);
border-radius: 3px;
width: fit-content;
text-align: center;
padding: 0 5px;
}
span.Ov0avbbVFKCQwhi1UwYi path:nth-child(1) {
display: none;
}
span.Ov0avbbVFKCQwhi1UwYi path:last-child {
fill: var(--spice-text) !important;
stroke: var(--spice-text);
}
.Ov0avbbVFKCQwhi1UwYi span {
font-weight: bold;
}
/* change progress bar color */
.epWhU7hHGktzlO_dop6z {
background-color: var(--spice-playback-bar) !important;
}
.player-controls__buttons.player-controls__buttons--new-icons div svg{
width: 14px;
height: 14px;
}
.fGLwlk:active .ButtonInner-sc-14ud5tc-0,
.fGLwlk:hover .ButtonInner-sc-14ud5tc-0 {
background-color: var(--spice-play-button);
}
span.ellipsis-one-line.main-type-mestoBold {
font-weight: 700;
font-size: 0.875rem;
}
.UyzJidwrGk3awngSGIwv {
color: inherit;
}
.fcehhQ {
color: inherit;
}
.icon.collection-icon svg {
stroke: var(--spice-subtext);
stroke-width: 10px;
}
:hover > .icon.collection-icon svg {
stroke: var(--spice-button-secondary);
stroke-width: 10px;
}
.wCl7pMTEE68v1xuZeZiB,
._bjbHn5TABOW2s5LsEGX,
.HbKLiGoYM4dpuK8L4TMX,
.w6j_vX6SF5IxSXrrkYw5 {
color: var(--spice-button-secondary);
}
.bRkxrs {
color: var(--spice-subtext);
}
.x-sortBox-sortDropdown {
background-color: var(--spice-main-secondary) !important;
}
.Z35BWOA10YGn5uc9YgAp:focus-within,
.Z35BWOA10YGn5uc9YgAp:hover,
.Z35BWOA10YGn5uc9YgAp[data-context-menu-open='true'] {
background-color: rgba(var(--spice-rgb-main-secondary), 1) !important;
}
.Z35BWOA10YGn5uc9YgAp {
background-color: rgba(var(--spice-rgb-main-secondary), 0.5) !important;
}
.main-card-card:hover, .main-card-card[data-context-menu-open=true] {
background-color: rgba(var(--spice-rgb-main-secondary), 1) !important;
}
.main-card-card {
background-color: rgba(var(--spice-rgb-main-secondary), 0.5) !important;
}
.CbHJjxYxldG7uUPMYMaP {
background-color: rgba(var(--spice-rgb-main-secondary), 1) !important;
}
.Z35BWOA10YGn5uc9YgAp {
transition: none;
}
.main-card-card {
transition: none;
}
img.main-image-image.CmkY1Ag0tJDfnFXbGgju.main-entityHeader-shadow {
border-radius: 7%;
}
/* change appearance of 'playlist' tag */
.main-entityHeader-subtitle.main-entityHeader-small.main-entityHeader-uppercase.main-entityHeader-bold {
border: 2px var(--spice-text) solid;
border-radius: 3px;
width: fit-content;
display: inline;
text-align: center;
padding: 3px 7px;
}
.main-topBar-topbarContent span.IconWrapper__Wrapper-sc-1hf1hjl-0.jWeDTW {
top: 9px;
left: 9px;
}
.main-topBar-topbarContent span.IconWrapper__Wrapper-sc-1hf1hjl-0.jWeDTW svg {
height: 20px;
width: 20px;
}
.main-topBar-topbarContent .ButtonInner-sc-14ud5tc-0.cSeieV.encore-bright-accent-set {
width: 38px;
height: 38px;
}
.x-progressBar-progressBarBg, .w699O0LgQRghXyl3bs9u {
border-radius: 0;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 681 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 482 KiB

View File

@@ -0,0 +1,180 @@
# Themes preview
Here you can find a preview of all the themes. Some of them may have different colour schemes (in that case you'll find different entries in the same theme, each one named after the colour scheme).
## BurntSienna
![BurntSienna Screenshot](BurntSienna/screenshot.png)
## Default
![Ocean Screenshot](Default/ocean.png)
## Dreary
#### BIB
![BIB Screenshot](Dreary/bib.png)
#### Psycho
![Psycho Screenshot](Dreary/psycho.png)
#### Deeper
![Deeper Screenshot](Dreary/deeper.png)
#### Mono
![Mono Screenshot](Dreary/mono.png)
#### Golden
![Golden Screenshot](Dreary/golden.png)
#### Graytone-Blue
![Graytone-blue Sreenshot](Dreary/graytone-blue.png)
## Dribbblish
#### Base
![base](Dribbblish/base.png)
#### White
![white](Dribbblish/white.png)
#### Dark
![dark](Dribbblish/dark.png)
#### Nord-Light
![nord-light](Dribbblish/nord-light.png)
#### Nord-Dark
![nord-dark](Dribbblish/nord-dark.png)
#### Beach-Sunset
![beach-sunset](Dribbblish/beach-sunset.png)
#### Purple
![purple](Dribbblish/purple.png)
#### Samourai
![samourai](Dribbblish/samourai.png)
## Glaze
### Base
<img src="https://github.com/CharlieS1103/Glaze-theme/blob/main/screenshots/base.png" alt="img" >
### Dark
<img src="https://github.com/CharlieS1103/Glaze-theme/blob/main/screenshots/dark.png" alt="img" >
### Gray
<img src="https://github.com/CharlieS1103/Glaze-theme/blob/main/screenshots/gray.png" alt="img" >
## Onepunch
#### Dark
![dark_home](Onepunch/screenshots/dark_home.png)
#### Light
![light_home](Onepunch/screenshots/light_home.png)
## Sleek
| | |
| :-----------------------------------: | :---------------------------------: |
| ![BladeRunner](Sleek/bladerunner.png) | ![Cherry](Sleek/cherry.png) |
| BladeRunner | Cherry |
| ![Coral](Sleek/coral.png) | ![Deep](Sleek/deep.png) |
| Coral | Deep |
| ![Deeper](Sleek/deeper.png) | ![Elementary](Sleek/elementary.png) |
| Deeper | Elementary |
| ![Futura](Sleek/futura.png) | ![Nord](Sleek/nord.png) |
| Futura | Nord |
| ![Psycho](Sleek/psycho.png) | ![UltraBlack](Sleek/ultrablack.png) |
| Psycho | UltraBlack |
| ![Wealthy](Sleek/wealthy.png) | ![Dracula](Sleek/dracula.png) |
| Wealthy | Dracula |
| ![VantaBlack](Sleek/vantablack.png) |
| VantaBlack |
## Turntable
![Turntable](Turntable/screenshots/fad.png)
## Ziro
#### Blue
| ![Album](https://raw.githubusercontent.com/schnensch0/ziro/main/preview/album-blue-dark.png) | ![Artist](https://raw.githubusercontent.com/schnensch0/ziro/main/preview/artist-blue-light.png) |
| :------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------: |
| Dark | Light |
#### Gray
| ![Cards](https://raw.githubusercontent.com/schnensch0/ziro/main/preview/cards-gray-dark.png) | ![Search](https://raw.githubusercontent.com/schnensch0/ziro/main/preview/search-gray-light.png) |
| :------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------: |
| Dark | Light |
#### Green
| ![Podcast](https://raw.githubusercontent.com/schnensch0/ziro/main/preview/podcast-green-dark.png) | ![Podcast](https://raw.githubusercontent.com/schnensch0/ziro/main/preview/podcast-green-light.png) |
| :-----------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------: |
| Dark | Light |
#### Orange
| ![Search](https://raw.githubusercontent.com/schnensch0/ziro/main/preview/search-orange-dark.png) | ![Library](https://raw.githubusercontent.com/schnensch0/ziro/main/preview/library-orange-light.png) |
| :----------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------: |
| Dark | Light |
#### Purple
| ![Single](https://raw.githubusercontent.com/schnensch0/ziro/main/preview/single-purple-dark.png) | ![Playlist](https://raw.githubusercontent.com/schnensch0/ziro/main/preview/playlist-purple-light.png) |
| :----------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------: |
| Dark | Light |
#### Red
| ![Profile](https://raw.githubusercontent.com/schnensch0/ziro/main/preview/profile-red-dark.png) | ![Queue](https://raw.githubusercontent.com/schnensch0/ziro/main/preview/queue-red-light.png) |
| :---------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------: |
| Dark | Light |
#### Rose Pine
| ![Playlists](Ziro/screenshots/rose-pine-moon.jpg) | ![Playlists](Ziro/screenshots/rose-pine-dawn.jpg) |
| :-----------------------------------------------: | :-----------------------------------------------: |
| Moon | Dawn |
## Flow
#### Ocean
<img src="https://raw.githubusercontent.com/spicetify/spicetify-themes/master/Flow/screenshots/ocean.png" alt="img">
#### Pink
<img src="https://raw.githubusercontent.com/spicetify/spicetify-themes/master/Flow/screenshots/pink.png" alt="img">
#### Silver
<img src="https://raw.githubusercontent.com/spicetify/spicetify-themes/master/Flow/screenshots/silver.png" alt="img">
#### Violet
<img src="https://raw.githubusercontent.com/spicetify/spicetify-themes/master/Flow/screenshots/violet.png" alt="img">

View File

@@ -0,0 +1,21 @@
MIT License
Copyright (c) 2021 Grason Chan
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:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
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.

View File

@@ -0,0 +1,88 @@
# Turntable
Based on Spotify original theme.
**Note:** Require Spicetify **v2.2.0** or higher! Otherwise, performance problems will happen when the turntable rotate!
View the **CHANGELOG** [here](https://github.com/grasonchan/spotify-spice/blob/master/CHANGELOG.md).
## Screenshots
<div align="center">
<img src="screenshots/turntable.png" alt="turntable">
</div>
<div align="center">
<img src="screenshots/fad.png" alt="full app display">
</div>
<div align="center">
<img src="screenshots/fad_vertical.png" alt="full app display - vertical mode">
</div>
## More
### About Turntable
Use CSS to achieve, not picture. This means it can be scaled to any size, but make sure the album cover is not blurry.
Actually, the rotation of the turntable was created at spicetify v1, but in some cases, animation is affected by other factors. I think "fullAppDisplay.js high GPU usage" is the reason. Fortunately, it's normal now!
### Info
Designed and developed by [Grason Chan](https://github.com/grasonchan).
The turntable inspired by [Netease Music](https://music.163.com) and [Smartisan OS build-in Music Player](https://www.smartisan.com/os/#/beauty) (not include code).
Develop and test on macOS. If there's any problem, please open issue or PR.
### Installation
1. add extension - [Full App Display](https://spicetify.app/docs/getting-started/extensions#full-app-display)
```shell
spicetify config extensions fullAppDisplay.js
spicetify apply
```
2. put **Turntable** and **turntable.js** into the **.config/spicetify**
```shell
cd spicetify-themes
cp -r Turntable ~/.config/spicetify/Themes
cp Turntable/turntable.js ~/.config/spicetify/Extensions
```
3. select the theme and extension, then apply
```shell
spicetify config current_theme Turntable
spicetify config extensions turntable.js
spicetify apply
```
### How to Uninstall
1. remove **Turntable** and **rotateTurntable.js**
```shell
rm -r ~/.config/spicetify/Themes/Turntable
rm ~/.config/spicetify/Extensions/turntable.js
```
2. config to spicetify default theme
```shell
spicetify config current_theme SpicetifyDefault
```
3. remove extension - Full App Display and Turntable(optional)
```shell
spicetify config extensions fullAppDisplay.js-
spicetify config extensions turntable.js-
```
4. apply
```shell
spicetify apply
```

View File

@@ -0,0 +1,3 @@
; empty config to fix `spicetify apply` error ouput
[turntable]

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 MiB

Some files were not shown because too many files have changed in this diff Show More