diff --git a/Default/README.md b/Default/README.md new file mode 100644 index 0000000..f79e058 --- /dev/null +++ b/Default/README.md @@ -0,0 +1,13 @@ +# Default + +Default look of Spotify with different color schemes. + +## Screenshot + +![screenshot](./ocean.png) + +## Info + +### Ocean + +Part of material ocean themes, [checkout here](https://github.com/material-ocean) for the same theme for different applications. By @Blacksuan19 diff --git a/Default/color.ini b/Default/color.ini new file mode 100644 index 0000000..4d58be9 --- /dev/null +++ b/Default/color.ini @@ -0,0 +1,16 @@ +[Ocean] +text = FFFFFF +subtext = F1F1F1 +main = 0F111A +sidebar = 0F111A +player = 0F111A +card = 00010A +shadow = 0F111A +selected-row = F1F1F1 +button = FF4151 +button-active = F1F1F1 +button-disabled = 434C5E +tab-active = FF4151 +notification = 00010A +notification-error = FF4151 +misc = 00010A diff --git a/Default/ocean.png b/Default/ocean.png new file mode 100644 index 0000000..7f24416 Binary files /dev/null and b/Default/ocean.png differ diff --git a/Onepunch/.gitignore b/Onepunch/.gitignore new file mode 100644 index 0000000..b7ff13a --- /dev/null +++ b/Onepunch/.gitignore @@ -0,0 +1 @@ +.DS_STORE \ No newline at end of file diff --git a/Onepunch/LICENSE b/Onepunch/LICENSE new file mode 100644 index 0000000..c3c2c50 --- /dev/null +++ b/Onepunch/LICENSE @@ -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. diff --git a/Onepunch/README.md b/Onepunch/README.md new file mode 100644 index 0000000..66aa575 --- /dev/null +++ b/Onepunch/README.md @@ -0,0 +1,26 @@ +# Onepunch +## Screenshots +![Home](./__Home.png) +![Profile](./__Profile.png) +![Playlist](./__Playlist.png) + +## 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. diff --git a/Onepunch/__Home.png b/Onepunch/__Home.png new file mode 100644 index 0000000..4509f54 Binary files /dev/null and b/Onepunch/__Home.png differ diff --git a/Onepunch/__Playlist.png b/Onepunch/__Playlist.png new file mode 100644 index 0000000..88e1e5e Binary files /dev/null and b/Onepunch/__Playlist.png differ diff --git a/Onepunch/__Profile.png b/Onepunch/__Profile.png new file mode 100644 index 0000000..7e48351 Binary files /dev/null and b/Onepunch/__Profile.png differ diff --git a/Onepunch/color.ini b/Onepunch/color.ini new file mode 100644 index 0000000..53a4343 --- /dev/null +++ b/Onepunch/color.ini @@ -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 \ No newline at end of file diff --git a/Onepunch/user.css b/Onepunch/user.css new file mode 100644 index 0000000..5baca33 --- /dev/null +++ b/Onepunch/user.css @@ -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; +} */ \ No newline at end of file diff --git a/README.md b/README.md index df0be19..bc32b3a 100644 --- a/README.md +++ b/README.md @@ -50,7 +50,6 @@ If you want to add your theme: [Specify any needed font; (optionally) author name and/or any other info about the theme] ``` - * Add the theme preview to [THEMES.md](./THEMES.md) (themes are in alphabetical order) following this structure if it has only one color scheme ```markdown @@ -75,7 +74,7 @@ If you want to add your theme: ... ``` -* Open a Pull Request +* Open a Pull Request and mention the most important changes you've made to the UI (ignoring the color scheme) **Thanks to all the contributors.** diff --git a/THEMES.md b/THEMES.md index c2be577..dfeaab9 100644 --- a/THEMES.md +++ b/THEMES.md @@ -2,6 +2,14 @@ Here you can find a preview of all the themes. Some of them may have different colour schemes (in that case you'll find different entries in the same theme, each one named after the colour scheme). +## Default + +![Ocean Screenshot](Default/ocean.png) + ## Pscyho ![Psycho Screenshot](/Psycho/screenshot.png) + +## Onepunch + +![Onepunch](Onepunch/\__Home.png)