├── .github └── ISSUE_TEMPLATE │ └── bug_report.md ├── .gitignore ├── Blackout ├── README.md ├── color.ini ├── images │ ├── album_page.png │ ├── artist_page.png │ ├── home.png │ └── lyrics_page.png └── user.css ├── Blossom ├── LICENSE ├── README.md ├── color.ini ├── images │ ├── album.png │ └── home.png └── user.css ├── BurntSienna ├── README.md ├── color.ini ├── screenshot.png └── user.css ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── Default ├── README.md ├── color.ini └── ocean.png ├── Dreary ├── README.md ├── bib.png ├── color.ini ├── deeper.png ├── golden.png ├── graytone-blue.png ├── mono.png ├── psycho.png └── user.css ├── Dribbblish ├── README.md ├── assets │ └── glue-resources │ │ └── fonts │ │ ├── GoogleSansDisplayMedium.woff2 │ │ ├── GoogleSansDisplayRegular.woff2 │ │ ├── Roboto.woff2 │ │ └── RobotoMedium.woff2 ├── base.png ├── beach-sunset.png ├── catppuccin-frappe.png ├── catppuccin-latte.png ├── catppuccin-macchiato.png ├── catppuccin-mocha.png ├── color.ini ├── dark.png ├── gruvbox-material-dark.png ├── gruvbox.png ├── images │ └── tracklist-row-song-fallback.svg ├── install.ps1 ├── lunar.png ├── nord-dark.png ├── nord-light.png ├── purple.png ├── rosepine.png ├── samurai.png ├── theme.js ├── uninstall.ps1 ├── user.css ├── white.png └── windows-shortcut-instruction.png ├── Flow ├── LICENSE ├── README.md ├── color.ini ├── screenshots │ ├── ocean.png │ ├── pink.png │ ├── silver.png │ └── violet.png └── user.css ├── LICENSE ├── Matte ├── README.md ├── color.ini ├── screenshots │ ├── winctrl.png │ ├── ylx-gray-dark1.png │ ├── ylx-gray-dark2.png │ ├── ylx-gray-dark3.png │ ├── ylx-gray-light.png │ ├── ylx-gray.png │ ├── ylx-matte.png │ ├── ylx-periwinkle-dark.png │ ├── ylx-periwinkle.png │ └── ylx-porcelain.png └── user.css ├── Nightlight ├── README.md ├── color.ini ├── screenshots │ └── nightlight.png └── user.css ├── Onepunch ├── .gitignore ├── LICENSE ├── README.md ├── color.ini ├── screenshots │ ├── dark_album.png │ ├── dark_home.png │ ├── dark_playlist.png │ ├── dark_podcast.png │ ├── dark_profile.png │ ├── dark_ylx.png │ ├── display.gif │ ├── icons.png │ ├── legacy_ylx.png │ ├── light_album.png │ ├── light_home.png │ ├── light_playlist.png │ ├── light_podcast.png │ ├── light_profile.png │ └── light_ylx.png └── user.css ├── README.md ├── SharkBlue ├── README.md ├── color.ini ├── screenshot.png └── user.css ├── Sleek ├── README.md ├── ayudark.png ├── bladerunner.png ├── catppuccin.png ├── cherry.png ├── color.ini ├── coral.png ├── deep.png ├── deeper.png ├── dracula.png ├── eldritch.png ├── elementary.png ├── futura.png ├── greener.png ├── nord.png ├── psycho.png ├── rosepine.png ├── ultrablack.png ├── user.css ├── vantablack.png └── wealthy.png ├── StarryNight ├── README.md ├── color.ini ├── images │ ├── base.png │ ├── cotton-candy.png │ ├── forest.png │ ├── galaxy.png │ ├── orange.png │ ├── sky.png │ └── sunrise.png ├── theme.js └── user.css ├── THEMES.md ├── Turntable ├── LICENSE ├── README.md ├── color.ini ├── screenshots │ ├── blur_fad.png │ ├── blur_fad_vertical.png │ ├── fad.png │ ├── fad_vertical.png │ └── turntable.png ├── theme.js └── user.css ├── Ziro ├── LICENSE ├── README.md ├── color.ini ├── screenshots │ ├── rose-pine-dawn.jpg │ ├── rose-pine-moon.jpg │ └── rose-pine.jpg └── user.css ├── _Extra ├── README.md └── SpotifyNoControl │ ├── README.md │ ├── SpotifyNoControl.exe │ └── windows-shortcut-instruction.png ├── manifest.json └── text ├── README.md ├── color.ini ├── screenshots ├── CatppuccinLatte.png ├── CatppuccinMacchiato.png ├── CatppuccinMocha.png ├── Dracula.png ├── ForestGreen.png ├── Gruvbox.png ├── Kanagawa.png ├── Nord.png ├── Rigel.png ├── RosePine.png ├── RosePineDawn.png ├── RosePineMoon.png ├── Solarized.png ├── Spicetify.png ├── Spotify.png ├── TokyoNight.png ├── TokyoNightStorm.png ├── winctrl.png ├── withimg.png └── withoutimg.png └── user.css /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: "[Theme-name] " 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Prerequisites** 11 | Before opening an issue, make sure 12 | 1. You have the most recent `spicetify` version. 13 | 2. Your Spotify version is compatible with the `spicetify` version you are using. 14 | 3. You have the most recent version of the themes. 15 | 4. You followed the installation instructions for the theme you are using (please go through the entire theme README). 16 | 17 | **Describe the bug** 18 | A clear and concise description of what the bug is. 19 | 20 | **To Reproduce** 21 | Steps to reproduce the behavior: 22 | 1. Go to '...' 23 | 2. Click on '....' 24 | 3. Scroll down to '....' 25 | 4. See error 26 | 27 | **Expected behavior** 28 | A clear and concise description of what you expected to happen. 29 | 30 | **Screenshots** 31 | If applicable, add screenshots to help explain your problem. 32 | 33 | **Logs** 34 | Add logs from console. To do that 35 | 1. Run `spicetify enable-devtools` in terminal 36 | 2. Spotify will be restarted 37 | 3. Hit Ctrl + Shift + I to open DevTools window 38 | 4. Navigate to tab Console 39 | 5. Copy console window content. 40 | 41 | ```console 42 | (Please paste here console logs or attach a screenshot) 43 | ``` 44 | 45 | **Specifics (please complete the following information):** 46 | - OS: [e.g. iOS] 47 | - Spotify version [e.g. 1.1.10.546.ge08ef575] 48 | - Spicetify version [e.g. 1.1.0] 49 | - Theme name 50 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | .vscode -------------------------------------------------------------------------------- /Blackout/README.md: -------------------------------------------------------------------------------- 1 | 2 | # Blackout 3 | 4 | A True Black AMOLED/OLED theme for spicetify. 5 | 6 | ## Looks 7 | 8 | ##### Home 9 | ![home](images/home.png) 10 | 11 | ##### Album Page 12 | ![album](images/album_page.png) 13 | 14 | ##### Artist Page 15 | ![artist](images/artist_page.png) 16 | 17 | ##### Lyrics Page 18 | ![lyrics](images/lyrics_page.png) 19 | 20 | ## Dependencies 21 | 22 | - Latest version of [Spicetify](https://github.com/spicetify/spicetify-cli). 23 | - Latest version of [Spotify](https://www.spotify.com/download). 24 | 25 | ### Manual Installation 26 | 27 | Use this guide to install if you're having trouble using the shell commands/installation scripts: 28 | 29 | 1. Download this repo as [archive](https://github.com/thefoodiee/oledify/archive/refs/heads/main.zip). 30 | 2. Navigate to the Spicetify's `Themes` directory. Use `spicetify path userdata` command to get the path. 31 | 3. In the directory, create a new folder called `blackout`. 32 | 4. Open the downloaded repo archive, and move all of the files from the main folder to the `blackout` folder you created. 33 | 5. Open a terminal/command prompt window and type the following commands: 34 | 35 | ```shell 36 | spicetify config current_theme blackout color_scheme def 37 | spicetify config inject_css 1 replace_colors 1 overwrite_assets 1 inject_theme_js 1 38 | spicetify apply 39 | ``` 40 | 41 | ## Uninstallation 42 | 43 | ### Manual Uninstallation 44 | 45 | ```shell 46 | spicetify config color_scheme ' ' current_theme ' ' 47 | spicetify apply 48 | ``` -------------------------------------------------------------------------------- /Blackout/color.ini: -------------------------------------------------------------------------------- 1 | [def] 2 | text = FFFFFF 3 | subtext = F1F1F1 4 | main = 000000 5 | sidebar = 000000 6 | player = 000000 7 | card = 00010A 8 | shadow = 000000 9 | selected-row = F1F1F1 10 | button = 545955 11 | button-active = F1F1F1 12 | button-disabled = 434C5E 13 | tab-active = 000000 14 | notification = 00010A 15 | notification-error = 000000 16 | misc = 00010A -------------------------------------------------------------------------------- /Blackout/images/album_page.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/Blackout/images/album_page.png -------------------------------------------------------------------------------- /Blackout/images/artist_page.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/Blackout/images/artist_page.png -------------------------------------------------------------------------------- /Blackout/images/home.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/Blackout/images/home.png -------------------------------------------------------------------------------- /Blackout/images/lyrics_page.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/Blackout/images/lyrics_page.png -------------------------------------------------------------------------------- /Blossom/LICENSE: -------------------------------------------------------------------------------- 1 | Use it as you wish, have fun listening to music. 2 | 3 | Shoutout to Porter Robinson. 4 | 5 | -Robatortas -------------------------------------------------------------------------------- /Blossom/README.md: -------------------------------------------------------------------------------- 1 | # BLOSSOM 2 | 3 | A little theme for your Spotify client. 4 | 5 | ![1](https://github.com/spicetify/spicetify-themes/assets/72624799/4e545661-a164-469a-a10c-c1fcba40ab72) 6 | ![2](https://github.com/spicetify/spicetify-themes/assets/72624799/263ebbd2-b383-47b4-8bcf-1a9c4d5152c1) 7 | 8 | Made for a dark theme look thats pleasing to the eye. 9 | 10 | By Robatortas 11 | -------------------------------------------------------------------------------- /Blossom/color.ini: -------------------------------------------------------------------------------- 1 | [dark] 2 | text = ffffff 3 | subtext = aaaaaa 4 | extratext = aaaaaa 5 | background = 1e2226 6 | player = 282e33 7 | button = 4d5c78 8 | button-active = 6d80a3 9 | button-disabled = 282e33 10 | sidebar = 1e2226 11 | main = 1e2226 12 | card = 282e33 -------------------------------------------------------------------------------- /Blossom/images/album.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/Blossom/images/album.png -------------------------------------------------------------------------------- /Blossom/images/home.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/Blossom/images/home.png -------------------------------------------------------------------------------- /BurntSienna/README.md: -------------------------------------------------------------------------------- 1 | # BurntSienna 2 | 3 | ## Screenshots 4 | ![BurntSienna](./screenshot.png) 5 | 6 | ## More 7 | Montserrat Font is necessary, it is available on Google Fonts: 8 | https://fonts.google.com/specimen/Montserrat
9 | Author: https://github.com/pjaspinski -------------------------------------------------------------------------------- /BurntSienna/color.ini: -------------------------------------------------------------------------------- 1 | [Base] 2 | button = ef8450 3 | sidebar = 242629 4 | player = 242629 5 | main = 303336 6 | button-active = ef8450 -------------------------------------------------------------------------------- /BurntSienna/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/BurntSienna/screenshot.png -------------------------------------------------------------------------------- /BurntSienna/user.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); 2 | * { 3 | font-family: Montserrat; 4 | } 5 | 6 | /* Page titles */ 7 | h1 { 8 | font-weight: 700 !important; 9 | } 10 | 11 | /* Song name in player */ 12 | .main-nowPlayingWidget-nowPlaying .main-trackInfo-name { 13 | overflow: unset; 14 | font-size: 20px !important; 15 | } 16 | 17 | /* Artist name in player */ 18 | .main-nowPlayingWidget-nowPlaying .main-trackInfo-artists { 19 | overflow: unset; 20 | font-size: 15px; 21 | } 22 | 23 | .main-type-finale { 24 | line-height: 17px; 25 | } 26 | 27 | /* Icons */ 28 | .main-trackList-rowPlayPauseIcon { 29 | transform: scale(1.3); 30 | } 31 | 32 | .x-downloadButton-button svg { 33 | height: 32px; 34 | width: 32px; 35 | } 36 | 37 | /* Progress and remaining time */ 38 | .main-playbackBarRemainingTime-container, 39 | .playback-bar__progress-time-elapsed, 40 | .playback-bar__progress-time { 41 | font-size: 15px; 42 | margin-left: 5px; 43 | margin-right: 5px; 44 | } 45 | 46 | /* Player play button */ 47 | .main-playPauseButton-button { 48 | background-color: unset; 49 | color: var(--spice-subtext); 50 | } 51 | 52 | .main-playPauseButton-button svg { 53 | height: 28px; 54 | width: 28px; 55 | } 56 | 57 | /* Progress bar */ 58 | .progress-bar { 59 | --fg-color: var(--spice-button); 60 | } 61 | 62 | .progress-bar__bg, 63 | .progress-bar__fg, 64 | .progress-bar__fg_wrapper { 65 | height: 5px; 66 | } 67 | 68 | .progress-bar-wrapper { 69 | margin-left: 5px; 70 | margin-right: 5px; 71 | } 72 | 73 | /* Extra controls */ 74 | .control-button::before { 75 | font-size: 20px; 76 | } 77 | 78 | .ExtraControls svg { 79 | height: 20px; 80 | width: 20px; 81 | } 82 | 83 | /* Removing gradients */ 84 | .main-entityHeader-backgroundColor, 85 | .main-actionBarBackground-background { 86 | background-color: unset !important; 87 | background-image: none; 88 | } 89 | 90 | /* Cover shadow */ 91 | .main-entityHeader-shadow { 92 | -webkit-box-shadow: 0 4px 20px rgba(var(--spice-rgb-shadow), 0.5); 93 | box-shadow: 0 4px 20px rgba(var(--spice-rgb-shadow), 0.5); 94 | } 95 | 96 | /* Top bar */ 97 | .main-topBar-background { 98 | background-color: #3a3d42 !important; 99 | } 100 | 101 | /* Playing icon */ 102 | .main-trackList-playingIcon { 103 | filter: saturate(0%); 104 | } 105 | 106 | /* Playlist like button */ 107 | .main-actionBar-ActionBarRow .main-addButton-button .Svg-ulyrgf-0 { 108 | height: unset; 109 | width: unset; 110 | } 111 | 112 | /* Order button */ 113 | .x-sortBox-sortDropdown { 114 | margin-top: 3px; 115 | } 116 | 117 | /* Sidebar playlists menu */ 118 | .main-rootlist-rootlistDividerGradient { 119 | background: unset; 120 | } 121 | 122 | .main-rootlist-rootlistDivider { 123 | background-color: var(--spice-button); 124 | } 125 | 126 | /* Search box */ 127 | .x-searchInput-searchInputInput { 128 | font-size: 18px; 129 | } 130 | 131 | /* Aritsts names */ 132 | .main-type-mesto { 133 | font-size: 16px; 134 | line-height: 20px; 135 | } 136 | 137 | /* Songs names */ 138 | .main-type-ballad { 139 | font-size: 18px; 140 | } 141 | 142 | /* Cards descriptions */ 143 | .main-cardSubHeader-root { 144 | overflow: hidden !important; 145 | } 146 | 147 | /* Ad title */ 148 | .desktoproutes-homepage-takeover-ad-hptoNativeOriginal-header { 149 | font-weight: 700 !important; 150 | } 151 | 152 | /* Friends names */ 153 | .main-buddyFeed-username a { 154 | color: var(--spice-text) !important; 155 | font-size: 17px; 156 | font-weight: 500; 157 | } 158 | 159 | /* Friends songs and artists */ 160 | .main-buddyFeed-artistAndTrackName a, 161 | .main-buddyFeed-playbackContextLink span { 162 | font-size: 13px; 163 | } 164 | 165 | /* Cover height */ 166 | .main-coverSlotExpanded-container { 167 | height: var(--nav-bar-width) + 8px; 168 | } 169 | 170 | /* Scrollbars */ 171 | .os-scrollbar-handle { 172 | background: var(--spice-button) !important; 173 | border-radius: 8px; 174 | } 175 | 176 | /* Making index column wider so that lighter background that 177 | highlights selected song contains multi-digit song numbers */ 178 | /* It looks good up to 4 digits, I figured that no one has playlists with more music than that ;) */ 179 | .main-trackList-trackList.main-trackList-indexable .main-trackList-trackListRowGrid { 180 | grid-template-columns: [index] 48px [first] 6fr [var1] 4fr [var2] 3fr [last] minmax(120px, 1fr) !important; 181 | } 182 | 183 | /* Text boxes in settings */ 184 | .main-dropDown-dropDown { 185 | background-color: var(--spice-button-disabled); 186 | } 187 | 188 | /* Facebook button */ 189 | .x-settings-facebookButton { 190 | background-color: unset !important; 191 | } 192 | 193 | /* Playlist play button color */ 194 | .encore-dark-theme .encore-bright-accent-set, 195 | .encore-dark-theme .encore-bright-accent-set:hover { 196 | --background-base: var(--spice-button-active); 197 | --background-highlight: var(--spice-player); 198 | --background-press: var(--spice-player); 199 | } 200 | 201 | /* Volume bar margins */ 202 | .volume-bar .progress-bar { 203 | margin: 0 0.4rem; 204 | } 205 | 206 | .volume-bar .playback-progressbar { 207 | width: 70%; 208 | } 209 | 210 | 211 | .volume-bar { 212 | flex: 0 150px; 213 | } 214 | 215 | /* Menu hidden under the button with account name - font size and family unification */ 216 | .ellipsis-one-line { 217 | font-family: Montserrat; 218 | } 219 | 220 | .ellipsis-one-line.main-type-mesto { 221 | font-size: 14px; 222 | } 223 | 224 | /* Removal of empty space above playlist cover and title on narrow viewports */ 225 | .main-entityHeader-container.main-entityHeader-nonWrapped { 226 | min-height: 325px; 227 | height: 15vh; 228 | } 229 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | We as members, contributors, and leaders pledge to make participation in our 6 | community a harassment-free experience for everyone, regardless of age, body 7 | size, visible or invisible disability, ethnicity, sex characteristics, gender 8 | identity and expression, level of experience, education, socio-economic status, 9 | nationality, personal appearance, race, caste, color, religion, or sexual 10 | identity and orientation. 11 | 12 | We pledge to act and interact in ways that contribute to an open, welcoming, 13 | diverse, inclusive, and healthy community. 14 | 15 | ## Our Standards 16 | 17 | Examples of behavior that contributes to a positive environment for our 18 | community include: 19 | 20 | * Demonstrating empathy and kindness toward other people 21 | * Being respectful of differing opinions, viewpoints, and experiences 22 | * Giving and gracefully accepting constructive feedback 23 | * Accepting responsibility and apologizing to those affected by our mistakes, 24 | and learning from the experience 25 | * Focusing on what is best not just for us as individuals, but for the overall 26 | community 27 | 28 | Examples of unacceptable behavior include: 29 | 30 | * The use of sexualized language or imagery, and sexual attention or advances of 31 | any kind 32 | * Trolling, insulting or derogatory comments, and personal or political attacks 33 | * Public or private harassment 34 | * Publishing others' private information, such as a physical or email address, 35 | without their explicit permission 36 | * Other conduct which could reasonably be considered inappropriate in a 37 | professional setting 38 | 39 | ## Enforcement Responsibilities 40 | 41 | Community leaders are responsible for clarifying and enforcing our standards of 42 | acceptable behavior and will take appropriate and fair corrective action in 43 | response to any behavior that they deem inappropriate, threatening, offensive, 44 | or harmful. 45 | 46 | Community leaders have the right and responsibility to remove, edit, or reject 47 | comments, commits, code, wiki edits, issues, and other contributions that are 48 | not aligned to this Code of Conduct, and will communicate reasons for moderation 49 | decisions when appropriate. 50 | 51 | ## Scope 52 | 53 | This Code of Conduct applies within all community spaces, and also applies when 54 | an individual is officially representing the community in public spaces. 55 | Examples of representing our community include using an official e-mail address, 56 | posting via an official social media account, or acting as an appointed 57 | representative at an online or offline event. 58 | 59 | ## Enforcement 60 | 61 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 62 | reported to the community leaders responsible for enforcement at 63 | [INSERT CONTACT METHOD]. 64 | All complaints will be reviewed and investigated promptly and fairly. 65 | 66 | All community leaders are obligated to respect the privacy and security of the 67 | reporter of any incident. 68 | 69 | ## Enforcement Guidelines 70 | 71 | Community leaders will follow these Community Impact Guidelines in determining 72 | the consequences for any action they deem in violation of this Code of Conduct: 73 | 74 | ### 1. Correction 75 | 76 | **Community Impact**: Use of inappropriate language or other behavior deemed 77 | unprofessional or unwelcome in the community. 78 | 79 | **Consequence**: A private, written warning from community leaders, providing 80 | clarity around the nature of the violation and an explanation of why the 81 | behavior was inappropriate. A public apology may be requested. 82 | 83 | ### 2. Warning 84 | 85 | **Community Impact**: A violation through a single incident or series of 86 | actions. 87 | 88 | **Consequence**: A warning with consequences for continued behavior. No 89 | interaction with the people involved, including unsolicited interaction with 90 | those enforcing the Code of Conduct, for a specified period of time. This 91 | includes avoiding interactions in community spaces as well as external channels 92 | like social media. Violating these terms may lead to a temporary or permanent 93 | ban. 94 | 95 | ### 3. Temporary Ban 96 | 97 | **Community Impact**: A serious violation of community standards, including 98 | sustained inappropriate behavior. 99 | 100 | **Consequence**: A temporary ban from any sort of interaction or public 101 | communication with the community for a specified period of time. No public or 102 | private interaction with the people involved, including unsolicited interaction 103 | with those enforcing the Code of Conduct, is allowed during this period. 104 | Violating these terms may lead to a permanent ban. 105 | 106 | ### 4. Permanent Ban 107 | 108 | **Community Impact**: Demonstrating a pattern of violation of community 109 | standards, including sustained inappropriate behavior, harassment of an 110 | individual, or aggression toward or disparagement of classes of individuals. 111 | 112 | **Consequence**: A permanent ban from any sort of public interaction within the 113 | community. 114 | 115 | ## Attribution 116 | 117 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], 118 | version 2.1, available at 119 | [https://www.contributor-covenant.org/version/2/1/code_of_conduct.html][v2.1]. 120 | 121 | Community Impact Guidelines were inspired by 122 | [Mozilla's code of conduct enforcement ladder][Mozilla CoC]. 123 | 124 | For answers to common questions about this code of conduct, see the FAQ at 125 | [https://www.contributor-covenant.org/faq][FAQ]. Translations are available at 126 | [https://www.contributor-covenant.org/translations][translations]. 127 | 128 | [homepage]: https://www.contributor-covenant.org 129 | [v2.1]: https://www.contributor-covenant.org/version/2/1/code_of_conduct.html 130 | [Mozilla CoC]: https://github.com/mozilla/diversity 131 | [FAQ]: https://www.contributor-covenant.org/faq 132 | [translations]: https://www.contributor-covenant.org/translations 133 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing guidelines 2 | 3 | Here are the guidelines for contributing to this repository. 4 | 5 | ## Before contributing 6 | 7 | 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. 8 | 9 | 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. 10 | 11 | ## How to contribute 12 | 13 | If you want to add your theme: 14 | 15 | * Fork this repository 16 | * Create another folder named after your theme name 17 | * Create `color.ini` and `user.css` files 18 | * Create a `README.md` in it with the following structure 19 | 20 | ```markdown 21 | # THEME_NAME 22 | 23 | ## Screenshots 24 | 25 | [Put at least one image per color scheme here] 26 | 27 | ## More 28 | 29 | [Specify any needed font; (optionally) author name and/or any other info about the theme] 30 | ``` 31 | * Add the theme preview to [THEMES.md](./THEMES.md) (themes are in alphabetical order) following this structure if it has only one color scheme 32 | 33 | ```markdown 34 | 35 | ## THEME_NAME 36 | 37 | [A single image of the theme] 38 | ``` 39 | 40 | If, instead, more than one color scheme is present 41 | 42 | ```markdown 43 | ## THEME_NAME 44 | 45 | #### COLOR_SCHEME1_NAME 46 | 47 | [A single image of the theme using the color scheme] 48 | 49 | #### COLOR_SCHEME2_NAME 50 | 51 | [A single image of the theme using the color scheme] 52 | 53 | ... 54 | ``` 55 | * Commit only once, more details in the **Commit Message** 56 | * Open a Pull Request and mention the most important changes you've made to the UI (ignoring the color scheme) 57 | 58 | **Thanks to all the contributors.** 59 | 60 | ## Commit Message 61 | 62 | **NOTE: commit only once when you add a new theme or scheme (you can also commit again later, if you need to).** 63 | 64 | ### Format 65 | 66 | (): 67 | 68 | [optional] 69 | 70 | **Any line of the commit message cannot be longer than 100 characters!** 71 | 72 | * **type:** feat | fix | docs | chore 73 | * **feat:** A new theme | A new scheme | A new feature 74 | * **fix:** A bug fix 75 | * **docs:** Change the `README.md` of the theme | Change the `THEMES.md` 76 | * **chore:** Add more screenshots | Change the screentshots | Other things 77 | * **scope:** THEMES | `` 78 | * THEMES is a fixed format: `docs(THEMES)` 79 | * In other cases, use the theme name 80 | * **subject:** What changes you have done 81 | * Use the imperative, present tense: "change" not "changed" nor "changes" 82 | * Don't capitalize first letter 83 | * No dot (.) at the end 84 | * **body**: More details of your changes, you can mention the most important changes here 85 | 86 | ### Example (Turntable theme) 87 | 88 | * feat 89 | 90 | ``` 91 | feat(Turntable): add Turntable theme 92 | ``` 93 | 94 | 95 | ``` 96 | feat(Turntable): control the rotation of the turntable 97 | 98 | Rotate the turntable by playing state. 99 | ``` 100 | * fix 101 | 102 | ``` 103 | fix(Turntable): show the cursor outside the context menu 104 | ``` 105 | * docs 106 | 107 | ``` 108 | docs(Turntable): update README.md 109 | ``` 110 | 111 | ``` 112 | docs(THEMES): add preview for the Turntable 113 | ``` 114 | * chore 115 | 116 | ``` 117 | chore(Turntable): add screenshots of the Turntable 118 | ``` 119 | 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). 120 | -------------------------------------------------------------------------------- /Default/README.md: -------------------------------------------------------------------------------- 1 | # Default 2 | 3 | Default look of Spotify with different color schemes. 4 | 5 | ## Screenshot 6 | 7 | ![screenshot](./ocean.png) 8 | 9 | ## Info 10 | 11 | ### Ocean 12 | 13 | Part of material ocean themes, [checkout here](https://github.com/material-ocean) for the same theme for different applications. By @Blacksuan19 14 | -------------------------------------------------------------------------------- /Default/color.ini: -------------------------------------------------------------------------------- 1 | [Ocean] 2 | text = FFFFFF 3 | subtext = F1F1F1 4 | main = 0F111A 5 | sidebar = 0F111A 6 | player = 0F111A 7 | card = 00010A 8 | shadow = 0F111A 9 | selected-row = F1F1F1 10 | button = FF4151 11 | button-active = F1F1F1 12 | button-disabled = 434C5E 13 | tab-active = FF4151 14 | notification = 00010A 15 | notification-error = FF4151 16 | misc = 00010A 17 | -------------------------------------------------------------------------------- /Default/ocean.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/Default/ocean.png -------------------------------------------------------------------------------- /Dreary/README.md: -------------------------------------------------------------------------------- 1 | # Dreary 2 | 3 | ## Screenshots 4 | 5 | ### BIB 6 | ![BIB Screenshot](bib.png) 7 | 8 | ### Psycho 9 | ![Psycho Screenshot](psycho.png) 10 | 11 | ### Deeper 12 | ![Deeper Screenshot](deeper.png) 13 | 14 | ### Mono 15 | ![Mono Screenshot](mono.png) 16 | 17 | ### Golden 18 | ![Golden Screenshot](golden.png) 19 | 20 | ### Graytone-Blue 21 | ![Graytone-Blue Screenshot](graytone-blue.png) 22 | 23 | 24 | ## Important 25 | Certain aspects of the theme, such as the borders around playlist names, require Sidebar Config to be enabled. It is not required but recommended. 26 | 27 | You can enable it by running `spicetify config sidebar_config 1`. 28 | 29 | ## More 30 | 31 | A chill theme that keeps things bordered in and organized 32 | 33 | BIB color scheme based on original [BIB-Green](https://github.com/spicetify/spicetify-themes/tree/master/BIB-Green) 34 | 35 | Theme based on Sleek theme: https://github.com/spicetify/spicetify-themes/tree/v2/Sleek 36 | 37 | -------------------------------------------------------------------------------- /Dreary/bib.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/Dreary/bib.png -------------------------------------------------------------------------------- /Dreary/color.ini: -------------------------------------------------------------------------------- 1 | [Psycho] 2 | ; Red on dark grey background 3 | text = e00000 4 | subtext = ffffff 5 | button-text = ffffff 6 | main = 101010 7 | sidebar = 171717 8 | player = 171717 9 | subbutton-text = 101010 10 | card = 171717 11 | shadow = 6d1414 12 | selected-row = 330d0d 13 | sub-button = a20606 14 | button = e00000 15 | button-active = e00000 16 | button-disabled = 404040 17 | tab-active = 171717 18 | notification = 5e0000 19 | notification-error = 5e0000 20 | playback-bar = ff4700 21 | misc = adadad 22 | 23 | [Deeper] 24 | ; Light blue on Dark Background 25 | text = 4f9a87 26 | subtext = 406560 27 | button-text = 4f9a87 28 | main = 040614 29 | sidebar = 0F111A 30 | player = 0F111A 31 | subbutton-text = 040614 32 | card = 0f1118 33 | shadow = 406560 34 | selected-row = 040614 35 | sub-button = 4f9a87 36 | button = 0d3a2e 37 | button-active = 106165 38 | button-disabled = 0C1C19 39 | tab-active = 0a1527 40 | notification = 051024 41 | notification-error = 051024 42 | playback-bar = 4f9a87 43 | misc = 406560 44 | 45 | [BIB] 46 | ; Green on dark grey background 47 | text = 8bc34a 48 | subtext = b4b4b4 49 | button-text = 202020 50 | main = 202020 51 | sidebar = 202020 52 | player = 242424 53 | subbutton-text = 202020 54 | card = 242424 55 | shadow = 000000 56 | selected-row = 2a3c17 57 | sub-button = 6a913d 58 | button = 537b25 59 | button-active = 98da4b 60 | button-disabled = 353535 61 | tab-active = 303030 62 | notification = 242424 63 | notification-error = 242424 64 | playback-bar = 8bc34a 65 | misc = 8bc34a 66 | 67 | [Mono] 68 | ;Grays, Blacks, Whites, You get the gist. 69 | text = FFFFFF 70 | subtext = d3d3d3 71 | button-text = FFFFFF 72 | main = 000000 73 | sidebar = 5d5e60 74 | subbutton-text = d3d3d3 75 | player = 181818 76 | card = 5d5e60 77 | selected-row = 2D2A32 78 | shadow = FFFFFF 79 | sub-button = d3d3d3 80 | button = d3d3d3 81 | button-active = d3d3d3 82 | button-disabled = 181818 83 | tab-active = d3d3d3 84 | notification = 181818 85 | notification-error = b5cbb7 86 | playback-bar = d3d3d3 87 | misc = d3d3d3 88 | 89 | [Golden] 90 | ;Gold 91 | text = FFE002 92 | subtext = B28228 93 | button-text = FFE002 94 | main = 1C1C1C 95 | sidebar = 3B3B3B 96 | subbutton-text = 3B3B3B 97 | player = 1C1C1C 98 | card = 3B3B3B 99 | selected-row = 1c1c1c 100 | shadow = FFE002 101 | sub-button = B28228 102 | button = B28228 103 | button-active = B28228 104 | button-disabled = FFB606 105 | tab-active = B28228 106 | notification = FFB606 107 | notification-error = b5cbb7 108 | playback-bar = B28228 109 | misc = B28228 110 | 111 | 112 | [Graytone-Blue] 113 | ; Gray colors with blue highlights 114 | text = 4f9a87 115 | subtext = 406560 116 | button-text = 4f9a87 117 | main = 111115 118 | sidebar = 1e2027 119 | subbutton-text = 040614 120 | player = 1a1b1d 121 | card = 0f1118 122 | selected-row = 040614 123 | shadow = 406560 124 | sub-button = 4f9a87 125 | button = 0d3a2e 126 | button-active = 106165 127 | button-disabled = 0C1C19 128 | tab-active = 0a1527 129 | notification = 051024 130 | notification-error = 051024 131 | playback-bar = 4f9a87 132 | misc = 406560 133 | 134 | ; Description 135 | 136 | ; text = main text, playlist names in main field, name of playlist selected in sidebar, headings 137 | ; subtext = text in main buttons in sidebar, playlist names in sidebar, artist names, and mini infos 138 | ; button-text = text in main buttons in sidebar when active 139 | ; main = main field or main bg 140 | ; sidebar = sidebar bg 141 | ; subbutton-text = text of buttons that use the text color or subtext color as a background 142 | ; player = player bg 143 | ; card = card bg 144 | ; shadow = bg of buttons like account, pop-up lyrics, full app display in main field 145 | ; selected-row = color of the song selected 146 | ; sub-button = caption and details of playlist, download and options button 147 | ; button = playlist buttons bg in sidebar, drop-down menus, now playing song, like button 148 | ; button-active = hover on song selected 149 | ; button-disabled = seekbar bg, volume bar bg, scrollbar 150 | ; tab-active = button bg in main field (playlists, podcasts, artists, albums) 151 | ; notification = notification ('Added to liked songs' etc.) 152 | ; notification-error = error 153 | ; playback-bar = seekbar fg, main play/pause button bg 154 | ; misc = miscellaneous 155 | -------------------------------------------------------------------------------- /Dreary/deeper.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/Dreary/deeper.png -------------------------------------------------------------------------------- /Dreary/golden.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/Dreary/golden.png -------------------------------------------------------------------------------- /Dreary/graytone-blue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/Dreary/graytone-blue.png -------------------------------------------------------------------------------- /Dreary/mono.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/Dreary/mono.png -------------------------------------------------------------------------------- /Dreary/psycho.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/Dreary/psycho.png -------------------------------------------------------------------------------- /Dribbblish/README.md: -------------------------------------------------------------------------------- 1 | # Dribbblish 2 | 3 | ### Base 4 | ![base](base.png) 5 | ### White 6 | ![white](white.png) 7 | ### Dark 8 | ![dark](dark.png) 9 | ### Nord-Light 10 | ![nord-light](nord-light.png) 11 | ### Nord-Dark 12 | ![nord-dark](nord-dark.png) 13 | ### Beach-Sunset 14 | ![beach-sunset](beach-sunset.png) 15 | ### Purple 16 | ![purple](purple.png) 17 | ### Samurai 18 | ![samurai](samurai.png) 19 | ### Gruvbox 20 | ![gruvbox](gruvbox.png) 21 | ### Gruvbox Material Dark 22 | ![gruvbox-material-dark](gruvbox-material-dark.png) 23 | ### Rosé Pine 24 | ![rosepine](rosepine.png) 25 | ### Lunar 26 | ![lunar](lunar.png) 27 | ### Catppuccin Latte 28 | ![catppuccin-latte](catppuccin-latte.png) 29 | ### Catppuccin Frappe 30 | ![catppuccin-frappe](catppuccin-frappe.png) 31 | ### Catppuccin Macchiato 32 | ![catppuccin-macchiato](catppuccin-macchiato.png) 33 | ### Catppuccin Mocha 34 | ![catppuccin-mocha](catppuccin-mocha.png) 35 | 36 | ## Features 37 | ### Resizable sidebar 38 | 39 | img 40 | 41 | ### Customizable sidebar 42 | Rearrange icons positions, stick icons to header or hide unnecessary to save space. 43 | Turn on "Sidebar config" mode in Profile menu and hover on icon to show control buttons. 44 | After you finish customizing, turn off Config mode in Profile menu to save. 45 | 46 | img 47 | 48 | ### Playlist Folder image 49 | 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. 50 | 51 | img 52 | 53 | ### Left/Right expanded cover 54 | In profile menu, toggle option "Right expanded cover" to change expaned current track cover image to left or right side, whereever you prefer. 55 | 56 | ## Auto-install 57 | Make sure you are using spicetify >= v2.5.0 and Spotify >= v1.1.56. 58 | ### Windows 59 | ```powershell 60 | Invoke-WebRequest -UseBasicParsing "https://raw.githubusercontent.com/spicetify/spicetify-themes/master/Dribbblish/install.ps1" | Invoke-Expression 61 | ``` 62 | 63 | ## Manual Install 64 | Run these commands: 65 | 66 | ### Linux and MacOS: 67 | In **Bash**: 68 | ```bash 69 | cd "$(dirname "$(spicetify -c)")/Themes/Dribbblish" 70 | spicetify config current_theme Dribbblish color_scheme base 71 | spicetify config inject_css 1 replace_colors 1 overwrite_assets 1 inject_theme_js 1 72 | spicetify apply 73 | ``` 74 | 75 | ### Windows 76 | In **Powershell**: 77 | ```powershell 78 | cd "$(spicetify -c | Split-Path)\Themes\Dribbblish" 79 | spicetify config current_theme Dribbblish color_scheme base 80 | spicetify config inject_css 1 replace_colors 1 overwrite_assets 1 inject_theme_js 1 81 | spicetify apply 82 | ``` 83 | 84 | 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: 85 | ```ini 86 | [Patch] 87 | xpui.js_find_8008 = ,(\w+=)32, 88 | xpui.js_repl_8008 = ,${1}56, 89 | ``` 90 | 91 | ## Change Color Schemes 92 | There are 9 color schemes you can choose: `base`, `white`, `dark`, `dracula`, `nord-dark`, `nord-light`, `beach-sunset`, `samurai`, `purple`, `gruvbox`, `gruvbox-material-dark`, `catppuccin-latte`, `catppuccin-frappe`, `catppuccin-macchiato`, and `catppuccin-mocha`. Change scheme with commands: 93 | ``` 94 | spicetify config color_scheme 95 | spicetify apply 96 | ``` 97 | 98 | ## Auto-uninstall 99 | ### Windows 100 | ```powershell 101 | Invoke-WebRequest -UseBasicParsing "https://raw.githubusercontent.com/spicetify/spicetify-themes/v2/Dribbblish/uninstall.ps1" | Invoke-Expression 102 | ``` 103 | 104 | ## Manual uninstall 105 | Remove the dribbblish theme with the following commands 106 | 107 | ``` 108 | spicetify config current_theme " " color_scheme " " 109 | spicetify apply 110 | ``` 111 | -------------------------------------------------------------------------------- /Dribbblish/assets/glue-resources/fonts/GoogleSansDisplayMedium.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/Dribbblish/assets/glue-resources/fonts/GoogleSansDisplayMedium.woff2 -------------------------------------------------------------------------------- /Dribbblish/assets/glue-resources/fonts/GoogleSansDisplayRegular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/Dribbblish/assets/glue-resources/fonts/GoogleSansDisplayRegular.woff2 -------------------------------------------------------------------------------- /Dribbblish/assets/glue-resources/fonts/Roboto.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/Dribbblish/assets/glue-resources/fonts/Roboto.woff2 -------------------------------------------------------------------------------- /Dribbblish/assets/glue-resources/fonts/RobotoMedium.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/Dribbblish/assets/glue-resources/fonts/RobotoMedium.woff2 -------------------------------------------------------------------------------- /Dribbblish/base.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/Dribbblish/base.png -------------------------------------------------------------------------------- /Dribbblish/beach-sunset.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/Dribbblish/beach-sunset.png -------------------------------------------------------------------------------- /Dribbblish/catppuccin-frappe.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/Dribbblish/catppuccin-frappe.png -------------------------------------------------------------------------------- /Dribbblish/catppuccin-latte.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/Dribbblish/catppuccin-latte.png -------------------------------------------------------------------------------- /Dribbblish/catppuccin-macchiato.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/Dribbblish/catppuccin-macchiato.png -------------------------------------------------------------------------------- /Dribbblish/catppuccin-mocha.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/Dribbblish/catppuccin-mocha.png -------------------------------------------------------------------------------- /Dribbblish/color.ini: -------------------------------------------------------------------------------- 1 | [base] 2 | text = FFFFFF 3 | subtext = F0F0F0 4 | sidebar-text = FFFFFF 5 | main = 000000 6 | sidebar = 24b558 7 | player = 000000 8 | card = 000000 9 | shadow = 202020 10 | selected-row = 797979 11 | button = 24b558 12 | button-active = 24b558 13 | button-disabled = 535353 14 | tab-active = 166632 15 | notification = 1db954 16 | notification-error = e22134 17 | misc = BFBFBF 18 | 19 | 20 | [white] 21 | text = 363636 22 | subtext = 3D3D3D 23 | sidebar-text = FFF9F4 24 | main = FFF9F4 25 | sidebar = FFA789 26 | player = FFF9F4 27 | card = FFF9F4 28 | shadow = d3d3d3 29 | selected-row = 6D6D6D 30 | button = ff8367 31 | button-active = ff8367 32 | button-disabled = 535353 33 | tab-active = ffdace 34 | notification = FFA789 35 | notification-error = e22134 36 | misc = BFBFBF 37 | 38 | [dark] 39 | text = F0F0F0 40 | subtext = F0F0F0 41 | sidebar-text = 0a0e14 42 | main = 0a0e14 43 | sidebar = C2D935 44 | player = 0a0e14 45 | card = 0a0e14 46 | shadow = 202020 47 | selected-row = DEDEDE 48 | button = C2D935 49 | button-active = C2D935 50 | button-disabled = 535353 51 | tab-active = 727d2b 52 | notification = C2D935 53 | notification-error = e22134 54 | misc = BFBFBF 55 | 56 | [dracula] 57 | text = f8f8f2 58 | subtext = f8f8f2 59 | sidebar-text = F0F0F0 60 | main = 44475a 61 | sidebar = 6272a4 62 | player = 44475a 63 | card = 6272a4 64 | shadow = 000000 65 | selected-row = bd93f9 66 | button = ffb86c 67 | button-active = 8be9fd 68 | button-disabled = 535353 69 | tab-active = 6272a4 70 | notification = bd93f9 71 | notification-error = e22134 72 | misc = BFBFBF 73 | 74 | [nord-light] 75 | text = 2e3440 76 | subtext = 3b4252 77 | sidebar-text = ECEFF4 78 | main = ECEFF4 79 | sidebar = 5E81AC 80 | player = ECEFF4 81 | card = ebcb8b 82 | shadow = eceff4 83 | selected-row = 4c566a 84 | button = 81a1c1 85 | button-active = 81a1c1 86 | button-disabled = c0c0c0 87 | tab-active = ebcb8b 88 | notification = a3be8c 89 | notification-error = bf616a 90 | misc = BFBFBF 91 | 92 | [nord-dark] 93 | text = ECEFF4 94 | subtext = E5E9F0 95 | sidebar-text = 434c5e 96 | main = 2e3440 97 | sidebar = 88C0D0 98 | player = 2e3440 99 | card = 2e3440 100 | shadow = 2E3440 101 | selected-row = D8DEE9 102 | button = 81A1C1 103 | button-active = 81A1C1 104 | button-disabled = 434C5E 105 | tab-active = 434C5E 106 | notification = A3BE8C 107 | notification-error = BF616A 108 | misc = BFBFBF 109 | 110 | [purple] 111 | text = f1eaff 112 | subtext = f1eaff 113 | sidebar-text = e0d0ff 114 | main = 0A0E14 115 | sidebar = 6F3C89 116 | player = 0A0E14 117 | card = 0A0E14 118 | shadow = 3a2645 119 | selected-row = 645275 120 | button = c76af6 121 | button-active = 6F3C89 122 | button-disabled = 535353 123 | tab-active = 58306D 124 | notification = ff9e00 125 | notification-error = f61379 126 | misc = DEDEDE 127 | 128 | [samurai] 129 | text = ebdbb2 130 | subtext = ebdbb2 131 | sidebar-text = 461217 132 | main = 461217 133 | sidebar = ebdbb2 134 | player = 461217 135 | card = 461217 136 | shadow = 000000 137 | selected-row = 909090 138 | button = e7a52d 139 | button-active = e7a52d 140 | button-disabled = 535353 141 | tab-active = e7a52d 142 | notification = e7a52d 143 | notification-error = e22134 144 | misc = BFBFBF 145 | 146 | [beach-sunset] 147 | text = FFFFFF 148 | subtext = F0F0F0 149 | sidebar-text = F0F0F0 150 | main = 262626 151 | sidebar = bd3e3e 152 | player = 262626 153 | card = 262626 154 | shadow = 000000 155 | selected-row = d1d6e2 156 | button = f1a84f 157 | button-active = c98430 158 | button-disabled = 535353 159 | tab-active = f1a84f 160 | notification = c98430 161 | notification-error = e22134 162 | misc = BFBFBF 163 | 164 | [gruvbox] 165 | text = fbf1c7 166 | subtext = d5c4a1 167 | sidebar-text = ebe1b7 168 | main = 292828 169 | sidebar = 689d6a 170 | player = 292828 171 | card = 3c3836 172 | shadow = 202020 173 | selected-row = d5c4a1 174 | button = fb4934 175 | button-active = cc241d 176 | button-disabled = bdae93 177 | tab-active = fb4934 178 | notification = 8ec07c 179 | notification-error = d79921 180 | misc = BFBFBF 181 | 182 | [gruvbox-material-dark] 183 | text = fbf1c7 184 | subtext = d5c4a1 185 | sidebar-text = 716e5f 186 | main = 292828 187 | sidebar = 1d2021 188 | player = 292828 189 | card = 3c3836 190 | shadow = 202020 191 | selected-row = d5c4a1 192 | button = a9b665 193 | button-active = a9b665 194 | button-disabled = bdae93 195 | tab-active = a9b665 196 | notification = 8ec07c 197 | notification-error = d79921 198 | misc = BFBFBF 199 | 200 | [rosepine] 201 | text = ebbcba 202 | subtext = F0F0F0 203 | sidebar-text = e0def4 204 | main = 191724 205 | sidebar = 2a2837 206 | player = 191724 207 | card = 191724 208 | shadow = 1f1d2e 209 | selected-row = 797979 210 | button = 31748f 211 | button-active = 31748f 212 | button-disabled = 555169 213 | tab-active = 31748f 214 | notification = 1db954 215 | notification-error = eb6f92 216 | misc = 6e6a86 217 | 218 | [lunar] 219 | text = f3f3f3 220 | subtext = cecece 221 | sidebar-text = f3f3f3 222 | main = 161616 223 | sidebar = 202020 224 | player = 161616 225 | card = 161616 226 | shadow = 252525 227 | selected-row = 202020 228 | button = 3281ea 229 | button-active = 0284e8 230 | button-disabled = 303030 231 | tab-active = ebbcba 232 | notification = 3281ea 233 | notification-error = b10c0c 234 | misc = 252525 235 | 236 | ; Comments below correspond to the labeling of the colors on the Catppuccin GitHub page. 237 | 238 | [catppuccin-latte] 239 | text = 4c4f69 ; Text 240 | subtext = 5c5f77 ; Subtext1 241 | sidebar-text = 4c4f69 ; Text 242 | main = eff1f5 ; Base 243 | sidebar = e6e9ef ; Mantle 244 | player = eff1f5 ; Base 245 | card = eff1f5 ; Base 246 | shadow = e6e9ef ; Mantle 247 | selected-row = 7c7f93 ; Overlay2 248 | button = 8c8fa1 ; Overlay1 249 | button-active = 7c7f93 ; Overlay2 250 | button-disabled = 9ca0b0 ; Overlay0 251 | tab-active = ccd0da ; Surface0 252 | notification = ccd0da ; Surface0 253 | notification-error = d20f39 ; Red 254 | misc = bcc0cc ; Surface1 255 | 256 | [catppuccin-frappe] 257 | text = c6d0f5 ; Text 258 | subtext = b5bfe2 ; Subtext1 259 | sidebar-text = c6d0f5 ; Text 260 | main = 303446 ; Base 261 | sidebar = 292c3c ; Mantle 262 | player = 303446 ; Base 263 | card = 303446 ; Base 264 | shadow = 292c3c ; Mantle 265 | selected-row = 949cbb ; Overlay2 266 | button = 838ba7 ; Overlay1 267 | button-active = 949cbb ; Overlay2 268 | button-disabled = 737994 ; Overlay0 269 | tab-active = 414559 ; Surface0 270 | notification = 414559 ; Surface0 271 | notification-error = e78284 ; Red 272 | misc = 51576d ; Surface1 273 | 274 | [catppuccin-macchiato] 275 | text = cad3f5 ; Text 276 | subtext = b8c0e0 ; Subtext1 277 | sidebar-text = cad3f5 ; Text 278 | main = 24273a ; Base 279 | sidebar = 1e2030 ; Mantle 280 | player = 24273a ; Base 281 | card = 24273a ; Base 282 | shadow = 1e2030 ; Mantle 283 | selected-row = 939ab7 ; Overlay2 284 | button = 8087a2 ; Overlay1 285 | button-active = 939ab7 ; Overlay2 286 | button-disabled = 6e738d ; Overlay0 287 | tab-active = 363a4f ; Surface0 288 | notification = 363a4f ; Surface0 289 | notification-error = ed8796 ; Red 290 | misc = 494d64 ; Surface1 291 | 292 | [catppuccin-mocha] 293 | text = cdd6f4 ; Text 294 | subtext = bac2de ; Subtext1 295 | sidebar-text = cdd6f4 ; Text 296 | main = 1e1e2e ; Base 297 | sidebar = 181825 ; Mantle 298 | player = 1e1e2e ; Base 299 | card = 1e1e2e ; Base 300 | shadow = 181825 ; Mantle 301 | selected-row = 9399b2 ; Overlay2 302 | button = 7f849c ; Overlay1 303 | button-active = 9399b2 ; Overlay2 304 | button-disabled = 6c7086 ; Overlay0 305 | tab-active = 313244 ; Surface0 306 | notification = 313244 ; Surface0 307 | notification-error = f38ba8 ; Red 308 | misc = 45475a ; Surface1 309 | -------------------------------------------------------------------------------- /Dribbblish/dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/Dribbblish/dark.png -------------------------------------------------------------------------------- /Dribbblish/gruvbox-material-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/Dribbblish/gruvbox-material-dark.png -------------------------------------------------------------------------------- /Dribbblish/gruvbox.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/Dribbblish/gruvbox.png -------------------------------------------------------------------------------- /Dribbblish/images/tracklist-row-song-fallback.svg: -------------------------------------------------------------------------------- 1 | Playlist Icon -------------------------------------------------------------------------------- /Dribbblish/install.ps1: -------------------------------------------------------------------------------- 1 | $checkSpice = Get-Command spicetify -ErrorAction Silent 2 | if ($null -eq $checkSpice) { 3 | Write-Host -ForegroundColor Red "Spicetify not found" 4 | Write-Host "Follow instruction on:", "https://spicetify.app/docs/getting-started/simple-installation#windows" 5 | return 6 | } 7 | 8 | Write-Host "Downloading themes package:" -ForegroundColor Green 9 | $zipFile = "$env:TEMP\spicetify-themes.zip" 10 | Invoke-WebRequest "https://github.com/spicetify/spicetify-themes/archive/refs/heads/master.zip" -OutFile $zipFile 11 | 12 | Write-Host "Extracting themes package:" -ForegroundColor Green 13 | $extractPath = "$env:TEMP\spicetify-themes-master" 14 | if (Test-Path $extractPath) { 15 | Remove-Item $extractPath -Recurse -Force 16 | } 17 | Expand-Archive $zipFile -DestinationPath $env:TEMP 18 | 19 | # Copy to personal Themes folder 20 | $spicePath = spicetify -c | Split-Path 21 | $dribPath = "$extractPath\Dribbblish" 22 | 23 | $destPath = "$spicePath\Themes\Dribbblish" 24 | if (Test-Path $destPath) { 25 | Remove-Item $destPath -Recurse -Force 26 | } 27 | Copy-Item $dribPath $destPath -Recurse 28 | 29 | Write-Host "Configuring:" -ForegroundColor Green 30 | spicetify 31 | spicetify config inject_css 1 replace_colors 1 overwrite_assets 1 inject_theme_js 1 current_theme Dribbblish 32 | 33 | # Add patch 34 | $configFile = Get-Content "$spicePath\config-xpui.ini" 35 | if (-not ($configFile -match "xpui.js_find_8008")) { 36 | $rep = @" 37 | [Patch] 38 | xpui.js_find_8008=,(\w+=)32, 39 | xpui.js_repl_8008=,`${1}56, 40 | "@ 41 | # In case missing Patch section 42 | if (-not ($configFile -match "\[Patch\]")) { 43 | $configFile += "`n[Patch]`n" 44 | } 45 | $configFile = $configFile -replace "\[Patch\]",$rep 46 | Set-Content "$spicePath\config-xpui.ini" $configFile 47 | } 48 | 49 | $backupVer = $configFile -match "^version" 50 | $version = ConvertFrom-StringData $backupVer[0] 51 | if ($version.version.Length -gt 0) { 52 | spicetify apply 53 | } else { 54 | spicetify backup apply 55 | } 56 | -------------------------------------------------------------------------------- /Dribbblish/lunar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/Dribbblish/lunar.png -------------------------------------------------------------------------------- /Dribbblish/nord-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/Dribbblish/nord-dark.png -------------------------------------------------------------------------------- /Dribbblish/nord-light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/Dribbblish/nord-light.png -------------------------------------------------------------------------------- /Dribbblish/purple.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/Dribbblish/purple.png -------------------------------------------------------------------------------- /Dribbblish/rosepine.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/Dribbblish/rosepine.png -------------------------------------------------------------------------------- /Dribbblish/samurai.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/Dribbblish/samurai.png -------------------------------------------------------------------------------- /Dribbblish/theme.js: -------------------------------------------------------------------------------- 1 | function waitForElement(els, func, timeout = 100) { 2 | const queries = els.map(el => document.querySelector(el)); 3 | if (queries.every(a => a)) { 4 | func(queries); 5 | } else if (timeout > 0) { 6 | setTimeout(waitForElement, 300, els, func, --timeout); 7 | } 8 | } 9 | 10 | let DribbblishShared = {}; 11 | 12 | // back shadow 13 | waitForElement([".Root__top-container"], ([topContainer]) => { 14 | const shadow = document.createElement("div"); 15 | shadow.id = "dribbblish-back-shadow"; 16 | topContainer.prepend(shadow); 17 | }); 18 | 19 | // Spicetify.Platform.ConnectAPI.state.connectionStatus; 20 | 21 | // add fade effect on playlist/folder list 22 | waitForElement([".main-navBar-mainNav .os-viewport.os-viewport-native-scrollbars-invisible"], ([scrollNode]) => { 23 | scrollNode.setAttribute("fade", "bottom"); 24 | scrollNode.addEventListener("scroll", () => { 25 | if (scrollNode.scrollTop == 0) { 26 | scrollNode.setAttribute("fade", "bottom"); 27 | } else if (scrollNode.scrollHeight - scrollNode.clientHeight - scrollNode.scrollTop == 0) { 28 | scrollNode.setAttribute("fade", "top"); 29 | } else { 30 | scrollNode.setAttribute("fade", "full"); 31 | } 32 | }); 33 | }); 34 | 35 | // adjust topbar margin with left sidebar width 36 | waitForElement([".Root__nav-bar"], ([resizer]) => { 37 | const observer = new MutationObserver(updateVariable); 38 | observer.observe(resizer, { attributes: true, attributeFilter: ["style"] }); 39 | function updateVariable() { 40 | let style = resizer.style; 41 | let value = style.getPropertyValue("--left-sidebar-width"); 42 | waitForElement([".Root__globalNav"], ([globalNav]) => { 43 | let globalNavStyle = globalNav.style; 44 | globalNavStyle.setProperty("--left-sidebar-width", value); 45 | }); 46 | } 47 | updateVariable(); 48 | }); 49 | 50 | let version; 51 | let ylx; 52 | 53 | (function Dribbblish() { 54 | // dynamic playback time tooltip 55 | const progBar = document.querySelector(".playback-bar"); 56 | const root = document.querySelector(".Root"); 57 | 58 | if (!Spicetify.Player.origin || !progBar || !root) { 59 | setTimeout(Dribbblish, 300); 60 | return; 61 | } 62 | 63 | version = Spicetify.Platform.PlatformData.event_sender_context_information.client_version_int; 64 | 65 | if (version < 121200000) { 66 | document.documentElement.classList.add("legacy"); 67 | legacy(); 68 | } else if (version >= 121200000 && version < 121400000) { 69 | document.documentElement.classList.add("legacy-gridChange"); 70 | legacy(); 71 | } else if (version >= 121400000) { 72 | document.documentElement.classList.add("ylx"); 73 | ylx = true; 74 | } 75 | 76 | const tooltip = document.createElement("div"); 77 | tooltip.className = "prog-tooltip"; 78 | progBar.append(tooltip); 79 | 80 | function updateProgTime({ data: e }) { 81 | const maxWidth = progBar.offsetWidth; 82 | const curWidth = Spicetify.Player.getProgressPercent() * maxWidth; 83 | const ttWidth = tooltip.offsetWidth / 2; 84 | if (curWidth < ttWidth + 12) { 85 | tooltip.style.left = "12px"; 86 | } else if (curWidth > maxWidth - ttWidth - 12) { 87 | tooltip.style.left = String(maxWidth - ttWidth * 2 - 12) + "px"; 88 | } else { 89 | tooltip.style.left = String(curWidth - ttWidth) + "px"; 90 | } 91 | tooltip.innerText = Spicetify.Player.formatTime(e) + " / " + Spicetify.Player.formatTime(Spicetify.Player.getDuration()); 92 | } 93 | Spicetify.Player.addEventListener("onprogress", updateProgTime); 94 | updateProgTime({ data: Spicetify.Player.getProgress() }); 95 | 96 | // filepicker for custom folder images 97 | const filePickerForm = document.createElement("form"); 98 | filePickerForm.setAttribute("aria-hidden", true); 99 | filePickerForm.innerHTML = ''; 100 | /** @type {HTMLInputElement} */ 101 | const filePickerInput = filePickerForm.childNodes[0]; 102 | filePickerInput.accept = ["image/jpeg", "image/apng", "image/avif", "image/gif", "image/png", "image/svg+xml", "image/webp"].join(","); 103 | 104 | filePickerInput.onchange = () => { 105 | if (!filePickerInput.files.length) return; 106 | 107 | const file = filePickerInput.files[0]; 108 | const reader = new FileReader(); 109 | reader.onload = event => { 110 | const result = event.target.result; 111 | const id = Spicetify.URI.from(filePickerInput.uri).id; 112 | try { 113 | localStorage.setItem("dribbblish:folder-image:" + id, result); 114 | } catch { 115 | Spicetify.showNotification("File too large"); 116 | } 117 | DribbblishShared.loadPlaylistImage?.call(); 118 | }; 119 | reader.readAsDataURL(file); 120 | }; 121 | 122 | // context menu items for custom folder images 123 | new Spicetify.ContextMenu.Item( 124 | "Remove folder image", 125 | ([uri]) => { 126 | const id = Spicetify.URI.from(uri).id; 127 | localStorage.removeItem("dribbblish:folder-image:" + id); 128 | DribbblishShared.loadPlaylistImage?.call(); 129 | }, 130 | ([uri]) => Spicetify.URI.isFolder(uri) && !ylx, 131 | "x" 132 | ).register(); 133 | new Spicetify.ContextMenu.Item( 134 | "Choose folder image", 135 | ([uri]) => { 136 | filePickerInput.uri = uri; 137 | filePickerForm.reset(); 138 | filePickerInput.click(); 139 | }, 140 | ([uri]) => Spicetify.URI.isFolder(uri) && !ylx, 141 | "edit" 142 | ).register(); 143 | })(); 144 | 145 | // LEGACY NAVBAR ONLY 146 | function legacy() { 147 | if (!Spicetify.Platform) { 148 | setTimeout(legacy, 300); 149 | return; 150 | } 151 | 152 | // allow resizing of the navbar 153 | waitForElement([".Root__nav-bar .LayoutResizer__input"], ([resizer]) => { 154 | const observer = new MutationObserver(updateVariable); 155 | observer.observe(resizer, { attributes: true, attributeFilter: ["value"] }); 156 | function updateVariable() { 157 | let value = resizer.value; 158 | if (value < 121) { 159 | value = 72; 160 | document.documentElement.classList.add("left-sidebar-collapsed"); 161 | } else { 162 | document.documentElement.classList.remove("left-sidebar-collapsed"); 163 | } 164 | document.documentElement.style.setProperty("--nav-bar-width", value + "px"); 165 | } 166 | updateVariable(); 167 | }); 168 | 169 | // allow resizing of the buddy feed 170 | waitForElement([".Root__right-sidebar .LayoutResizer__input"], ([resizer]) => { 171 | const observer = new MutationObserver(updateVariable); 172 | observer.observe(resizer, { attributes: true, attributeFilter: ["value"] }); 173 | function updateVariable() { 174 | let value = resizer.value; 175 | let min_value = version < 121200000 ? 321 : 281; 176 | if (value < min_value) { 177 | value = 72; 178 | document.documentElement.classList.add("buddyFeed-hide-text"); 179 | } else { 180 | document.documentElement.classList.remove("buddyFeed-hide-text"); 181 | } 182 | } 183 | updateVariable(); 184 | }); 185 | 186 | waitForElement([".main-nowPlayingBar-container"], ([nowPlayingBar]) => { 187 | const observer = new MutationObserver(updateVariable); 188 | observer.observe(nowPlayingBar, { childList: true }); 189 | function updateVariable() { 190 | if (nowPlayingBar.childElementCount === 2) { 191 | document.documentElement.classList.add("connected"); 192 | } else { 193 | document.documentElement.classList.remove("connected"); 194 | } 195 | } 196 | updateVariable(); 197 | }); 198 | 199 | // add fade effect on playlist/folder list 200 | waitForElement([".main-navBar-navBar .os-viewport.os-viewport-native-scrollbars-invisible"], ([scrollNode]) => { 201 | scrollNode.setAttribute("fade", "bottom"); 202 | scrollNode.addEventListener("scroll", () => { 203 | if (scrollNode.scrollTop == 0) { 204 | scrollNode.setAttribute("fade", "bottom"); 205 | } else if (scrollNode.scrollHeight - scrollNode.clientHeight - scrollNode.scrollTop == 0) { 206 | scrollNode.setAttribute("fade", "top"); 207 | } else { 208 | scrollNode.setAttribute("fade", "full"); 209 | } 210 | }); 211 | }); 212 | 213 | waitForElement([`ul[tabindex="0"]`, `ul[tabindex="0"] .GlueDropTarget--playlists.GlueDropTarget--folders`], ([root, firstItem]) => { 214 | const listElem = firstItem.parentElement; 215 | root.classList.add("dribs-playlist-list"); 216 | 217 | /** Replace Playlist name with their pictures */ 218 | function loadPlaylistImage() { 219 | for (const item of listElem.children) { 220 | let link = item.querySelector("a"); 221 | if (!link) continue; 222 | 223 | let [_, app, uid] = link.pathname.split("/"); 224 | let uri; 225 | if (app === "playlist") { 226 | uri = `spotify:playlist:${uid}`; 227 | } else if (app === "folder") { 228 | const base64 = localStorage.getItem("dribbblish:folder-image:" + uid); 229 | let img = link.querySelector("img"); 230 | if (!img) { 231 | img = document.createElement("img"); 232 | img.classList.add("playlist-picture"); 233 | link.prepend(img); 234 | } 235 | img.src = base64 || "https://cdn.jsdelivr.net/gh/spicetify/spicetify-themes@master/Dribbblish/images/tracklist-row-song-fallback.svg"; 236 | continue; 237 | } 238 | 239 | Spicetify.CosmosAsync.get(`sp://core-playlist/v1/playlist/${uri}/metadata`, { policy: { picture: true } }).then(res => { 240 | const meta = res.metadata; 241 | let img = link.querySelector("img"); 242 | if (!img) { 243 | img = document.createElement("img"); 244 | img.classList.add("playlist-picture"); 245 | link.prepend(img); 246 | } 247 | img.src = meta.picture || "https://cdn.jsdelivr.net/gh/spicetify/spicetify-themes@master/Dribbblish/images/tracklist-row-song-fallback.svg"; 248 | }); 249 | } 250 | } 251 | 252 | DribbblishShared.loadPlaylistImage = loadPlaylistImage; 253 | loadPlaylistImage(); 254 | 255 | new MutationObserver(loadPlaylistImage).observe(listElem, { childList: true }); 256 | }); 257 | } 258 | -------------------------------------------------------------------------------- /Dribbblish/uninstall.ps1: -------------------------------------------------------------------------------- 1 | spicetify config current_theme " " 2 | 3 | $configPath = spicetify -c 4 | $configFile = Get-Content $configPath 5 | $find = $configFile -match "xpui.js_find_8008" 6 | if ($find) { 7 | $configFile = $configFile -replace [regex]::escape($find),"" 8 | } 9 | $repl = $configFile -match "xpui.js_repl_8008" 10 | if ($repl) { 11 | $configFile = $configFile -replace [regex]::escape($repl),"" 12 | } 13 | Set-Content $configPath $configFile 14 | 15 | spicetify apply 16 | -------------------------------------------------------------------------------- /Dribbblish/white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/Dribbblish/white.png -------------------------------------------------------------------------------- /Dribbblish/windows-shortcut-instruction.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/Dribbblish/windows-shortcut-instruction.png -------------------------------------------------------------------------------- /Flow/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 @Ruixi-Zhang, @yslDevelop, @ian-Liaozy, @alexcasieri30 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /Flow/README.md: -------------------------------------------------------------------------------- 1 | # Flow 2 | 3 | ## Screenshots 4 | 5 | ### Ocean 6 | img 7 | 8 | 9 | ### Pink 10 | img 11 | 12 | 13 | ### Silver 14 | img 15 | 16 | 17 | ### Violet 18 | img 19 | 20 | ## Author 21 | Made by: 22 | * https://github.com/Ruixi-Zhang 23 | * https://github.com/yslDevelop 24 | * https://github.com/ian-Liaozy 25 | * https://github.com/alexcasieri30 26 | -------------------------------------------------------------------------------- /Flow/color.ini: -------------------------------------------------------------------------------- 1 | [Pink] 2 | text = 8f7878 3 | gradientTop = ebaf98 4 | gradientBottom = f5d4b7 5 | main = ffe8d9 6 | subtext = 8f7878 7 | button-active = 8f7878 8 | button = ebaf98 9 | sidebar = f5d4b7 10 | player = ebaf98 11 | card-background = e6cfd7 12 | shadow = d9a28d 13 | notification = f5d4b7 14 | notification-error = f5d4b7 15 | card-hover = ffece4 16 | 17 | [Green] 18 | text = 516847 19 | gradientTop = 9bb78e 20 | gradientBottom = b7cfac 21 | main = e8f2e4 22 | subtext = 797a78 23 | button-active = 516847 24 | button = 7d9971 25 | sidebar = b7cfac 26 | player = 9bb78e 27 | card-background = e8ede6 28 | shadow = 7d9971 29 | notification = b7cfac 30 | notification-error = b7cfac 31 | card-hover = ecf8e8 32 | 33 | [Silver] 34 | text = 4c4d4f 35 | gradientTop = b7bbbd 36 | gradientBottom = d3d8db 37 | main = d3d8db 38 | subtext = 8d9092 39 | button-active = a8acad 40 | button = 8d9092 41 | sidebar = ffffff 42 | player = b7bbbd 43 | card-background = e8ede6 44 | shadow = b7bbbd 45 | notification = ffffff 46 | notification-error = ffffff 47 | card-hover = e0e4e4 48 | 49 | 50 | [Violet] 51 | text = 78658b 52 | gradientTop = b9adc4 53 | gradientBottom = d4cade 54 | main = e5dfeb 55 | subtext = 8e7c9a 56 | button-active = a090b0 57 | button = 516847 58 | sidebar = e8ede6 59 | player = b9adc4 60 | card-background = e8ede6 61 | shadow = 847096 62 | notification = b9adc4 63 | notification-error = b9adc4 64 | card-hover = f0e4ec 65 | 66 | [Ocean] 67 | text = 62828a 68 | gradientTop = 9cb9ba 69 | gradientBottom = c1d5d6 70 | main = cadbdb 71 | subtext = 7aa1a2 72 | button-active = 9cb9ba 73 | button = c1d5d6 74 | sidebar = c1d5d6 75 | player = 9cb9ba 76 | card-background = e1ebeb 77 | shadow = 6f9599 78 | notification = cadbdb 79 | notification-error = c1d5d6 80 | card-hover = d8e4e4 81 | -------------------------------------------------------------------------------- /Flow/screenshots/ocean.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/Flow/screenshots/ocean.png -------------------------------------------------------------------------------- /Flow/screenshots/pink.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/Flow/screenshots/pink.png -------------------------------------------------------------------------------- /Flow/screenshots/silver.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/Flow/screenshots/silver.png -------------------------------------------------------------------------------- /Flow/screenshots/violet.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/Flow/screenshots/violet.png -------------------------------------------------------------------------------- /Flow/user.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --gradient-colors: var(--spice-gradienttop), var(--spice-gradientbottom); 3 | } 4 | 5 | .main-rootlist-rootlistItem:hover { 6 | background-color: var(--spice-card-background); 7 | } 8 | 9 | .main-navBar-navBar { 10 | background-image: linear-gradient(var(--gradient-colors)); 11 | } 12 | 13 | /* buttons */ 14 | .main-navBar-navBarLink { 15 | border-radius: var(--border-radius-2); 16 | color: var(--spice-text); 17 | } 18 | .main-addButton-active, 19 | .main-addButton-active:focus, 20 | .main-addButton-active:hover { 21 | color: var(--spice-player); 22 | } 23 | /* menus */ 24 | .main-card-card { 25 | background-image: linear-gradient(var(--gradient-colors)); 26 | border-radius: 10px; 27 | } 28 | 29 | .main-card-card:hover { 30 | background-color: var(--spice-card-hover); 31 | border-radius: 10px; 32 | } 33 | 34 | .main-contextMenu-menuItemButton, 35 | .main-userWidget-dropDownMenuItemButton { 36 | /*border-radius: var(--border-radius-2);*/ 37 | color: var(--spice-text); 38 | height: 32px; 39 | padding-left: 8px; 40 | } 41 | .main-trackList-trackListHeaderStuck.main-trackList-trackListHeader { 42 | background: transparent; 43 | -webkit-box-shadow: 0 -1px 0 0 var(--spice-player); 44 | box-shadow: 0 -1px 0 0 var(--spice-player); 45 | } 46 | .main-trackList-trackListHeaderStuck .main-trackList-trackListHeaderRow { 47 | border-bottom: 1px solid transparent; 48 | background: var(--spice-main); 49 | } 50 | .Root__now-playing-bar { 51 | grid-area: now-playing-bar; 52 | width: 200px; 53 | z-index: 4; 54 | } 55 | #spicetify-home-config button:disabled, 56 | #spicetify-sidebar-config button:disabled { 57 | /*background-color: var(--spice-button-disabled) !important;*/ 58 | color: var(--spice-text) !important; 59 | } 60 | 61 | /* remove gradients */ 62 | .main-home-homeHeader, 63 | .main-actionBarBackground-background { 64 | background-image: none; 65 | } 66 | .main-actionBarBackground-background, 67 | .main-home-homeHeader, 68 | .main-topBar-background, 69 | .main-topBar-overlay, 70 | .x-entityHeader-overlay, 71 | .x-actionBarBackground-background, 72 | ._UFTK833WfTNGb4agRTd, 73 | .Ic3iDUCnC09k55peZBfC { 74 | background-color: var(--spice-main) !important; 75 | } 76 | .x-actionBarBackground-background, 77 | .x-entityHeader-overlay, 78 | .Ic3iDUCnC09k55peZBfC, 79 | ._UFTK833WfTNGb4agRTd { 80 | background-image: none !important; 81 | } 82 | .main-entityHeader-backgroundColor { 83 | background: var(--spice-main); 84 | } 85 | .player-controls__buttons--new-icons { 86 | gap: 16px; 87 | margin-bottom: 8px; 88 | display: flex; 89 | flex-direction: column; 90 | flex: 1; 91 | justify-content: center; 92 | align-items: center; 93 | } 94 | .Root__top-container { 95 | display: grid; 96 | grid-template-areas: "left-sidebar main-view right-sidebar now-playing-bar"; 97 | grid-template-columns: auto 1fr; 98 | grid-template-rows: 1fr auto; 99 | height: 100%; 100 | min-height: 100%; 101 | position: relative; 102 | width: 100%; 103 | background-color: var(--spice-main); 104 | } 105 | .global-nav .Root__top-container { 106 | grid-template-areas: 107 | "global-nav global-nav global-nav global-nav" 108 | "left-sidebar main-view right-sidebar now-playing-bar" 109 | "left-sidebar main-view right-sidebar now-playing-bar"; 110 | grid-template-columns: auto 1fr auto 15vw; 111 | grid-template-rows: 1fr auto; 112 | } 113 | .main-nowPlayingBar-container { 114 | display: flex; 115 | flex-direction: column; 116 | height: 100%; 117 | min-width: 0px; 118 | -webkit-user-select: none; 119 | user-select: none; 120 | } 121 | 122 | .player-controls__left, 123 | .player-controls__right { 124 | flex-direction: column; 125 | } 126 | 127 | .playback-bar { 128 | flex-direction: column; 129 | position: relative; 130 | } 131 | 132 | .playback-bar__progress-time-elapsed { 133 | position: absolute; 134 | left: 16px; 135 | top: 20px; 136 | } 137 | .playback-bar__progress-time-elapsed::after { 138 | content: "/"; 139 | margin-left: 6px; 140 | } 141 | .main-playbackBarRemainingTime-container { 142 | margin-left: 56px; 143 | } 144 | 145 | .main-nowPlayingBar-center { 146 | flex: 1; 147 | display: flex; 148 | justify-content: center; 149 | align-items: center; 150 | } 151 | 152 | .main-nowPlayingBar-nowPlayingBar { 153 | align-items: center; 154 | border-radius: 8px; 155 | display: flex; 156 | flex-direction: column; 157 | justify-content: space-between; 158 | align-items: center; 159 | padding: 25px 0; 160 | height: 100%; 161 | background-image: linear-gradient(var(--gradient-colors)); 162 | } 163 | 164 | .Root__right-sidebar > aside { 165 | background-image: linear-gradient(var(--gradient-colors)); 166 | } 167 | 168 | /*button*/ 169 | .encore-dark-theme .encore-bright-accent-set { 170 | --background-base: var(--spice-button-active); 171 | --background-highlight: var(--spice-player); 172 | --background-press: var(--spice-player); 173 | --decorative-subdued: var(--spice-player); 174 | } 175 | 176 | /*tracklist*/ 177 | .main-trackList-trackListRow { 178 | border-radius: var(--border-radius-2); 179 | } 180 | .main-trackList-trackListRow:hover { 181 | background-color: var(--spice-card-background); 182 | } 183 | .prog-tooltip { 184 | display: none; 185 | } 186 | 187 | .main-rootlist-rootlistDividerContainer { 188 | position: relative; 189 | /*color: var(--spice-gradientTop)*/ 190 | display: none; 191 | } 192 | 193 | .progress-bar { 194 | width: 150px; 195 | } 196 | 197 | .playback-progressbar { 198 | width: 100px; 199 | } 200 | 201 | .volume-bar { 202 | flex: 0; 203 | } 204 | 205 | .main-nowPlayingWidget-nowPlaying { 206 | flex-direction: column; 207 | gap: 16px; 208 | } 209 | 210 | .main-coverSlotCollapsed-container { 211 | transform: none !important; 212 | } 213 | 214 | .main-nowPlayingWidget-nowPlaying > button { 215 | color: var(--spice-text); 216 | } 217 | .main-nowPlayingBar-extraControls { 218 | flex-direction: column; 219 | } 220 | .main-yourLibraryX-entryPoints:nth-child(2) { 221 | background-image: linear-gradient(var(--gradient-colors)); 222 | } 223 | .main-yourLibraryX-entryPoints:nth-child(1) { 224 | background-color: var(--spice-gradienttop); 225 | } 226 | /* remove hover effect */ 227 | li > div > div::after { 228 | background-color: var(--spice-card-background) !important; 229 | } 230 | li > div::after { 231 | background-color: transparent !important; 232 | } 233 | /* give background to active playlist */ 234 | .BoxComponent-group-tinted-listRow-isInteractive-hasLeadingOrMedia-paddingBlockStart_8px-paddingBlockEnd_8px-minBlockSize_56px-padding_8px, 235 | .BoxComponent-group-tinted-listRow-isInteractive-hasFocus-hasLeadingOrMedia-paddingBlockStart_8px-paddingBlockEnd_8px-minBlockSize_56px-padding_8px { 236 | background-color: var(--spice-card-background); 237 | } 238 | /* expanded sidebar buttons */ 239 | .search-searchCategory-carouselButton { 240 | background-color: transparent; 241 | } 242 | .search-searchCategory-carouselButton:hover { 243 | background-color: var(--spicecard-background); 244 | } 245 | .main-yourLibraryX-iconOnly:hover { 246 | background-color: var(--spice-card-background); 247 | color: var(--spice-text); 248 | } 249 | .Root__nav-bar { 250 | background-color: var(--spice-main); 251 | } 252 | /* give active nav tab a background */ 253 | .main-navBar-mainNav li:has(> .active) { 254 | background-color: var(--spice-card-background); 255 | border-radius: 4px; 256 | } 257 | .view-homeShortcutsGrid-shortcut { 258 | background-image: linear-gradient(var(--gradient-colors)); 259 | } 260 | .main-actionBar-ActionBarRow > * { 261 | color: var(--spice-text); 262 | } 263 | .main-actionBar-ActionBarRow svg:not(.main-playButton-PlayButton svg) { 264 | color: var(--spice-text); 265 | } 266 | .x-sortBox-sortDropdown { 267 | color: inherit; 268 | } 269 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 morpheusthewhite 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /Matte/README.md: -------------------------------------------------------------------------------- 1 | # Matte 2 | 3 | ## Screenshots 4 | 5 | ### Matte 6 | 7 | ![Matte](screenshots/ylx-matte.png) 8 | 9 | ### Periwinkle 10 | 11 | ![Periwinkle](screenshots/ylx-periwinkle.png) 12 | 13 | ### Periwinkle-Dark 14 | 15 | ![Periwkinle Dark](screenshots/ylx-periwinkle-dark.png) 16 | 17 | ### Porcelain 18 | 19 | ![Porcelain](screenshots/ylx-porcelain.png) 20 | 21 | ### Gray-Dark1 22 | 23 | ![Gray Dark 1](screenshots/ylx-gray-dark1.png) 24 | 25 | ### Gray-Dark2 26 | 27 | ![Gray Dark 2](screenshots/ylx-gray-dark2.png) 28 | 29 | ### Gray-Dark3 30 | 31 | ![Gray Dark 3](screenshots/ylx-gray-dark3.png) 32 | 33 | ### Gray 34 | 35 | ![Gray](screenshots/ylx-gray.png) 36 | 37 | ### Gray-Light 38 | 39 | ![Gray Light](screenshots/ylx-gray-light.png) 40 | 41 | ## More 42 | 43 | ### Description 44 | 45 | a Spicetify theme which features a distinct top bar, quick-to-edit CSS variables, and color schemes from Windows visual styles by KDr3w 46 | 47 | ### Credits 48 | 49 | - Based on [Matte by KDr3w](https://www.deviantart.com/kdr3w/art/Matte-758699852) and their [other themes](https://www.deviantart.com/kdr3w/gallery/68078309/windows-10-themes) 50 | 51 | - Created by [darkthemer](https://github.com/darkthemer) 52 | 53 | ### Notes 54 | 55 | - Check the very top of `user.css` for quick configs 56 | 57 | - If you use the Marketplace, go to `Marketplace > Snippets > + Add CSS` and then paste the quick configs found in `user.css`. Edit these as you wish. 58 | 59 | ```css 60 | /* ================================ 61 | USER-EDITABLE VARIABLES 62 | ================================ */ 63 | 64 | :root { 65 | /* top bar vars */ 66 | --top-bar-padding-top: 45px; 67 | --top-bar-padding-right: 20px; 68 | --top-bar-padding-bottom: 5px; 69 | --top-bar-padding-left: 20px; 70 | --tab-border-radius: 6px; 71 | --top-bar-border-width: 2px; 72 | 73 | /* sidebar vars */ 74 | --sidebar-button-border-radius: 4px; 75 | --sidebar-border-width: 2px; 76 | 77 | /* player vars */ 78 | --player-height: 90px; 79 | --player-padding: 0 20px; 80 | --player-border-width: 2px; 81 | 82 | /* scrollbar vars */ 83 | --scrollbar-border-radius: 4px; 84 | --scrollbar-width: 6px; 85 | --scrollbar-width-hover: 6px; 86 | } 87 | ``` 88 | 89 | - For Windows users, here's how to make the window controls' background match with the topbar background 90 | 91 | - Enable [CEF/Spotify Tweaks](https://windhawk.net/mods/cef-titlebar-enabler-universal) in Windhawk (recommended) 92 | 93 | - Put this snippet into your `user.css` (or through the Marketplace's custom CSS feature) (alternative) 94 | 95 | ```css 96 | /* transparent window controls background */ 97 | .spotify__container--is-desktop:not(.fullscreen) body::after { 98 | content: ""; 99 | position: absolute; 100 | right: 0; 101 | z-index: 999; 102 | backdrop-filter: brightness(2.12); 103 | /* page zoom [ctrl][+] or [ctrl][-] 104 | edit width and height accordingly 105 | */ 106 | width: 135px; 107 | height: 48px; 108 | } 109 | ``` 110 | 111 | ![Window Controls](screenshots/winctrl.png) 112 | -------------------------------------------------------------------------------- /Matte/screenshots/winctrl.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/Matte/screenshots/winctrl.png -------------------------------------------------------------------------------- /Matte/screenshots/ylx-gray-dark1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/Matte/screenshots/ylx-gray-dark1.png -------------------------------------------------------------------------------- /Matte/screenshots/ylx-gray-dark2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/Matte/screenshots/ylx-gray-dark2.png -------------------------------------------------------------------------------- /Matte/screenshots/ylx-gray-dark3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/Matte/screenshots/ylx-gray-dark3.png -------------------------------------------------------------------------------- /Matte/screenshots/ylx-gray-light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/Matte/screenshots/ylx-gray-light.png -------------------------------------------------------------------------------- /Matte/screenshots/ylx-gray.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/Matte/screenshots/ylx-gray.png -------------------------------------------------------------------------------- /Matte/screenshots/ylx-matte.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/Matte/screenshots/ylx-matte.png -------------------------------------------------------------------------------- /Matte/screenshots/ylx-periwinkle-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/Matte/screenshots/ylx-periwinkle-dark.png -------------------------------------------------------------------------------- /Matte/screenshots/ylx-periwinkle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/Matte/screenshots/ylx-periwinkle.png -------------------------------------------------------------------------------- /Matte/screenshots/ylx-porcelain.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/Matte/screenshots/ylx-porcelain.png -------------------------------------------------------------------------------- /Nightlight/README.md: -------------------------------------------------------------------------------- 1 | # Nightlight 2 | 3 | ## Screenshots 4 | 5 | img 6 | 7 | ## Author 8 | Made by: 9 | * https://github.com/iTenerai 10 | -------------------------------------------------------------------------------- /Nightlight/color.ini: -------------------------------------------------------------------------------- 1 | [Nightlight Colors] 2 | text = FFFFFF 3 | subtext = F1F1F1 4 | main = 1c1622 5 | sidebar = 241c2c 6 | player = 241c2c 7 | card = 241c2c 8 | shadow = 241c2c 9 | selected-row = F1F1F1 10 | button = ae1adb 11 | button-active = ae1adb 12 | button-disabled = 241c2c 13 | tab-active = 241c2c 14 | notification = ae1adb 15 | notification-error = FF4151 16 | misc = ae1adb 17 | -------------------------------------------------------------------------------- /Nightlight/screenshots/nightlight.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/Nightlight/screenshots/nightlight.png -------------------------------------------------------------------------------- /Nightlight/user.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); 2 | 3 | * { 4 | font-family: Arial, Helvetica, sans-serif; 5 | } 6 | 7 | h1 { 8 | font-weight: 700 !important; 9 | } 10 | 11 | .main-nowPlayingWidget-nowPlaying .main-trackInfo-name { 12 | color: white; 13 | overflow: unset; 14 | font-size: 20px !important; 15 | background: -webkit-linear-gradient(right, #d7007d, #7a00ef); 16 | font-weight: bold; 17 | border-radius: 15px; 18 | padding-left: 3px; 19 | } 20 | 21 | .main-nowPlayingWidget-nowPlaying .main-trackInfo-artists { 22 | padding-left: 3px; 23 | } 24 | 25 | .main-home-homeHeader, 26 | .main-entityHeader-backgroundColor, 27 | .main-actionBarBackground-background { 28 | display: none; 29 | } 30 | 31 | .main-topBar-overlay, 32 | .main-view-container, 33 | .Root__nav-bar { 34 | background-color: var(--spice-main); 35 | } 36 | 37 | .main-topBar-background { 38 | opacity: 1 !important; 39 | } 40 | 41 | * { 42 | box-shadow: none !important; 43 | } 44 | 45 | .cover-art-image { 46 | border: dotted; 47 | border-radius: 50%; 48 | border-color: #ae1adb; 49 | } -------------------------------------------------------------------------------- /Onepunch/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_STORE -------------------------------------------------------------------------------- /Onepunch/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 okarin001 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /Onepunch/README.md: -------------------------------------------------------------------------------- 1 | # Onepunch 2 | 3 | ## Screenshots 4 | 5 | #### Dark 6 | 7 | | ![dark_home](./screenshots/dark_home.png) | ![dark_album](./screenshots/dark_album.png) | ![dark_playlist](./screenshots/dark_playlist.png) | 8 | | :-------------------------------------------: | :---------------------------------------------: | :-----------------------------------------------: | 9 | | home | album | playlist | 10 | | ![dark_podcast](screenshots/dark_podcast.png) | ![dark_profile](./screenshots/dark_profile.png) | ![dark_ylx](./screenshots/dark_ylx.png) | 11 | | podcast | profile | search (YLX UI) | 12 | 13 | #### Light 14 | 15 | | ![light_home](./screenshots/light_home.png) | ![light_album](./screenshots/light_album.png) | ![light_playlist](./screenshots/light_playlist.png) | 16 | | :---------------------------------------------: | :-----------------------------------------------: | :-------------------------------------------------: | 17 | | home | album | playlist | 18 | | ![light_podcast](screenshots/light_podcast.png) | ![light_profile](./screenshots/light_profile.png) | ![dark_ylx](./screenshots/light_ylx.png) | 19 | | podcast | profile | settings (YLX UI) | 20 | 21 | #### Legacy 22 | 23 | | ![legacy_ylx](./screenshots/legacy_ylx.png) | 24 | | :---------------------------------------------: | 25 | | home (YLX UI) | 26 | 27 | ### Custom Icons 28 | ![icons](screenshots/icons.png) 29 | 30 | ## More 31 | 32 | ### About 33 | 34 | A simple gruvified spotify theme. 35 | 36 | ### Information 37 | 38 | * To apply this theme: 39 | 40 | ```shell 41 | # for dark theme 42 | spicetify config current_theme Onepunch color_scheme dark 43 | spicetify apply 44 | 45 | #for light theme 46 | spicetify config current_theme Onepunch color_scheme light 47 | spicetify apply 48 | 49 | ``` 50 | 51 | * Tested on macOS only and pretty much everything worked. ﾍ(･\_| 52 | 53 | ### Contact 54 | 55 | Go **[here](https://github.com/okarin001/Onepunch/issues)** and *check/create* an issue in case you face any problem. 56 | -------------------------------------------------------------------------------- /Onepunch/color.ini: -------------------------------------------------------------------------------- 1 | [dark] 2 | ; onepunch dark mode 3 | 4 | text = d5c4a1 5 | subtext = b8bb26 6 | extratext = fabd2f 7 | main = 1d2021 8 | main-elevated = 1d2021 9 | highlight-elevated = 32302f 10 | highlight = 32302f 11 | sidebar = 1d2021 12 | player = 1d2021 13 | sec-player = 32302f 14 | card = 32302f 15 | sec-card = fb4934 16 | shadow = 1d2021 17 | selected-row = d3869b 18 | button = 8ec07c 19 | button-active = 8ec07c 20 | button-disabled = 665c54 21 | tab-active = fb4934 22 | notification = fb4934 23 | notification-error = cc2418 24 | misc = 83a598 25 | 26 | [light] 27 | ; onepunch light mode 28 | 29 | text = 504945 30 | subtext = 79740e 31 | extratext = b57614 32 | main = f9f5d7 33 | main-elevated = f9f5d7 34 | highlight-elevated = f2e5bc 35 | highlight = f2e5bc 36 | sidebar = f9f5d7 37 | player = f9f5d7 38 | sec-player = f2e5bc 39 | card = f2e5bc 40 | sec-card = 9d0006 41 | shadow = f9f5d7 42 | selected-row = b16286 43 | button = 427b58 44 | button-active = 427b58 45 | button-disabled = bdae93 46 | tab-active = 9d0006 47 | notification = 9d0006 48 | notification-error = cc2418 49 | misc = 076678 50 | 51 | [legacy] 52 | ; onepunch legacy colors 53 | 54 | text = b8bb26 55 | subtext = d5c4a1 56 | extratext = fabd2f 57 | main = 16191a 58 | main-elevated = 16191a 59 | highlight-elevated = 32302f 60 | highlight = 32302f 61 | sidebar = 16191a 62 | player = 16191a 63 | sec-player = 16191a 64 | card = 32302f 65 | sec-card = fb4934 66 | shadow = 16191a 67 | selected-row = d5c4a1 68 | button = 8ec07c 69 | button-active = 8ec07c 70 | button-disabled = 665c54 71 | tab-active = fb4934 72 | notification = 32302f 73 | notification-error = cc2418 74 | misc = 83a598 -------------------------------------------------------------------------------- /Onepunch/screenshots/dark_album.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/Onepunch/screenshots/dark_album.png -------------------------------------------------------------------------------- /Onepunch/screenshots/dark_home.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/Onepunch/screenshots/dark_home.png -------------------------------------------------------------------------------- /Onepunch/screenshots/dark_playlist.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/Onepunch/screenshots/dark_playlist.png -------------------------------------------------------------------------------- /Onepunch/screenshots/dark_podcast.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/Onepunch/screenshots/dark_podcast.png -------------------------------------------------------------------------------- /Onepunch/screenshots/dark_profile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/Onepunch/screenshots/dark_profile.png -------------------------------------------------------------------------------- /Onepunch/screenshots/dark_ylx.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/Onepunch/screenshots/dark_ylx.png -------------------------------------------------------------------------------- /Onepunch/screenshots/display.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/Onepunch/screenshots/display.gif -------------------------------------------------------------------------------- /Onepunch/screenshots/icons.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/Onepunch/screenshots/icons.png -------------------------------------------------------------------------------- /Onepunch/screenshots/legacy_ylx.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/Onepunch/screenshots/legacy_ylx.png -------------------------------------------------------------------------------- /Onepunch/screenshots/light_album.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/Onepunch/screenshots/light_album.png -------------------------------------------------------------------------------- /Onepunch/screenshots/light_home.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/Onepunch/screenshots/light_home.png -------------------------------------------------------------------------------- /Onepunch/screenshots/light_playlist.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/Onepunch/screenshots/light_playlist.png -------------------------------------------------------------------------------- /Onepunch/screenshots/light_podcast.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/Onepunch/screenshots/light_podcast.png -------------------------------------------------------------------------------- /Onepunch/screenshots/light_profile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/Onepunch/screenshots/light_profile.png -------------------------------------------------------------------------------- /Onepunch/screenshots/light_ylx.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/Onepunch/screenshots/light_ylx.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # spicetify community themes 2 | 3 | This is a collection of themes for [spicetify](https://github.com/spicetify/spicetify-cli), a command-line tool to customize Spotify. 4 | 5 | You can add your own theme simply by opening a Pull Request (more info in [CONTRIBUTING.md](./CONTRIBUTING.md)). 6 | 7 | ### **You can find a preview of all the themes in [THEMES.md](./THEMES.md).** 8 | 9 | ## Notes: 10 | 11 | * **These themes require that you have the latest version of Spotify and Spicetify.** 12 | * **To install Dribbblish and Turntable themes, follow the instructions in their READMEs**. 13 | * **Spotify ad-blocked version is not supported.** 14 | 15 | ## Installation and usage 16 | 17 | (If you use Arch Linux you can find this project on the [AUR](https://aur.archlinux.org/packages/spicetify-themes-git/)) 18 | 19 | 1. Clone this repository. Make sure [git](https://git-scm.com/) is installed and run: 20 | ```bash 21 | git clone --depth=1 https://github.com/spicetify/spicetify-themes.git 22 | ``` 23 | 24 | 2. Copy the files into the [Spicetify Themes folder](https://spicetify.app/docs/development/themes). Run: 25 | 26 | **Linux** 27 | 28 | ```bash 29 | cd spicetify-themes 30 | cp -r * ~/.config/spicetify/Themes 31 | ``` 32 | 33 | **MacOS** 34 | 35 | ```bash 36 | cd spicetify-themes 37 | cp -r * ~/.config/spicetify/Themes 38 | ``` 39 | 40 | **Windows** 41 | 42 | ```powershell 43 | cd spicetify-themes 44 | cp * "$(spicetify -c | Split-Path)\Themes\" -Recurse 45 | ``` 46 | 47 | 3. Choose which theme to apply just by running: 48 | ```bash 49 | spicetify config current_theme THEME_NAME 50 | ``` 51 | Some themes have 2 or more different color schemes. After selecting the theme you can switch between them with: 52 | ```bash 53 | spicetify config color_scheme SCHEME_NAME 54 | ``` 55 | 56 | ### Extra 57 | 58 | The `_Extra` folder contains additional resources for tweaking the look of 59 | Spotify. More info in its [README](./\_Extra/README.md). 60 | 61 | ## Contributions 62 | 63 | We've set up a separate document for our [contribution guidelines](./CONTRIBUTING.md). 64 | 65 | ## Troubleshooting 66 | 67 | 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). 68 | 69 | Use GitHub issues ONLY for bugs and requesting new features. 70 | 71 | If you are unsure about which channel to use, go for Reddit or Discord. 72 | 73 | ## Useful resources 74 | 75 | * [Spicetify theme without free version UI elements (e.g. "Upgrade" button)](https://github.com/Daksh777/SpotifyNoPremium) 76 | * [DribbblishDynamic theme for v2](https://github.com/JulienMaille/dribbblish-dynamic-theme) 77 | -------------------------------------------------------------------------------- /SharkBlue/README.md: -------------------------------------------------------------------------------- 1 | # SharkBlue 2 | 3 | ## Screenshots 4 | ![SharkBlue](./screenshot.png) 5 | 6 | ## More 7 | Author: https://github.com/MrBiscuit921 8 | Inspiration: BurntSienna, https://github.com/pjaspinski -------------------------------------------------------------------------------- /SharkBlue/color.ini: -------------------------------------------------------------------------------- 1 | [Base] 2 | button = 0573ff 3 | sidebar = 242629 4 | player = 242629 5 | main = 303336 6 | button-active = 0573ff -------------------------------------------------------------------------------- /SharkBlue/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/SharkBlue/screenshot.png -------------------------------------------------------------------------------- /SharkBlue/user.css: -------------------------------------------------------------------------------- 1 | /* Round Now Playing Bar */ 2 | :root { 3 | --border-radius-1: 8px; 4 | /* Play Bar */ 5 | --margin-bottom-now-playing-bar: 0.5rem; 6 | --now-playing-bar-height: 5.625rem; 7 | --padding-now-playing-bar: 0.25rem; 8 | --border-radius-now-playing-bar: 0.5rem; 9 | } 10 | .Root__now-playing-bar, 11 | .Root__now-playing-bar footer { 12 | border-radius: var(--border-radius-1) !important; 13 | } 14 | #main::after { 15 | content: ""; /* Empty content */ 16 | position: fixed; /* Fix element to viewport */ 17 | top: 0; 18 | right: 0; 19 | z-index: 999; /* Position above all other content */ 20 | -webkit-backdrop-filter: brightness( 21 | 2.12 22 | ); /* Apply brightness filter to background */ 23 | backdrop-filter: brightness(2.12); /* Cross-browser brightness filter */ 24 | /* Page zoom control */ 25 | /* Adjust width and height based on zoom level */ 26 | width: 135px; 27 | height: 40px; 28 | } 29 | 30 | /* Page titles */ 31 | h1 { 32 | font-weight: 700 !important; 33 | } 34 | 35 | /* Song name in player */ 36 | .main-nowPlayingWidget-nowPlaying .main-trackInfo-name { 37 | overflow: unset; 38 | font-size: 20px !important; 39 | } 40 | 41 | /* Artist name in player */ 42 | .main-nowPlayingWidget-nowPlaying .main-trackInfo-artists { 43 | overflow: unset; 44 | font-size: 15px; 45 | } 46 | 47 | .main-type-finale { 48 | line-height: 17px; 49 | } 50 | 51 | /* Icons */ 52 | .main-trackList-rowPlayPauseIcon { 53 | transform: scale(1.3); 54 | } 55 | 56 | .x-downloadButton-button svg { 57 | height: 32px; 58 | width: 32px; 59 | } 60 | 61 | /* Progress and remaining time */ 62 | .main-playbackBarRemainingTime-container, 63 | .playback-bar__progress-time-elapsed, 64 | .playback-bar__progress-time { 65 | font-size: 15px; 66 | margin-left: 5px; 67 | margin-right: 5px; 68 | } 69 | 70 | /* Player play button */ 71 | .main-playPauseButton-button { 72 | background-color: unset; 73 | color: var(--spice-subtext); 74 | } 75 | 76 | .main-playPauseButton-button svg { 77 | height: 28px; 78 | width: 28px; 79 | } 80 | 81 | /* Progress bar */ 82 | .progress-bar { 83 | --fg-color: var(--spice-button); 84 | } 85 | 86 | .progress-bar__bg, 87 | .progress-bar__fg, 88 | .progress-bar__fg_wrapper { 89 | height: 5px; 90 | } 91 | 92 | .progress-bar-wrapper { 93 | margin-left: 5px; 94 | margin-right: 5px; 95 | } 96 | 97 | /* Extra controls */ 98 | .control-button::before { 99 | font-size: 20px; 100 | } 101 | 102 | .ExtraControls svg { 103 | height: 20px; 104 | width: 20px; 105 | } 106 | 107 | /* Removing gradients */ 108 | .main-entityHeader-backgroundColor, 109 | .main-actionBarBackground-background { 110 | background-color: unset !important; 111 | background-image: none; 112 | } 113 | 114 | /* Cover shadow */ 115 | .main-entityHeader-shadow { 116 | -webkit-box-shadow: 0 4px 20px rgba(var(--spice-rgb-shadow), 0.5); 117 | box-shadow: 0 4px 20px rgba(var(--spice-rgb-shadow), 0.5); 118 | } 119 | 120 | /* Top bar */ 121 | .main-topBar-background { 122 | background-color: #3a3d42 !important; 123 | } 124 | 125 | /* Playing icon */ 126 | .main-trackList-playingIcon { 127 | filter: saturate(0%); 128 | } 129 | 130 | /* Playlist like button */ 131 | .main-actionBar-ActionBarRow .main-addButton-button .Svg-ulyrgf-0 { 132 | height: unset; 133 | width: unset; 134 | } 135 | 136 | /* Order button */ 137 | .x-sortBox-sortDropdown { 138 | margin-top: 3px; 139 | } 140 | 141 | /* Sidebar playlists menu */ 142 | .main-rootlist-rootlistDividerGradient { 143 | background: unset; 144 | } 145 | 146 | .main-rootlist-rootlistDivider { 147 | background-color: var(--spice-button); 148 | } 149 | 150 | /* Search box */ 151 | .x-searchInput-searchInputInput { 152 | font-size: 18px; 153 | } 154 | 155 | /* Aritsts names */ 156 | .main-type-mesto { 157 | font-size: 16px; 158 | line-height: 20px; 159 | } 160 | 161 | /* Songs names */ 162 | .main-type-ballad { 163 | font-size: 18px; 164 | } 165 | 166 | /* Cards descriptions */ 167 | .main-cardSubHeader-root { 168 | overflow: hidden !important; 169 | } 170 | 171 | /* Ad title */ 172 | .desktoproutes-homepage-takeover-ad-hptoNativeOriginal-header { 173 | font-weight: 700 !important; 174 | } 175 | 176 | /* Friends names */ 177 | .main-buddyFeed-username a { 178 | color: var(--spice-text) !important; 179 | font-size: 17px; 180 | font-weight: 500; 181 | } 182 | 183 | /* Friends songs and artists */ 184 | .main-buddyFeed-artistAndTrackName a, 185 | .main-buddyFeed-playbackContextLink span { 186 | font-size: 13px; 187 | } 188 | 189 | /* Cover height */ 190 | .main-coverSlotExpanded-container { 191 | height: var(--nav-bar-width) + 8px; 192 | } 193 | 194 | /* Scrollbars */ 195 | .os-scrollbar-handle { 196 | background: var(--spice-button) !important; 197 | border-radius: 8px; 198 | } 199 | 200 | /* Make Scrollbar look better */ 201 | 202 | .os-theme-spotify.os-host-transition 203 | > .os-scrollbar-vertical 204 | > .os-scrollbar-track 205 | > .os-scrollbar-handle { 206 | border-radius: 8px; 207 | width: 4px; 208 | background-color: var(--spice-button-disabled); 209 | } 210 | .os-theme-spotify.os-host-transition 211 | > .os-scrollbar-vertical 212 | > .os-scrollbar-track { 213 | width: 4px; 214 | } 215 | 216 | /* Making index column wider so that lighter background that 217 | highlights selected song contains multi-digit song numbers */ 218 | /* It looks good up to 4 digits, I figured that no one has playlists with more music than that ;) */ 219 | .main-trackList-trackList.main-trackList-indexable 220 | .main-trackList-trackListRowGrid { 221 | grid-template-columns: [index] 48px [first] 6fr [var1] 4fr [var2] 3fr [last] minmax( 222 | 120px, 223 | 1fr 224 | ) !important; 225 | } 226 | 227 | /* Text boxes in settings */ 228 | .main-dropDown-dropDown { 229 | background-color: var(--spice-button-disabled); 230 | } 231 | 232 | /* Facebook button */ 233 | .x-settings-facebookButton { 234 | background-color: unset !important; 235 | } 236 | 237 | /* Playlist play button color */ 238 | .encore-dark-theme .encore-bright-accent-set, 239 | .encore-dark-theme .encore-bright-accent-set:hover { 240 | --background-base: var(--spice-button-active); 241 | --background-highlight: var(--spice-play-hover); 242 | --background-press: var(--spice-play-hover); 243 | } 244 | 245 | /* Player bar */ 246 | 247 | .main-nowPlayingBar-container { 248 | justify-content: center; 249 | height: var(--now-playing-bar-height); 250 | width: 100%; 251 | border-radius: var(--border-radius-now-playing-bar); 252 | padding: var(--padding-now-playing-bar); 253 | bottom: var(--margin-bottom-now-playing-bar); 254 | border: var(--default-border-thickness) solid var(--shadow-rgb); 255 | background-color: rgba(var(--spice-rgb-main)); 256 | backdrop-filter: blur(var(--blur-radius)) saturate(0.5) brightness(100%); 257 | } 258 | 259 | .main-nowPlayingBar-container .GlueDropTarget, 260 | .main-coverSlotCollapsed-container { 261 | max-height: 56px; 262 | max-width: 56px; 263 | } 264 | 265 | /**** ROUND IMAGES ****/ 266 | 267 | /* Expanded Cover Art Image (+ position fix) */ 268 | .main-navBar-navBar > :nth-child(3) { 269 | margin: 0 0 0 1px; 270 | border-radius: 6px; 271 | } 272 | 273 | /* Collapsed Cover Art Image */ 274 | .cover-art-image, 275 | .artist-artistOverview-sideBlock 276 | > div 277 | > section 278 | > div:nth-child(3) 279 | > section:nth-child(2) 280 | > div 281 | > img, 282 | .view-homeShortcutsGrid-image { 283 | border-radius: 4px; 284 | } 285 | 286 | /* 287 | Playlist Header 288 | Search Category Card Image 289 | List Cards 290 | Local Files Card 291 | Placeholder Profile Card 292 | Artist Overview Side Block 293 | */ 294 | .main-entityHeader-shadow, 295 | .x-categoryCard-image, 296 | .x-entityImage-circle, 297 | .main-cardImage-image, 298 | .main-cardImage-imageWrapper, 299 | .main-entityHeader-imagePlaceholder > div, 300 | .artist-artistOverview-sideBlock > div > section { 301 | border-radius: 6px; 302 | } 303 | 304 | /* Circled Artist + Profile Cards (force) */ 305 | .main-cardImage-circular, 306 | .main-entityHeader-imagePlaceholder, 307 | .main-entityHeader-circle { 308 | border-radius: 50% !important; 309 | } 310 | 311 | /* Track List Image */ 312 | .main-trackList-rowImage { 313 | border-radius: 3px; 314 | } 315 | 316 | /* Home gradient */ 317 | .main-home-homeHeader { 318 | background-color: rgba(var(--spice-rgb-button)) !important; 319 | } 320 | 321 | /* Volume bar margins */ 322 | .volume-bar .progress-bar { 323 | margin: 0 0.4rem; 324 | } 325 | 326 | .volume-bar .playback-progressbar { 327 | width: 70%; 328 | } 329 | 330 | .volume-bar { 331 | flex: 0 150px; 332 | } 333 | 334 | .ellipsis-one-line.main-type-mesto { 335 | font-size: 14px; 336 | } 337 | 338 | /* Removal of empty space above playlist cover and title on narrow viewports */ 339 | .main-entityHeader-container.main-entityHeader-nonWrapped { 340 | min-height: 325px; 341 | height: 15vh; 342 | } 343 | -------------------------------------------------------------------------------- /Sleek/README.md: -------------------------------------------------------------------------------- 1 | # Sleek 2 | 3 | ### BladeRunner 4 | 5 | ![BladeRunner](bladerunner.png) 6 | 7 | ### Cherry 8 | 9 | ![Cherry](cherry.png) 10 | 11 | ### Coral 12 | 13 | ![Coral](coral.png) 14 | 15 | ### Deep 16 | 17 | ![Deep](deep.png) 18 | 19 | ### Deeper 20 | 21 | ![Deeper](deeper.png) 22 | 23 | ### Greener 24 | ![Greener](greener.png) 25 | 26 | ### Elementary 27 | 28 | ![Elementary](elementary.png) 29 | 30 | ### Futura 31 | 32 | ![Futura](futura.png) 33 | 34 | ### Nord 35 | 36 | ![Nord](nord.png) 37 | 38 | ### Psycho 39 | 40 | ![Psycho](psycho.png) 41 | 42 | ### UltraBlack 43 | 44 | ![UltraBlack](ultrablack.png) 45 | 46 | ### Wealthy 47 | 48 | ![Wealthy](wealthy.png) 49 | 50 | ### Dracula 51 | 52 | ![Dracula](dracula.png) 53 | 54 | ### VantaBlack 55 | 56 | ![VantaBlack](vantablack.png) 57 | 58 | ### RosePine 59 | 60 | ![RosePine](rosepine.png) 61 | 62 | ## Info 63 | 64 | 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. 65 | 66 | Created by [@harbassan](https://github.com/harbassan) 67 | 68 | ### Changing Color Schemes 69 | 70 | Change the scheme with these commands: 71 | 72 | ``` 73 | spicetify config color_scheme 74 | spicetify apply 75 | ``` 76 | -------------------------------------------------------------------------------- /Sleek/ayudark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/Sleek/ayudark.png -------------------------------------------------------------------------------- /Sleek/bladerunner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/Sleek/bladerunner.png -------------------------------------------------------------------------------- /Sleek/catppuccin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/Sleek/catppuccin.png -------------------------------------------------------------------------------- /Sleek/cherry.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/Sleek/cherry.png -------------------------------------------------------------------------------- /Sleek/coral.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/Sleek/coral.png -------------------------------------------------------------------------------- /Sleek/deep.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/Sleek/deep.png -------------------------------------------------------------------------------- /Sleek/deeper.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/Sleek/deeper.png -------------------------------------------------------------------------------- /Sleek/dracula.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/Sleek/dracula.png -------------------------------------------------------------------------------- /Sleek/eldritch.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/Sleek/eldritch.png -------------------------------------------------------------------------------- /Sleek/elementary.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/Sleek/elementary.png -------------------------------------------------------------------------------- /Sleek/futura.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/Sleek/futura.png -------------------------------------------------------------------------------- /Sleek/greener.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/Sleek/greener.png -------------------------------------------------------------------------------- /Sleek/nord.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/Sleek/nord.png -------------------------------------------------------------------------------- /Sleek/psycho.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/Sleek/psycho.png -------------------------------------------------------------------------------- /Sleek/rosepine.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/Sleek/rosepine.png -------------------------------------------------------------------------------- /Sleek/ultrablack.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/Sleek/ultrablack.png -------------------------------------------------------------------------------- /Sleek/vantablack.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/Sleek/vantablack.png -------------------------------------------------------------------------------- /Sleek/wealthy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/Sleek/wealthy.png -------------------------------------------------------------------------------- /StarryNight/README.md: -------------------------------------------------------------------------------- 1 | # StarryNight 2 | 3 | ## Screenshots 4 | 5 | ### Base 6 | ![Base](images/base.png) 7 | ### Cotton Candy 8 | ![Cotton-candy](images/cotton-candy.png) 9 | ### Forest 10 | ![Forest](images/forest.png) 11 | ### Galaxy 12 | ![Galaxy](images/galaxy.png) 13 | ### Orange 14 | ![Orange](images/orange.png) 15 | ### Sky 16 | ![Sky](images/sky.png) 17 | ### Sunrise 18 | ![Sunrise](images/sunrise.png) 19 | 20 | ## More 21 | 22 | > Playbar panel is resizable using the resize bar from Now Playing View and Queue card. 23 | 24 | ### Created by 25 | 26 | - https://github.com/b-chen00 27 | 28 | ### Credits 29 | 30 | - Shooting stars created by [Delroy Prithvi](https://codepen.io/delroyprithvi/pen/LYyJROR) with copyright/permission notice: 31 | 32 | > Pure CSS Shooting Star Animation Effect Copyright (c) 2021 by Delroy Prithvi (https://codepen.io/delroyprithvi/pen/LYyJROR) 33 | 34 | > 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: 35 | 36 | > The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 37 | 38 | > 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. -------------------------------------------------------------------------------- /StarryNight/color.ini: -------------------------------------------------------------------------------- 1 | [Base] 2 | star = FFFFFF 3 | star-glow = FFFFFF 4 | shooting-star = FFFFFF 5 | shooting-star-glow = FFFFFF 6 | 7 | main = 000000 ; becomes 100% transparent via javascript 8 | main-elevated = 152238 9 | card = 152238 10 | 11 | sidebar = 142b44 ; bottom part of sky 12 | sidebar-alt = 000000 ; top part of sky 13 | 14 | text = FFFFFF 15 | subtext = ADB5BD 16 | 17 | button-active = FFF3C4 18 | button = FFF3C4 19 | button-disabled = 000000 20 | 21 | highlight = 191919 22 | highlight-elevated = 152238 23 | 24 | shadow = 000000 25 | selected-row = FFFFFF 26 | misc = 7F7F7F 27 | notification-error = E22134 28 | notification = 4687d6 29 | tab-active = 333333 30 | player = 181818 31 | 32 | [Cotton-candy] 33 | star = FFFFFF 34 | star-glow = FFFFFF 35 | shooting-star = FFFFFF 36 | shooting-star-glow = FFFFFF 37 | 38 | main = 000000 39 | main-elevated = 9f45b0 40 | card = 9f45b0 41 | 42 | sidebar = 509be1 43 | sidebar-alt = ff71b2 44 | 45 | text = FFFFFF 46 | subtext = fff4f4 47 | 48 | button-active = d3e9ff 49 | button = d3e9ff 50 | button-disabled = FFFFFF 51 | 52 | highlight = a763b6 53 | highlight-elevated = 7f78be 54 | 55 | shadow = 000000 56 | selected-row = ffa0ad 57 | misc = 7F7F7F 58 | notification-error = E22134 59 | notification = 4687d6 60 | tab-active = 333333 61 | player = 181818 62 | 63 | [Forest] 64 | star = FFFFFF 65 | star-glow = FFFFFF 66 | shooting-star = FFFFFF 67 | shooting-star-glow = FFFFFF 68 | 69 | main = 000000 ; becomes 100% transparent via javascript 70 | main-elevated = 011502 71 | card = 011502 72 | 73 | sidebar = 14442b ; bottom part of sky 74 | sidebar-alt = 000000 ; top part of sky 75 | 76 | text = FFFFFF 77 | subtext = ADB5BD 78 | 79 | button-active = 9893DA 80 | button = c4c6ff 81 | button-disabled = 000000 82 | 83 | highlight = 191919 84 | highlight-elevated = 011502 85 | 86 | shadow = 000000 87 | selected-row = FFFFFF 88 | misc = DBF9F4 89 | notification-error = E22134 90 | notification = 77be80 91 | tab-active = 333333 92 | player = 181818 93 | 94 | [Galaxy] 95 | star = FFFFFF 96 | star-glow = FFFFFF 97 | shooting-star = FFFFFF 98 | shooting-star-glow = FFFFFF 99 | 100 | main = 000000 101 | main-elevated = 9f45b0 102 | card = 9f45b0 103 | 104 | sidebar = b133c9 105 | sidebar-alt = 00076f 106 | 107 | text = ffe4f2 108 | subtext = FFFFFF 109 | 110 | button-active = FFF3C4 111 | button = FFF3C4 112 | button-disabled = 939bb6 113 | 114 | highlight = 9d00ff 115 | highlight-elevated = 9d00ff 116 | 117 | shadow = 000000 118 | selected-row = FFFFFF 119 | misc = 7F7F7F 120 | notification-error = E22134 121 | notification = 4687d6 122 | tab-active = 333333 123 | player = 181818 124 | 125 | [Orange] 126 | star = ffe234 127 | star-glow = fff3ad 128 | shooting-star = fff099 129 | shooting-star-glow = fffcea 130 | 131 | main = 000000 ; becomes 100% transparent via javascript 132 | main-elevated = e69138 133 | card = c37728 134 | 135 | sidebar = e69138 ; bottom part of sky 136 | sidebar-alt = 000000 ; top part of sky 137 | 138 | text = FFFFFF 139 | subtext = FFFFFF 140 | 141 | button-active = e06666 142 | button = fbe39b 143 | button-disabled = 000000 144 | 145 | highlight = 191919 146 | highlight-elevated = e69138 147 | 148 | shadow = 000000 149 | selected-row = FFFFFF 150 | misc = f9f7db 151 | notification-error = E22134 152 | notification = e69138 153 | tab-active = 333333 154 | player = 181818 155 | 156 | [Sky] 157 | star = FFFFFF 158 | star-glow = FFFFFF 159 | shooting-star = FFFFFF 160 | shooting-star-glow = FFFFFF 161 | 162 | main = 000000 163 | main-elevated = 6b94f5 164 | card = 6b94f5 165 | 166 | sidebar = 62cff4 167 | sidebar-alt = 1e48a9 168 | 169 | text = FFFFFF 170 | subtext = 040a18 171 | 172 | button-active = FFF3C4 173 | button = FFF3C4 174 | button-disabled = 000000 175 | 176 | highlight = 95b3f8 177 | highlight-elevated = aac2f9 178 | 179 | shadow = 000000 180 | selected-row = FFFFFF 181 | misc = 7F7F7F 182 | notification-error = E22134 183 | notification = 4687d6 184 | tab-active = 333333 185 | player = 181818 186 | 187 | [Sunrise] 188 | star = FFFFFF 189 | star-glow = FFFFFF 190 | shooting-star = FFFFFF 191 | shooting-star-glow = FFFFFF 192 | 193 | main = 000000 194 | main-elevated = C49C48 195 | card = C49C48 196 | 197 | sidebar = F83D41 198 | sidebar-alt = FFAE41 199 | 200 | text = FFFFFF 201 | subtext = E0E0E0 202 | 203 | button-active = FFF3C4 204 | button = FFF3C4 205 | button-disabled = 000000 206 | 207 | highlight = 191919 208 | highlight-elevated = C49C48 209 | 210 | shadow = 000000 211 | selected-row = 000000 212 | misc = 7F7F7F 213 | notification-error = E22134 214 | notification = 4687d6 215 | tab-active = 333333 216 | player = 181818 -------------------------------------------------------------------------------- /StarryNight/images/base.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/StarryNight/images/base.png -------------------------------------------------------------------------------- /StarryNight/images/cotton-candy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/StarryNight/images/cotton-candy.png -------------------------------------------------------------------------------- /StarryNight/images/forest.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/StarryNight/images/forest.png -------------------------------------------------------------------------------- /StarryNight/images/galaxy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/StarryNight/images/galaxy.png -------------------------------------------------------------------------------- /StarryNight/images/orange.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/StarryNight/images/orange.png -------------------------------------------------------------------------------- /StarryNight/images/sky.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/StarryNight/images/sky.png -------------------------------------------------------------------------------- /StarryNight/images/sunrise.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/StarryNight/images/sunrise.png -------------------------------------------------------------------------------- /StarryNight/theme.js: -------------------------------------------------------------------------------- 1 | function waitForElement(els, func, timeout = 100) { 2 | const queries = els.map((el) => document.querySelector(el)); 3 | if (queries.every((a) => a)) { 4 | func(queries); 5 | } else if (timeout > 0) { 6 | setTimeout(waitForElement, 300, els, func, --timeout); 7 | } 8 | } 9 | 10 | function random(min, max) { 11 | // min inclusive max exclusive 12 | return Math.random() * (max - min) + min; 13 | } 14 | 15 | waitForElement(['.Root__top-container'], ([topContainer]) => { 16 | const r = document.documentElement; 17 | const rs = window.getComputedStyle(r); 18 | 19 | const backgroundContainer = document.createElement('div'); 20 | backgroundContainer.className = 'starrynight-bg-container'; 21 | topContainer.appendChild(backgroundContainer); 22 | 23 | // to position stars and shooting stars between the background and everything else 24 | const rootElement = document.querySelector('.Root__top-container'); 25 | rootElement.style.zIndex = '0'; 26 | 27 | // create the stars 28 | const canvasSize = 29 | backgroundContainer.clientWidth * backgroundContainer.clientHeight; 30 | const starsFraction = canvasSize / 4000; 31 | for (let i = 0; i < starsFraction; i++) { 32 | const size = Math.random() < 0.5 ? 1 : 2; 33 | 34 | const star = document.createElement('div'); 35 | star.style.position = 'absolute'; 36 | star.style.left = `${random(0, 99)}%`; 37 | star.style.top = `${random(0, 99)}%`; 38 | star.style.opacity = random(0.5, 1); 39 | star.style.width = `${size}px`; 40 | star.style.height = `${size}px`; 41 | star.style.backgroundColor = rs.getPropertyValue('--spice-star'); 42 | star.style.zIndex = '-1'; 43 | star.style.borderRadius = '50%'; 44 | 45 | if (Math.random() < 1 / 5) { 46 | star.style.animation = `twinkle${ 47 | Math.floor(Math.random() * 4) + 1 48 | } 5s infinite`; 49 | } 50 | 51 | backgroundContainer.appendChild(star); 52 | } 53 | 54 | // handles resizing of playbar panel to match right sidebar below it 55 | const playbar = document.querySelector('.Root__now-playing-bar'); 56 | waitForElement(['.Root__right-sidebar'], ([rightbar]) => { 57 | const resizeObserver = new ResizeObserver((entries) => { 58 | for (const entry of entries) { 59 | if (entry.target === rightbar) { 60 | let newWidth = entry.contentRect.width; 61 | if (newWidth === 0) { 62 | const localStorageWidth = localStorage.getItem( 63 | '223ni6f2epqcidhx5etjafeai:panel-width-saved' 64 | ); 65 | if (localStorageWidth) { 66 | newWidth = localStorageWidth; 67 | } else { 68 | newWidth = 420; 69 | } 70 | } 71 | playbar.style.width = `${newWidth}px`; 72 | break; 73 | } 74 | } 75 | }); 76 | 77 | resizeObserver.observe(rightbar); 78 | }); 79 | 80 | waitForElement(['[data-encore-id="buttonPrimary"]'], ([targetElement]) => { 81 | // start or stop spinning animation based on whether something is playing 82 | const playObserver = new MutationObserver((mutationsList) => { 83 | for (const mutation of mutationsList) { 84 | if ( 85 | mutation.type === 'attributes' && 86 | mutation.attributeName === 'aria-label' 87 | ) { 88 | handleLabelChange(); 89 | } 90 | } 91 | }); 92 | 93 | const playConfig = { attributes: true, attributeFilter: ['aria-label'] }; 94 | playObserver.observe(targetElement, playConfig); 95 | }); 96 | 97 | function handleLabelChange() { 98 | const img = document.querySelector( 99 | '.main-nowPlayingWidget-coverArt .cover-art img' 100 | ); 101 | // checks the state of the play button on the playbar 102 | if (document.querySelector('[data-encore-id="buttonPrimary"]').getAttribute('aria-label') == 'Pause'){ 103 | img.classList.add('running-animation'); 104 | } else { 105 | img.classList.remove('running-animation'); 106 | } 107 | } 108 | 109 | /* 110 | Pure CSS Shooting Star Animation Effect Copyright (c) 2021 by Delroy Prithvi (https://codepen.io/delroyprithvi/pen/LYyJROR) 111 | 112 | 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: 113 | 114 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 115 | 116 | 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. 117 | */ 118 | for (let i = 0; i < 4; i++) { 119 | const shootingstar = document.createElement('span'); 120 | shootingstar.className = 'shootingstar'; 121 | if (Math.random() < 0.75) { 122 | shootingstar.style.top = '-4px'; // hidden off screen when animation is delayed 123 | shootingstar.style.right = `${random(0, 90)}%`; 124 | } else { 125 | shootingstar.style.top = `${random(0, 50)}%`; 126 | shootingstar.style.right = '-4px'; // hidden when animation is delayed 127 | } 128 | 129 | const shootingStarGlowColor = `rgba(${rs.getPropertyValue( 130 | '--spice-rgb-shooting-star-glow' 131 | )},${0.1})`; 132 | shootingstar.style.boxShadow = `0 0 0 4px ${shootingStarGlowColor}, 0 0 0 8px ${shootingStarGlowColor}, 0 0 20px ${shootingStarGlowColor}`; 133 | 134 | shootingstar.style.animationDuration = `${ 135 | Math.floor(Math.random() * 3) + 3 136 | }s`; 137 | shootingstar.style.animationDelay = `${Math.floor(Math.random() * 7)}s`; 138 | 139 | backgroundContainer.appendChild(shootingstar); 140 | 141 | shootingstar.addEventListener('animationend', () => { 142 | if (Math.random() < 0.75) { 143 | shootingstar.style.top = '-4px'; // hidden off screen when animation is delayed 144 | shootingstar.style.right = `${random(0, 90)}%`; 145 | } else { 146 | shootingstar.style.top = `${random(0, 50)}%`; 147 | shootingstar.style.right = '-4px'; // hidden when animation is delayed 148 | } 149 | 150 | shootingstar.style.animation = 'none'; // Remove animation 151 | 152 | void shootingstar.offsetWidth; 153 | 154 | shootingstar.style.animation = ''; 155 | shootingstar.style.animationDuration = `${ 156 | Math.floor(Math.random() * 4) + 3 157 | }s`; 158 | }); 159 | } 160 | }); -------------------------------------------------------------------------------- /StarryNight/user.css: -------------------------------------------------------------------------------- 1 | .button-module__button___hf2qg_marketplace { 2 | color: var(--spice-subtext) 3 | } 4 | 5 | .main-entityHeader-backgroundColor { 6 | background-color: #00000000 !important; 7 | } 8 | 9 | .main-home-homeHeader { 10 | background-color: #00000000 !important; 11 | background-image: none !important; 12 | } 13 | 14 | .Root__top-container { 15 | background: linear-gradient(180deg, var(--spice-sidebar-alt) 0%, var(--spice-sidebar) 100%); 16 | overflow: hidden; 17 | grid-template-areas: 18 | "left-sidebar main-view now-playing-bar" 19 | "left-sidebar main-view right-sidebar"; 20 | grid-template-rows: auto auto 1fr; 21 | } 22 | 23 | .global-nav .Root__top-container { 24 | grid-template-areas: 25 | "global-nav global-nav global-nav" 26 | "left-sidebar main-view now-playing-bar" 27 | "left-sidebar main-view right-sidebar" !important; 28 | } 29 | 30 | .Root__globalNav { 31 | background-color: #00000000 !important; 32 | } 33 | 34 | .ffFwfKcPDbmAPLXzxzKq:before { 35 | background-color: #00000000 !important; 36 | } 37 | 38 | .I0bVSxvqA3rm5HvciMap { 39 | --bgColor: #00000000 !important; 40 | } 41 | 42 | .I0bVSxvqA3rm5HvciMap::after { 43 | --bgColor: #00000000 !important; 44 | } 45 | 46 | .PeLrpasyfBW8ql_bmoAi { 47 | background-color: #00000000 !important; 48 | background-image: none !important; 49 | } 50 | 51 | .PkOz5g82CaoKk1J3GX0e { 52 | background-color: #00000000 !important; 53 | background-image: none !important; 54 | } 55 | 56 | .sv5suqIPUwjgUF_BzM41 { 57 | transform: none !important; 58 | } 59 | 60 | .Root__right-sidebar { 61 | width: min-content; 62 | height: auto !important; 63 | min-height: 100% !important; 64 | } 65 | 66 | .Root__now-playing-bar { 67 | width: var(--panel-width); 68 | } 69 | 70 | .main-topBar-background { 71 | background-color: var(--spice-highlight) !important; 72 | } 73 | 74 | .Root__nav-bar { 75 | background-color: #00000000 !important; 76 | } 77 | 78 | .main-yourLibraryX-libraryContainer { 79 | background: none !important; 80 | } 81 | 82 | .main-trackList-trackListRow:hover { 83 | background-color: var(--spice-highlight); 84 | } 85 | 86 | .main-playPauseButton-button { 87 | background-color: var(--spice-button); 88 | } 89 | 90 | .rX_OmqCngvY5ZCoYBZgb { 91 | background-color: #00000000 !important; 92 | } 93 | 94 | .main-yourLibraryX-entryPoints { 95 | background-color: #00000000 !important; 96 | } 97 | 98 | .marketplace-header { 99 | background-color: #00000000 !important; 100 | } 101 | 102 | .EmeHQXR87mUskYK6xEde { 103 | background-color: #00000000 !important; 104 | } 105 | 106 | .lyrics-lyrics-background { 107 | background-color: #00000000 !important; 108 | } 109 | 110 | .main-actionBarBackground-background { 111 | background-image: none; 112 | background-color: #00000000 !important; 113 | animation: none !important; 114 | -webkit-animation: none !important; 115 | } 116 | 117 | .main-entityHeader-overlay { 118 | background: none !important; 119 | } 120 | 121 | .main-entityHeader-background.main-entityHeader-gradient { 122 | opacity: 0.5; 123 | animation: none !important; 124 | } 125 | 126 | .main-entityHeader-background.main-entityHeader-overlay:after { 127 | background-image: none !important; 128 | animation: none !important; 129 | -webkit-animation: none !important; 130 | } 131 | 132 | .pUNc2aOeOQANHrhYa1GU .RDZ61ETnag1ilfZTkVxe { 133 | color: #00000000 !important; 134 | } 135 | 136 | .playlist-playlist-playlistContent { 137 | background: #00000000 !important; 138 | } 139 | 140 | .main-nowPlayingBar-nowPlayingBar { 141 | min-height: 400px; 142 | } 143 | 144 | .main-nowPlayingBar-container { 145 | flex-direction: column; 146 | min-width: 280px; 147 | max-width: 420px; 148 | } 149 | 150 | .main-nowPlayingBar-nowPlayingBar { 151 | flex-direction: column; 152 | } 153 | 154 | [data-right-sidebar-hidden] .Root__main-view { 155 | grid-area: main-view/main-view/main-view/span 1; 156 | } 157 | 158 | .Root__main-view { 159 | background-color: #00000000 !important; 160 | } 161 | 162 | .main-nowPlayingBar-center { 163 | width: 100%; 164 | } 165 | 166 | .main-nowPlayingBar-left { 167 | width: 100%; 168 | } 169 | 170 | .HD9s7U5E1RLSWKpXmrqx { 171 | background-color: #00000000; 172 | margin: auto; 173 | width: 100%; 174 | } 175 | 176 | .main-nowPlayingWidget-coverArt .cover-art { 177 | height: 220px !important; 178 | width: 220px !important; 179 | margin: auto; 180 | background-color: #00000000; 181 | box-shadow: 0 0 0px var(--spice-rgb-shadow); 182 | } 183 | 184 | .main-nowPlayingWidget-coverArt .cover-art img { 185 | border-radius: 50%; 186 | animation: spin 25s linear infinite; 187 | animation-play-state: paused; 188 | background-color: #00000000; 189 | box-shadow: 0 0 5px 5px var(--spice-text); 190 | } 191 | 192 | .running-animation { 193 | animation-play-state: running !important; 194 | } 195 | 196 | .main-coverSlotCollapsed-container { 197 | width: 100%; 198 | height: 100%; 199 | } 200 | 201 | .main-coverSlotCollapsed-container> :first-child { 202 | width: 100%; 203 | height: 100%; 204 | } 205 | 206 | .main-coverSlotCollapsed-container> :first-child> :first-child { 207 | width: 100%; 208 | height: 100%; 209 | background-color: #00000000; 210 | } 211 | 212 | .main-nowPlayingWidget-coverArt { 213 | width: 100%; 214 | height: 100%; 215 | padding-top: 5px; 216 | padding-bottom: 5px; 217 | background-color: #00000000; 218 | } 219 | 220 | .main-nowPlayingWidget-nowPlaying { 221 | width: 100%; 222 | flex-direction: row; 223 | flex-wrap: wrap; 224 | justify-content: center; 225 | } 226 | 227 | .main-coverSlotCollapsed-expandButton { 228 | right: 25%; 229 | } 230 | 231 | .player-controls__buttons.player-controls__buttons--new-icons { 232 | order: 2; 233 | } 234 | 235 | .playback-bar { 236 | order: 1; 237 | } 238 | 239 | .main-nowPlayingBar-right { 240 | width: 100%; 241 | } 242 | 243 | .main-nowPlayingBar-extraControls { 244 | justify-content: space-evenly; 245 | } 246 | 247 | .main-tag-container { 248 | color: var(--spice-sidebar); 249 | } 250 | 251 | .starrynight-bg-container { 252 | position: fixed; 253 | z-index: 0; 254 | pointer-events: none; 255 | height: 100%; 256 | width: 100%; 257 | top: 0; 258 | left: 0; 259 | background-color: transparent; 260 | } 261 | 262 | .ffFwfKcPDbmAPLXzxzKq { 263 | background-color: #00000000 !important; 264 | } 265 | 266 | @keyframes twinkle1 { 267 | 0% { 268 | box-shadow: 0px 0px 8px 2px var(--spice-star-glow); 269 | } 270 | 271 | 20% { 272 | box-shadow: 0px 0px -8px 2px var(--spice-star-glow); 273 | } 274 | 275 | 40% { 276 | box-shadow: 0px 0px -8px 2px var(--spice-star-glow); 277 | } 278 | 279 | 60% { 280 | box-shadow: 0px 0px -8px 2px var(--spice-star-glow); 281 | } 282 | 283 | 80% { 284 | box-shadow: 0px 0px 8px 2px var(--spice-star-glow); 285 | } 286 | 287 | 100% { 288 | box-shadow: 0px 0px 8px 2px var(--spice-star-glow); 289 | } 290 | } 291 | 292 | @keyframes twinkle2 { 293 | 0% { 294 | box-shadow: 0px 0px 8px 2px var(--spice-star-glow); 295 | } 296 | 297 | 20% { 298 | box-shadow: 0px 0px 8px 2px var(--spice-star-glow); 299 | } 300 | 301 | 40% { 302 | box-shadow: 0px 0px -8px 2px var(--spice-star-glow); 303 | } 304 | 305 | 60% { 306 | box-shadow: 0px 0px -8px 2px var(--spice-star-glow); 307 | } 308 | 309 | 80% { 310 | box-shadow: 0px 0px -8px 2px var(--spice-star-glow); 311 | } 312 | 313 | 100% { 314 | box-shadow: 0px 0px 8px 2px var(--spice-star-glow); 315 | } 316 | } 317 | 318 | @keyframes twinkle3 { 319 | 0% { 320 | box-shadow: 0px 0px -8px 2px var(--spice-star-glow); 321 | } 322 | 323 | 20% { 324 | box-shadow: 0px 0px 8px 2px var(--spice-star-glow); 325 | } 326 | 327 | 40% { 328 | box-shadow: 0px 0px 8px 2px var(--spice-star-glow); 329 | } 330 | 331 | 60% { 332 | box-shadow: 0px 0px 8px 2px var(--spice-star-glow); 333 | } 334 | 335 | 80% { 336 | box-shadow: 0px 0px -8px 2px var(--spice-star-glow); 337 | } 338 | 339 | 100% { 340 | box-shadow: 0px 0px -8px 2px var(--spice-star-glow); 341 | } 342 | } 343 | 344 | @keyframes twinkle4 { 345 | 0% { 346 | box-shadow: 0px 0px -8px 2px var(--spice-star-glow); 347 | } 348 | 349 | 20% { 350 | box-shadow: 0px 0px -8px 2px var(--spice-star-glow); 351 | } 352 | 353 | 40% { 354 | box-shadow: 0px 0px 8px 2px var(--spice-star-glow); 355 | } 356 | 357 | 60% { 358 | box-shadow: 0px 0px 8px 2px var(--spice-star-glow); 359 | } 360 | 361 | 80% { 362 | box-shadow: 0px 0px 8px 2px var(--spice-star-glow); 363 | } 364 | 365 | 100% { 366 | box-shadow: 0px 0px -8px 2px var(--spice-star-glow); 367 | } 368 | } 369 | 370 | @keyframes spin { 371 | from { 372 | transform: rotate(0deg); 373 | } 374 | 375 | to { 376 | transform: rotate(360deg); 377 | } 378 | } 379 | 380 | /* 381 | Pure CSS Shooting Star Animation Effect Copyright (c) 2021 by Delroy Prithvi (https://codepen.io/delroyprithvi/pen/LYyJROR) 382 | 383 | 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: 384 | 385 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 386 | 387 | 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. 388 | */ 389 | .shootingstar { 390 | position: absolute; 391 | width: 4px; 392 | height: 4px; 393 | background: var(--spice-shooting-star); 394 | border-radius: 50%; 395 | animation: animate 3s linear; 396 | left: initial; 397 | z-index: -1; 398 | } 399 | 400 | .shootingstar::before { 401 | content: ''; 402 | position: absolute; 403 | top: 50%; 404 | transform: translateY(-50%); 405 | width: 300px; 406 | height: 1px; 407 | background: linear-gradient(90deg, var(--spice-shooting-star), transparent); 408 | } 409 | 410 | @keyframes animate { 411 | 0% { 412 | transform: rotate(315deg) translateX(0); 413 | opacity: 1; 414 | } 415 | 416 | 70% { 417 | opacity: 1; 418 | } 419 | 420 | 100% { 421 | transform: rotate(315deg) translateX(-1500px); 422 | opacity: 0; 423 | } 424 | } 425 | -------------------------------------------------------------------------------- /Turntable/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Grason Chan 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /Turntable/README.md: -------------------------------------------------------------------------------- 1 | # Turntable 2 | 3 | Based on Spotify original theme. 4 | 5 | **Note:** Require Spicetify **v2.2.0** or higher! Otherwise, performance problems will happen when the turntable rotate! 6 | 7 | View the **CHANGELOG** [here](https://github.com/grasonchan/spotify-spice/blob/master/CHANGELOG.md). 8 | 9 | ## Screenshots 10 | 11 |
12 | turntable 13 |
14 |
15 | full app display 16 |
17 |
18 | full app display - vertical mode 19 |
20 | 21 | ## More 22 | 23 | ### About Turntable 24 | 25 | Use CSS to achieve, not picture. This means it can be scaled to any size, but make sure the album cover is not blurry. 26 | 27 | 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! 28 | 29 | ### Info 30 | 31 | Designed and developed by [Grason Chan](https://github.com/grasonchan). 32 | 33 | 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). 34 | 35 | Develop and test on macOS. If there's any problem, please open issue or PR. 36 | 37 | ### Installation 38 | 39 | 1. add extension - [Full App Display](https://spicetify.app/docs/getting-started/extensions#full-app-display) 40 | 41 | ```shell 42 | spicetify config extensions fullAppDisplay.js 43 | spicetify apply 44 | ``` 45 | 46 | 2. put **Turntable** into the **.config/spicetify** 47 | 48 | ```shell 49 | cd spicetify-themes 50 | cp -r Turntable ~/.config/spicetify/Themes 51 | ``` 52 | 53 | 3. select the theme, then apply 54 | 55 | ```shell 56 | spicetify config current_theme Turntable 57 | spicetify config inject_theme_js 1 58 | spicetify apply 59 | ``` 60 | 61 | ### How to Uninstall 62 | 63 | 1. remove **Turntable** and **rotateTurntable.js** 64 | 65 | ```shell 66 | rm -r ~/.config/spicetify/Themes/Turntable 67 | ``` 68 | 69 | 2. config to spicetify default theme 70 | 71 | ```shell 72 | spicetify config current_theme SpicetifyDefault 73 | ``` 74 | 75 | 3. remove extension - Full App Display 76 | 77 | ```shell 78 | spicetify config extensions fullAppDisplay.js- 79 | ``` 80 | 81 | 4. apply 82 | 83 | ```shell 84 | spicetify apply 85 | ``` 86 | -------------------------------------------------------------------------------- /Turntable/color.ini: -------------------------------------------------------------------------------- 1 | ; empty config to fix `spicetify apply` error ouput 2 | 3 | [turntable] 4 | -------------------------------------------------------------------------------- /Turntable/screenshots/blur_fad.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/Turntable/screenshots/blur_fad.png -------------------------------------------------------------------------------- /Turntable/screenshots/blur_fad_vertical.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/Turntable/screenshots/blur_fad_vertical.png -------------------------------------------------------------------------------- /Turntable/screenshots/fad.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/Turntable/screenshots/fad.png -------------------------------------------------------------------------------- /Turntable/screenshots/fad_vertical.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/Turntable/screenshots/fad_vertical.png -------------------------------------------------------------------------------- /Turntable/screenshots/turntable.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/Turntable/screenshots/turntable.png -------------------------------------------------------------------------------- /Turntable/theme.js: -------------------------------------------------------------------------------- 1 | window.addEventListener("load", rotateTurntable = () => { 2 | const SpicetifyOrigin = Spicetify.Player.origin; 3 | fadBtn = document.querySelector(".main-topBar-button[title='Full App Display']"); 4 | if (!fadBtn){ 5 | const possibleFadBtn = document.querySelectorAll(".main-topBar-button") 6 | for (const btn of possibleFadBtn) { 7 | if (btn._tippy !== undefined && btn._tippy.props.content === "Full App Display") { 8 | fadBtn = btn; 9 | break; 10 | } 11 | } 12 | } 13 | 14 | if (!SpicetifyOrigin?._state || !fadBtn) { 15 | setTimeout(rotateTurntable, 250); 16 | return; 17 | } 18 | 19 | const adModalStyle = document.createElement("style"); 20 | const STYLE_FOR_AD_MODAL = ` 21 | .ReactModalPortal { 22 | display: none 23 | } 24 | `; 25 | adModalStyle.innerHTML = STYLE_FOR_AD_MODAL; 26 | 27 | const fadHeartContainer = document.createElement("div"); 28 | const fadHeart = document.createElement("button"); 29 | const fadHeartSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); 30 | fadHeartContainer.classList.add("fad-heart-container"); 31 | fadHeart.classList.add("fad-heart"); 32 | fadHeartSvg.setAttribute("width", "16"); 33 | fadHeartSvg.setAttribute("height", "16"); 34 | fadHeartSvg.setAttribute("viewBox", "0 0 16 16"); 35 | fadHeart.appendChild(fadHeartSvg); 36 | fadHeartContainer.appendChild(fadHeart); 37 | 38 | const songPreviewContainer = document.createElement("div"); 39 | const previousSong = document.createElement("button"); 40 | const nextSong = document.createElement("button"); 41 | songPreviewContainer.classList.add("song-preview"); 42 | songPreviewContainer.append(previousSong, nextSong); 43 | 44 | const fadArtistSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); 45 | fadArtistSvg.setAttribute("width", "16"); 46 | fadArtistSvg.setAttribute("height", "16"); 47 | fadArtistSvg.setAttribute("viewBox", "0 0 16 16"); 48 | fadArtistSvg.setAttribute("fill", "currentColor"); 49 | fadArtistSvg.innerHTML = Spicetify.SVGIcons.artist; 50 | const fadAlbumSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); 51 | fadAlbumSvg.setAttribute("width", "16"); 52 | fadAlbumSvg.setAttribute("height", "16"); 53 | fadAlbumSvg.setAttribute("viewBox", "0 0 16 16"); 54 | fadAlbumSvg.setAttribute("fill", "currentColor"); 55 | fadAlbumSvg.innerHTML = Spicetify.SVGIcons.album; 56 | 57 | let isPlaying, clickedFadBtn; 58 | 59 | function handleRotate(eventType) { 60 | if (eventType === "load" && !SpicetifyOrigin._state.item) return; 61 | 62 | const coverArt = document.querySelector(".main-nowPlayingWidget-coverArt > .cover-art"); 63 | const fadArt = document.querySelector("#fad-art"); 64 | 65 | if ( 66 | eventType === "load" && !SpicetifyOrigin._state.isPaused 67 | || 68 | eventType === "playpause" && !isPlaying 69 | || 70 | !eventType && isPlaying 71 | ) { 72 | coverArt?.style.setProperty("animation-play-state", "running"); 73 | fadArt?.style.setProperty("animation-play-state", "running"); 74 | if (eventType) isPlaying = true; 75 | } else { 76 | coverArt?.style.setProperty("animation-play-state", "paused"); 77 | fadArt?.style.setProperty("animation-play-state", "paused"); 78 | if (eventType) isPlaying = false; 79 | } 80 | } 81 | 82 | function handleFadBtn(event) { 83 | event.stopPropagation(); 84 | } 85 | 86 | function handleFadControl() { 87 | const fadControlsBtns = document.querySelectorAll("#fad-controls button"); 88 | 89 | for (const fadControl of fadControlsBtns) { 90 | fadControl.addEventListener("dblclick", handleFadBtn); 91 | } 92 | } 93 | 94 | function handleFadHeart() { 95 | const isFadHeartContainer = document.querySelector(".fad-heart-container"); 96 | 97 | const stateItem = SpicetifyOrigin._state.item; 98 | 99 | if (stateItem.isLocal || stateItem.type === "ad") { 100 | isFadHeartContainer?.remove(); 101 | return; 102 | } 103 | 104 | if (!isFadHeartContainer) document.querySelector("#fad-foreground")?.appendChild(fadHeartContainer); 105 | 106 | if (Spicetify.Player.getHeart()) { 107 | fadHeartSvg.innerHTML = Spicetify.SVGIcons["heart-active"]; 108 | fadHeart.classList.add("checked"); 109 | } else { 110 | fadHeartSvg.innerHTML = Spicetify.SVGIcons.heart; 111 | fadHeart.classList.remove("checked"); 112 | } 113 | } 114 | 115 | function handleTracksNamePreview() { 116 | const prevTracks = Spicetify.Queue.prevTracks; 117 | const currentTrack = Spicetify.Queue.track; 118 | const nextTracks = Spicetify.Queue.nextTracks; 119 | 120 | trackCondition = element => !element.contextTrack.metadata.hidden && element.provider !== "ad"; 121 | 122 | const prevTrack = prevTracks.slice().reverse().find(trackCondition); 123 | const nextTrack = nextTracks.find(trackCondition); 124 | 125 | const prevTrackTitle = prevTrack.contextTrack.metadata.title; 126 | const currentTrackTitle = currentTrack.contextTrack.metadata.title; 127 | const nextTrackTitle = nextTrack.contextTrack.metadata.title; 128 | 129 | if (currentTrackTitle === prevTrackTitle && currentTrackTitle === nextTrackTitle) { 130 | previousSong.innerHTML = ""; 131 | nextSong.innerHTML = ""; 132 | } else { 133 | previousSong.innerHTML = `< ${prevTrackTitle}`; 134 | nextSong.innerHTML = `${nextTrackTitle} >`; 135 | } 136 | } 137 | 138 | function handleConfigSwitch() { 139 | const fullAppDisplay = document.querySelector("#full-app-display"); 140 | const fadFg = document.querySelector("#fad-foreground"); 141 | const genericModal = document.querySelector("generic-modal"); 142 | 143 | const stateItem = SpicetifyOrigin._state.item; 144 | 145 | if (!stateItem.isLocal && stateItem.type !== "ad") fadFg.appendChild(fadHeartContainer); 146 | fullAppDisplay.appendChild(songPreviewContainer); 147 | 148 | genericModal.remove(); 149 | 150 | handleIcons(); 151 | handleRotate(); 152 | handleFadControl(); 153 | } 154 | 155 | function handleBackdrop(fullAppDisplay, setBlurBackdropBtn) { 156 | if (!+localStorage.getItem("enableBlurFad")) { 157 | fullAppDisplay.dataset.isBlurFad = "true"; 158 | setBlurBackdropBtn.classList.remove("disabled"); 159 | 160 | localStorage.setItem("enableBlurFad", "1"); 161 | } else { 162 | fullAppDisplay.dataset.isBlurFad = "false"; 163 | setBlurBackdropBtn.classList.add("disabled"); 164 | 165 | localStorage.setItem("enableBlurFad", "0"); 166 | } 167 | } 168 | 169 | function handleIcons() { 170 | const iconsConfig = JSON.parse(localStorage.getItem("full-app-display-config")).icons; 171 | 172 | if (!iconsConfig) return; 173 | 174 | const isFadArtistSvg = document.querySelector("#fad-artist svg"); 175 | const isFadAlbumSvg = document.querySelector("#fad-album svg"); 176 | 177 | if (SpicetifyOrigin._state.item.type === "ad") { 178 | isFadArtistSvg?.remove(); 179 | isFadAlbumSvg?.remove(); 180 | 181 | return; 182 | } 183 | 184 | if (!isFadArtistSvg) { 185 | const fadArtist = document.querySelector("#fad-artist"); 186 | const fadArtistTitle = document.querySelector("#fad-artist span"); 187 | 188 | fadArtist?.insertBefore(fadArtistSvg, fadArtistTitle); 189 | } 190 | 191 | if (!isFadAlbumSvg) { 192 | const fadAlbum = document.querySelector("#fad-album"); 193 | const fadAlbumTitle = document.querySelector("#fad-album span"); 194 | 195 | fadAlbum?.insertBefore(fadAlbumSvg, fadAlbumTitle); 196 | } 197 | } 198 | 199 | function handleContextMenu(fullAppDisplay) { 200 | const configContainer = document.querySelector("#popup-config-container"); 201 | const settingRowReferenceNode = document.querySelectorAll("#popup-config-container > div")[0]; 202 | 203 | const settingRowContainer = document.createElement("div"); 204 | const settingRow = ` 205 |
206 | 207 |
208 | 213 |
214 |
215 | `; 216 | settingRowContainer.innerHTML = settingRow; 217 | configContainer.insertBefore(settingRowContainer, settingRowReferenceNode); 218 | 219 | const configSwitchBtns = document.querySelectorAll("#popup-config-container button.switch"); 220 | const setBlurBackdropBtn = document.querySelector("[data-blur-fad]"); 221 | 222 | for (const configSwitch of configSwitchBtns) { 223 | configSwitch.addEventListener("click", handleConfigSwitch); 224 | } 225 | 226 | setBlurBackdropBtn.addEventListener("click", () => handleBackdrop(fullAppDisplay, setBlurBackdropBtn)); 227 | } 228 | 229 | // Todo 230 | function handleToggleFad(isActive) { 231 | if (isActive) { 232 | document.body.append(adModalStyle); 233 | return; 234 | } 235 | 236 | const billboard = document.querySelector("#view-billboard-ad"); 237 | 238 | billboard?.closest(".ReactModalPortal").remove(); 239 | adModalStyle.remove(); 240 | } 241 | 242 | handleRotate("load"); 243 | 244 | const nowPlayingBarLeft = document.querySelector(".main-nowPlayingBar-left"); 245 | const heartHiddenObserver = new MutationObserver(mutationsList => { 246 | mutationsLoop: 247 | for (const mutation of mutationsList) { 248 | for (const addedNode of mutation.addedNodes) { 249 | if ( 250 | addedNode.matches('svg[class]') 251 | || 252 | addedNode.matches('button[class^="main-addButton-button"]') 253 | ) { 254 | handleFadHeart(); 255 | 256 | break mutationsLoop; 257 | } 258 | } 259 | 260 | for (const removedNode of mutation.removedNodes) { 261 | if ( 262 | removedNode.matches('button[class^="main-addButton-button"]') 263 | ) { 264 | handleFadHeart(); 265 | 266 | break mutationsLoop; 267 | } 268 | } 269 | } 270 | }); 271 | heartHiddenObserver.observe(nowPlayingBarLeft, { 272 | childList: true, 273 | subtree: true, 274 | }); 275 | 276 | const shuffleBtn = document.querySelector(".main-shuffleButton-button"); 277 | const shuffleObserver = new MutationObserver(() => { 278 | setTimeout(handleTracksNamePreview, 500); 279 | }); 280 | shuffleObserver.observe(shuffleBtn, { 281 | attributes: true, 282 | }); 283 | 284 | Spicetify.Player.addEventListener("onplaypause", () => handleRotate("playpause")); 285 | Spicetify.Player.addEventListener("songchange", () => { 286 | setTimeout(() => { 287 | handleIcons(); 288 | handleRotate(); 289 | handleTracksNamePreview(); 290 | }, 500); 291 | }); 292 | 293 | fadHeart.addEventListener("click", Spicetify.Player.toggleHeart); 294 | previousSong.addEventListener("click", () => SpicetifyOrigin.skipToPrevious()); 295 | nextSong.addEventListener("click", () => SpicetifyOrigin.skipToNext()); 296 | 297 | fadHeart.addEventListener("dblclick", handleFadBtn); 298 | previousSong.addEventListener("dblclick", handleFadBtn); 299 | nextSong.addEventListener("dblclick", handleFadBtn); 300 | 301 | function fadBtnClick(){ 302 | const fullAppDisplay = document.querySelector("#full-app-display"); 303 | if (!fullAppDisplay){ 304 | setTimeout(fadBtnClick, 100); 305 | return; 306 | } 307 | 308 | fullAppDisplay.appendChild(songPreviewContainer); 309 | 310 | if (!clickedFadBtn) { 311 | if (+localStorage.getItem("enableBlurFad")) fullAppDisplay.dataset.isBlurFad = "true"; 312 | 313 | handleFadControl(); 314 | 315 | fullAppDisplay.addEventListener("contextmenu", () => handleContextMenu(fullAppDisplay), { once: true }); 316 | 317 | // fullAppDisplay.addEventListener("dblclick", () => handleToggleFad()); 318 | 319 | clickedFadBtn = true; 320 | } 321 | 322 | // handleToggleFad(true); 323 | handleIcons(); 324 | handleFadHeart(); 325 | handleTracksNamePreview(); 326 | handleRotate(); 327 | } 328 | 329 | fadBtn.addEventListener("click", () => fadBtnClick()); 330 | 331 | }); 332 | -------------------------------------------------------------------------------- /Turntable/user.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --spotify-main-color: #1db954; 3 | --round-value: 50%; 4 | --main-blur-backdrop: blur(20px) saturate(180%); 5 | --shine: conic-gradient( 6 | from 15deg, 7 | transparent, 8 | #222 45deg, 9 | transparent 90deg 180deg, 10 | #222 225deg, 11 | transparent 270deg 360deg 12 | ) 13 | } 14 | 15 | 16 | /* Remove Upgrade Button, User Name */ 17 | .main-topBar-UpgradeButton, 18 | .main-userWidget-displayName { 19 | display: none 20 | } 21 | 22 | 23 | /* Notification Dot */ 24 | .main-userWidget-notificationDot { 25 | color: #f00 26 | } 27 | 28 | 29 | /* Navbar */ 30 | .Root__nav-bar { 31 | background-color: #0f0f0f 32 | } 33 | 34 | .main-rootlist-rootlistDividerGradient { 35 | display: none 36 | } 37 | 38 | 39 | /* Search Input */ 40 | .x-searchInput-searchInputInput { 41 | background-color: #2a2a2a 42 | } 43 | 44 | .x-searchInput-searchInputInput, 45 | .x-searchInput-searchInputSearchIcon, 46 | .x-searchInput-searchInputClearButton { 47 | color: #c0c0c0 !important 48 | } 49 | 50 | .x-searchInput-searchInputInput::placeholder { 51 | color: #888 52 | } 53 | 54 | 55 | /* Playlist */ 56 | .main-entityHeader-backgroundColor, 57 | .main-actionBarBackground-background, 58 | .main-topBar-overlay { 59 | background-color: unset !important 60 | } 61 | 62 | .main-entityHeader-overlay { 63 | background: unset 64 | } 65 | 66 | .main-actionBarBackground-background { 67 | background-image: unset 68 | } 69 | 70 | .main-entityHeader-shadow { 71 | box-shadow: unset 72 | } 73 | 74 | .main-topBar-background { 75 | background-color: #181818 !important 76 | } 77 | 78 | .main-rootlist-wrapper [role="row"]:nth-child(odd) { 79 | background: linear-gradient(to right, #121212, #191919, #121212) 80 | } 81 | 82 | 83 | /* Cover Image */ 84 | .main-nowPlayingWidget-coverExpanded { 85 | transform: translateX(-78px) !important; 86 | } 87 | 88 | .main-coverSlotCollapsed-container { 89 | margin-right: 5px 90 | } 91 | 92 | .main-nowPlayingWidget-coverArt .cover-art.shadow, 93 | .main-nowPlayingWidget-coverArt .cover-art-image { 94 | border-radius: var(--round-value) 95 | } 96 | 97 | .main-nowPlayingWidget-coverArt > .cover-art { 98 | clip-path: circle(50% at 50% 50%); 99 | } 100 | 101 | .main-nowPlayingWidget-coverArt .cover-art.shadow { 102 | width: 62px !important; 103 | height: 62px !important; 104 | box-shadow: unset 105 | } 106 | 107 | .main-nowPlayingWidget-coverArt .cover-art-image { 108 | border: 2px solid #aaa; 109 | box-shadow: 0 0 5px rgba(200, 200, 200, .4) 110 | } 111 | 112 | /* Expand & Collapse Button */ 113 | .main-coverSlotCollapsed-expandButton { 114 | top: 50%; 115 | left: 50%; 116 | transform: translate(-50%, -50%) !important 117 | } 118 | 119 | .main-coverSlotCollapsed-expandButton, 120 | .main-coverSlotExpandedCollapseButton-collapseButton { 121 | backdrop-filter: var(--main-blur-backdrop); 122 | background: unset; 123 | background-color: rgba(9, 9, 9, .2); 124 | transition: background-color .5s, opacity .5s; 125 | border-radius: var(--round-value) 126 | } 127 | 128 | .main-coverSlotCollapsed-expandButton:hover, 129 | .main-coverSlotExpandedCollapseButton-collapseButton:hover { 130 | background: unset; 131 | background-color: rgba(9, 9, 9, .3); 132 | transform: unset 133 | } 134 | 135 | .main-coverSlotCollapsed-chevron, 136 | .main-coverSlotExpandedCollapseButton-chevron { 137 | padding: 5px; 138 | fill: #fff; 139 | transition: fill .5s 140 | } 141 | 142 | .main-coverSlotCollapsed-expandButton:hover .main-coverSlotCollapsed-chevron, 143 | .main-coverSlotExpandedCollapseButton-collapseButton:hover .main-coverSlotExpandedCollapseButton-chevron { 144 | fill: #ddd 145 | } 146 | 147 | 148 | /* Progress Bar */ 149 | .Root__now-playing-bar { 150 | position: relative 151 | } 152 | 153 | .playback-bar { 154 | width: 100%; 155 | position: absolute; 156 | top: 0; 157 | left: 0 158 | } 159 | 160 | .playback-progressbar { 161 | height: 4px 162 | } 163 | 164 | .x-progressBar-progressBarBg > div > div { 165 | background-color: var(--spotify-main-color) 166 | } 167 | 168 | .playback-bar__progress-time-elapsed, 169 | .main-playbackBarRemainingTime-container { 170 | position: absolute; 171 | top: 12px; 172 | left: 50% 173 | } 174 | 175 | .playback-bar__progress-time-elapsed { 176 | transform: translateX(calc(-100% - 10px)) 177 | } 178 | 179 | .playback-bar__progress-time-elapsed::after { 180 | position: absolute; 181 | left: calc(100% + 10px); 182 | font-weight: bold; 183 | color: var(--spotify-main-color); 184 | content: "/"; 185 | transform: translateX(-50%) 186 | } 187 | 188 | .main-playbackBarRemainingTime-container { 189 | transform: translateX(10px) 190 | } 191 | 192 | .player-controls { 193 | margin-top: 38px 194 | } 195 | 196 | 197 | /* Full App Display */ 198 | #full-app-display { 199 | background: radial-gradient(#242424, #1f1f1f) 200 | } 201 | 202 | #fad-background { 203 | display: none 204 | } 205 | 206 | #fad-art, 207 | #fad-art-image, 208 | #fad-art-inner { 209 | border-radius: var(--round-value) !important 210 | } 211 | 212 | #fad-art { 213 | width: 268px !important; 214 | margin: 80px 100px; 215 | position: relative 216 | } 217 | 218 | #fad-art-image { 219 | box-shadow: 0 0 10px rgba(3, 3, 3, .5) inset 220 | } 221 | 222 | #fad-art-inner { 223 | display: none 224 | } 225 | 226 | #fad-art::before, #fad-art::after { 227 | width: 100%; 228 | height: 100%; 229 | position: absolute; 230 | top: 0; 231 | left: 0; 232 | border-radius: 50%; 233 | content: '' 234 | } 235 | 236 | #fad-art::before { 237 | background: 238 | var(--shine), 239 | radial-gradient(#333, #000); 240 | box-shadow: 241 | 0 0 5px #0a0a0a inset, 242 | 0 0 5px #000; 243 | transform: scale(1.5) 244 | } 245 | 246 | #fad-art::after { 247 | background-color: rgba(60, 60, 60, .1); 248 | transform: scale(1.65); 249 | z-index: -1 250 | } 251 | 252 | #fad-details { 253 | max-width: 520px !important 254 | } 255 | 256 | #fad-details #fad-title { 257 | font-size: 32px 258 | } 259 | 260 | #fad-details #fad-artist { 261 | margin-top: 10px; 262 | font-size: 24px 263 | } 264 | 265 | #fad-details #fad-album { 266 | margin-top: 6px; 267 | font-size: 16px 268 | } 269 | 270 | #fad-details #fad-artist > *, 271 | #fad-details #fad-album > *, 272 | #fad-details #fad-status > #fad-controls > * > svg { 273 | vertical-align: middle 274 | } 275 | 276 | #fad-details #fad-artist > svg { 277 | width: 24px; 278 | height: 24px 279 | } 280 | 281 | #fad-details #fad-album > svg { 282 | width: 16px; 283 | height: 16px; 284 | margin-left: 4px; 285 | margin-right: 9px 286 | } 287 | 288 | #fad-play > svg { 289 | width: 24px; 290 | height: 24px 291 | } 292 | 293 | #fad-controls > button > svg { 294 | fill: #ccc 295 | } 296 | 297 | #fad-controls > button:hover > svg { 298 | fill: #fff 299 | } 300 | 301 | #fad-progress-container { 302 | font-size: 12px 303 | } 304 | 305 | #fad-elapsed, 306 | #fad-duration { 307 | min-width: 32px !important 308 | } 309 | 310 | #fad-progress { 311 | height: 2px !important; 312 | background-color: rgba(100, 100, 100, .5) !important 313 | } 314 | 315 | #fad-progress-inner { 316 | background-color: var(--spotify-main-color) !important; 317 | box-shadow: unset !important 318 | } 319 | 320 | 321 | /* Blur the Full App Display */ 322 | [data-is-blur-fad = "true"] #fad-background { 323 | display: unset 324 | } 325 | 326 | [data-is-blur-fad = "true"] #fad-art::before { 327 | background: 328 | var(--shine), 329 | radial-gradient(#242424, #000) 330 | } 331 | 332 | [data-is-blur-fad = "true"] #fad-art::after { 333 | background-color: rgba(100, 100, 100, .1); 334 | border: 1px solid rgba(100, 100, 100, .1); 335 | box-shadow: 336 | 0 0 1px rgba(40, 40, 40, .2) inset, 337 | 0 0 1px rgba(200, 200, 200, .2) 338 | } 339 | 340 | [data-is-blur-fad = "true"] #fad-progress { 341 | background-color: rgba(200, 200, 200, .3) !important 342 | } 343 | 344 | 345 | /* Full App Display - heart */ 346 | .fad-heart-container { 347 | width: 40px; 348 | height: 40px; 349 | display: flex; 350 | justify-content: center; 351 | align-items: center 352 | } 353 | 354 | .fad-heart { 355 | width: 16px; 356 | height: 16px; 357 | padding: unset !important; 358 | background-color: unset; 359 | border: unset 360 | } 361 | 362 | .fad-heart svg { 363 | fill: #ccc 364 | } 365 | 366 | .fad-heart svg:hover, 367 | .fad-heart.checked svg { 368 | fill: var(--spotify-main-color) 369 | } 370 | 371 | 372 | /* Full App Display - song preview */ 373 | .song-preview { 374 | width: 100%; 375 | padding: 0 10%; 376 | position: absolute; 377 | bottom: 20px; 378 | display: flex; 379 | justify-content: space-between; 380 | } 381 | 382 | .song-preview > button { 383 | font-size: 14px; 384 | color: #ccc !important; 385 | background-color: unset; 386 | border: unset 387 | } 388 | 389 | .song-preview > button:hover { 390 | color: #fff !important 391 | } 392 | 393 | 394 | /* Responsive */ 395 | @media (max-width: 908px) { 396 | #fad-foreground { 397 | flex-wrap: wrap; 398 | align-content: center 399 | } 400 | 401 | #fad-details { 402 | padding-top: 50px 403 | } 404 | } 405 | 406 | @media (min-width: 1460px) and (min-height: 960px) { 407 | #fad-foreground, 408 | .main-trackCreditsModal-container { 409 | transform: scale(1.2) !important 410 | } 411 | 412 | .song-preview > button { 413 | font-size: 16px 414 | } 415 | } 416 | 417 | /* Rotate turntable */ 418 | .main-nowPlayingWidget-coverArt > .cover-art, 419 | #fad-art { 420 | animation: rotate-cover_img 24s linear infinite 421 | } 422 | 423 | @keyframes rotate-cover_img { 424 | from { 425 | transform: rotate(0) 426 | } 427 | to { 428 | transform: rotate(360deg) 429 | } 430 | } 431 | -------------------------------------------------------------------------------- /Ziro/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021-2022 schnensch 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /Ziro/README.md: -------------------------------------------------------------------------------- 1 | # Ziro 2 | ## Screenshots 3 | ### Blue Dark 4 | ![Album](https://raw.githubusercontent.com/schnensch0/ziro/main/preview/album-blue-dark.png) 5 | ### Blue Light 6 | ![Artist](https://raw.githubusercontent.com/schnensch0/ziro/main/preview/artist-blue-light.png) 7 | ### Gray Dark 8 | ![Cards](https://raw.githubusercontent.com/schnensch0/ziro/main/preview/cards-gray-dark.png) 9 | ### Gray Light 10 | ![Search](https://raw.githubusercontent.com/schnensch0/ziro/main/preview/search-gray-light.png) 11 | ### Green Dark 12 | ![Podcast](https://raw.githubusercontent.com/schnensch0/ziro/main/preview/podcast-green-dark.png) 13 | ### Green Light 14 | ![Podcast](https://raw.githubusercontent.com/schnensch0/ziro/main/preview/podcast-green-light.png) 15 | ### Orange Dark 16 | ![Search](https://raw.githubusercontent.com/schnensch0/ziro/main/preview/search-orange-dark.png) 17 | ### Orange Light 18 | ![Library](https://raw.githubusercontent.com/schnensch0/ziro/main/preview/library-orange-light.png) 19 | ### Purple Dark 20 | ![Single](https://raw.githubusercontent.com/schnensch0/ziro/main/preview/single-purple-dark.png) 21 | ### Purple Light 22 | ![Playlist](https://raw.githubusercontent.com/schnensch0/ziro/main/preview/playlist-purple-light.png) 23 | ### Red Dark 24 | ![Profile](https://raw.githubusercontent.com/schnensch0/ziro/main/preview/profile-red-dark.png) 25 | ### Red Light 26 | ![Queue](https://raw.githubusercontent.com/schnensch0/ziro/main/preview/queue-red-light.png) 27 | ### Rose Pine 28 | ![Playlists](screenshots/rose-pine.jpg) 29 | ### Rose Pine Moon 30 | ![Playlists](screenshots/rose-pine-moon.jpg) 31 | ### Rose Pine Dawn 32 | ![Playlists](screenshots/rose-pine-dawn.jpg) 33 | 34 | ## More 35 | Inspired by the [Zorin GTK theme](https://github.com/ZorinOS/zorin-desktop-themes) and [spot](https://github.com/xou816/spot) 36 | 37 | 38 | -------------------------------------------------------------------------------- /Ziro/color.ini: -------------------------------------------------------------------------------- 1 | ; COLOR EXPLANATION 2 | ; main, sidebar, player = background 3 | ; card = cards, tracklist, dropdowns, input fields 4 | ; shadow = text on button, tab active & selected row 5 | ; selected row = selected song & tab 6 | ; button-active = play button, outline on focused input 7 | ; button = all other buttons 8 | ; button-disabled = volume & seekbar background, scrollbar handle, borders, hover 9 | 10 | [blue-dark] 11 | text = bde6fb 12 | subtext = 6d8692 13 | main = 1e2529 14 | sidebar = 1e2529 15 | player = 1e2529 16 | card = 171d20 17 | shadow = 171d20 18 | selected-row = bde6fb 19 | button = bde6fb 20 | button-active = bde6fb 21 | button-disabled = 2a3439 22 | tab-active = bde6fb 23 | notification = 171d20 24 | notification-error = fb7c7c 25 | misc = 1e2529 26 | 27 | [blue-light] 28 | text = 123354 29 | subtext = 8495a7 30 | main = f5f7fa 31 | sidebar = f5f7fa 32 | player = f5f7fa 33 | card = ffffff 34 | shadow = ffffff 35 | selected-row = 22c5fd 36 | button = 22c5fd 37 | button-active = 22c5fd 38 | button-disabled = c8d0d9 39 | tab-active = 22c5fd 40 | notification = ffffff 41 | notification-error = fb7c7c 42 | misc = f5f7fa 43 | 44 | [gray-dark] 45 | text = ffffff 46 | subtext = 909090 47 | main = 202020 48 | sidebar = 202020 49 | player = 202020 50 | card = 191919 51 | shadow = 191919 52 | selected-row = ffffff 53 | button = ffffff 54 | button-active = ffffff 55 | button-disabled = 313131 56 | tab-active = ffffff 57 | notification = 191919 58 | notification-error = fb7c7c 59 | misc = 202020 60 | 61 | [gray-light] 62 | text = 29292a 63 | subtext = 909091 64 | main = f7f7f7 65 | sidebar = f7f7f7 66 | player = f7f7f7 67 | card = ffffff 68 | shadow = ffffff 69 | selected-row = 61717c 70 | button = 61717c 71 | button-active = 61717c 72 | button-disabled = cecece 73 | tab-active = 61717c 74 | notification = ffffff 75 | notification-error = fb7c7c 76 | misc = f7f7f7 77 | 78 | [green-dark] 79 | text = bbf1dd 80 | subtext = 6b8a7f 81 | main = 1b2421 82 | sidebar = 1b2421 83 | player = 1b2421 84 | card = 151c19 85 | shadow = 151c19 86 | selected-row = bbf1dd 87 | button = bbf1dd 88 | button-active = bbf1dd 89 | button-disabled = 27332f 90 | tab-active = bbf1dd 91 | notification = 151c19 92 | notification-error = fb7c7c 93 | misc = 1b2421 94 | 95 | [green-light] 96 | text = 19483e 97 | subtext = 88a19c 98 | main = f6f9f9 99 | sidebar = f6f9f9 100 | player = f6f9f9 101 | card = e5eceb 102 | shadow = ffffff 103 | selected-row = 2ae18e 104 | button = 2ae18e 105 | button-active = 2ae18e 106 | button-disabled = cad6d4 107 | tab-active = 2ae18e 108 | notification = e5eceb 109 | notification-error = fb7c7c 110 | misc = f6f9f9 111 | 112 | [orange-dark] 113 | text = fcc8b4 114 | subtext = 927367 115 | main = 271e1b 116 | sidebar = 271e1b 117 | player = 271e1b 118 | card = 1e1715 119 | shadow = 1e1715 120 | selected-row = fcc8b4 121 | button = fcc8b4 122 | button-active = fcc8b4 123 | button-disabled = 372b26 124 | tab-active = fcc8b4 125 | notification = 1e1715 126 | notification-error = fb7c7c 127 | misc = 271e1b 128 | 129 | [orange-light] 130 | text = 563b25 131 | subtext = a89a8e 132 | main = faf8f7 133 | sidebar = faf8f7 134 | player = faf8f7 135 | card = ffffff 136 | shadow = ffffff 137 | selected-row = ff8265 138 | button = ff8265 139 | button-active = ff8265 140 | button-disabled = d9d2cd 141 | tab-active = ff8265 142 | notification = ffffff 143 | notification-error = fb7c7c 144 | misc = faf8f7 145 | 146 | [purple-dark] 147 | text = d8c4f1 148 | subtext = 7d718c 149 | main = 221f26 150 | sidebar = 221f26 151 | player = 221f26 152 | card = 1a181e 153 | shadow = 1a181e 154 | selected-row = d8c4f1 155 | button = d8c4f1 156 | button-active = d8c4f1 157 | button-disabled = 302b36 158 | tab-active = d8c4f1 159 | notification = 1a181e 160 | notification-error = fb7c7c 161 | misc = 221f26 162 | 163 | [purple-light] 164 | text = 402b4d 165 | subtext = 9d91a3 166 | main = f9f7f9 167 | sidebar = f9f7f9 168 | player = f9f7f9 169 | card = ffffff 170 | shadow = ffffff 171 | selected-row = 9f74e7 172 | button = 9f74e7 173 | button-active = 9f74e7 174 | button-disabled = d4ced7 175 | tab-active = 9f74e7 176 | notification = ffffff 177 | notification-error = fb7c7c 178 | misc = f9f7f9 179 | 180 | [red-dark] 181 | text = fdb4b4 182 | subtext = 6d8692 183 | main = 271b1b 184 | sidebar = 271b1b 185 | player = 271b1b 186 | card = 1e1515 187 | shadow = 1e1515 188 | selected-row = fdb4b4 189 | button = fdb4b4 190 | button-active = fdb4b4 191 | button-disabled = 372626 192 | tab-active = fdb4b4 193 | notification = 1e1515 194 | notification-error = fb7c7c 195 | misc = 271b1b 196 | 197 | [red-light] 198 | text = 572920 199 | subtext = a9908b 200 | main = faf7f6 201 | sidebar = faf7f6 202 | player = faf7f6 203 | card = ffffff 204 | shadow = ffffff 205 | selected-row = ff5966 206 | button = ff5966 207 | button-active = ff5966 208 | button-disabled = d9cecb 209 | tab-active = ff5966 210 | notification = ffffff 211 | notification-error = fb7c7c 212 | misc = faf7f6 213 | 214 | [rose-pine] 215 | text = e0def4 216 | subtext = 908caa 217 | main = 191724 218 | sidebar = 191724 219 | player = 191724 220 | card = 26233a 221 | shadow = 26233a 222 | selected-row = ebbcba 223 | button = ebbcba 224 | button-active = ebbcba 225 | button-disabled = 1f1d2e 226 | tab-active = ebbcba 227 | notification = 26233a 228 | notification-error = eb6f92 229 | misc = 191724 230 | 231 | [rose-pine-moon] 232 | text = e0def4 233 | subtext = 908caa 234 | main = 232136 235 | sidebar = 232136 236 | player = 232136 237 | card = 393552 238 | shadow = 393552 239 | selected-row = ebbcba 240 | button = ebbcba 241 | button-active = ebbcba 242 | button-disabled = 2a273f 243 | tab-active = ebbcba 244 | notification = 393552 245 | notification-error = eb6f92 246 | misc = 232136 247 | 248 | [rose-pine-dawn] 249 | text = 575279 250 | subtext = 797593 251 | main = f2e9e1 252 | sidebar = f2e9e1 253 | player = f2e9e1 254 | card = faf4ed 255 | shadow = faf4ed 256 | selected-row = d7827e 257 | button = d7827e 258 | button-active = d7827e 259 | button-disabled = faf4ed 260 | tab-active = d7827e 261 | notification = faf4ed 262 | notification-error = b4637a 263 | misc = f2e9e1 264 | 265 | [tokyo-night] 266 | text = B5B9D6 267 | subtext = 747F8D 268 | main = 242638 269 | sidebar = 242638 270 | player = 242638 271 | card = 1C1D2B 272 | shadow = 1C1D2B 273 | selected-row = B5B9D6 274 | button = B5B9D6 275 | button-active = B5B9D6 276 | button-disabled = 747F8D 277 | tab-active = B5B9D6 278 | notification = B5B9D6 279 | notification-error = 747F8D 280 | misc = 1E2529 281 | -------------------------------------------------------------------------------- /Ziro/screenshots/rose-pine-dawn.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/Ziro/screenshots/rose-pine-dawn.jpg -------------------------------------------------------------------------------- /Ziro/screenshots/rose-pine-moon.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/Ziro/screenshots/rose-pine-moon.jpg -------------------------------------------------------------------------------- /Ziro/screenshots/rose-pine.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/Ziro/screenshots/rose-pine.jpg -------------------------------------------------------------------------------- /_Extra/README.md: -------------------------------------------------------------------------------- 1 | # Extras 2 | 3 | This folder contains additional resources for tweaking the look of 4 | Spotify. More info in each subfolder. 5 | 6 | | Folder | Description | 7 | | ----------- | ----------- | 8 | | **SpotifyNoControl** | Hides Spotify Window controls | 9 | -------------------------------------------------------------------------------- /_Extra/SpotifyNoControl/README.md: -------------------------------------------------------------------------------- 1 | # SpotifyNoControl 2 | 3 | Hides Spotify window control buttons. 4 | 5 | ## Usage 6 | 7 | Windows user, please edit your Spotify shortcut and add flag `--transparent-window-controls` after the Spotify.exe: 8 | ![instruction1](./windows-shortcut-instruction.png) 9 | 10 | Alternatively, you can use `SpotifyNoControl.exe`, included in this folder, to completely remove all windows controls and title menu (three dot at top left corner). Title menu still can be access via Alt key. Closing, minimizing can be done via right click menu at top window region.\ 11 | `SpotifyNoControl.exe` could be used as Spotify launcher, it opens Spotify and hides controls right after. You can drag and drop it to your taskbar but make sure you unpin the original Spotify icon first. Alternatively you can make a shortcut for it and add to desktop or start menu.\ 12 | Moreover, by default, Spotify adjusted sidebar items and profile menu icon to stay out of Windows native controls region. If you decided to use `SpotifyNoControl.exe` from now on, please open `user.css` file and change variable `--os-windows-icon-dodge` value to 0 as instruction to snap icons back to their original position. 13 | 14 | ![nocontrol](https://i.imgur.com/qdZyv1t.png) 15 | 16 | ## Alternatives 17 | 18 | If the executable does not work for you, try using 19 | 20 | - [AHK implementation](https://github.com/SaifAqqad/AHK_SpotifyNoControl) 21 | - [julienmaille's implementation](https://github.com/spicetify/spicetify-themes/raw/legacy/Dribbblish/SpotifyNoControl.exe) 22 | -------------------------------------------------------------------------------- /_Extra/SpotifyNoControl/SpotifyNoControl.exe: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/_Extra/SpotifyNoControl/SpotifyNoControl.exe -------------------------------------------------------------------------------- /_Extra/SpotifyNoControl/windows-shortcut-instruction.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/_Extra/SpotifyNoControl/windows-shortcut-instruction.png -------------------------------------------------------------------------------- /manifest.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "name": "SharkBlue", 4 | "description": "SharkBlue", 5 | "preview": "SharkBlue/screenshot.png", 6 | "readme": "SharkBlue/README.md", 7 | "usercss": "SharkBlue/user.css", 8 | "schemes": "SharkBlue/color.ini", 9 | "authors": [ 10 | { 11 | "name": "Mr Biscuit", 12 | "url": "https://github.com/MrBiscuit921" 13 | } 14 | ], 15 | "tags": [ 16 | "latest" 17 | ] 18 | }, 19 | { 20 | "name": "BurntSienna", 21 | "description": "BurntSienna", 22 | "preview": "BurntSienna/screenshot.png", 23 | "readme": "BurntSienna/README.md", 24 | "usercss": "BurntSienna/user.css", 25 | "schemes": "BurntSienna/color.ini", 26 | "authors": [ 27 | { 28 | "name": "pjaspinski", 29 | "url": "https://github.com/pjaspinski" 30 | } 31 | ], 32 | "tags": [ 33 | "latest" 34 | ] 35 | }, 36 | { 37 | "name": "Default", 38 | "description": "Default", 39 | "preview": "Default/ocean.png", 40 | "readme": "Default/README.md", 41 | "usercss": "Default/user.css", 42 | "schemes": "Default/color.ini", 43 | "authors": [ 44 | { 45 | "name": "Blacksuan19", 46 | "url": "https://github.com/Blacksuan19" 47 | } 48 | ], 49 | "tags": [ 50 | "latest" 51 | ] 52 | }, 53 | { 54 | "name": "Dreary", 55 | "description": "Dreary", 56 | "preview": "Dreary/deeper.png", 57 | "readme": "Dreary/README.md", 58 | "usercss": "Dreary/user.css", 59 | "schemes": "Dreary/color.ini", 60 | "authors": [ 61 | { 62 | "name": "CharlieS1103", 63 | "url": "https://github.com/CharlieS1103" 64 | } 65 | ], 66 | "tags": [ 67 | "outdated", 68 | "v1.2.13" 69 | ] 70 | }, 71 | { 72 | "name": "Dribbblish", 73 | "description": "Dribbblish", 74 | "preview": "Dribbblish/base.png", 75 | "readme": "Dribbblish/README.md", 76 | "usercss": "Dribbblish/user.css", 77 | "schemes": "Dribbblish/color.ini", 78 | "include": [ 79 | "https://raw.githubusercontent.com/spicetify/spicetify-themes/master/Dribbblish/theme.js" 80 | ], 81 | "authors": [ 82 | { 83 | "name": "khanhas", 84 | "url": "https://github.com/khanhas" 85 | }, 86 | { 87 | "name": "harbassan", 88 | "url": "https://github.com/harbassan" 89 | } 90 | ], 91 | "tags": [ 92 | "latest" 93 | ] 94 | }, 95 | { 96 | "name": "Matte", 97 | "description": "Has a neat color pallete and a much cleaner interface", 98 | "preview": "Matte/screenshots/ylx-matte.png", 99 | "readme": "Matte/README.md", 100 | "usercss": "Matte/user.css", 101 | "schemes": "Matte/color.ini", 102 | "authors": [ 103 | { 104 | "name": "darkthemer", 105 | "url": "https://github.com/darkthemer" 106 | } 107 | ], 108 | "tags": [ 109 | "latest" 110 | ] 111 | }, 112 | { 113 | "name": "Onepunch", 114 | "description": "Onepunch", 115 | "preview": "Onepunch/screenshots/dark_home.png", 116 | "readme": "Onepunch/README.md", 117 | "usercss": "Onepunch/user.css", 118 | "schemes": "Onepunch/color.ini", 119 | "authors": [ 120 | { 121 | "name": "okarin001", 122 | "url": "https://github.com/okarin001" 123 | } 124 | ], 125 | "tags": [ 126 | "latest" 127 | ] 128 | }, 129 | { 130 | "name": "Sleek", 131 | "description": "Sleek", 132 | "preview": "Sleek/coral.png", 133 | "readme": "Sleek/README.md", 134 | "usercss": "Sleek/user.css", 135 | "schemes": "Sleek/color.ini", 136 | "authors": [ 137 | { 138 | "name": "harbassan", 139 | "url": "https://github.com/harbassan" 140 | } 141 | ], 142 | "tags": [ 143 | "latest" 144 | ] 145 | }, 146 | { 147 | "name": "text", 148 | "description": "a spicetify theme that mimics the look of spotify-tui", 149 | "preview": "text/screenshots/Gruvbox.png", 150 | "readme": "text/README.md", 151 | "usercss": "text/user.css", 152 | "schemes": "text/color.ini", 153 | "authors": [ 154 | { 155 | "name": "darkthemer", 156 | "url": "https://github.com/darkthemer" 157 | } 158 | ], 159 | "tags": [ 160 | "latest" 161 | ] 162 | }, 163 | { 164 | "name": "Turntable", 165 | "description": "Turntable", 166 | "preview": "Turntable/screenshots/turntable.png", 167 | "readme": "Turntable/README.md", 168 | "usercss": "Turntable/user.css", 169 | "schemes": "Turntable/color.ini", 170 | "include": [ 171 | "https://raw.githubusercontent.com/spicetify/spicetify-themes/master/Turntable/theme.js" 172 | ], 173 | "authors": [ 174 | { 175 | "name": "Grason Chan", 176 | "url": "https://github.com/grasonchan" 177 | } 178 | ], 179 | "tags": [ 180 | "latest" 181 | ] 182 | }, 183 | { 184 | "name": "Ziro", 185 | "description": "a smooth theme inspired by zorin os", 186 | "preview": "https://raw.githubusercontent.com/schnensch0/ziro/main/preview/mockup.png", 187 | "readme": "Ziro/README.md", 188 | "usercss": "Ziro/user.css", 189 | "schemes": "Ziro/color.ini", 190 | "authors": [ 191 | { 192 | "name": "schnensch0", 193 | "url": "https://github.com/schnensch0" 194 | } 195 | ], 196 | "tags": [ 197 | "latest" 198 | ] 199 | }, 200 | { 201 | "name": "Flow", 202 | "description": "Spicetify theme that has linear gradient effect and vertical playbar", 203 | "preview": "https://raw.githubusercontent.com/spicetify/spicetify-themes/master/Flow/screenshots/pink.png", 204 | "readme": "Flow/README.md", 205 | "usercss": "Flow/user.css", 206 | "schemes": "Flow/color.ini", 207 | "authors": [ 208 | { 209 | "name": "Ian Liao", 210 | "url": "https://github.com/ian-Liaozy" 211 | }, 212 | { 213 | "name": "Victoria Zhang", 214 | "url": "https://github.com/Ruixi-Zhang" 215 | }, 216 | { 217 | "name": "Yu Sung Lee", 218 | "url": "https://github.com/yslDevelop" 219 | }, 220 | { 221 | "name": "Alex Casieri", 222 | "url": "https://github.com/alexcasieri30" 223 | } 224 | ], 225 | "tags": [ 226 | "latest" 227 | ] 228 | }, 229 | { 230 | "name": "Blossom", 231 | "description": "Blossom Theme, a simple theme.", 232 | "preview": "https://user-images.githubusercontent.com/72624799/203471073-4a5e6cf0-a5dc-4ecc-9a12-56d5fc716ac4.png", 233 | "readme": "Blossom/README.md", 234 | "usercss": "Blossom/user.css", 235 | "schemes": "Blossom/color.ini", 236 | "authors": [ 237 | { 238 | "name": "Robatortas", "url": "https://github.com/Robatortas" 239 | } 240 | ], 241 | "tags": [ 242 | "latest" 243 | ] 244 | }, 245 | { 246 | "name": "StarryNight", 247 | "description": "Starry Night", 248 | "preview": "StarryNight/images/base.png", 249 | "readme": "StarryNight/README.md", 250 | "usercss": "StarryNight/user.css", 251 | "schemes": "StarryNight/color.ini", 252 | "include": [ 253 | "https://raw.githubusercontent.com/spicetify/spicetify-themes/master/StarryNight/theme.js" 254 | ], 255 | "authors": [ 256 | { 257 | "name": "Brandon Chen", 258 | "url": "https://github.com/b-chen00" 259 | }, 260 | { 261 | "name": "Julissa Laignelet", 262 | "url": "https://github.com/laignelet16" 263 | } 264 | ], 265 | "tags": [ 266 | "latest" 267 | ] 268 | } 269 | ] 270 | -------------------------------------------------------------------------------- /text/README.md: -------------------------------------------------------------------------------- 1 | # text 2 | 3 | ## Screenshots 4 | 5 | #### Display Images 6 | 7 | ##### with images 8 | 9 | ![withimg](screenshots/withimg.png) 10 | 11 | ##### without images 12 | 13 | ![withoutimg](screenshots/withoutimg.png) 14 | 15 | ### Spotify 16 | 17 | ![Spotify](screenshots/Spotify.png) 18 | 19 | ### Spicetify 20 | 21 | ![Spicetify](screenshots/Spicetify.png) 22 | 23 | ### CatppuccinMocha 24 | 25 | ![CatppuccinMocha](screenshots/CatppuccinMocha.png) 26 | 27 | ### CatppuccinMacchiato 28 | 29 | ![CatppuccinMacchiato](screenshots/CatppuccinMacchiato.png) 30 | 31 | ### CatppuccinLatte 32 | 33 | ![CatppuccinLatte](screenshots/CatppuccinLatte.png) 34 | 35 | ### Dracula 36 | 37 | ![Dracula](screenshots/Dracula.png) 38 | 39 | ### Gruvbox 40 | 41 | ![Gruvbox](screenshots/Gruvbox.png) 42 | 43 | ### Kanagawa 44 | 45 | ![Kanagawa](screenshots/Kanagawa.png) 46 | 47 | ### Nord 48 | 49 | ![Nord](screenshots/Nord.png) 50 | 51 | ### Rigel 52 | 53 | ![CatppuccinMaRigelcchiato](screenshots/Rigel.png) 54 | 55 | ### RosePine 56 | 57 | ![RosePine](screenshots/RosePine.png) 58 | 59 | ### RosePineMoon 60 | 61 | ![RosePineMoon](screenshots/RosePineMoon.png) 62 | 63 | ### RosePineDawn 64 | 65 | ![RosePineDawn](screenshots/RosePineDawn.png) 66 | 67 | ### Solarized 68 | 69 | ![Solarized](screenshots/Solarized.png) 70 | 71 | ### TokyoNight 72 | 73 | ![TokyoNight](screenshots/TokyoNight.png) 74 | 75 | ### TokyoNightStorm 76 | 77 | ![TokyoNightStorm](screenshots/TokyoNightStorm.png) 78 | 79 | ### ForestGreen 80 | 81 | ![ForestGreen](screenshots/ForestGreen.png) 82 | 83 | ## More 84 | 85 | ### Description 86 | 87 | a spicetify theme that mimics the look of [spotify-tui](https://github.com/Rigellute/spotify-tui) 88 | 89 | ### Credits 90 | 91 | created by [darkthemer](https://github.com/darkthemer/) 92 | 93 | ### Notes 94 | 95 | - **SUGGESTION:** Feel free to edit `color.ini` to swap the accent color (it's green for most of them) into your preferred color based from the color pallete. 96 | 97 | - https://github.com/catppuccin/catppuccin 98 | - https://github.com/dracula/dracula-theme 99 | - https://github.com/morhetz/gruvbox 100 | - https://github.com/rebelot/kanagawa.nvim 101 | - https://github.com/nordtheme/nord 102 | - https://github.com/Rigellute/rigel 103 | - https://github.com/rose-pine/rose-pine-theme 104 | - https://github.com/altercation/solarized 105 | - https://github.com/enkia/tokyo-night-vscode-theme 106 | 107 | - **SUGGESTION:** Check the very top of `user.css` for user settings 108 | 109 | - If you use the Marketplace, go to `Marketplace > Snippets > + Add CSS` and then paste the variables found in `user.css` (also below). Edit these as you wish. If you're following this method, don't forget to add `!important` at the end of each property. 110 | 111 | ```css 112 | /* user settings */ 113 | :root { 114 | --font-family: "JetBrains Mono", monospace; 115 | /* 116 | --font-family: 'Anonymous Pro', monospace; 117 | --font-family: 'Azeret Mono', monospace; 118 | --font-family: 'B612 Mono', monospace; 119 | --font-family: 'Courier Prime', monospace; 120 | --font-family: 'Cousine', monospace; 121 | --font-family: 'Cutive Mono', monospace; 122 | --font-family: 'DM Mono', monospace; 123 | --font-family: 'Fira Code', monospace; 124 | --font-family: 'Fira Mono', monospace; 125 | --font-family: 'IBM Plex Mono', monospace; 126 | --font-family: 'JetBrains Mono', monospace; 127 | --font-family: 'M PLUS 1 Code', monospace; 128 | --font-family: 'Major Mono Display', monospace; 129 | --font-family: 'Monofett', monospace; 130 | --font-family: 'Nova Mono', monospace; 131 | --font-family: 'Overpass Mono', monospace; 132 | --font-family: 'Oxygen Mono', monospace; 133 | --font-family: 'PT Mono', monospace; 134 | --font-family: 'Roboto Mono', monospace; 135 | --font-family: 'Share Tech Mono', monospace; 136 | --font-family: 'Sometype Mono', monospace; 137 | --font-family: 'Sono', monospace; 138 | --font-family: 'Source Code Pro', monospace; 139 | --font-family: 'Space Mono', monospace; 140 | --font-family: 'Syne Mono', monospace; 141 | --font-family: 'Ubuntu Mono', monospace; 142 | --font-family: 'VT323', monospace; 143 | --font-family: 'Xanh Mono', monospace; 144 | */ 145 | --font-size: 14px; 146 | --font-weight: 400; /* 200 : 900 */ 147 | --line-height: 1.2; 148 | 149 | --font-size-lyrics: 14px; /* 1.5em (default) */ 150 | 151 | --font-family-header: "asciid"; 152 | --font-size-multiplier-header: 4; 153 | 154 | --display-card-image: block; /* none | block */ 155 | --display-coverart-image: none; /* none | block */ 156 | --display-header-image: none; /* none | block */ 157 | --display-sidebar-image: block; /* none | block */ 158 | --display-tracklist-image: none; /* none | block */ 159 | --display-spicetify-banner-ascii: block; /* none | block */ 160 | --display-music-banner-ascii: none; /* none | block */ 161 | 162 | --border-radius: 0px; 163 | --border-width: 1px; 164 | --border-style: solid; /* dotted | dashed | solid | double | groove | ridge | inset | outset */ 165 | --border-transition: 0.2s ease; /* 'none' to disable */ 166 | 167 | --global-nav-margin-top: 40px /* set to '0px' if you disabled window controls */ 168 | } 169 | ``` 170 | 171 | - **SUGGESTION:** For Windows users, here's how to make the window controls' background match with the topbar background 172 | 173 | - Enable [CEF/Spotify Tweaks](https://windhawk.net/mods/cef-titlebar-enabler-universal) in Windhawk (recommended) 174 | 175 | - Alternatively, Put this snippet into your `user.css` (or through the Marketplace's `+ Add CSS` feature) 176 | 177 | ```css 178 | /* transparent window controls background */ 179 | .spotify__container--is-desktop:not(.fullscreen) body::after { 180 | content: ""; 181 | position: absolute; 182 | right: 0; 183 | z-index: 999; 184 | backdrop-filter: brightness(2.12); 185 | /* page zoom [ctrl][+] or [ctrl][-] 186 | edit width and height accordingly */ 187 | width: 135px; 188 | /* depending on what global status bar 189 | style is enabled height need to be 190 | changed accordingly. */ 191 | height: 64px; 192 | } 193 | ``` 194 | 195 | ![winctrl](screenshots/winctrl.png) 196 | -------------------------------------------------------------------------------- /text/color.ini: -------------------------------------------------------------------------------- 1 | ; note: most of the accent colors are set to the green of that color scheme, feel free to change it to your preferred color 2 | 3 | [Spotify] 4 | accent = 1db954 5 | accent-active = 1ed760 6 | accent-inactive = 121212 7 | banner = 1ed760 8 | border-active = 1ed760 9 | border-inactive = 535353 10 | header = 535353 11 | highlight = 1a1a1a 12 | main = 121212 13 | notification = 4687d6 14 | notification-error = e22134 15 | subtext = b3b3b3 16 | text = FFFFFF 17 | 18 | [Spicetify] 19 | accent = 00e089 20 | accent-active = 00e089 21 | accent-inactive = 2E2837 22 | banner = 00e089 23 | border-active = 00e089 24 | border-inactive = 483b5b 25 | header = 483b5b 26 | highlight = 483b5b 27 | main = 2E2837 28 | notification = 00e089 29 | notification-error = e22134 30 | subtext = DEDEDE 31 | text = FFFFFF 32 | 33 | [CatppuccinMocha] 34 | ;https://github.com/catppuccin/catppuccin 35 | accent = a6e3a1 36 | accent-active = a6e3a1 37 | accent-inactive = 1e1e2e 38 | banner = a6e3a1 39 | border-active = a6e3a1 40 | border-inactive = 313244 41 | header = 585b70 42 | highlight = 585b70 43 | main = 1e1e2e 44 | notification = 89b4fa 45 | notification-error = f38ba8 46 | subtext = a6adc8 47 | text = cdd6f4 48 | 49 | [CatppuccinMacchiato] 50 | ;https://github.com/catppuccin/catppuccin 51 | accent = a6da95 52 | accent-active = a6da95 53 | accent-inactive = 24273a 54 | banner = a6da95 55 | border-active = a6da95 56 | border-inactive = 363a4f 57 | header = 5b6078 58 | highlight = 5b6078 59 | main = 24273a 60 | notification = 8aadf4 61 | notification-error = ed8796 62 | subtext = a5adcb 63 | text = cad3f5 64 | 65 | [CatppuccinLatte] 66 | ;https://github.com/catppuccin/catppuccin 67 | accent = a6d189 68 | accent-active = a6d189 69 | accent-inactive = 303446 70 | banner = a6d189 71 | border-active = a6d189 72 | border-inactive = 414559 73 | header = 626880 74 | highlight = 626880 75 | main = 303446 76 | notification = 8caaee 77 | notification-error = e78284 78 | subtext = a5adce 79 | text = c6d0f5 80 | 81 | [Dracula] 82 | ;https://github.com/dracula/dracula-theme 83 | accent = 50fa7b 84 | accent-active = 50fa7b 85 | accent-inactive = 282a36 86 | banner = 50fa7b 87 | border-active = 50fa7b 88 | border-inactive = 44475a 89 | header = 44475a 90 | highlight = 44475a 91 | main = 282a36 92 | notification = 8be9fd 93 | notification-error = ff5555 94 | subtext = 6272a4 95 | text = f8f8f2 96 | 97 | [Gruvbox] 98 | ;https://github.com/morhetz/gruvbox/ 99 | accent = 98971a 100 | accent-active = b8bb26 101 | accent-inactive = 282828 102 | banner = b8bb26 103 | border-active = b8bb26 104 | border-inactive = 3c3836 105 | header = 665c54 106 | highlight = 7c6f64 107 | main = 282828 108 | notification = 458588 109 | notification-error = cc241d 110 | subtext = bdae93 111 | text = fbf1c7 112 | 113 | [Kanagawa] 114 | ;https://github.com/rebelot/kanagawa.nvim 115 | accent = 76946A 116 | accent-active = 98BB6C 117 | accent-inactive = 1F1F28 118 | banner = 98BB6C 119 | border-active = 98BB6C 120 | border-inactive = 2A2A37 121 | header = 54546D 122 | highlight = 363646 123 | main = 1F1F28 124 | notification = 7E9CD8 125 | notification-error = E82424 126 | subtext = C8C093 127 | text = DCD7BA 128 | 129 | [Nord] 130 | ;https://github.com/nordtheme/nord 131 | accent = 88c0d0 132 | accent-active = 8fbcbb 133 | accent-inactive = 2e3440 134 | banner = 8fbcbb 135 | border-active = 8fbcbb 136 | border-inactive = 3b4252 137 | header = 4c566a 138 | highlight = 4c566a 139 | main = 2e3440 140 | notification = 5e81ac 141 | notification-error = bf616a 142 | subtext = d8dee9 143 | text = eceff4 144 | 145 | [Rigel] 146 | ;https://github.com/Rigellute/rigel/ 147 | accent = 00cccc 148 | accent-active = 00ffff 149 | accent-inactive = 00384d 150 | banner = 00ffff 151 | border-active = 00cccc 152 | border-inactive = 517f8d 153 | header = 517f8d 154 | highlight = 00384d 155 | main = 002635 156 | notification = 7eb2dd 157 | notification-error = ff5a67 158 | subtext = 77929e 159 | text = b7cff9 160 | 161 | [RosePine] 162 | ;https://github.com/rose-pine/rose-pine-theme 163 | accent = ebbcba 164 | accent-active = ebbcba 165 | accent-inactive = 1f1d2e 166 | banner = ebbcba 167 | border-active = ebbcba 168 | border-inactive = 26233a 169 | header = 6e6a86 170 | highlight = 403d52 171 | main = 191724 172 | notification = 31748f 173 | notification-error = eb6f92 174 | subtext = 908caa 175 | text = e0def4 176 | 177 | [RosePineMoon] 178 | ;https://github.com/rose-pine/rose-pine-theme 179 | accent = ea9a97 180 | accent-active = ea9a97 181 | accent-inactive = 2a273f 182 | banner = ea9a97 183 | border-active = ea9a97 184 | border-inactive = 393552 185 | header = 6e6a86 186 | highlight = 44415a 187 | main = 232136 188 | notification = 3e8fb0 189 | notification-error = eb6f92 190 | subtext = 908caa 191 | text = e0def4 192 | 193 | [RosePineDawn] 194 | ;https://github.com/rose-pine/rose-pine-theme 195 | accent = d7827e 196 | accent-active = d7827e 197 | accent-inactive = fffaf3 198 | banner = d7827e 199 | border-active = d7827e 200 | border-inactive = f2e9e1 201 | header = 9893a5 202 | highlight = dfdad9 203 | main = faf4ed 204 | notification = 286983 205 | notification-error = b4637a 206 | subtext = 797593 207 | text = 575279 208 | 209 | [Solarized] 210 | ;https://github.com/altercation/solarized 211 | accent = 859900 212 | accent-active = 859900 213 | accent-inactive = 073642 214 | banner = 859900 215 | border-active = 859900 216 | border-inactive = 073642 217 | header = 586e75 218 | highlight = 073642 219 | main = 002b36 220 | notification = 268bd2 221 | notification-error = dc322f 222 | subtext = 586e75 223 | text = 839496 224 | 225 | [TokyoNight] 226 | ;https://github.com/enkia/tokyo-night-vscode-theme 227 | accent = 9ece6a 228 | accent-active = 9ece6a 229 | accent-inactive = 1a1b26 230 | banner = 9ece6a 231 | border-active = 9ece6a 232 | border-inactive = 24283b 233 | header = 565f89 234 | highlight = 24283b 235 | main = 1a1b26 236 | notification = 7aa2f7 237 | notification-error = f7768e 238 | subtext = 565f89 239 | text = a9b1d6 240 | 241 | [TokyoNightStorm] 242 | ;https://github.com/enkia/tokyo-night-vscode-theme 243 | accent = 9ece6a 244 | accent-active = 9ece6a 245 | accent-inactive = 24283b 246 | banner = 9ece6a 247 | border-active = 9ece6a 248 | border-inactive = 414868 249 | header = 9aa5ce 250 | highlight = 414868 251 | main = 24283b 252 | notification = 7aa2f7 253 | notification-error = f7768e 254 | subtext = 9aa5ce 255 | text = c0caf5 256 | 257 | [ForestGreen] 258 | accent = 939393 259 | accent-active = 939393 260 | accent-inactive = 3e3e29 261 | banner = 939393 262 | border-active = 939393 263 | border-inactive = 515235 264 | header = 656641 265 | highlight = 656641 266 | main = 3e3e29 267 | notification = 8c8e59 268 | notification-error = 787a4d 269 | subtext = 838383 270 | text = a3a3a3 271 | -------------------------------------------------------------------------------- /text/screenshots/CatppuccinLatte.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/text/screenshots/CatppuccinLatte.png -------------------------------------------------------------------------------- /text/screenshots/CatppuccinMacchiato.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/text/screenshots/CatppuccinMacchiato.png -------------------------------------------------------------------------------- /text/screenshots/CatppuccinMocha.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/text/screenshots/CatppuccinMocha.png -------------------------------------------------------------------------------- /text/screenshots/Dracula.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/text/screenshots/Dracula.png -------------------------------------------------------------------------------- /text/screenshots/ForestGreen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/text/screenshots/ForestGreen.png -------------------------------------------------------------------------------- /text/screenshots/Gruvbox.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/text/screenshots/Gruvbox.png -------------------------------------------------------------------------------- /text/screenshots/Kanagawa.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/text/screenshots/Kanagawa.png -------------------------------------------------------------------------------- /text/screenshots/Nord.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/text/screenshots/Nord.png -------------------------------------------------------------------------------- /text/screenshots/Rigel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/text/screenshots/Rigel.png -------------------------------------------------------------------------------- /text/screenshots/RosePine.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/text/screenshots/RosePine.png -------------------------------------------------------------------------------- /text/screenshots/RosePineDawn.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/text/screenshots/RosePineDawn.png -------------------------------------------------------------------------------- /text/screenshots/RosePineMoon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/text/screenshots/RosePineMoon.png -------------------------------------------------------------------------------- /text/screenshots/Solarized.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/text/screenshots/Solarized.png -------------------------------------------------------------------------------- /text/screenshots/Spicetify.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/text/screenshots/Spicetify.png -------------------------------------------------------------------------------- /text/screenshots/Spotify.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/text/screenshots/Spotify.png -------------------------------------------------------------------------------- /text/screenshots/TokyoNight.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/text/screenshots/TokyoNight.png -------------------------------------------------------------------------------- /text/screenshots/TokyoNightStorm.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/text/screenshots/TokyoNightStorm.png -------------------------------------------------------------------------------- /text/screenshots/winctrl.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/text/screenshots/winctrl.png -------------------------------------------------------------------------------- /text/screenshots/withimg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/text/screenshots/withimg.png -------------------------------------------------------------------------------- /text/screenshots/withoutimg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spicetify/spicetify-themes/0893ed8938f1fdc05d34e5c989941358f479ad84/text/screenshots/withoutimg.png --------------------------------------------------------------------------------