Update

- Added new screenshots
- cleaned user instructions
- updated colors (dark and light mode)
- removed mini-player fixed height settings.

Onepunch/README.md

@@ -2,36 +2,49 @@
 
 ## Screenshots
 
-![Home_legacy](./__Home.png)
-
-<table>
-  <tr>
-    <td><img src="./__Playlist.png" alt="2" width = 360px> Playlist_legacy </td>
-    <td><img src="./__Profile.png" alt="3" width = 360px> Profile_legacy </td>
-  </tr>
-</table>
+![dark_home](./screenshots/display.png)
 
 ## More
 
-#### About
+### About
 
-A simple gruvified spotify theme.
+A simple gruvified spotify theme. Move to [Extra Preview](#extra-preview) for more screenshots.
 
-#### First Aid Kit ¯\\\_(ツ)\_/¯
+### Information
+
+- To apply this theme:
 
-- **The screenshots here are from the old legacy UI.**
-- To change color schemes:
   ```shell
-  spicetify config color_scheme [wal/dark/light]
+  # for dark theme
+  spicetify config current_theme Onepunch color_scheme dark
+  spicetify apply
+
+  #for light theme
+  spicetify config current_theme Onepunch color_scheme light
+  spicetify apply
+
   ```
+
 - Tested on macOS only and pretty much everything worked. ﾍ(･\_|
 
-#### On my list
+### Extra Preview
 
-- [x] Gruvified and updated to the new UI.
-- [x] Added **[wal/dark/light]** mode.
-- [ ] Almost everything looks fine
+#### dark scheme
 
-#### Contact
+|   ![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 scheme
+
+|   ![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                      |
+
+### Contact
 
 Go **[here](https://github.com/okarin001/Onepunch/issues)** and _check/create_ an issue in case you face any probelm.

Onepunch/color.ini

@@ -1,14 +1,5 @@
-[wal]
-; pywal colors
-; after using pywal(wal) replace the colors from
-; the pywal generated [colors.json] file.
-;   color0: [main, sidebar, player, sec-player, shadow, card]
-;   color1: [sec-card, button-knob]
-;   color2: [subtext]
-;   color3: [extratext, misc]
-;   color4: [button-disabled, tab-active, notification ]
-;   color6: [selected-row,button, button-active]
-;   color7: [text]
+[dark]
+; gruvbox dark mode
 text               = d5c4a1
 subtext            = b8bb26
 extratext          = fabd2f
@@ -29,50 +20,27 @@ notification       = fb4934
 notification-error = e22134
 misc               = 83a598
 
-
-[dark]
-; gruvbox dark mode
-text               = d5c4a1
-subtext            = b8bb26
-extratext          = d3869b
-main               = 1d2021
-sidebar            = 1d2021
-player             = 1d2021
-sec-player         = 32302f 
-card               = fb4934
-sec-card           = 32302f
-shadow             = 000000
-selected-row       = d3869b
-button             = 8ec07c
-button-active      = 8ec07c
-button-disabled    = 665c54
-button-knob        = fe8019
-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         = 9d0006
-notification       = 9d0006
+button-disabled    = 076678
+button-knob        = 9d0006
+tab-active         = 076678
+notification       = 076678
 notification-error = e22134
-misc               = 076678
+misc               = b57614
 
 
 

Onepunch/user.css

@@ -17,18 +17,19 @@
   color: var(--spice-main) !important;
 }
 
-.main-collectionLinkButton-collectionLinkButton .main-collectionLinkButton-collectionLinkText,
+.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);
 }
@@ -72,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;
 }
 
@@ -102,7 +104,6 @@ span.artist-artistVerifiedBadge-badge svg:nth-child(1) {
   fill: black;
 }
 
-
 /* details metadata */
 .main-entityTitle-subtitle.main-entityTitle-gray,
 .main-entityHeader-metaDataText {
@@ -119,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 {
@@ -142,9 +144,8 @@ span.artist-artistVerifiedBadge-badge svg:nth-child(1) {
   color: var(--spice-text);
 }
 
-
 .main-shelf-title {
-  color: var(--spice-subtext)
+  color: var(--spice-subtext);
 }
 
 .view-homeShortcutsGrid-shortcut,
@@ -168,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,
@@ -183,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,
@@ -211,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;
 }
 
@@ -219,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 {
@@ -242,7 +239,6 @@ input {
   color: var(--spice-main) !important;
 }
 
-
 /* menu and dropdown menus including the user menu */
 .main-type-mesto,
 .x-533-dropDown-dropDown {
@@ -258,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;
 }
 
@@ -274,8 +270,8 @@ 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,
@@ -342,4 +338,4 @@ input {
 .main-nowPlayingBar-container {
   background-color: var(--spice-sec-player) !important;
   border-top: unset !important;
-}
+}