mirror of
https://github.com/morpheusthewhite/spicetify-themes.git
synced 2024-11-21 18:32:45 +01:00
Added support for spicetify_v2 (New Spotify UI)
Here you go...It's done I guess... (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧ - Added dark/light mode schemes - Changed to the new Spotify UI - Removed that icon shit I was doing.
This commit is contained in:
okarin001
parent
e615e963eb
commit
95ecb038d2
1
Onepunch/.gitignore
vendored
Normal file
1
Onepunch/.gitignore
vendored
Normal file
@ -0,0 +1 @@
|
||||
.DS_STORE
|
||||
21
Onepunch/LICENSE
Normal file
21
Onepunch/LICENSE
Normal file
@ -0,0 +1,21 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2021 okarin001
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
26
Onepunch/README.md
Normal file
26
Onepunch/README.md
Normal file
@ -0,0 +1,26 @@
|
||||
# Onepunch
|
||||
## Screenshots
|
||||
|
||||
|
||||
|
||||
|
||||
## More
|
||||
|
||||
#### About
|
||||
A simple gruvified spotify theme.
|
||||
|
||||
#### First Aid Kit ¯\\_(ツ)\_/¯
|
||||
|
||||
- To change color schemes **`spicetify config color_scheme color_scheme_name`** (change the **`color_scheme_name`** to dark/light)
|
||||
- Tested on macOS only and pretty much everything worked. ﾍ(･_|
|
||||
|
||||
#### On my list
|
||||
- [x] Gruvified and updated to the new UI.
|
||||
- [x] Added **dark/light** mode.
|
||||
- [x] Almost everything looks fine
|
||||
- [x] Yeeted the idea of changing icons. 〜〜(／￣▽)／ 〜ф
|
||||
- [ ] Yet to fix some minor color mismatch.
|
||||
|
||||
|
||||
#### Contact
|
||||
Go **[here](https://github.com/okarin001/Onepunch/issues)** and _check/create_ an issue in case you face any probelm.
|
||||
BIN
Onepunch/__Home.png
Normal file
BIN
Onepunch/__Home.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 364 KiB |
BIN
Onepunch/__Playlist.png
Normal file
BIN
Onepunch/__Playlist.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 462 KiB |
BIN
Onepunch/__Profile.png
Normal file
BIN
Onepunch/__Profile.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 431 KiB |
41
Onepunch/color.ini
Normal file
41
Onepunch/color.ini
Normal file
@ -0,0 +1,41 @@
|
||||
[dark]
|
||||
; gruvbox dark mode
|
||||
text = d5c4a1
|
||||
subtext = fabd2f
|
||||
extratext = d3869b
|
||||
main = 1d2021
|
||||
sidebar = 1d2021
|
||||
player = 1d2021
|
||||
sec-player = 3c3836
|
||||
card = fb4934
|
||||
sec-card = 665c54
|
||||
shadow = 000000
|
||||
selected-row = d3869b
|
||||
button = 8ec07c
|
||||
button-active = 8ec07c
|
||||
button-disabled = 665c54
|
||||
tab-active = b8bb26
|
||||
notification = b8bb26
|
||||
notification-error = e22134
|
||||
misc = 83a598
|
||||
|
||||
[light]
|
||||
; gruvbox light mode
|
||||
text = 504945
|
||||
subtext = b57614
|
||||
extratext = 8f3f71
|
||||
main = f9f5d7
|
||||
sidebar = f9f5d7
|
||||
player = f9f5d7
|
||||
sec-player = ebdbb2
|
||||
card = 9d0006
|
||||
sec-card = bdae93
|
||||
shadow = d5c4a1
|
||||
selected-row = 8f3f71
|
||||
button = 427b58
|
||||
button-active = 427b58
|
||||
button-disabled = bdae93
|
||||
tab-active = 79740e
|
||||
notification = 79740e
|
||||
notification-error = e22134
|
||||
misc = 076678
|
||||
338
Onepunch/user.css
Normal file
338
Onepunch/user.css
Normal file
@ -0,0 +1,338 @@
|
||||
/* sidebar edits */
|
||||
.main-navBar-navBarLinkActive,
|
||||
.main-navBar-navBarLinkActive:focus,
|
||||
.logo {
|
||||
background-color: var(--spice-card) !important;
|
||||
color: var(--spice-main) !important;
|
||||
}
|
||||
|
||||
.main-likedSongsButton-likedSongsIcon,
|
||||
.main-createPlaylistButton-createPlaylistIcon,
|
||||
.main-yourEpisodesButton-yourEpisodesIcon {
|
||||
background: var(--spice-text) !important;
|
||||
border-radius: 0px !important;
|
||||
}
|
||||
|
||||
.main-collectionLinkButton-collectionLinkButton {
|
||||
color: var(--spice-main) !important;
|
||||
}
|
||||
|
||||
.main-collectionLinkButton-collectionLinkButton .main-collectionLinkButton-collectionLinkText,
|
||||
.main-createPlaylistButton-button {
|
||||
color: var(--spice-text) !important;
|
||||
}
|
||||
|
||||
.main-collectionLinkButton-collectionLinkButton.main-collectionLinkButton-selected .main-collectionLinkButton-icon {
|
||||
opacity: .7 !important;
|
||||
}
|
||||
|
||||
|
||||
.main-rootlist-rootlistDividerGradient {
|
||||
background: linear-gradient(180deg, var(--spice-main), transparent);
|
||||
}
|
||||
|
||||
.main-rootlist-rootlistDivider {
|
||||
background-color: unset !important;
|
||||
}
|
||||
|
||||
/* top queue */
|
||||
.queue-tabBar-active {
|
||||
background-color: var(--spice-card) !important;
|
||||
}
|
||||
|
||||
.queue-tabBar-headerItemLink {
|
||||
color: var(--spice-text) !important;
|
||||
}
|
||||
|
||||
/* header colored backgrounds */
|
||||
.main-home-homeHeader,
|
||||
.x-441-entityHeader-overlay,
|
||||
.main-actionBarBackground-background,
|
||||
.main-entityHeader-overlay,
|
||||
.main-entityHeader-backgroundColor,
|
||||
.x-914-entityHeader-overlay,
|
||||
.x-914-actionBarBackground-background {
|
||||
background-color: unset !important;
|
||||
background-image: unset !important;
|
||||
}
|
||||
|
||||
/* play button in main page */
|
||||
.main-playButton-PlayButton.main-playButton-primary {
|
||||
color: var(--spice-main);
|
||||
background-color: var(--spice-button);
|
||||
}
|
||||
|
||||
.connect-title,
|
||||
.connect-header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Topbar visibility bug */
|
||||
.main-topBar-topbarContent:not(.main-topBar-topbarContentFadeIn)>* {
|
||||
opacity: unset !important;
|
||||
}
|
||||
|
||||
.main-entityHeader-topbarContent:not(.main-entityHeader-topbarContentFadeIn)>* {
|
||||
opacity: 0 !important;
|
||||
}
|
||||
|
||||
/* Remove Topbar background colour */
|
||||
.main-topBar-background {
|
||||
background-color: unset !important;
|
||||
}
|
||||
|
||||
.main-topBar-overlay,
|
||||
.x-441-actionBarBackground-background {
|
||||
background-color: var(--spice-main) !important;
|
||||
}
|
||||
|
||||
.main-entityHeader-shadow {
|
||||
box-shadow: 0 04px 20px #21212130;
|
||||
}
|
||||
|
||||
.main-trackList-playingIcon {
|
||||
filter: hue-rotate(270deg);
|
||||
}
|
||||
|
||||
span.artist-artistVerifiedBadge-badge svg:nth-child(1) {
|
||||
fill: black;
|
||||
}
|
||||
|
||||
|
||||
/* details metadata */
|
||||
.main-entityTitle-subtitle.main-entityTitle-gray,
|
||||
.main-entityHeader-metaDataText {
|
||||
color: var(--spice-text) !important;
|
||||
}
|
||||
|
||||
.main-duration-container {
|
||||
color: var(--spice-subtext);
|
||||
}
|
||||
|
||||
.main-entityTitle-subtitle {
|
||||
color: var(--spice-extratext);
|
||||
}
|
||||
|
||||
/* artist page edits*/
|
||||
.main-entityHeader-background.main-entityHeader-gradient {
|
||||
opacity: .4;
|
||||
}
|
||||
|
||||
.main-entityHeader-background.main-entityHeader-overlay:after {
|
||||
background-image: linear-gradient(transparent, transparent), linear-gradient(var(--spice-main), var(--spice-main));
|
||||
}
|
||||
|
||||
.artist-artistPick-pickComment {
|
||||
background: unset !important;
|
||||
border-radius: 0px !important;
|
||||
border-bottom: solid 2px var(--spice-text) !important;
|
||||
color: var(--spice-text) !important;
|
||||
}
|
||||
|
||||
.artist-artistSavedTracks-imageContainer .artist-artistSavedTracks-heartIcon {
|
||||
color: var(--spice-card);
|
||||
}
|
||||
|
||||
/* home screen edits */
|
||||
.view-homeShortcutsGrid-name {
|
||||
color: var(--spice-button);
|
||||
}
|
||||
|
||||
|
||||
.main-shelf-title {
|
||||
color: var(--spice-subtext)
|
||||
}
|
||||
|
||||
.view-homeShortcutsGrid-shortcut,
|
||||
.view-homeShortcutsGrid-shortcut .view-homeShortcutsGrid-imageWrapper,
|
||||
.main-cardImage-imageWrapper,
|
||||
.main-cardImage-imagePlaceholder,
|
||||
.main-cardImage-image {
|
||||
border-radius: 10px !important;
|
||||
}
|
||||
|
||||
.view-homeShortcutsGrid-shortcut .view-homeShortcutsGrid-image {
|
||||
border-radius: 10px 0 0 10px !important;
|
||||
}
|
||||
|
||||
.main-cardImage-circular,
|
||||
.main-entityHeader-circle {
|
||||
border-radius: 50% !important;
|
||||
}
|
||||
|
||||
.main-entityHeader-image {
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
|
||||
/* inside a page edits */
|
||||
.main-addButton-button {
|
||||
color: rgba(var(--spice-rgb-card), .7) !important;
|
||||
}
|
||||
|
||||
.main-trackList-trackListRow.main-trackList-active .main-trackList-rowMarker,
|
||||
.main-trackList-trackListRow.main-trackList-active .main-trackList-rowTitle {
|
||||
color: var(--spice-subtext) !important;
|
||||
}
|
||||
|
||||
.main-trackList-rowTitle {
|
||||
color: var(--spice-text) !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* friend activity */
|
||||
.main-buddyFeed-activityMetadata .main-buddyFeed-artistAndTrackName a,
|
||||
.main-buddyFeed-activityMetadata .main-buddyFeed-playbackContext a,
|
||||
.main-buddyFeed-activityMetadata .main-buddyFeed-usernameAndTimestamp a {
|
||||
color: var(--spice-text) !important;
|
||||
}
|
||||
|
||||
.main-buddyFeed-activityMetadata .main-buddyFeed-username a {
|
||||
color: var(--spice-subtext) !important;
|
||||
}
|
||||
|
||||
.main-avatar-avatar.main-avatar-withBadge:after {
|
||||
background: var(--spice-extratext);
|
||||
}
|
||||
|
||||
/* setting menu */
|
||||
|
||||
input:checked~.x-533-toggle-indicatorWrapper {
|
||||
background-color: rgba(var(--spice-rgb-button), .4) !important;
|
||||
}
|
||||
|
||||
input:checked~.x-533-toggle-indicatorWrapper .x-533-toggle-indicator {
|
||||
background-color: var(--spice-button) !important;
|
||||
}
|
||||
|
||||
.x-533-toggle-indicator {
|
||||
background: var(--spice-button) !important;
|
||||
}
|
||||
|
||||
|
||||
/* search page edits */
|
||||
|
||||
input {
|
||||
background-color: unset !important;
|
||||
border-bottom: solid 2px var(--spice-text) !important;
|
||||
border-radius: 0 !important;
|
||||
color: var(--spice-text) !important;
|
||||
}
|
||||
|
||||
.x-833-searchInput-searchInputSearchIcon {
|
||||
color: var(--spice-text) !important;
|
||||
}
|
||||
|
||||
.x-833-heroCategoryCard-heroTitle,
|
||||
.x-833-categoryCard-title {
|
||||
color: var(--spice-main) !important;
|
||||
}
|
||||
|
||||
|
||||
/* menu and dropdown menus including the user menu */
|
||||
.main-type-mesto,
|
||||
.x-533-dropDown-dropDown {
|
||||
color: var(--spice-text) !important;
|
||||
}
|
||||
|
||||
.main-userWidget-box {
|
||||
background-color: unset !important;
|
||||
border-radius: 0px !important;
|
||||
border-bottom: solid 2px var(--spice-text) !important;
|
||||
color: var(--spice-text) !important;
|
||||
}
|
||||
|
||||
.main-userWidget-box:focus,
|
||||
.main-userWidget-box:hover,
|
||||
.main-userWidget-box[data-context-menu-open=true] {
|
||||
background-color: rgba(var(--spice-rgb-button), .5) !important;
|
||||
border-radius: 10px !important;
|
||||
}
|
||||
|
||||
.main-avatar-image {
|
||||
padding-bottom: 8% !important;
|
||||
}
|
||||
|
||||
/* card edits */
|
||||
|
||||
.main-card-card a,
|
||||
.main-card-card button {
|
||||
color: var(--spice-extratext);
|
||||
}
|
||||
|
||||
.main-card-card:hover,
|
||||
.main-card-card[data-context-menu-open=true] {
|
||||
background-color: rgba(var(--spice-rgb-sec-card), .3) !important;
|
||||
}
|
||||
|
||||
.main-contextMenu-menu,
|
||||
.main-card-card:focus-within,
|
||||
|
||||
.main-deletePlaylistDialog-container {
|
||||
background-color: var(--spice-sec-card) !important;
|
||||
}
|
||||
|
||||
|
||||
/* mini player edits */
|
||||
|
||||
.progress-bar--is-active .progress-bar__fg,
|
||||
:not(.no-focus-outline) .progress-bar:focus-within .progress-bar__fg {
|
||||
background-color: var(--fg-color);
|
||||
}
|
||||
|
||||
.main-shuffleButton-button.main-shuffleButton-on,
|
||||
.main-repeatButton-button.main-repeatButton-on {
|
||||
color: var(--spice-button) !important;
|
||||
}
|
||||
|
||||
.cover-art--with-auto-height {
|
||||
border: solid var(--spice-sec-player) 5px !important;
|
||||
}
|
||||
|
||||
.cover-art,
|
||||
.cover-art .cover-art-image {
|
||||
border-radius: 10px;
|
||||
background-color: var(--spice-sec-player) !important;
|
||||
}
|
||||
|
||||
.main-nowPlayingBar-container {
|
||||
background-color: var(--spice-sec-player) !important;
|
||||
border-top: unset !important;
|
||||
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*
|
||||
|
||||
i am unable to remove the small album cover when we expand the
|
||||
album art. So for now i am disabling these edits. If anyone wants
|
||||
to contribute feel free to create a pull request on my repo.
|
||||
|
||||
*/
|
||||
|
||||
|
||||
/* .main-nowPlayingBar-container {
|
||||
border-radius: 15px !important;
|
||||
} */
|
||||
/* .Root__now-playing-bar {
|
||||
position: fixed;
|
||||
bottom: 5px;
|
||||
left: 14%;
|
||||
width: 70%;
|
||||
background: none !important;
|
||||
} */
|
||||
|
||||
/* .main-coverSlotExpanded-container {
|
||||
height: auto;
|
||||
position: fixed;
|
||||
bottom: 70px;
|
||||
left: 14.5%;
|
||||
width: 17.85%;
|
||||
} */
|
||||
|
||||
/* .main-connectBar-connectBar {
|
||||
display: none;
|
||||
} */
|
||||
Loading…
Reference in New Issue
Block a user