Merge pull request #469 from CharlieS1103/master

Add dreary theme
2024-11-22 10:52:48 +01:00 · 2021-07-19 22:04:09 +02:00 · 2021-07-19 22:04:09 +02:00 · 91ed81b6e0
commit 91ed81b6e0
parent 691a069fe0 2961db5a7a
9 changed files with 712 additions and 0 deletions
--- a/Dreary/README.md
+++ b/Dreary/README.md
@ -0,0 +1,33 @@
+# Drery
+
+## Screenshots
+
+### BIB
+![BIB Screenshot](bib.png)
+
+### Psycho
+![Psycho Screenshot](psycho.png)
+
+### Deeper
+![Deeper Screenshot](deeper.png)
+
+### Mono
+![Mono Screenshot](mono.png)
+
+### Golden
+![Golden Screenshot](golden.png)
+
+## Important
+Certain aspects of the theme, such as the borders around playlist names, requires Sidebar Config to be enabled. It is not required but recommended.
+
+##### To enable: `spicetify config sidebar_config 1`
+
+## More
+
+
+
+A chill theme that keeps things bordered in and organized
+
+BIB color scheme based on original [BIB-Green](https://github.com/morpheusthewhite/spicetify-themes/tree/master/BIB-Green) 
+
+Theme based on Sleek theme: https://github.com/morpheusthewhite/spicetify-themes/tree/v2/Sleek
--- a/Dreary/bib.png
+++ b/Dreary/bib.png
--- a/Dreary/color.ini
+++ b/Dreary/color.ini
@ -0,0 +1,134 @@
+[Psycho]
+; Red on dark grey background
+text               = e00000
+subtext            = ffffff
+button-text        = ffffff
+main               = 101010
+sidebar            = 171717
+player             = 171717
+subbutton-text     = 101010
+card               = 171717
+shadow             = 6d1414
+selected-row       = 330d0d
+sub-button         = a20606
+button             = e00000
+button-active      = e00000
+button-disabled    = 404040
+tab-active         = 171717
+notification       = 5e0000
+notification-error = 5e0000
+playback-bar       = ff4700
+misc               = adadad
+
+[Deeper]
+; Light blue on Dark Background
+text               = 4f9a87
+subtext            = 406560
+button-text        = 4f9a87
+main               = 040614
+sidebar            = 0F111A
+player             = 0F111A
+subbutton-text     = 040614
+card               = 0f1118
+shadow             = 406560
+selected-row       = 040614
+sub-button         = 4f9a87
+button             = 0d3a2e
+test               = 175
+button-active      = 106165
+button-disabled    = 0C1C19 
+tab-active         = 0a1527
+notification       = 051024
+notification-error = 051024
+playback-bar       = 4f9a87
+rgb-selected-row   = 64,101,96
+misc               = 406560
+
+[BIB]
+; Green on dark grey background
+text               = 8bc34a
+subtext            = b4b4b4
+button-text        = 202020
+main               = 202020
+sidebar            = 202020
+player             = 242424
+subbutton-text     = 202020
+card               = 242424
+shadow             = 000000
+selected-row       = 2a3c17
+sub-button         = 6a913d
+button             = 537b25
+button-active      = 98da4b
+button-disabled    = 353535
+tab-active         = 303030
+notification       = 242424
+notification-error = 242424
+playback-bar       = 8bc34a
+misc               = 8bc34a
+
+[Mono]
+;Grays, Blacks, Whites, You get the gist.
+text               = FFFFFF
+subtext            = d3d3d3
+button-text        = FFFFFF
+main               = 000000
+sidebar            = 5d5e60
+subbutton-text     = d3d3d3
+player             = 181818
+card               = 5d5e60
+selected-row       = 2D2A32
+shadow             = FFFFFF
+sub-button         = d3d3d3
+button             = d3d3d3
+button-active      = d3d3d3
+button-disabled    = 181818
+tab-active         = d3d3d3
+notification       = 181818
+notification-error = b5cbb7
+playback-bar       = d3d3d3
+misc               = d3d3d3
+
+[Golden]
+;Gold
+text               = FFE002
+subtext            = B28228
+button-text        = FFE002
+main               = 1C1C1C
+sidebar            = 3B3B3B
+subbutton-text     = 3B3B3B
+player             = 1C1C1C
+card               = 3B3B3B
+selected-row       = 1c1c1c
+shadow             = FFE002
+sub-button         = B28228
+button             = B28228
+button-active      = B28228
+button-disabled    = FFB606
+tab-active         = B28228
+notification       = FFB606
+notification-error = b5cbb7
+playback-bar       = B28228
+misc               = B28228
+
+
+; Description
+
+; text = main text, playlist names in main field, name of playlist selected in sidebar, headings
+; subtext = text in main buttons in sidebar, playlist names in sidebar, artist names, and mini infos
+; button-text = text in main buttons in sidebar when active
+; main = main field or main bg
+; sidebar = sidebar bg
+; subbutton-text = text of buttons that use the text color or subtext color as a background
+; player = player bg
+; card = card bg
+; shadow = bg of buttons like account, pop-up lyrics, full app display in main field
+; selected-row = color of the song selected
+; sub-button = caption and details of playlist, download and options button
+; button = playlist buttons bg in sidebar, drop-down menus, now playing song, like button
+; button-active = hover on song selected
+; button-disabled = seekbar bg, volume bar bg, scrollbar
+; tab-active = button bg in main field (playlists, podcasts, artists, albums)
+; notification = notification ('Added to liked songs' etc.)
+; notification-error = error
+; playback-bar = seekbar fg, main play/pause button bg
+; misc = miscellaneous
--- a/Dreary/deeper.png
+++ b/Dreary/deeper.png
--- a/Dreary/golden.png
+++ b/Dreary/golden.png
--- a/Dreary/mono.png
+++ b/Dreary/mono.png
--- a/Dreary/psycho.png
+++ b/Dreary/psycho.png
--- a/Dreary/user.css
+++ b/Dreary/user.css
@ -0,0 +1,528 @@
+/* Dreary Theme*/
+
+.main-rootlist-rootlistDividerGradient {
+    display: none;
+    visibility: hidden !important;
+}
+
+.main-rootlist-rootlistDivider {
+    background-color: var(--spice-text) !important;
+}
+
+input {
+    background-color: unset !important;
+    border-bottom: solid 1px var(--spice-text) !important;
+    border-radius: 0 !important;
+    padding: 6px 10px 6px 48px;
+    color: var(--spice-text) !important;
+}
+
+.x-833-searchInput-searchInputSearchIcon {
+    color: var(--spice-text) !important;
+}
+
+.main-home-homeHeader, .x-441-entityHeader-overlay, .main-actionBarBackground-background, .main-entityHeader-overlay, .main-entityHeader-backgroundColor {
+    background-color: unset !important;
+    background-image: unset !important;
+}
+
+.main-playlistEditDetailsModal-textElement:focus {
+    border: 0;
+}
+
+.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 {
+    background-color: var(--spice-main);
+}
+
+.main-entityHeader-shadow {
+    box-shadow: 0 04px 20px #21212130;
+}
+
+.main-trackList-playingIcon {
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg id='playing-icon' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 24'%3E%3Cdefs%3E%3Cstyle%3E %23playing-icon %7B fill: %2320BC54; %7D @keyframes play %7B 0%25 %7Btransform: scaleY(1);%7D 3.3%25 %7Btransform: scaleY(0.9583);%7D 6.6%25 %7Btransform: scaleY(0.9166);%7D 9.9%25 %7Btransform: scaleY(0.8333);%7D 13.3%25 %7Btransform: scaleY(0.7083);%7D 16.6%25 %7Btransform: scaleY(0.5416);%7D 19.9%25 %7Btransform: scaleY(0.4166);%7D 23.3%25 %7Btransform: scaleY(0.25);%7D 26.6%25 %7Btransform: scaleY(0.1666);%7D 29.9%25 %7Btransform: scaleY(0.125);%7D 33.3%25 %7Btransform: scaleY(0.125);%7D 36.6%25 %7Btransform: scaleY(0.1666);%7D 39.9%25 %7Btransform: scaleY(0.1666);%7D 43.3%25 %7Btransform: scaleY(0.2083);%7D 46.6%25 %7Btransform: scaleY(0.2916);%7D 49.9%25 %7Btransform: scaleY(0.375);%7D 53.3%25 %7Btransform: scaleY(0.5);%7D 56.6%25 %7Btransform: scaleY(0.5833);%7D 59.9%25 %7Btransform: scaleY(0.625);%7D 63.3%25 %7Btransform: scaleY(0.6666);%7D 66.6%25 %7Btransform: scaleY(0.6666);%7D 69.9%25 %7Btransform: scaleY(0.6666);%7D 73.3%25 %7Btransform: scaleY(0.6666);%7D 76.6%25 %7Btransform: scaleY(0.7083);%7D 79.9%25 %7Btransform: scaleY(0.75);%7D 83.3%25 %7Btransform: scaleY(0.8333);%7D 86.6%25 %7Btransform: scaleY(0.875);%7D 89.9%25 %7Btransform: scaleY(0.9166);%7D 93.3%25 %7Btransform: scaleY(0.9583);%7D 96.6%25 %7Btransform: scaleY(1);%7D %7D %23bar1 %7B transform-origin: bottom; animation: play 0.9s -0.51s infinite; %7D %23bar2 %7B transform-origin: bottom; animation: play 0.9s infinite; %7D %23bar3 %7B transform-origin: bottom; animation: play 0.9s -0.15s infinite; %7D %23bar4 %7B transform-origin: bottom; animation: play 0.9s -0.75s infinite; %7D %3C/style%3E%3C/defs%3E%3Ctitle%3Eplaying-icon%3C/title%3E%3Crect id='bar1' class='cls-1' width='4' height='24'/%3E%3Crect id='bar2' class='cls-1' x='6' width='4' height='24'/%3E%3Crect id='bar3' class='cls-1' x='12' width='4' height='24'/%3E%3Crect id='bar4' class='cls-1' x='18' width='4' height='24'/%3E%3C/svg%3E");
+    background: var(--spice-text);
+    content-visibility: hidden;
+}
+
+span.artist-artistVerifiedBadge-badge svg:nth-child(1) {
+    fill: black;
+}
+
+/* Hide Banner Ads */
+
+.main-leaderboardComponent-container {
+    display: none;
+}
+
+.desktoproutes-homepage-takeover-ad-hptoComponent-parentContainer, .desktoproutes-homepage-takeover-ad-hptoComponent-container {
+    display: none !important;
+}
+
+/* Hide Upgrade Button */
+
+.main-topBar-UpgradeButton {
+    display: none;
+}
+
+[aria-label="Playing"] {
+    color: var(--spice-text);
+}
+
+/* Fix design fault */
+
+@media (min-width: 1024px) {
+    .main-trackList-trackListHeader {
+        border-bottom: solid 1px;
+        margin: 10px;
+    }
+}
+
+.main-trackList-trackListHeaderStuck.main-trackList-trackListHeader {
+    background: var(--spice-main);
+    border: 0;
+}
+
+.main-trackList-trackListHeaderStuck .main-trackList-trackListHeaderRow {
+    border-bottom: 1px solid rgba(var(--spice-rgb-button-disabled), .8);
+}
+
+/* Changing Playback Bar Location */
+
+.progress-bar__bg, .progress-bar__fg_wrapper {
+    border-radius: 0;
+    z-index: 1;
+}
+
+.playback-bar__progress-time {
+    display: none;
+}
+
+.playback-bar {
+    width: 100%;
+    bottom: 83px;
+    position: absolute;
+    left: -1px;
+    z-index: 1;
+}
+
+.main-playbackBarRemainingTime-container {
+    position: absolute;
+    left: 49.68%;
+    top: 60%;
+    border: solid 1px;
+    border-radius: 20px;
+    z-index: 5;
+    color: var(--spice-subtext) !important;
+}
+
+.player-controls__buttons {
+    transform: translateY(6px);
+}
+
+.main-playPauseButton-button {
+    background-color: var(--spice-main);
+    box-shadow: var(--spice-shadow) 0 5px 9px 0px;
+    --button-size: 50px !important;
+    color: var(--spice-text);
+    background-color: var(--spice-player) !important;
+    cursor: pointer;
+}
+
+.player-controls__buttons {
+    align-items: center;
+    position: relative;
+    left: 2.3%;
+}
+
+.main-entityTitle-subtitle.main-entityTitle-small.main-entityTitle-uppercase.main-entityTitle-bold {
+    border: 2px var(--spice-text) solid;
+    border-radius: 4px;
+    width: fit-content;
+    display: inline;
+    text-align: center;
+    padding: 0 5px;
+}
+
+.os-theme-spotify.os-host-transition>.os-scrollbar-vertical>.os-scrollbar-track>.os-scrollbar-handle {
+    border-radius: 4px;
+    background-color: var(--spice-text);
+}
+
+/* Hide Profile Options in Nav Bar */
+
+.main-userWidget-notificationIndicator {
+    display: none;
+}
+
+.main-avatar-userIcon {
+    color: white;
+}
+
+.main-userWidget-box {
+    background-color: var(--spice-sidebar);
+    text-decoration-line: underline;
+}
+
+/* Improve Sidebar Buttons */
+
+.main-likedSongsButton-likedSongsIcon {
+    background: var(--spice-text);
+}
+
+.main-likedSongsButton-likedSongsIcon {
+    color: var(--spice-sidebar);
+}
+
+.main-trackList-trackListHeaderRow {
+    border-bottom: 1px solid rgba(var(--spice-rgb-button-disabled), .8)
+}
+
+.main-trackList-trackListHeaderStuck .main-trackList-trackListHeaderRow {
+    border-bottom: 1px solid rgba(var(--spice-rgb-button-disabled), .8);
+}
+
+.main-trackList-trackListRow.main-trackList-selected, .main-trackList-trackListRow.main-trackList-selected:hover {
+    background-color: rgba(var(--spice-rgb-selected-row), .8) !important;
+}
+
+.main-trackList-trackListRow:focus-within, .main-trackList-trackListRow:hover {
+    background-color: rgba(var(--spice-rgb-selected-row), .4);
+}
+
+.main-duplicateTracksDialog-container {
+    background-color: var(--spice-card);
+    color: var(--spice-subtext);
+}
+
+.main-duplicateTracksDialog-secondaryButton {
+    color: var(--spice-text);
+}
+
+._9eb5acf729a98d62135ca21777fef244-scss {
+    color: var(--spice-card);
+}
+
+.x-sortBox-sortDropdown, .x-filterBox-expandButton {
+    color: var(--spice-text) !important;
+}
+
+/* Main Play Button Change */
+
+.main-playButton-PlayButton.main-playButton-primary {
+    color: var(--spice-main);
+    background-color: var(--spice-playback-bar);
+    cursor: pointer !important;
+}
+
+.main-entityHeader-metaDataText.main-type-mesto:nth-child(2) {
+    display: none;
+}
+
+.main-entityHeader-image {
+    border-radius: 10%;
+}
+
+.x-downloadButton-button {
+    background: var(--spice-player);
+    border-radius: 50%;
+}
+
+/* Link playback-bar color */
+
+.playback-bar .progress-bar__fg {
+    background-color: var(--spice-playback-bar);
+}
+
+:not(.no-focus-outline) .progress-bar:focus-within .progress-bar__fg {
+    background-color: var(--spice-playback-bar);
+}
+
+.main-navBar-navBarLinkActive {
+    background-color: var(--spice-main);
+}
+
+.main-navBar-navBarLinkActive, .main-navBar-navBarLinkActive:focus, .main-navBar-navBarLinkActive:hover, .logo {
+    color: var(--spice-text) !important;
+    background-color: var(--spice-selected-row);
+}
+
+.progress-bar__slider {
+    opacity: 1 !important;
+    background-color: var(--spice-sidebar)!important;
+    height: 16px!important;
+    border: solid 2px var(--spice-subtext)!important;
+    width: 16px!important;
+}
+
+a.x-categoryCard-CategoryCard, a.x-heroCategoryCard-HeroCategoryCard {
+    color: var(--spice-subtext);
+}
+
+.main-heroCard-card a, .collection-collectionEntityHeroCard-descriptionContainer {
+    color: var(--spice-subtext) !important;
+}
+
+.main-buddyFeed-activityMetadata .main-buddyFeed-artistAndTrackName a, .main-buddyFeed-activityMetadata .main-buddyFeed-username a, .main-buddyFeed-activityMetadata .main-buddyFeed-playbackContextLink, p.main-buddyFeed-timestamp.main-type-finale, .main-buddyFeed-findFriendsButton .main-buddyFeed-findFriendsIcon {
+    color: var(--spice-subtext);
+}
+
+/* Recolor sub-buttons */
+
+.main-moreButton-button {
+    color: var(--spice-sub-button);
+}
+
+.x-downloadButton-button {
+    color: var(--spice-sub-button) !important;
+}
+
+.x-downloadButton-button:hover {
+    color: var(--spice-text) !important;
+}
+
+.main-addButton-button {
+    color: var(--spice-sub-button);
+}
+
+.main-entityHeader-metaDataText {
+    color: var(--spice-sub-button);
+}
+
+.main-duration-container {
+    color: var(--spice-sub-button);
+}
+
+.main-tag-container {
+    background-color: var(--spice-sub-button);
+}
+
+.x-sortBox-sortDropdown {
+    background-color: var(--spice-selected-row) !important;
+}
+
+.x-filterBox-searchIconContainer {
+    color: var(--spice-sub-button) !important;
+}
+
+.x-filterBox-expandButton:focus, .x-filterBox-expandButton:hover {
+    background-color: var(--spice-selected-row) !important;
+}
+
+.main-contextMenu-menuItemButton:not(.main-contextMenu-disabled):focus, .main-contextMenu-menuItemButton:not(.main-contextMenu-disabled):hover {
+    background-color: var(--spice-selected-row) !important;
+}
+
+.view-homeShortcutsGrid-shortcut {
+    background-color: rgba(var(--spice-rgb-selected-row), 0.6) !important;
+}
+
+.view-homeShortcutsGrid-shortcut:focus-within, .view-homeShortcutsGrid-shortcut:hover, .view-homeShortcutsGrid-shortcut[data-context-menu-open=true] {
+    background-color: var(--spice-selected-row) !important;
+}
+
+.main-rootlist-textWrapper.main-type-viola {
+    cursor: pointer !important;
+}
+
+.main-navBar-navBar {
+    border-right: 2px solid var(--spice-misc);
+}
+
+.cMigZB * {
+    color: var(--spice-misc) !important;
+}
+
+.main-trackInfo-name a {
+    color: var(--spice-misc) !important;
+}
+
+.main-trackInfo-artists a:link {
+    color: var(--spice-misc) !important;
+}
+
+[class*=" spoticon-"]:before {
+    color: var(--spice-misc) !important;
+}
+
+.main-connectToFacebook-headerTitle {
+    color: var(--spice-misc) !important;
+}
+
+.main-cardSubHeader-root, .main-cardHeader-text {
+    color: var(--spice-shadow) !important;
+}
+
+
+.main-repeatButton-button, .main-skipForwardButton-button, .main-skipBackButton-button, .main-shuffleButton-button {
+    cursor: pointer !important;
+}
+
+#spicetify-playlist-list {
+    display: inline;
+    height: 10%;
+    align-items: center;
+    box-sizing: border-box;
+    position: relative;
+    left: -40px;
+    top: 50px;
+    overflow: hidden;
+    overflow-y: scroll;
+}
+
+#spicetify-playlist-list>li {
+    margin: 4px 3.2vw;
+    width: 90%;
+    flex-shrink: 0;
+    padding-top: 10%;
+    padding-bottom: 10%;
+    box-sizing: border-box;
+    position: relative;
+    margin-bottom: 8px;
+    border-radius: 10px;
+    border: 2px solid var(--spice-text);
+    display: flex;
+    text-align: center;
+    flex-direction: column;
+    transition: all 500ms;
+}
+
+#spicetify-playlist-list>li:hover {
+    border-color: var(--spice-button);
+}
+
+.main-rootlist-textWrapper {
+    overflow: auto !important;
+    text-overflow: unset !important;
+    white-space: pre !important;
+}
+
+.main-connectToFacebook-text, .main-connectToFacebook-disclaimer {
+    color: unset !important;
+}
+
+.main-type-mesto {
+    color: var(--spice-button);
+}
+
+svg[Attributes Style] {
+    fill: var(--spice-subtext);
+}
+
+.main-rootlist-rootlistItemLink.main-rootlist-rootlistItemLinkActive, .main-rootlist-rootlistItemLink {
+    transition: 500ms;
+}
+
+.main-rootlist-rootlistItemLink.main-rootlist-rootlistItemLinkActive, .main-rootlist-rootlistItemLink:focus {
+    color: var(--spice-text);
+}
+
+.main-collectionLinkButton-collectionLinkButton.main-collectionLinkButton-selected {
+    color: var(--spice-subbutton-text) !important;
+}
+
+
+.view-homeShortcutsGrid-shortcut {
+    background-color: rgba(var(--spice-rgb-selected-row), 0.6) !important;
+    border: solid 3px var(--spice-text);
+    border-radius: 10px;
+    padding-bottom: 80.7px;
+    transition: 500ms;
+}
+
+.main-card-card .main-card-cardLink {
+    border: solid 3px;
+    transition: 500ms;
+    border-radius: 27px;
+}
+
+.main-card-card {
+    border-radius: 27px!important;
+}
+
+.view-homeShortcutsGrid-shortcut:hover, .main-card-card .main-card-cardLink:hover {
+    border-color: var(--spice-button);
+}
+
+.main-createPlaylistButton-button {
+    padding: 0 16px !important;
+}
+
+.main-trackCreditsModal-closeBtn {
+    color: var(--spice-button-disabled) !important;
+}
+
+.main-contextMenu-menu {
+    max-height: 400px;
+    opacity: .9676;
+}
+    .main-trackList-trackList {
+        border-radius: 30px;
+        background-color: var(--spice-player);
+        border: 1px solid;
+    }
+    .main-buddyFeed-friendsFeedContainer {
+        border-left: solid 2px var(--spice-text);
+    }
+    .main-yourEpisodesButton-yourEpisodesIcon {
+        background: var(--spice-text);
+    }
+    .main-yourEpisodesButton-yourEpisodesIcon path {
+        fill: var(--spice-player);
+        opacity: 0.7;
+    }
+    .main-navBar-entryPoints>div:first-of-type {
+        margin-top: 20px;
+    }
+    .main-nowPlayingBar-left {}
+    .cMigZB {
+        cursor: pointer;
+    }
+    .control-button {
+        color: var(--spice-misc);
+    }
+    .main-buddyFeed-buddyFeed {
+        -webkit-box-shadow: none;
+        box-shadow: none;
+    }
+    .main-buddyFeed-friendActivity {
+        border-bottom: solid 1px;
+    }
+    .collection-collectionEntityHeroCard-likedSongs {
+        background: linear-gradient(149.46deg, var(--spice-sidebar), var(--spice-main) 99.16%) !important;
+    }
+
+    .main-repeatButton-button[disabled] {
+        color: var(--spice-button);
+    }
+    .main-shuffleButton-button[disabled] {
+        color: var(--spice-button);
+    }
+    .progress-bar_bg {
+        z-index: 20;
+    }
+   .main-deletePlaylistDialog-secondaryButton{
+    color:var(--spice-subbutton-text);
+   }
+   .main-connectToFacebook-facebookButton {
+    color: var(--spice-subbutton-text);
+}
--- a/THEMES.md
+++ b/THEMES.md
@ -10,6 +10,23 @@ Here you can find a preview of all the themes. Some of them may have different c

 ![Ocean Screenshot](Default/ocean.png)

+## Dreary
+
+#### BIB
+![BIB Screenshot](Dreary/bib.png)
+
+#### Psycho
+![Psycho Screenshot](Dreary/psycho.png)
+
+#### Deeper
+![Deeper Screenshot](Dreary/deeper.png)
+
+#### Mono
+![Mono Screenshot](Dreary/mono.png)
+
+#### Golden
+![Golden Screenshot](Dreary/golden.png)
+
 ## Dribbblish

 #### Base