Merge pull request #431 from okarin001/v2

UPDATE

Onepunch/README.md

@@ -1,26 +1,46 @@
 # Onepunch
+
 ## Screenshots
-![Home](./__Home.png)
-![Profile](./__Profile.png)
-![Playlist](./__Playlist.png)
+
+#### dark
+
+|   ![dark_home](./screenshots/dark_home.png)   |   ![dark_album](./screenshots/dark_album.png)   | ![dark_playlist](./screenshots/dark_playlist.png) |
+| :-------------------------------------------: | :---------------------------------------------: | :-----------------------------------------------: |
+|                     home                      |                      album                      |                     playlist                      |
+| ![dark_podcast](screenshots/dark_podcast.png) | ![dark_profile](./screenshots/dark_profile.png) |
+|                    podcat                     |                     profile                     |
+
+#### light
+
+|   ![light_home](./screenshots/light_home.png)   |   ![light_album](./screenshots/light_album.png)   | ![light_playlist](./screenshots/light_playlist.png) |
+| :---------------------------------------------: | :-----------------------------------------------: | :-------------------------------------------------: |
+|                      home                       |                       album                       |                      playlist                       |
+| ![light_podcast](screenshots/light_podcast.png) | ![light_profile](./screenshots/light_profile.png) |
+|                     podcat                      |                      profile                      |
 
 ## More
 
-#### About
-A simple gruvified spotify theme. 
+### About
 
-#### First Aid Kit  ¯\\_(ツ)\_/¯
+A simple gruvified spotify theme. Move to [Extra Preview](#extra-preview) for more screenshots.
 
-- 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. ﾍ(･_|
+### Information
 
-#### 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.
+- To apply this theme:
 
+  ```shell
+  # for dark theme
+  spicetify config current_theme Onepunch color_scheme dark
+  spicetify apply
 
-#### Contact
-Go **[here](https://github.com/okarin001/Onepunch/issues)** and _check/create_ an issue in case you face any probelm. 
+  #for light theme
+  spicetify config current_theme Onepunch color_scheme light
+  spicetify apply
+
+  ```
+
+- Tested on macOS only and pretty much everything worked. ﾍ(･\_|
+
+### Contact
+
+Go **[here](https://github.com/okarin001/Onepunch/issues)** and _check/create_ an issue in case you face any probelm.

Onepunch/color.ini

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

Onepunch/user.css

@@ -2,7 +2,7 @@
 .main-navBar-navBarLinkActive,
 .main-navBar-navBarLinkActive:focus,
 .logo {
-  background-color: var(--spice-card) !important;
+  background-color: var(--spice-sec-card) !important;
   color: var(--spice-main) !important;
 }
 
@@ -17,16 +17,19 @@
   color: var(--spice-main) !important;
 }
 
-.main-collectionLinkButton-collectionLinkButton .main-collectionLinkButton-collectionLinkText,
-.main-createPlaylistButton-button {
+.main-collectionLinkButton-collectionLinkButton
+  .main-collectionLinkButton-collectionLinkText,
+.main-createPlaylistButton-button,
+.main-rootlist-rootlistItemLink:link,
+.main-rootlist-rootlistItemLink:visited {
   color: var(--spice-text) !important;
 }
 
-.main-collectionLinkButton-collectionLinkButton.main-collectionLinkButton-selected .main-collectionLinkButton-icon {
-  opacity: .7 !important;
+.main-collectionLinkButton-collectionLinkButton.main-collectionLinkButton-selected
+  .main-collectionLinkButton-icon {
+  opacity: 0.7 !important;
 }
 
-
 .main-rootlist-rootlistDividerGradient {
   background: linear-gradient(180deg, var(--spice-main), transparent);
 }
@@ -51,7 +54,9 @@
 .main-entityHeader-overlay,
 .main-entityHeader-backgroundColor,
 .x-914-entityHeader-overlay,
-.x-914-actionBarBackground-background {
+.x-entityHeader-overlay,
+.x-914-actionBarBackground-background,
+.x-actionBarBackground-background {
   background-color: unset !important;
   background-image: unset !important;
 }
@@ -68,11 +73,12 @@
 }
 
 /* Topbar visibility bug */
-.main-topBar-topbarContent:not(.main-topBar-topbarContentFadeIn)>* {
+.main-topBar-topbarContent:not(.main-topBar-topbarContentFadeIn) > * {
   opacity: unset !important;
 }
 
-.main-entityHeader-topbarContent:not(.main-entityHeader-topbarContentFadeIn)>* {
+.main-entityHeader-topbarContent:not(.main-entityHeader-topbarContentFadeIn)
+  > * {
   opacity: 0 !important;
 }
 
@@ -98,7 +104,6 @@ span.artist-artistVerifiedBadge-badge svg:nth-child(1) {
   fill: black;
 }
 
-
 /* details metadata */
 .main-entityTitle-subtitle.main-entityTitle-gray,
 .main-entityHeader-metaDataText {
@@ -115,11 +120,12 @@ span.artist-artistVerifiedBadge-badge svg:nth-child(1) {
 
 /* artist page edits*/
 .main-entityHeader-background.main-entityHeader-gradient {
-  opacity: .4;
+  opacity: 0.4;
 }
 
 .main-entityHeader-background.main-entityHeader-overlay:after {
-  background-image: linear-gradient(transparent, transparent), linear-gradient(var(--spice-main), var(--spice-main));
+  background-image: linear-gradient(transparent, transparent),
+    linear-gradient(var(--spice-main), var(--spice-main));
 }
 
 .artist-artistPick-pickComment {
@@ -135,12 +141,11 @@ span.artist-artistVerifiedBadge-badge svg:nth-child(1) {
 
 /* home screen edits */
 .view-homeShortcutsGrid-name {
-  color: var(--spice-button);
+  color: var(--spice-text);
 }
 
-
 .main-shelf-title {
-  color: var(--spice-subtext)
+  color: var(--spice-subtext);
 }
 
 .view-homeShortcutsGrid-shortcut,
@@ -164,10 +169,9 @@ span.artist-artistVerifiedBadge-badge svg:nth-child(1) {
   border-radius: 10px;
 }
 
-
 /* inside a page edits */
 .main-addButton-button {
-  color: rgba(var(--spice-rgb-card), .7) !important;
+  color: rgba(var(--spice-rgb-card), 0.7) !important;
 }
 
 .main-trackList-trackListRow.main-trackList-active .main-trackList-rowMarker,
@@ -179,8 +183,6 @@ span.artist-artistVerifiedBadge-badge svg:nth-child(1) {
   color: var(--spice-text) !important;
 }
 
-
-
 /* friend activity */
 .main-buddyFeed-activityMetadata .main-buddyFeed-artistAndTrackName a,
 .main-buddyFeed-activityMetadata .main-buddyFeed-playbackContext a,
@@ -207,7 +209,7 @@ span.artist-artistVerifiedBadge-badge svg:nth-child(1) {
   color: var(--spice-tab-active) !important;
 }
 
-input:checked~.x-toggle-indicatorWrapper .x-toggle-indicator {
+input:checked ~ .x-toggle-indicatorWrapper .x-toggle-indicator {
   background-color: var(--spice-button-knob) !important;
 }
 
@@ -215,11 +217,10 @@ input:checked~.x-toggle-indicatorWrapper .x-toggle-indicator {
   background: var(--spice-button-knob) !important;
 }
 
-input:hover:not([disabled]):not(:active)~.x-toggle-indicatorWrapper {
-  background-color: rgba(var(--spice-rgb-button), .5) !important;
+input:hover:not([disabled]):not(:active) ~ .x-toggle-indicatorWrapper {
+  background-color: rgba(var(--spice-rgb-button), 0.5) !important;
 }
 
-
 /* search page edits */
 
 input {
@@ -238,7 +239,6 @@ input {
   color: var(--spice-main) !important;
 }
 
-
 /* menu and dropdown menus including the user menu */
 .main-type-mesto,
 .x-533-dropDown-dropDown {
@@ -254,7 +254,7 @@ input {
 
 .main-userWidget-box:focus,
 .main-userWidget-box:hover,
-.main-userWidget-box[data-context-menu-open=true] {
+.main-userWidget-box[data-context-menu-open="true"] {
   border-radius: 10px !important;
 }
 
@@ -270,29 +270,37 @@ input {
 }
 
 .main-card-card:hover,
-.main-card-card[data-context-menu-open=true] {
-  background-color: rgba(var(--spice-rgb-sec-card), .3) !important;
+.main-card-card[data-context-menu-open="true"] {
+  background-color: rgba(var(--spice-rgb-sec-card), 0.3) !important;
 }
 
 .main-contextMenu-menu,
 .main-card-card:focus-within,
-
 .main-deletePlaylistDialog-container {
+  background-color: var(--spice-card) !important;
+}
+
+.main-deletePlaylistDialog-secondaryButton {
+  color: var(--spice-text) !important;
+}
+
+.main-button-primary {
   background-color: var(--spice-sec-card) !important;
+  color: var(--spice-card) !important;
+}
+
+.main-deletePlaylistDialog-title {
+  color: var(--spice-subtext) !important;
 }
 
 .main-keyboardShortcutsHelpModal-container,
 .main-trackCreditsModal-container {
-  background-color: var(--spice-main) !important;
+  background-color: var(--spice-card) !important;
   color: var(--spice-text) !important;
 }
 
 .main-keyboardShortcutsHelpModal-header,
 .main-trackCreditsModal-header {
-  color: var(--spice-notification) !important;
-}
-
-.main-trackCreditsModal-sectionTitle {
   color: var(--spice-subtext) !important;
 }
 
@@ -302,7 +310,7 @@ input {
 
 /* profile page edits */
 .main-cardImage-imageWrapper {
-  background-color: var(--spice-sec-card) !important;
+  background-color: var(--spice-card) !important;
 }
 
 /* mini player edits */
@@ -330,40 +338,4 @@ input {
 .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 to this feel free to add.
-
-*/
-
-
-/* .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;
-} */

THEMES.md

@@ -46,7 +46,13 @@ Here you can find a preview of all the themes. Some of them may have different c
 
 ## Onepunch
 
-![Onepunch Screenshot](Onepunch/__Home.png)
+#### dark
+
+![dark_home](Onepunch/screenshots/dark_home.png)
+
+#### light
+
+![light_home](Onepunch/screenshots/light_home.png)
 
 ## Sleek