Compare commits

...

No commits in common. "main" and "dell-hypr" have entirely different histories.

438 changed files with 15431 additions and 3 deletions

9
.gitignore vendored Normal file
View file

@ -0,0 +1,9 @@
dot-config/tmux/plugins
dot-config/vesktop/Singleton*
dot-config/vesktop/state.json
dot-config/vesktop/sessionData
dot-config/vesktop/Crashpad
dot-config/spicetify/Extracted
dot-local/share/nvim
dot-local/share/mc/history
dot-local/share/mc/filepos

9
.gitmodules vendored Normal file
View file

@ -0,0 +1,9 @@
[submodule "dot-config/tmux/tpm"]
path = dot-config/tmux/tpm
url = https://github.com/tmux-plugins/tpm
[submodule "dot-config/nvim"]
path = dot-config/nvim
url = ssh://git@git.timoxa0.su:22222/timoxa0/dotfiles-nvim.git
[submodule "dot-config/fish"]
path = dot-config/fish
url = ssh://git@git.timoxa0.su:22222/timoxa0/dotfiles-fish.git

4
.stow-local-ignore Normal file
View file

@ -0,0 +1,4 @@
.git
.gitignore
.gitmodules
makelinks

View file

@ -1,3 +0,0 @@
#### Branches:
- main-pc: Desktop
- nabu: Tablet with keyboard (Xiaomi Pad 5)

View file

@ -0,0 +1,22 @@
[env]
TERM = "xterm-256color"
[window]
padding = { x = 20, y = 20 }
dynamic_padding = true
decorations = "Full"
opacity = 1
[font]
normal = { family = "JetBrainsMono Nerd Font Mono", style = "Regular" }
size = 14
[general]
live_config_reload = true
import = [
"~/.config/alacritty/catppuccin-mocha.toml"
]
[terminal]
shell = { program = "tmux", args = ["new"] }

View file

@ -0,0 +1,75 @@
[colors.primary]
background = "#1e1e2e"
foreground = "#cdd6f4"
dim_foreground = "#7f849c"
bright_foreground = "#cdd6f4"
[colors.cursor]
text = "#1e1e2e"
cursor = "#f5e0dc"
[colors.vi_mode_cursor]
text = "#1e1e2e"
cursor = "#b4befe"
[colors.search.matches]
foreground = "#1e1e2e"
background = "#a6adc8"
[colors.search.focused_match]
foreground = "#1e1e2e"
background = "#a6e3a1"
[colors.footer_bar]
foreground = "#1e1e2e"
background = "#a6adc8"
[colors.hints.start]
foreground = "#1e1e2e"
background = "#f9e2af"
[colors.hints.end]
foreground = "#1e1e2e"
background = "#a6adc8"
[colors.selection]
text = "#1e1e2e"
background = "#f5e0dc"
[colors.normal]
black = "#45475a"
red = "#f38ba8"
green = "#a6e3a1"
yellow = "#f9e2af"
blue = "#89b4fa"
magenta = "#f5c2e7"
cyan = "#94e2d5"
white = "#bac2de"
[colors.bright]
black = "#585b70"
red = "#f38ba8"
green = "#a6e3a1"
yellow = "#f9e2af"
blue = "#89b4fa"
magenta = "#f5c2e7"
cyan = "#94e2d5"
white = "#a6adc8"
[colors.dim]
black = "#45475a"
red = "#f38ba8"
green = "#a6e3a1"
yellow = "#f9e2af"
blue = "#89b4fa"
magenta = "#f5c2e7"
cyan = "#94e2d5"
white = "#bac2de"
[[colors.indexed_colors]]
index = 16
color = "#fab387"
[[colors.indexed_colors]]
index = 17
color = "#f5e0dc"

1
dot-config/fish Submodule

@ -0,0 +1 @@
Subproject commit 7443f9a2bc5acd9f521be6ca1e68e22bb614b756

21
dot-config/hypr/bin/autostart Executable file
View file

@ -0,0 +1,21 @@
#!/usr/bin/env bash
dbus-update-activation-environment WAYLAND_DISPLAY XDG_CURRENT_DESKTOP=Hyprland &
gsettings set org.gnome.desktop.wm.preferences button-layout ':' &
waybar -c ~/.config/waybar/waybar.jsonc -s ~/.config/waybar/waybar.css &
swww-daemon &
hypridle -c ~/.config/hypr/hypridle.conf &
/usr/lib/polkit-gnome/polkit-gnome-authentication-agent-1 &
mako -c ~/.config/mako/mako.conf &
/usr/lib/xdg-desktop-portal -r &
nm-applet &
blueman-applet &
clash-verge &
bash -c "sleep 2; easyeffects --gapplication-service" &
ping 1.1.1.1 -c 1 && {
sleep 3
vesktop &
telegram-desktop -startintray &
}

View file

@ -0,0 +1,3 @@
#!/usr/bin/env fish
playerctl --all-players pause
loginctl lock-session

4
dot-config/hypr/bin/lockscreen Executable file
View file

@ -0,0 +1,4 @@
#!/usr/bin/env fish
if not ps -e | grep hyprlock
hyprlock -c ~/.config/hypr/hyprlock.conf
end

108
dot-config/hypr/bin/powermenu Executable file
View file

@ -0,0 +1,108 @@
#!/usr/bin/env bash
## Author : Aditya Shakya (adi1090x)
## Github : @adi1090x
#
## Rofi : Power Menu
# CMDs
uptime="`uptime -p | sed -e 's/up //g'`"
host=`cat /etc/hostname`
# Options
hibernate='󱖒'
shutdown='⏼'
reboot=''
lock=''
suspend=''
logout=''
yes=''
no=''
# Rofi CMD
rofi_cmd() {
rofi -dmenu \
-p "$USER@$host" \
-mesg "Uptime: $uptime" \
-theme ~/.config/rofi/powermenu.rasi
}
# Confirmation CMD
confirm_cmd() {
rofi -theme-str 'window {location: center; anchor: center; fullscreen: false; width: 350px;}' \
-theme-str 'mainbox {children: [ "message", "listview" ];}' \
-theme-str 'listview {columns: 2; lines: 1;}' \
-theme-str 'element-text {horizontal-align: 0.5;}' \
-theme-str 'textbox {horizontal-align: 0.5;}' \
-dmenu \
-p 'Confirmation' \
-mesg 'Are you Sure?' \
-theme ~/.config/rofi/powermenu.rasi
}
# Ask for confirmation
confirm_exit() {
echo -e "$yes\n$no" | confirm_cmd
}
# Pass variables to rofi dmenu
run_rofi() {
echo -e "$lock\n$logout\n$reboot\n$shutdown" | rofi_cmd
}
# Execute Command
run_cmd() {
selected="$(confirm_exit)"
if [[ "$selected" == "$yes" ]]; then
if [[ $1 == '--shutdown' ]]; then
systemctl poweroff
elif [[ $1 == '--reboot' ]]; then
systemctl reboot
elif [[ $1 == '--hibernate' ]]; then
systemctl hibernate
elif [[ $1 == '--suspend' ]]; then
systemctl suspend
elif [[ $1 == '--logout' ]]; then
if [[ "$DESKTOP_SESSION" == 'openbox' ]]; then
openbox --exit
elif [[ "$DESKTOP_SESSION" == 'bspwm' ]]; then
bspc quit
elif [[ "$DESKTOP_SESSION" == 'i3' ]]; then
i3-msg exit
elif [[ "$DESKTOP_SESSION" == 'plasma' ]]; then
qdbus org.kde.ksmserver /KSMServer logout 0 0 0
elif [[ "$XDG_CURRENT_DESKTOP" == 'Hyprland' ]]; then
hyprctl dispatch exit
fi
fi
else
exit 0
fi
}
# Actions
chosen="$(run_rofi)"
case ${chosen} in
$shutdown)
run_cmd --shutdown
;;
$reboot)
run_cmd --reboot
;;
$hibernate)
run_cmd --hibernate
;;
$lock)
if [[ -x '/usr/bin/betterlockscreen' ]]; then
betterlockscreen -l
elif [[ -x '/usr/bin/i3lock' ]]; then
i3lock
fi
;;
$suspend)
run_cmd --suspend
;;
$logout)
run_cmd --logout
;;
esac

54
dot-config/hypr/bin/setwal Executable file
View file

@ -0,0 +1,54 @@
#!/usr/bin/env bash
printf "%s\n" "Currently disabled"
{ [[ -z $1 ]] || [[ -z $2 ]]; } && {
printf "%s\n" "Usage: setwal /path/to/wallpaper mode"
exit 1
}
[ ! -f "$1" ] && {
printf "File not found: %s\n" "$1"
exit 2
}
yes | ffmpeg -i "$1" ~/.config/hypr/wallpaper.png >/dev/null 2>&1 || {
printf "Failed to copy wallpaper from %s\n" "$1"
exit 3
}
{
hyprctl hyprpaper unload all >/dev/null
hyprctl hyprpaper preload ~/.config/hypr/wallpaper.png >/dev/null
hyprctl hyprpaper wallpaper ",~/.config/hypr/wallpaper.png" >/dev/null
} &
update() {
makoctl reload
}
dark() {
matugen image ~/.config/hypr/wallpaper.png -c ~/.config/hypr/matugen/config.toml -m dark
gsettings set org.gnome.desktop.interface gtk-theme "adw-gtk3-not-exist" >/dev/null
sleep 0.1
gsettings set org.gnome.desktop.interface gtk-theme "adw-gtk3-dark" >/dev/null
gsettings set org.gnome.desktop.interface color-scheme 'prefer-dark'
update
}
light() {
matugen image ~/.config/hypr/wallpaper.png -c ~/.config/hypr/matugen/config.toml -m light
gsettings set org.gnome.desktop.interface gtk-theme "adw-gtk3-not-exist" >/dev/null
sleep 0.1
gsettings set org.gnome.desktop.interface gtk-theme "adw-gtk3" >/dev/null
gsettings set org.gnome.desktop.interface color-scheme 'prefer-light'
update
}
case "$2" in
"light")
light
;;
*)
dark
;;
esac

View file

@ -0,0 +1,68 @@
#===========================================================================#
# | bind | dispatcher | args #
#===========================================================================#
bind = SUPER, RETURN, exec, $terminal
bind = SUPER, E, exec, $fileManager
bind = SUPER, D, exec, $discord
bind = SUPER, T, exec, $telegram
bind = SUPER, B, exec, $browser
bind = SUPER, Q, killactive,
bind = SUPER, M, exit,
bind = SUPER, C, togglefloating,
bind = SUPER, SPACE, exec, $menu
bind = SUPER, Z, pseudo, # dwindle
bind = SUPER, X, togglesplit, # dwindle
bind = SUPER, Home, exec, $sshot region
bind = SUPER, Prior, exec, $sshot window
bind = SUPER, Next, exec, $sshot output
bind = SUPER Ctrl, Q, exec, $locker
bind = , XF86AudioPlay, exec, $pctl play-pause
bind = , XF86AudioNext, exec, $pctl next
bind = , XF86AudioPrev, exec, $pctl previous
bind = , XF86AudioMute, exec, pamixer -t
bind = , XF86AudioRaiseVolume, exec, pamixer -i 2
bind = , XF86AudioLowerVolume, exec, pamixer -d 2
bind = , XF86MonBrightnessUp, exec, brightnessctl set 5%+
bind = , XF86MonBrightnessDown, exec, brightnessctl set 5%-
bind = SUPER, left, movefocus, l
bind = SUPER, right, movefocus, r
bind = SUPER, up, movefocus, u
bind = SUPER, down, movefocus, d
bind = SUPER, 1, workspace, 1
bind = SUPER, 2, workspace, 2
bind = SUPER, 3, workspace, 3
bind = SUPER, 4, workspace, 4
bind = SUPER, 5, workspace, 5
bind = SUPER, 6, workspace, 6
bind = SUPER, 7, workspace, 7
bind = SUPER, 8, workspace, 8
bind = SUPER, 9, workspace, 9
bind = SUPER, 0, workspace, 10
#bind = SUPER, TAB, overview:toggle
bind = SUPER SHIFT, 1, movetoworkspace, 1
bind = SUPER SHIFT, 2, movetoworkspace, 2
bind = SUPER SHIFT, 3, movetoworkspace, 3
bind = SUPER SHIFT, 4, movetoworkspace, 4
bind = SUPER SHIFT, 5, movetoworkspace, 5
bind = SUPER SHIFT, 6, movetoworkspace, 6
bind = SUPER SHIFT, 7, movetoworkspace, 7
bind = SUPER SHIFT, 8, movetoworkspace, 8
bind = SUPER SHIFT, 9, movetoworkspace, 9
bind = SUPER SHIFT, 0, movetoworkspace, 10
bind = SUPER, mouse_down, workspace, e+1
bind = SUPER, mouse_up, workspace, e-1
bindm = SUPER, mouse:272, movewindow
bindm = SUPER, mouse:273, resizewindow
submap=capture
bind = SUPER,Escape,submap,reset # to exit the "capture" mode
submap=reset
bind = SUPER SHIFT,P,submap,capture # to enter the "capture" mode

View file

@ -0,0 +1,5 @@
$primary = rgb(89b4fa)
$secondary = rgb(313244)
$bg = rgb(1e1e2e)
$fg = rgb(363a4f)

View file

@ -0,0 +1,3 @@
debug {
overlay = false
}

View file

@ -0,0 +1,75 @@
exec-once = gsettings set org.gnome.desktop.interface gtk-theme "catppuccin-mocha-blue-standard+default"
exec-once = gsettings set org.gnome.desktop.interface icon-theme 'Tela-circle-blue-dark'
exec-once = gsettings set org.gnome.desktop.interface color-scheme 'prefer-dark'
exec-once = gsettings set org.gnome.desktop.interface gtk-color-scheme 'prefer-dark'
exec-once = gsettings set org.gnome.desktop.interface cursor-theme 'Bibata-Modern-Classic'
general {
col.active_border = $primary
col.inactive_border = $secondary
gaps_in = 15
gaps_out = 30
border_size = 3
resize_on_border = false
allow_tearing = false
layout = dwindle
}
decoration {
rounding = 10
active_opacity = 1.0
inactive_opacity = 1.0
dim_inactive = false
dim_strength = 0.2
blur {
enabled = true
size = 3
passes = 4
noise = 0.07
xray = true
brightness = 0.4
popups = false
}
}
animations {
enabled = true
bezier = myBezier, 0.05, 0.9, 0.1, 1.05
animation = windows, 1, 7, myBezier
animation = windowsOut, 1, 7, myBezier, popin 80%
animation = border, 1, 10, myBezier
animation = borderangle, 1, 8, myBezier
animation = fade, 1, 7, myBezier
animation = workspaces, 1, 6, myBezier
}
dwindle {
pseudotile = false
preserve_split = true
smart_split = false
smart_resizing = false
}
misc {
force_default_wallpaper = -1
disable_hyprland_logo = true
}
input {
kb_layout = us, ru
kb_variant =
kb_model =
kb_options = grp:caps_toggle
kb_rules =
follow_mouse = 1
sensitivity = 0
touchpad {
natural_scroll = true
scroll_factor = 0.1
drag_lock = true
}
}

13
dot-config/hypr/env.conf Normal file
View file

@ -0,0 +1,13 @@
env = XCURSOR_SIZE,24
env = XCURSOR_THEME,Bibata-Modern-Classic
env = HYPRCURSOR_SIZE,24
env = HYPRCURSOR_THEME,Bibata-Modern-Classic
env = XDG_CURRENT_DESKTOP,Hyprland
env = XDG_SESSION_TYPE,wayland
env = XDG_SESSION_DESKTOP,Hyprland
env = QT_AUTO_SCREEN_SCALE_FACTOR,1
env = QT_QPA_PLATFORM,wayland
env = QT_QPA_PLATFORMTHEME,gtk3
env = EDITOR,nvim
env = ELECTRON_OZONE_PLATFORM_HINT,wayland
env = MOZ_ENABLE_WAYLAND=1

View file

@ -0,0 +1,34 @@
general {
lock_cmd = ~/.config/hypr/bin/lockscreen
before_sleep_cmd = ~/.config/hypr/bin/before_sleep
ignore_dbus_inhibit = false
ignore_systemd_inhibit = false
}
listener {
timeout = 150 # 2.5min.
on-timeout = brightnessctl -s set 10 # set monitor backlight to minimum, avoid 0 on OLED monitor.
on-resume = brightnessctl -r # monitor backlight restore.
}
listener {
timeout = 150 # 2.5min.
on-timeout = brightnessctl -sd 'dell::kbd_backlight' set 0 # turn off keyboard backlight.
on-resume = brightnessctl -rd 'dell::kbd_backlight' # turn on keyboard backlight.
}
listener {
timeout = 300 # 5min
on-timeout = loginctl lock-session # lock screen when timeout has passed
}
listener {
timeout = 330 # 5.5min
on-timeout = hyprctl dispatch dpms off # screen off when timeout has passed
on-resume = hyprctl dispatch dpms on # screen on when activity is detected after timeout has fired.
}
listener {
timeout = 1800 # 30min
on-timeout = systemctl suspend # suspend pc
}

View file

@ -0,0 +1,21 @@
source = colors.conf
$terminal = alacritty
$fileManager = nautilus -w
$menu = rofi -show drun
$browser = zen-browser
$discord = vesktop
$telegram = telegram-desktop
$pctl = playerctl
$sshot = hyprshot -o ~/Pictures/Screenshots/ -z -m
$locker = loginctl lock-session
source = plugins.conf
exec-once = hyprpm reload -n
source = monitors.conf
source = decorations.conf
source = env.conf
source = binds.conf
source = rules.conf
exec-once = ~/.config/hypr/bin/autostart

View file

@ -0,0 +1,51 @@
source = appearance.conf
# BACKGROUND
background {
monitor =
path = screenshot
blur_passes = 3
contrast = 0.8916
brightness = 0.8172
vibrancy = 0.1696
vibrancy_darkness = 0.0
}
# GENERAL
general {
no_fade_in = false
grace = 0
disable_loading_bar = true
ignore_empty_input = false
}
# INPUT FIELD
input-field {
monitor = eDP-1
size = 200, 40
outline_thickness = 2
dots_size = 0.2 # Scale of input-field height, 0.2 - 0.8
dots_spacing = 0.2 # Scale of dots' absolute size, 0.0 - 1.0
dots_center = true
outer_color = rgba(0, 0, 0, 0)
inner_color = rgba(0, 0, 0, 0.5)
font_color = rgb(205, 214, 244)
fade_on_empty = false
placeholder_text =
hide_input = false
position = 0, -120
halign = center
valign = center
}
# TIME
label {
monitor = eDP-1
text = cmd[update:1000] echo "$(date +"%H:%M")"
color = $fg
font_size = 240
font_family = eurofurence
position = 0, -300
halign = center
valign = top
}

View file

View file

@ -0,0 +1,6 @@
#===========================================================================#
# Monitors #
#===========================================================================#
monitor=eDP-1, 1920x1080@60, 1920x0, 1
monitor=DP-2, 1920x1200@60, 0x0, 1

View file

@ -0,0 +1,2 @@
# chromakey_background = 30,30,46
# chromakey_background = 36,36,56

View file

@ -0,0 +1,60 @@
#
# Window rules
#
# Waybar
# layerrule = blur, waybar
# layerrule = ignorezero, waybar
# Hyprlauncher
layerrule = blur, gtk4-layer-shell
layerrule = ignorezero, gtk4-layer-shell
# Mako
layerrule = blur, notifications
layerrule = ignorezero, notifications
# Rofi
layerrule = blur, rofi
layerrule = ignorezero, rofi
# Disable maximize
windowrulev2 = suppressevent maximize, class:.*
# Pavucontrol
windowrulev2 = float, class:^(org.pulseaudio.pavucontrol)$
windowrulev2 = size 696 570, class:^(org.pulseaudio.pavucontrol)$
windowrulev2 = move 996 440, class:^(org.pulseaudio.pavucontrol)$
windowrulev2 = monitor eDP-1, class:^(org.pulseaudio.pavucontrol)$
windowrulev2 = opacity 0.9, class:^(org.pulseaudio.pavucontrol)$
# XWayland Video Bridge - Unused
# windowrulev2 = opacity 0.0 override,class:^(xwaylandvideobridge)$
# windowrulev2 = noanim,class:^(xwaylandvideobridge)$
# windowrulev2 = noinitialfocus,class:^(xwaylandvideobridge)$
# windowrulev2 = maxsize 1 1,class:^(xwaylandvideobridge)$
# windowrulev2 = noblur,class:^(xwaylandvideobridge)$
# Vesktop
# windowrulev2 = opacity 0.9, class:^(vesktop)$
# Telegram
windowrulev2 = maximize, class:^(org.telegram.desktop)$,title:^(Media viewer)$
windowrulev2 = float, class:^(org.telegram.desktop)$,title:^(Media viewer)$
# windowrulev2 = opaque, class:^(org.telegram.desktop)$,title:^(Media viewer)$
# Nemo
windowrulev2 = float, class:^(nemo)$,title:^.*(Properties)$
# Firefox library (Downloads, History, etc.)
windowrulev2 = float, class:^(zen-alpha)$,title:^(Library)$
windowrulev2 = opacity 0.9, class:^(zen-alpha)$,title:^(Library)$
# Spotify
windowrulev2 = opacity 0.9, class:^(Spotify)$
windowrulev2 = noblur, class:^()$,title:^()$
# windowrulev2 = plugin:chromakey,fullscreen:0
# windowrulev2 = opacity 0.999,fullscreen:0

View file

@ -0,0 +1,65 @@
{
"debug": {
"disable_auto_focus": false,
"enable_logging": false
},
"theme": {
"colors": {
"border": "#89b4fa",
"item_bg": "#00000000",
"item_bg_hover": "#89b4faef",
"item_bg_selected": "#89b4faef",
"item_description": "#bac2de",
"item_description_selected": "#181825",
"item_name": "#cdd6f4",
"item_name_selected": "#1e1e2e",
"item_path": "#a6adc8",
"item_path_selected": "#181825",
"search_bg": "#181825aa",
"search_bg_focused": "#89b4fa",
"search_caret": "#cdd6f4",
"search_text": "#cdd6f4",
"window_bg": "#1e1e2e88"
},
"corners": {
"list_item": 8,
"search": 8,
"window": 12
},
"spacing": {
"item_margin": 8,
"item_padding": 2,
"search_margin": 9,
"search_padding": 9
},
"typography": {
"item_description_size": 12,
"item_name_size": 14,
"item_path_font_family": "JetBrainsMono Nerd Font Mono",
"item_path_size": 12,
"search_font_size": 16
}
},
"window": {
"anchor": "center",
"border_width": 3,
"custom_navigate_keys": {
"delete_word": "h",
"down": "j",
"up": "k"
},
"height": 400,
"margin_bottom": 20,
"margin_left": 0,
"margin_right": 0,
"margin_top": 0,
"max_entries": 50,
"show_border": true,
"show_descriptions": true,
"show_icons": true,
"show_paths": true,
"show_search": true,
"use_gtk_colors": false,
"width": 600
}
}

View file

@ -0,0 +1,4 @@
[Settings]
folder = /mnt/data/Wallpapers/unsorted
backend = hyprpaper
last_wallpaper = /mnt/data/Wallpapers/unsorted/neon-dunes-8k.jpg

19
dot-config/mako/mako.conf Normal file
View file

@ -0,0 +1,19 @@
sort=-time
layer=overlay
output=DP-1
anchor=top-right
background-color=#121318bb
width=300
height=110
border-size=3
border-color=#b4c5ff
border-radius=5
icons=0
max-icon-size=64
default-timeout=5000
ignore-timeout=1
font=JetBrainsMono Nerd Font Mono: 14
[urgency=high]
border-color=#ffb4ab
default-timeout=0

1
dot-config/nvim Submodule

@ -0,0 +1 @@
Subproject commit 04f1435d263bf12abd4d8c3ef960d12b6cdf918c

View file

@ -0,0 +1,4 @@
[ColorScheme]
active_colors=#ffcdd6f4, #ff1e1e2e, #ffa6adc8, #ff9399b2, #ff45475a, #ff6c7086, #ffcdd6f4, #ffcdd6f4, #ffcdd6f4, #ff1e1e2e, #ff181825, #ff7f849c, #ff89b4fa, #ff1e1e2e, #ff89b4fa, #fff38ba8, #ff1e1e2e, #ffcdd6f4, #ff11111b, #ffcdd6f4, #807f849c
disabled_colors=#ffa6adc8, #ff1e1e2e, #ffa6adc8, #ff9399b2, #ff45475a, #ff6c7086, #ffa6adc8, #ffa6adc8, #ffa6adc8, #ff1e1e2e, #ff11111b, #ff7f849c, #ff89b4fa, #ff45475a, #ff89b4fa, #fff38ba8, #ff1e1e2e, #ffcdd6f4, #ff11111b, #ffcdd6f4, #807f849c
inactive_colors=#ffcdd6f4, #ff1e1e2e, #ffa6adc8, #ff9399b2, #ff45475a, #ff6c7086, #ffcdd6f4, #ffcdd6f4, #ffcdd6f4, #ff1e1e2e, #ff181825, #ff7f849c, #ff89b4fa, #ffa6adc8, #ff89b4fa, #fff38ba8, #ff1e1e2e, #ffcdd6f4, #ff11111b, #ffcdd6f4, #807f849c

View file

@ -0,0 +1,31 @@
[Appearance]
color_scheme_path=/home/timoxa0/.config/qt5ct/colors/Catppuccin-Mocha.conf
custom_palette=true
standard_dialogs=gtk3
style=Fusion
[Fonts]
fixed="DejaVu LGC Sans,12,-1,5,50,0,0,0,0,0"
general="DejaVu LGC Sans,12,-1,5,50,0,0,0,0,0"
[Interface]
activate_item_on_single_click=1
buttonbox_layout=0
cursor_flash_time=1000
dialog_buttons_have_icons=1
double_click_interval=400
gui_effects=@Invalid()
keyboard_scheme=2
menus_have_icons=true
show_shortcuts_in_context_menus=true
stylesheets=@Invalid()
toolbutton_style=4
underline_shortcut=1
wheel_scroll_lines=3
[SettingsWindow]
geometry=@ByteArray(\x1\xd9\xd0\xcb\0\x3\0\0\0\0\a\x80\0\0\0\0\0\0\xe\x4\0\0\x5H\0\0\a\x80\0\0\0\0\0\0\xe\x37\0\0\x5\x8a\0\0\0\0\x2\0\0\0\rp\0\0\a\x80\0\0\0\0\0\0\xe\x4\0\0\x5H)
[Troubleshooting]
force_raster_widgets=1
ignored_applications=@Invalid()

View file

@ -0,0 +1,18 @@
configuration{
modi: "run,drun,window";
icon-theme: "Oranchelo";
show-icons: true;
terminal: "alacritty";
drun-display-format: "{icon} {name}";
location: 0;
disable-history: false;
hide-scrollbar: true;
display-drun: "  Apps ";
display-run: "  Run ";
display-window: " 󰕰 Window";
display-Network: " 󰤨 Network";
sidebar-mode: true;
}
@theme "catppuccin-mocha"

Binary file not shown.

Binary file not shown.

View file

@ -0,0 +1,5 @@
Use it as you wish, have fun listening to music.
Shoutout to Porter Robinson.
-Robatortas

View file

@ -0,0 +1,10 @@
# BLOSSOM
A little theme for your Spotify client.
![1](https://github.com/spicetify/spicetify-themes/assets/72624799/4e545661-a164-469a-a10c-c1fcba40ab72)
![2](https://github.com/spicetify/spicetify-themes/assets/72624799/263ebbd2-b383-47b4-8bcf-1a9c4d5152c1)
Made for a dark theme look thats pleasing to the eye.
By Robatortas

View file

@ -0,0 +1,12 @@
[dark]
text = ffffff
subtext = aaaaaa
extratext = aaaaaa
background = 1e2226
player = 282e33
button = 4d5c78
button-active = 6d80a3
button-disabled = 282e33
sidebar = 1e2226
main = 1e2226
card = 282e33

Binary file not shown.

After

Width:  |  Height:  |  Size: 254 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 592 KiB

View file

@ -0,0 +1,434 @@
/* Blossom Theme */
#main {
overflow: hidden;
background-color: var(--spice-background);
}
.spotify__container--is-desktop .Root__top-container {
padding-top: calc(24px + 8px * 2);
--panel-gap: 0;
}
.LayoutResizer__inline-end {
inset-inline-end: 8px;
}
.LayoutResizer__inline-start {
inset-inline-start: 8px;
}
.LayoutResizer__resize-bar {
width: 8px;
}
/* SEARCH */
.main-yourEpisodes-episodeCard {
background-color: red;
transform: translateX(100px);
}
.x-searchInput-searchInputSearchIcon,
.x-searchInput-searchInputClearButton {
color: var(--spice-button) !important;
}
/* header colored backgrounds */
.main-actionBarBackground-background,
.main-entityHeader-overlay,
.main-entityHeader-backgroundColor {
background: unset !important;
background-image: unset;
}
.EvQHNTBhaU3rGCRRlAWj {
background: unset !important;
backdrop-filter: blur(5px);
mask: linear-gradient(to bottom, #212121, 60%, transparent);
transition: all 1s;
}
.QplCuuGSoV4updqTSLq9 {
background: unset !important;
backdrop-filter: blur(5px);
mask: linear-gradient(to bottom, #212121, 60%, transparent);
transition: all 1s;
}
.main-trackList-trackListHeaderStuck {
background: unset !important;
backdrop-filter: blur(5px);
mask: linear-gradient(to bottom, #212121, 60%, transparent);
transition: all 1s;
}
/* Home Header, when on home tab */
.main-home-homeHeader {
opacity: 40%;
background: radial-gradient(ellipse at top, var(--spice-button), 10%, var(--spice-main), 100%, transparent);
background-color: unset !important;
}
.cover-art {
background: var(--spice-background);
border-radius: 7.5%;
}
.cover-art-image {
border-radius: 7.5%;
transition: all 0.5s;
cursor: pointer;
}
/* Album or song art */
.main-entityHeader-image {
border-radius: 10%;
opacity: 100;
animation: both;
cursor: pointer;
}
.main-editImageButton-overlay {
border-radius: 10%;
background: unset;
backdrop-filter: blur(4px);
color: var(--spice-button);
transition: all 1s;
}
.main-entityHeader-imagePlaceholder {
background-color: var(--spice-player);
}
.main-entityHeader-shadow {
box-shadow: 0 0px 50px rgba(0, 0, 0, 0.2);
}
/* TRACKLIST */
.main-trackList-playingIcon {
filter: hue-rotate(100deg);
}
.main-trackList-trackListRow {
margin-left: 0px;
transition: all 0.5s;
}
.main-trackList-trackListRow:hover {
background-color: var(--spice-player);
margin-left: 10px;
transition: all 0.5s;
}
/* Playback bar and controls */
.main-nowPlayingBar-nowPlayingBar {
background-color: unset !important;
background-image: linear-gradient(0deg, var(--spice-player), 80%, transparent);
transition: all 0.5s;
}
.main-playPauseButton-button {
background: var(--spice-button-active);
color: var(--spice-text);
}
/* TopBar, where the profile button and back and ford buttons are */
.main-topBar-background {
opacity: 10%;
background: linear-gradient(180deg, #171717, 60%, transparent) !important;
backdrop-filter: blur(5px);
mask: linear-gradient(to bottom, #212121, 60%, transparent);
transition: all 1s;
}
.main-topBar-overlay {
background: unset !important;
background-color: unset !important;
background-image: unset !important;
/* backdrop-filter: blur(10px); */
}
.main-navBar-navBarLinkActive,
.main-navBar-navBarLinkActive:focus,
.logo {
background-color: var(--spice-player) !important;
}
/* move the progress bar to the top */
.main-nowPlayingBar-nowPlayingBar {
position: relative;
padding-inline-end: 16px !important;
}
.playback-bar__progress-time-elapsed,
.main-playbackBarRemainingTime-container {
min-width: 0;
width: 0 !important;
opacity: 0;
transition: all 0.5s;
}
.playback-bar:hover .playback-bar__progress-time-elapsed, .playback-bar:hover
.main-playbackBarRemainingTime-container {
min-width: 40px;
width: auto;
opacity: 1;
}
.playback-bar {
width: 100%;
left: 0;
bottom: 65px;
position: absolute;
cursor: pointer;
overflow: hidden;
}
.progress-bar {
--fg-color: var(--spice-button-active);
}
.os-theme-spotify.os-host-transition > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle {
border-radius: 4px;
background-color: var(--spice-text);
opacity: 30%;
}
.player-controls__buttons {
margin-bottom: 0;
}
.main-playPauseButton-button {
cursor: pointer;
border-radius: 10px;
--button-size: 50px !important;
}
.player-controls__buttons {
align-items: center;
}
/* LEFT BAR STUFF */
/* Playlists text color */
.main-rootlist-rootlistDivider,
.main-rootlist-rootlistDividerGradient {
visibility: hidden;
}
/* remove playlist item hover effect */
li > div > div::after {
background-color: transparent !important;
}
li > div::after {
background-color: transparent !important;
}
/* give background to active playlist */
.BoxComponent-group-tinted-listRow-isInteractive-hasLeadingOrMedia-paddingBlockStart_8px-paddingBlockEnd_8px-minBlockSize_56px-padding_8px,
.BoxComponent-group-tinted-listRow-isInteractive-hasFocus-hasLeadingOrMedia-paddingBlockStart_8px-paddingBlockEnd_8px-minBlockSize_56px-padding_8px {
background-color: var(--spice-player);
transition: all 1s;
}
/* expanded sidebar buttons */
.search-searchCategory-carouselButton {
background-color: transparent;
}
.search-searchCategory-carouselButton:hover {
background-color: var(--spice-player);
}
.main-yourLibraryX-iconOnly:hover {
background-color: var(--spice-player);
color: var(--spice-text);
}
.main-yourLibraryX-filterArea > div > div:first-child button {
background-color: var(--spice-player) !important;
}
.main-yourLibraryX-filterArea > div > div:first-child button > span {
background-color: var(--spice-player) !important;
color: var(--spice-text) !important;
}
.main-yourLibraryX-libraryFilter .x-sortBox-sortDropdown,
.main-yourLibraryX-libraryFilter .x-filterBox-expandButton,
.main-yourLibraryX-libraryFilter .x-filterBox-searchIconContainer,
.main-yourLibraryX-libraryFilter .x-filterBox-filterInput,
.main-yourLibraryX-libraryFilter .x-filterBox-clearButton {
color: var(--spice-text);
}
/* give active nav tab a background */
.main-navBar-mainNav li:has(> .active) {
background-color: var(--spice-player);
border-radius: 0 4px 4px 0;
position: relative;
transform: translate(-12px, 0);
transition: all 1s;
}
/* remove built in scrolllist shadow */
.main-yourLibraryX-isScrolled {
box-shadow: none !important;
}
.main-rootlist-rootlist {
background-color: var(--spice-player);
top: 10px;
}
.main-rootlist-rootlistItem {
cursor: pointer;
margin: 0px;
transition: all 0.5s;
}
.main-rootlist-rootlistItem:hover {
background: var(--spice-background) !important;
margin: 5px;
padding: 5px;
transition: all 0.5s;
}
.main-rootlist-rootlistItemLinkActive {
background: var(--spice-background) !important;
margin-left: -22px;
margin-right: -10px;
padding-left: 30px;
transition: all 0.5s;
}
.x-categoryCard-CategoryCard {
transition: all 0.5s;
}
.x-categoryCard-CategoryCard:hover {
margin-top: -2%;
transition: all 0.5s;
}
.main-navBar-navBarItem {
cursor: pointer;
margin: 0px;
transition: all 0.5s;
}
.main-navBar-navBarItem:hover {
background-color: var(--spice-player) !important;
transition: all 0.5s;
}
.main-navBar-navBarLinkActive {
background: var(--spice-player) !important;
margin-left: -22px;
margin-right: -10px;
padding-left: 30px;
transition: all 0.5s;
}
/* CARDS */
/* Little filter for the cards */
.main-card-card {
opacity: 100%;
background-color: unset !important;
background: linear-gradient(180deg, var(--spice-player), 65%, transparent);
transition: all 1s;
}
.main-card-card:hover {
background-color: unset !important;
background: var(--spice-player) !important;
}
.collection-collectionEntityHeroCard-likedSongs {
background-color: unset !important;
background: linear-gradient(180deg, var(--spice-player), 65%, transparent);
transition: all 1s;
}
.collection-collectionEntityHeroCard-likedSongs:hover {
background-color: unset !important;
background: var(--spice-player) !important;
}
/* Shortcuts */
.view-homeShortcutsGrid-shortcut {
background-color: unset !important;
background: linear-gradient(180deg, var(--spice-player), 65%, transparent);
transition: all 1s;
}
.view-homeShortcutsGrid-shortcut:hover {
background-color: unset !important;
background: var(--spice-player) !important;
}
/* Cursor things */
.main-playPauseButton-button,
.main-repeatButton-button,
.main-skipForwardButton-button,
.main-skipBackButton-button,
.main-shuffleButton-button {
cursor: pointer !important;
}
/* Search */
input {
background-color: unset !important;
border-bottom: solid 1px var(--spice-button-active) !important;
color: var(--spice-text) !important;
border-radius: 0px !important;
}
.x-833-searchInput-searchInputSearchIcon {
color: var(--spice-text) !important;
}
/* ANIMATIONS */
.view-homeShortcutsGrid-shortcut .main-heroCard-card,
.main-buttonIcon-buttonIcon,
.main-trackList-column,
.main-rootlist-rootlistItem,
.main-card-card,
.main-entityHeader-smallHeader,
.main-entityHeader-headerText,
.main-entityHeader-image {
animation-name: up-fade-anim;
animation-duration: 1s;
}
.main-shelf-seeAll,
.main-cardImage-image,
.main-trackList-trackList,
.main-trackList-number {
animation-name: left-fade-anim;
animation-duration: 1s;
}
.main-shelf-title {
animation-name: right-fade-anim;
animation-duration: 1s;
}
@keyframes up-fade-anim {
from {
opacity: 0%;
transform: translateY(10px);
}
to {
opacity: 100;
transform: translateY(0px);
}
}
@keyframes left-fade-anim {
from {
opacity: 0%;
transform: translateX(10px);
}
to {
opacity: 100;
transform: translateX(0px);
}
}
@keyframes right-fade-anim {
from {
opacity: 0%;
transform: translateX(-10px);
}
to {
opacity: 100;
transform: translateX(0px);
}
}
.queue-tabBar-active {
background-color: var(--spice-player) !important;
transition: all 0.5s;
}

View file

@ -0,0 +1,9 @@
# BurntSienna
## Screenshots
![BurntSienna](./screenshot.png)
## More
Montserrat Font is necessary, it is available on Google Fonts:
https://fonts.google.com/specimen/Montserrat<br>
Author: https://github.com/pjaspinski

View file

@ -0,0 +1,6 @@
[Base]
button = ef8450
sidebar = 242629
player = 242629
main = 303336
button-active = ef8450

Binary file not shown.

After

Width:  |  Height:  |  Size: 275 KiB

View file

@ -0,0 +1,228 @@
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
* {
font-family: Montserrat;
}
/* Page titles */
h1 {
font-weight: 700 !important;
}
/* Song name in player */
.main-nowPlayingWidget-nowPlaying .main-trackInfo-name {
overflow: unset;
font-size: 20px !important;
}
/* Artist name in player */
.main-nowPlayingWidget-nowPlaying .main-trackInfo-artists {
overflow: unset;
font-size: 15px;
}
.main-type-finale {
line-height: 17px;
}
/* Icons */
.main-trackList-rowPlayPauseIcon {
transform: scale(1.3);
}
.x-downloadButton-button svg {
height: 32px;
width: 32px;
}
/* Progress and remaining time */
.main-playbackBarRemainingTime-container,
.playback-bar__progress-time-elapsed,
.playback-bar__progress-time {
font-size: 15px;
margin-left: 5px;
margin-right: 5px;
}
/* Player play button */
.main-playPauseButton-button {
background-color: unset;
color: var(--spice-subtext);
}
.main-playPauseButton-button svg {
height: 28px;
width: 28px;
}
/* Progress bar */
.progress-bar {
--fg-color: var(--spice-button);
}
.progress-bar__bg,
.progress-bar__fg,
.progress-bar__fg_wrapper {
height: 5px;
}
.progress-bar-wrapper {
margin-left: 5px;
margin-right: 5px;
}
/* Extra controls */
.control-button::before {
font-size: 20px;
}
.ExtraControls svg {
height: 20px;
width: 20px;
}
/* Removing gradients */
.main-entityHeader-backgroundColor,
.main-actionBarBackground-background {
background-color: unset !important;
background-image: none;
}
/* Cover shadow */
.main-entityHeader-shadow {
-webkit-box-shadow: 0 4px 20px rgba(var(--spice-rgb-shadow), 0.5);
box-shadow: 0 4px 20px rgba(var(--spice-rgb-shadow), 0.5);
}
/* Top bar */
.main-topBar-background {
background-color: #3a3d42 !important;
}
/* Playing icon */
.main-trackList-playingIcon {
filter: saturate(0%);
}
/* Playlist like button */
.main-actionBar-ActionBarRow .main-addButton-button .Svg-ulyrgf-0 {
height: unset;
width: unset;
}
/* Order button */
.x-sortBox-sortDropdown {
margin-top: 3px;
}
/* Sidebar playlists menu */
.main-rootlist-rootlistDividerGradient {
background: unset;
}
.main-rootlist-rootlistDivider {
background-color: var(--spice-button);
}
/* Search box */
.x-searchInput-searchInputInput {
font-size: 18px;
}
/* Aritsts names */
.main-type-mesto {
font-size: 16px;
line-height: 20px;
}
/* Songs names */
.main-type-ballad {
font-size: 18px;
}
/* Cards descriptions */
.main-cardSubHeader-root {
overflow: hidden !important;
}
/* Ad title */
.desktoproutes-homepage-takeover-ad-hptoNativeOriginal-header {
font-weight: 700 !important;
}
/* Friends names */
.main-buddyFeed-username a {
color: var(--spice-text) !important;
font-size: 17px;
font-weight: 500;
}
/* Friends songs and artists */
.main-buddyFeed-artistAndTrackName a,
.main-buddyFeed-playbackContextLink span {
font-size: 13px;
}
/* Cover height */
.main-coverSlotExpanded-container {
height: var(--nav-bar-width) + 8px;
}
/* Scrollbars */
.os-scrollbar-handle {
background: var(--spice-button) !important;
border-radius: 8px;
}
/* Making index column wider so that lighter background that
highlights selected song contains multi-digit song numbers */
/* It looks good up to 4 digits, I figured that no one has playlists with more music than that ;) */
.main-trackList-trackList.main-trackList-indexable .main-trackList-trackListRowGrid {
grid-template-columns: [index] 48px [first] 6fr [var1] 4fr [var2] 3fr [last] minmax(120px, 1fr) !important;
}
/* Text boxes in settings */
.main-dropDown-dropDown {
background-color: var(--spice-button-disabled);
}
/* Facebook button */
.x-settings-facebookButton {
background-color: unset !important;
}
/* Playlist play button color */
.encore-dark-theme .encore-bright-accent-set,
.encore-dark-theme .encore-bright-accent-set:hover {
--background-base: var(--spice-button-active);
--background-highlight: var(--spice-player);
--background-press: var(--spice-player);
}
/* Volume bar margins */
.volume-bar .progress-bar {
margin: 0 0.4rem;
}
.volume-bar .playback-progressbar {
width: 70%;
}
.volume-bar {
flex: 0 150px;
}
/* Menu hidden under the button with account name - font size and family unification */
.ellipsis-one-line {
font-family: Montserrat;
}
.ellipsis-one-line.main-type-mesto {
font-size: 14px;
}
/* Removal of empty space above playlist cover and title on narrow viewports */
.main-entityHeader-container.main-entityHeader-nonWrapped {
min-height: 325px;
height: 15vh;
}

View file

@ -0,0 +1,132 @@
# Contributor Covenant Code of Conduct
## Our Pledge
We as members, contributors, and leaders pledge to make participation in our
community a harassment-free experience for everyone, regardless of age, body
size, visible or invisible disability, ethnicity, sex characteristics, gender
identity and expression, level of experience, education, socio-economic status,
nationality, personal appearance, race, caste, color, religion, or sexual
identity and orientation.
We pledge to act and interact in ways that contribute to an open, welcoming,
diverse, inclusive, and healthy community.
## Our Standards
Examples of behavior that contributes to a positive environment for our
community include:
* Demonstrating empathy and kindness toward other people
* Being respectful of differing opinions, viewpoints, and experiences
* Giving and gracefully accepting constructive feedback
* Accepting responsibility and apologizing to those affected by our mistakes,
and learning from the experience
* Focusing on what is best not just for us as individuals, but for the overall
community
Examples of unacceptable behavior include:
* The use of sexualized language or imagery, and sexual attention or advances of
any kind
* Trolling, insulting or derogatory comments, and personal or political attacks
* Public or private harassment
* Publishing others' private information, such as a physical or email address,
without their explicit permission
* Other conduct which could reasonably be considered inappropriate in a
professional setting
## Enforcement Responsibilities
Community leaders are responsible for clarifying and enforcing our standards of
acceptable behavior and will take appropriate and fair corrective action in
response to any behavior that they deem inappropriate, threatening, offensive,
or harmful.
Community leaders have the right and responsibility to remove, edit, or reject
comments, commits, code, wiki edits, issues, and other contributions that are
not aligned to this Code of Conduct, and will communicate reasons for moderation
decisions when appropriate.
## Scope
This Code of Conduct applies within all community spaces, and also applies when
an individual is officially representing the community in public spaces.
Examples of representing our community include using an official e-mail address,
posting via an official social media account, or acting as an appointed
representative at an online or offline event.
## Enforcement
Instances of abusive, harassing, or otherwise unacceptable behavior may be
reported to the community leaders responsible for enforcement at
[INSERT CONTACT METHOD].
All complaints will be reviewed and investigated promptly and fairly.
All community leaders are obligated to respect the privacy and security of the
reporter of any incident.
## Enforcement Guidelines
Community leaders will follow these Community Impact Guidelines in determining
the consequences for any action they deem in violation of this Code of Conduct:
### 1. Correction
**Community Impact**: Use of inappropriate language or other behavior deemed
unprofessional or unwelcome in the community.
**Consequence**: A private, written warning from community leaders, providing
clarity around the nature of the violation and an explanation of why the
behavior was inappropriate. A public apology may be requested.
### 2. Warning
**Community Impact**: A violation through a single incident or series of
actions.
**Consequence**: A warning with consequences for continued behavior. No
interaction with the people involved, including unsolicited interaction with
those enforcing the Code of Conduct, for a specified period of time. This
includes avoiding interactions in community spaces as well as external channels
like social media. Violating these terms may lead to a temporary or permanent
ban.
### 3. Temporary Ban
**Community Impact**: A serious violation of community standards, including
sustained inappropriate behavior.
**Consequence**: A temporary ban from any sort of interaction or public
communication with the community for a specified period of time. No public or
private interaction with the people involved, including unsolicited interaction
with those enforcing the Code of Conduct, is allowed during this period.
Violating these terms may lead to a permanent ban.
### 4. Permanent Ban
**Community Impact**: Demonstrating a pattern of violation of community
standards, including sustained inappropriate behavior, harassment of an
individual, or aggression toward or disparagement of classes of individuals.
**Consequence**: A permanent ban from any sort of public interaction within the
community.
## Attribution
This Code of Conduct is adapted from the [Contributor Covenant][homepage],
version 2.1, available at
[https://www.contributor-covenant.org/version/2/1/code_of_conduct.html][v2.1].
Community Impact Guidelines were inspired by
[Mozilla's code of conduct enforcement ladder][Mozilla CoC].
For answers to common questions about this code of conduct, see the FAQ at
[https://www.contributor-covenant.org/faq][FAQ]. Translations are available at
[https://www.contributor-covenant.org/translations][translations].
[homepage]: https://www.contributor-covenant.org
[v2.1]: https://www.contributor-covenant.org/version/2/1/code_of_conduct.html
[Mozilla CoC]: https://github.com/mozilla/diversity
[FAQ]: https://www.contributor-covenant.org/faq
[translations]: https://www.contributor-covenant.org/translations

View file

@ -0,0 +1,119 @@
# Contributing guidelines
Here are the guidelines for contributing to this repository.
## Before contributing
For avoiding having too many similar themes with small changes, themes are merged only if they bring **sensitive** changes to default Spotify UI and are different from existing themes.
A theme name (as well as color scheme name) should consist of one word starting with an uppercase letter and shouldn't contain `spicetify` or any whitespace in it; if a "-" is present in the name it must be followed by an uppercase letter.
## How to contribute
If you want to add your theme:
* Fork this repository
* Create another folder named after your theme name
* Create `color.ini` and `user.css` files
* Create a `README.md` in it with the following structure
```markdown
# THEME_NAME
## Screenshots
[Put at least one image per color scheme here]
## More
[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
## THEME_NAME
[A single image of the theme]
```
If, instead, more than one color scheme is present
```markdown
## THEME_NAME
#### COLOR_SCHEME1_NAME
[A single image of the theme using the color scheme]
#### COLOR_SCHEME2_NAME
[A single image of the theme using the color scheme]
...
```
* Commit only once, more details in the **Commit Message**
* 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.**
## Commit Message
**NOTE: commit only once when you add a new theme or scheme (you can also commit again later, if you need to).**
### Format
<type>(<scope>): <subject>
<BLANK LINE>
<body>[optional]
**Any line of the commit message cannot be longer than 100 characters!**
* **type:** feat | fix | docs | chore
* **feat:** A new theme | A new scheme | A new feature
* **fix:** A bug fix
* **docs:** Change the `README.md` of the theme | Change the `THEMES.md`
* **chore:** Add more screenshots | Change the screentshots | Other things
* **scope:** THEMES | `<ThemeName>`
* THEMES is a fixed format: `docs(THEMES)`
* In other cases, use the theme name
* **subject:** What changes you have done
* Use the imperative, present tense: "change" not "changed" nor "changes"
* Don't capitalize first letter
* No dot (.) at the end
* **body**: More details of your changes, you can mention the most important changes here
### Example (Turntable theme)
* feat
```
feat(Turntable): add Turntable theme
```
```
feat(Turntable): control the rotation of the turntable
Rotate the turntable by playing state.
```
* fix
```
fix(Turntable): show the cursor outside the context menu
```
* docs
```
docs(Turntable): update README.md
```
```
docs(THEMES): add preview for the Turntable
```
* chore
```
chore(Turntable): add screenshots of the Turntable
```
If you want to learn more, view the [Angular - Git Commit Guidelines](https://github.com/angular/angular.js/blob/master/DEVELOPERS.md#-git-commit-guidelines).

View file

@ -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

View file

@ -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

Binary file not shown.

After

Width:  |  Height:  |  Size: 226 KiB

View file

@ -0,0 +1,36 @@
# Dreary
## 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)
### Graytone-Blue
![Graytone-Blue Screenshot](graytone-blue.png)
## Important
Certain aspects of the theme, such as the borders around playlist names, require Sidebar Config to be enabled. It is not required but recommended.
You can enable it by running `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/spicetify/spicetify-themes/tree/master/BIB-Green)
Theme based on Sleek theme: https://github.com/spicetify/spicetify-themes/tree/v2/Sleek

Binary file not shown.

After

Width:  |  Height:  |  Size: 892 KiB

View file

@ -0,0 +1,154 @@
[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
button-active = 106165
button-disabled = 0C1C19
tab-active = 0a1527
notification = 051024
notification-error = 051024
playback-bar = 4f9a87
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
[Graytone-Blue]
; Gray colors with blue highlights
text = 4f9a87
subtext = 406560
button-text = 4f9a87
main = 111115
sidebar = 1e2027
subbutton-text = 040614
player = 1a1b1d
card = 0f1118
selected-row = 040614
shadow = 406560
sub-button = 4f9a87
button = 0d3a2e
button-active = 106165
button-disabled = 0C1C19
tab-active = 0a1527
notification = 051024
notification-error = 051024
playback-bar = 4f9a87
misc = 406560
; 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

Binary file not shown.

After

Width:  |  Height:  |  Size: 984 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 847 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 583 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 950 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 850 KiB

View file

@ -0,0 +1,609 @@
/* 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), 0.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;
padding-left: 5px;
}
.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), 0.8);
}
.main-trackList-trackListHeaderStuck .main-trackList-trackListHeaderRow {
border-bottom: 1px solid rgba(var(--spice-rgb-button-disabled), 0.8);
}
.main-trackList-trackListRow.main-trackList-selected,
.main-trackList-trackListRow.main-trackList-selected:hover {
background-color: rgba(var(--spice-rgb-selected-row), 0.8) !important;
}
.main-trackList-trackListRow:focus-within,
.main-trackList-trackListRow:hover {
background-color: rgba(var(--spice-rgb-selected-row), 0.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;
display: unset !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-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;
overflow: hidden;
overflow-y: scroll;
}
#spicetify-playlist-list > div > div:nth-child(2) > li {
margin: 4px 3.2vw;
width: 84%;
flex-shrink: 0;
padding-top: 10%;
padding-bottom: 10%;
box-sizing: border-box;
position: relative;
margin-bottom: -1px;
border-radius: 10px;
border: 2px solid var(--spice-text);
display: flex;
text-align: center;
flex-direction: column;
transition: all 500ms;
}
#spicetify-playlist-list > div > div:nth-child(2) > li:hover {
border-color: var(--spice-button);
}
.main-connectToFacebook-text,
.main-connectToFacebook-disclaimer {
color: unset !important;
}
.main-type-mesto {
color: var(--spice-button);
}
.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);
}
.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,
.main-collectionLinkButton-collectionLinkButton {
padding-left: 16px !important;
padding-top: 8px;
}
.main-trackCreditsModal-closeBtn {
color: var(--spice-button-disabled) !important;
}
.main-contextMenu-menu {
max-height: 400px;
opacity: 0.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;
}
.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);
}
.div.GlueDropTarget.personal-library > *.active {
background: var(--spice-selected-row);
}
.main-connectBar-connectBar {
overflow: visible !important;
--triangle-position: 147px !important;
align-items: unset !important;
height: 0px !important;
position: absolute !important;
left: 80% !important;
display: flex !important;
bottom: 2% !important;
padding: unset !important;
}
#spicetify-playlist-list > div {
scroll-behavior: smooth;
overflow-y: scroll;
overflow: hidden;
contain: unset !important;
height: fit-content !important;
padding-bottom: 10px;
}
div.main-cardImage-imageWrapper.main-cardImage-roundedCorners
> div
> div
> svg
> path {
color: blue;
background-color: blue;
fill: var(--spice-sidebar);
opacity: 0.7;
}
div.main-cardImage-imageWrapper.main-cardImage-roundedCorners
> div
> div
> svg
> path {
color: blue;
background-color: blue;
fill: var(--spice-sidebar);
opacity: 0.7;
}
.main-yourEpisodes-coverContainer {
background-color: var(--spice-text);
}
.playback-bar__progress-time-elapsed {
visibility: hidden;
width: 0px;
height: 0px;
padding: 0px;
margin: 0px;
position: absolute;
}
.Root__nav-bar {
min-width: 281px !important;
}
.playback-bar__progress-time-elapsed {
display: none !important;
}
#spicetify-playlist-list > div {
height: 100% !important;
}

View file

@ -0,0 +1,110 @@
# Dribbblish
### Base
![base](base.png)
### White
![white](white.png)
### Dark
![dark](dark.png)
### Nord-Light
![nord-light](nord-light.png)
### Nord-Dark
![nord-dark](nord-dark.png)
### Beach-Sunset
![beach-sunset](beach-sunset.png)
### Purple
![purple](purple.png)
### Samurai
![samurai](samurai.png)
### Gruvbox
![gruvbox](gruvbox.png)
### Gruvbox Material Dark
![gruvbox-material-dark](gruvbox-material-dark.png)
### Rosé Pine
![rosepine](rosepine.png)
### Lunar
![lunar](lunar.png)
### Catppuccin Latte
![catppuccin-latte](catppuccin-latte.png)
### Catppuccin Frappe
![catppuccin-frappe](catppuccin-frappe.png)
### Catppuccin Macchiato
![catppuccin-macchiato](catppuccin-macchiato.png)
### Catppuccin Mocha
![catppuccin-mocha](catppuccin-mocha.png)
## Features
### Resizable sidebar
<img src="https://i.imgur.com/1zomkmd.png" alt="img" align="center" width="500px">
### Customizable sidebar
Rearrange icons positions, stick icons to header or hide unnecessary to save space.
Turn on "Sidebar config" mode in Profile menu and hover on icon to show control buttons.
After you finish customizing, turn off Config mode in Profile menu to save.
<img src="https://i.imgur.com/86gqPe8.png" alt="img" align="center" width="500px">
### Playlist Folder image
Right click at folder and choose images for your playlist folder. Every image formats supported by Chrome can be used, but do keep image size small and in compressed format.
<img src="https://i.imgur.com/WGQ7Bev.gif" alt="img" align="center" width="500px">
### Left/Right expanded cover
In profile menu, toggle option "Right expanded cover" to change expaned current track cover image to left or right side, whereever you prefer.
## Auto-install
Make sure you are using spicetify >= v2.5.0 and Spotify >= v1.1.56.
### Windows
```powershell
Invoke-WebRequest -UseBasicParsing "https://raw.githubusercontent.com/spicetify/spicetify-themes/master/Dribbblish/install.ps1" | Invoke-Expression
```
## Manual Install
Run these commands:
### Linux and MacOS:
In **Bash**:
```bash
cd "$(dirname "$(spicetify -c)")/Themes/Dribbblish"
spicetify config current_theme Dribbblish color_scheme base
spicetify config inject_css 1 replace_colors 1 overwrite_assets 1 inject_theme_js 1
spicetify apply
```
### Windows
In **Powershell**:
```powershell
cd "$(spicetify -c | Split-Path)\Themes\Dribbblish"
spicetify config current_theme Dribbblish color_scheme base
spicetify config inject_css 1 replace_colors 1 overwrite_assets 1 inject_theme_js 1
spicetify apply
```
From Spotify > v1.1.62, in sidebar, they use an adaptive render mechanic to actively show and hide items on scroll. It helps reducing number of items to render, hence there is significant performance boost if you have a large playlists collection. But the drawbacks is that item height is hard-coded, it messes up user interaction when we explicity change, in CSS, playlist item height bigger than original value. So you need to add these 2 lines in Patch section in config file:
```ini
[Patch]
xpui.js_find_8008 = ,(\w+=)32,
xpui.js_repl_8008 = ,${1}56,
```
## Change Color Schemes
There are 9 color schemes you can choose: `base`, `white`, `dark`, `dracula`, `nord-dark`, `nord-light`, `beach-sunset`, `samurai`, `purple`, `gruvbox`, `gruvbox-material-dark`, `catppuccin-latte`, `catppuccin-frappe`, `catppuccin-macchiato`, and `catppuccin-mocha`. Change scheme with commands:
```
spicetify config color_scheme <scheme name>
spicetify apply
```
## Auto-uninstall
### Windows
```powershell
Invoke-WebRequest -UseBasicParsing "https://raw.githubusercontent.com/spicetify/spicetify-themes/v2/Dribbblish/uninstall.ps1" | Invoke-Expression
```
## Manual uninstall
Remove the dribbblish theme with the following commands
```
spicetify config current_theme " " color_scheme " "
spicetify apply
```

Binary file not shown.

After

Width:  |  Height:  |  Size: 772 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 532 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 MiB

View file

@ -0,0 +1,308 @@
[base]
text = FFFFFF
subtext = F0F0F0
sidebar-text = FFFFFF
main = 000000
sidebar = 24b558
player = 000000
card = 000000
shadow = 202020
selected-row = 797979
button = 24b558
button-active = 24b558
button-disabled = 535353
tab-active = 166632
notification = 1db954
notification-error = e22134
misc = BFBFBF
[white]
text = 363636
subtext = 3D3D3D
sidebar-text = FFF9F4
main = FFF9F4
sidebar = FFA789
player = FFF9F4
card = FFF9F4
shadow = d3d3d3
selected-row = 6D6D6D
button = ff8367
button-active = ff8367
button-disabled = 535353
tab-active = ffdace
notification = FFA789
notification-error = e22134
misc = BFBFBF
[dark]
text = F0F0F0
subtext = F0F0F0
sidebar-text = 0a0e14
main = 0a0e14
sidebar = C2D935
player = 0a0e14
card = 0a0e14
shadow = 202020
selected-row = DEDEDE
button = C2D935
button-active = C2D935
button-disabled = 535353
tab-active = 727d2b
notification = C2D935
notification-error = e22134
misc = BFBFBF
[dracula]
text = f8f8f2
subtext = f8f8f2
sidebar-text = F0F0F0
main = 44475a
sidebar = 6272a4
player = 44475a
card = 6272a4
shadow = 000000
selected-row = bd93f9
button = ffb86c
button-active = 8be9fd
button-disabled = 535353
tab-active = 6272a4
notification = bd93f9
notification-error = e22134
misc = BFBFBF
[nord-light]
text = 2e3440
subtext = 3b4252
sidebar-text = ECEFF4
main = ECEFF4
sidebar = 5E81AC
player = ECEFF4
card = ebcb8b
shadow = eceff4
selected-row = 4c566a
button = 81a1c1
button-active = 81a1c1
button-disabled = c0c0c0
tab-active = ebcb8b
notification = a3be8c
notification-error = bf616a
misc = BFBFBF
[nord-dark]
text = ECEFF4
subtext = E5E9F0
sidebar-text = 434c5e
main = 2e3440
sidebar = 88C0D0
player = 2e3440
card = 2e3440
shadow = 2E3440
selected-row = D8DEE9
button = 81A1C1
button-active = 81A1C1
button-disabled = 434C5E
tab-active = 434C5E
notification = A3BE8C
notification-error = BF616A
misc = BFBFBF
[purple]
text = f1eaff
subtext = f1eaff
sidebar-text = e0d0ff
main = 0A0E14
sidebar = 6F3C89
player = 0A0E14
card = 0A0E14
shadow = 3a2645
selected-row = 645275
button = c76af6
button-active = 6F3C89
button-disabled = 535353
tab-active = 58306D
notification = ff9e00
notification-error = f61379
misc = DEDEDE
[samurai]
text = ebdbb2
subtext = ebdbb2
sidebar-text = 461217
main = 461217
sidebar = ebdbb2
player = 461217
card = 461217
shadow = 000000
selected-row = 909090
button = e7a52d
button-active = e7a52d
button-disabled = 535353
tab-active = e7a52d
notification = e7a52d
notification-error = e22134
misc = BFBFBF
[beach-sunset]
text = FFFFFF
subtext = F0F0F0
sidebar-text = F0F0F0
main = 262626
sidebar = bd3e3e
player = 262626
card = 262626
shadow = 000000
selected-row = d1d6e2
button = f1a84f
button-active = c98430
button-disabled = 535353
tab-active = f1a84f
notification = c98430
notification-error = e22134
misc = BFBFBF
[gruvbox]
text = fbf1c7
subtext = d5c4a1
sidebar-text = ebe1b7
main = 292828
sidebar = 689d6a
player = 292828
card = 3c3836
shadow = 202020
selected-row = d5c4a1
button = fb4934
button-active = cc241d
button-disabled = bdae93
tab-active = fb4934
notification = 8ec07c
notification-error = d79921
misc = BFBFBF
[gruvbox-material-dark]
text = fbf1c7
subtext = d5c4a1
sidebar-text = 716e5f
main = 292828
sidebar = 1d2021
player = 292828
card = 3c3836
shadow = 202020
selected-row = d5c4a1
button = a9b665
button-active = a9b665
button-disabled = bdae93
tab-active = a9b665
notification = 8ec07c
notification-error = d79921
misc = BFBFBF
[rosepine]
text = ebbcba
subtext = F0F0F0
sidebar-text = e0def4
main = 191724
sidebar = 2a2837
player = 191724
card = 191724
shadow = 1f1d2e
selected-row = 797979
button = 31748f
button-active = 31748f
button-disabled = 555169
tab-active = 31748f
notification = 1db954
notification-error = eb6f92
misc = 6e6a86
[lunar]
text = f3f3f3
subtext = cecece
sidebar-text = f3f3f3
main = 161616
sidebar = 202020
player = 161616
card = 161616
shadow = 252525
selected-row = 202020
button = 3281ea
button-active = 0284e8
button-disabled = 303030
tab-active = ebbcba
notification = 3281ea
notification-error = b10c0c
misc = 252525
; Comments below correspond to the labeling of the colors on the Catppuccin GitHub page.
[catppuccin-latte]
text = 4c4f69 ; Text
subtext = 5c5f77 ; Subtext1
sidebar-text = 4c4f69 ; Text
main = eff1f5 ; Base
sidebar = e6e9ef ; Mantle
player = eff1f5 ; Base
card = eff1f5 ; Base
shadow = e6e9ef ; Mantle
selected-row = 7c7f93 ; Overlay2
button = 8c8fa1 ; Overlay1
button-active = 7c7f93 ; Overlay2
button-disabled = 9ca0b0 ; Overlay0
tab-active = ccd0da ; Surface0
notification = ccd0da ; Surface0
notification-error = d20f39 ; Red
misc = bcc0cc ; Surface1
[catppuccin-frappe]
text = c6d0f5 ; Text
subtext = b5bfe2 ; Subtext1
sidebar-text = c6d0f5 ; Text
main = 303446 ; Base
sidebar = 292c3c ; Mantle
player = 303446 ; Base
card = 303446 ; Base
shadow = 292c3c ; Mantle
selected-row = 949cbb ; Overlay2
button = 838ba7 ; Overlay1
button-active = 949cbb ; Overlay2
button-disabled = 737994 ; Overlay0
tab-active = 414559 ; Surface0
notification = 414559 ; Surface0
notification-error = e78284 ; Red
misc = 51576d ; Surface1
[catppuccin-macchiato]
text = cad3f5 ; Text
subtext = b8c0e0 ; Subtext1
sidebar-text = cad3f5 ; Text
main = 24273a ; Base
sidebar = 1e2030 ; Mantle
player = 24273a ; Base
card = 24273a ; Base
shadow = 1e2030 ; Mantle
selected-row = 939ab7 ; Overlay2
button = 8087a2 ; Overlay1
button-active = 939ab7 ; Overlay2
button-disabled = 6e738d ; Overlay0
tab-active = 363a4f ; Surface0
notification = 363a4f ; Surface0
notification-error = ed8796 ; Red
misc = 494d64 ; Surface1
[catppuccin-mocha]
text = cdd6f4 ; Text
subtext = bac2de ; Subtext1
sidebar-text = cdd6f4 ; Text
main = 1e1e2e ; Base
sidebar = 181825 ; Mantle
player = 1e1e2e ; Base
card = 1e1e2e ; Base
shadow = 181825 ; Mantle
selected-row = 9399b2 ; Overlay2
button = 7f849c ; Overlay1
button-active = 9399b2 ; Overlay2
button-disabled = 6c7086 ; Overlay0
tab-active = 313244 ; Surface0
notification = 313244 ; Surface0
notification-error = f38ba8 ; Red
misc = 45475a ; Surface1

Binary file not shown.

After

Width:  |  Height:  |  Size: 260 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 425 KiB

View file

@ -0,0 +1 @@
<svg width="80" height="81" viewBox="0 0 80 81" xmlns="http://www.w3.org/2000/svg"><title>Playlist Icon</title><path d="M25.6 11.565v45.38c-2.643-3.27-6.68-5.37-11.2-5.37-7.94 0-14.4 6.46-14.4 14.4s6.46 14.4 14.4 14.4 14.4-6.46 14.4-14.4v-51.82l48-10.205V47.2c-2.642-3.27-6.678-5.37-11.2-5.37-7.94 0-14.4 6.46-14.4 14.4s6.46 14.4 14.4 14.4S80 64.17 80 56.23V0L25.6 11.565zm-11.2 65.61c-6.176 0-11.2-5.025-11.2-11.2 0-6.177 5.024-11.2 11.2-11.2 6.176 0 11.2 5.023 11.2 11.2 0 6.174-5.026 11.2-11.2 11.2zm51.2-9.745c-6.176 0-11.2-5.024-11.2-11.2 0-6.174 5.024-11.2 11.2-11.2 6.176 0 11.2 5.026 11.2 11.2 0 6.178-5.026 11.2-11.2 11.2z" fill="currentColor" fill-rule="evenodd"></path></svg>

After

Width:  |  Height:  |  Size: 686 B

View file

@ -0,0 +1,55 @@
$checkSpice = Get-Command spicetify -ErrorAction Silent
if ($null -eq $checkSpice) {
Write-Host -ForegroundColor Red "Spicetify not found"
Write-Host "Follow instruction on:", "https://spicetify.app/docs/getting-started/simple-installation#windows"
return
}
Write-Host "Downloading themes package:" -ForegroundColor Green
$zipFile = "$env:TEMP\spicetify-themes.zip"
Invoke-WebRequest "https://github.com/spicetify/spicetify-themes/archive/refs/heads/master.zip" -OutFile $zipFile
Write-Host "Extracting themes package:" -ForegroundColor Green
$extractPath = "$env:TEMP\spicetify-themes-master"
if (Test-Path $extractPath) {
Remove-Item $extractPath -Recurse -Force
}
Expand-Archive $zipFile -DestinationPath $env:TEMP
# Copy to personal Themes folder
$spicePath = spicetify -c | Split-Path
$dribPath = "$extractPath\Dribbblish"
$destPath = "$spicePath\Themes\Dribbblish"
if (Test-Path $destPath) {
Remove-Item $destPath -Recurse -Force
}
Copy-Item $dribPath $destPath -Recurse
Write-Host "Configuring:" -ForegroundColor Green
spicetify
spicetify config inject_css 1 replace_colors 1 overwrite_assets 1 inject_theme_js 1 current_theme Dribbblish
# Add patch
$configFile = Get-Content "$spicePath\config-xpui.ini"
if (-not ($configFile -match "xpui.js_find_8008")) {
$rep = @"
[Patch]
xpui.js_find_8008=,(\w+=)32,
xpui.js_repl_8008=,`${1}56,
"@
# In case missing Patch section
if (-not ($configFile -match "\[Patch\]")) {
$configFile += "`n[Patch]`n"
}
$configFile = $configFile -replace "\[Patch\]",$rep
Set-Content "$spicePath\config-xpui.ini" $configFile
}
$backupVer = $configFile -match "^version"
$version = ConvertFrom-StringData $backupVer[0]
if ($version.version.Length -gt 0) {
spicetify apply
} else {
spicetify backup apply
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 726 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 919 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 222 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 656 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.3 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 169 KiB

View file

@ -0,0 +1,242 @@
function waitForElement(els, func, timeout = 100) {
const queries = els.map(el => document.querySelector(el));
if (queries.every(a => a)) {
func(queries);
} else if (timeout > 0) {
setTimeout(waitForElement, 300, els, func, --timeout);
}
}
let DribbblishShared = {};
// back shadow
waitForElement([".Root__top-container"], ([topContainer]) => {
const shadow = document.createElement("div");
shadow.id = "dribbblish-back-shadow";
topContainer.prepend(shadow);
});
// Spicetify.Platform.ConnectAPI.state.connectionStatus;
// add fade effect on playlist/folder list
waitForElement([".main-navBar-mainNav .os-viewport.os-viewport-native-scrollbars-invisible"], ([scrollNode]) => {
scrollNode.setAttribute("fade", "bottom");
scrollNode.addEventListener("scroll", () => {
if (scrollNode.scrollTop == 0) {
scrollNode.setAttribute("fade", "bottom");
} else if (scrollNode.scrollHeight - scrollNode.clientHeight - scrollNode.scrollTop == 0) {
scrollNode.setAttribute("fade", "top");
} else {
scrollNode.setAttribute("fade", "full");
}
});
});
let version;
let ylx;
(function Dribbblish() {
// dynamic playback time tooltip
const progBar = document.querySelector(".playback-bar");
const root = document.querySelector(".Root");
if (!Spicetify.Player.origin || !progBar || !root) {
setTimeout(Dribbblish, 300);
return;
}
version = Spicetify.Platform.PlatformData.event_sender_context_information.client_version_int;
if (version < 121200000) {
document.documentElement.classList.add("legacy");
legacy();
} else if (version >= 121200000 && version < 121400000) {
document.documentElement.classList.add("legacy-gridChange");
legacy();
} else if (version >= 121400000) {
document.documentElement.classList.add("ylx");
ylx = true;
}
const tooltip = document.createElement("div");
tooltip.className = "prog-tooltip";
progBar.append(tooltip);
function updateProgTime({ data: e }) {
const maxWidth = progBar.offsetWidth;
const curWidth = Spicetify.Player.getProgressPercent() * maxWidth;
const ttWidth = tooltip.offsetWidth / 2;
if (curWidth < ttWidth + 12) {
tooltip.style.left = "12px";
} else if (curWidth > maxWidth - ttWidth - 12) {
tooltip.style.left = String(maxWidth - ttWidth * 2 - 12) + "px";
} else {
tooltip.style.left = String(curWidth - ttWidth) + "px";
}
tooltip.innerText = Spicetify.Player.formatTime(e) + " / " + Spicetify.Player.formatTime(Spicetify.Player.getDuration());
}
Spicetify.Player.addEventListener("onprogress", updateProgTime);
updateProgTime({ data: Spicetify.Player.getProgress() });
// filepicker for custom folder images
const filePickerForm = document.createElement("form");
filePickerForm.setAttribute("aria-hidden", true);
filePickerForm.innerHTML = '<input type="file" class="hidden-visually" />';
/** @type {HTMLInputElement} */
const filePickerInput = filePickerForm.childNodes[0];
filePickerInput.accept = ["image/jpeg", "image/apng", "image/avif", "image/gif", "image/png", "image/svg+xml", "image/webp"].join(",");
filePickerInput.onchange = () => {
if (!filePickerInput.files.length) return;
const file = filePickerInput.files[0];
const reader = new FileReader();
reader.onload = event => {
const result = event.target.result;
const id = Spicetify.URI.from(filePickerInput.uri).id;
try {
localStorage.setItem("dribbblish:folder-image:" + id, result);
} catch {
Spicetify.showNotification("File too large");
}
DribbblishShared.loadPlaylistImage?.call();
};
reader.readAsDataURL(file);
};
// context menu items for custom folder images
new Spicetify.ContextMenu.Item(
"Remove folder image",
([uri]) => {
const id = Spicetify.URI.from(uri).id;
localStorage.removeItem("dribbblish:folder-image:" + id);
DribbblishShared.loadPlaylistImage?.call();
},
([uri]) => Spicetify.URI.isFolder(uri) && !ylx,
"x"
).register();
new Spicetify.ContextMenu.Item(
"Choose folder image",
([uri]) => {
filePickerInput.uri = uri;
filePickerForm.reset();
filePickerInput.click();
},
([uri]) => Spicetify.URI.isFolder(uri) && !ylx,
"edit"
).register();
})();
// LEGACY NAVBAR ONLY
function legacy() {
if (!Spicetify.Platform) {
setTimeout(legacy, 300);
return;
}
// allow resizing of the navbar
waitForElement([".Root__nav-bar .LayoutResizer__input"], ([resizer]) => {
const observer = new MutationObserver(updateVariable);
observer.observe(resizer, { attributes: true, attributeFilter: ["value"] });
function updateVariable() {
let value = resizer.value;
if (value < 121) {
value = 72;
document.documentElement.classList.add("left-sidebar-collapsed");
} else {
document.documentElement.classList.remove("left-sidebar-collapsed");
}
document.documentElement.style.setProperty("--nav-bar-width", value + "px");
}
updateVariable();
});
// allow resizing of the buddy feed
waitForElement([".Root__right-sidebar .LayoutResizer__input"], ([resizer]) => {
const observer = new MutationObserver(updateVariable);
observer.observe(resizer, { attributes: true, attributeFilter: ["value"] });
function updateVariable() {
let value = resizer.value;
let min_value = version < 121200000 ? 321 : 281;
if (value < min_value) {
value = 72;
document.documentElement.classList.add("buddyFeed-hide-text");
} else {
document.documentElement.classList.remove("buddyFeed-hide-text");
}
}
updateVariable();
});
waitForElement([".main-nowPlayingBar-container"], ([nowPlayingBar]) => {
const observer = new MutationObserver(updateVariable);
observer.observe(nowPlayingBar, { childList: true });
function updateVariable() {
if (nowPlayingBar.childElementCount === 2) {
document.documentElement.classList.add("connected");
} else {
document.documentElement.classList.remove("connected");
}
}
updateVariable();
});
// add fade effect on playlist/folder list
waitForElement([".main-navBar-navBar .os-viewport.os-viewport-native-scrollbars-invisible"], ([scrollNode]) => {
scrollNode.setAttribute("fade", "bottom");
scrollNode.addEventListener("scroll", () => {
if (scrollNode.scrollTop == 0) {
scrollNode.setAttribute("fade", "bottom");
} else if (scrollNode.scrollHeight - scrollNode.clientHeight - scrollNode.scrollTop == 0) {
scrollNode.setAttribute("fade", "top");
} else {
scrollNode.setAttribute("fade", "full");
}
});
});
waitForElement([`ul[tabindex="0"]`, `ul[tabindex="0"] .GlueDropTarget--playlists.GlueDropTarget--folders`], ([root, firstItem]) => {
const listElem = firstItem.parentElement;
root.classList.add("dribs-playlist-list");
/** Replace Playlist name with their pictures */
function loadPlaylistImage() {
for (const item of listElem.children) {
let link = item.querySelector("a");
if (!link) continue;
let [_, app, uid] = link.pathname.split("/");
let uri;
if (app === "playlist") {
uri = `spotify:playlist:${uid}`;
} else if (app === "folder") {
const base64 = localStorage.getItem("dribbblish:folder-image:" + uid);
let img = link.querySelector("img");
if (!img) {
img = document.createElement("img");
img.classList.add("playlist-picture");
link.prepend(img);
}
img.src = base64 || "https://cdn.jsdelivr.net/gh/spicetify/spicetify-themes@master/Dribbblish/images/tracklist-row-song-fallback.svg";
continue;
}
Spicetify.CosmosAsync.get(`sp://core-playlist/v1/playlist/${uri}/metadata`, { policy: { picture: true } }).then(res => {
const meta = res.metadata;
let img = link.querySelector("img");
if (!img) {
img = document.createElement("img");
img.classList.add("playlist-picture");
link.prepend(img);
}
img.src = meta.picture || "https://cdn.jsdelivr.net/gh/spicetify/spicetify-themes@master/Dribbblish/images/tracklist-row-song-fallback.svg";
});
}
}
DribbblishShared.loadPlaylistImage = loadPlaylistImage;
loadPlaylistImage();
new MutationObserver(loadPlaylistImage).observe(listElem, { childList: true });
});
}

View file

@ -0,0 +1,15 @@
spicetify config current_theme " "
$configPath = spicetify -c
$configFile = Get-Content $configPath
$find = $configFile -match "xpui.js_find_8008"
if ($find) {
$configFile = $configFile -replace [regex]::escape($find),""
}
$repl = $configFile -match "xpui.js_repl_8008"
if ($repl) {
$configFile = $configFile -replace [regex]::escape($repl),""
}
Set-Content $configPath $configFile
spicetify apply

View file

@ -0,0 +1,925 @@
:root {
--corner-radius: 10px;
--bar-cover-art-size: 40px;
--scrollbar-vertical-size: 10px;
--scrollbar-horizontal-size: 10px;
--bar-height: 90px;
--main-gap: 10px;
}
@font-face {
font-family: "Google Sans Display";
src: url("glue-resources/fonts/GoogleSansDisplayRegular.woff2") format("woff2");
font-style: normal;
font-weight: 400;
}
@font-face {
font-family: "Google Sans Display";
src: url("glue-resources/fonts/GoogleSansDisplayMedium.woff2") format("woff2");
font-style: normal;
font-weight: 500;
}
@font-face {
font-family: "Roboto";
src: url("glue-resources/fonts/Roboto.woff2") format("woff2");
font-style: normal;
font-weight: 400;
}
@font-face {
font-family: "Roboto";
src: url("glue-resources/fonts/RobotoMedium.woff2") format("woff2");
font-style: normal;
font-weight: 500;
}
body {
--glue-font-family: "Google Sans Display", "Roboto", spotify-circular, spotify-circular-cyrillic, spotify-circular-arabic, spotify-circular-hebrew,
Helvetica Neue, helvetica, arial, Hiragino Kaku Gothic Pro, Meiryo, MS Gothic, sans-serif;
--info-font-family: "Roboto", spotify-circular, spotify-circular-cyrillic, spotify-circular-arabic, spotify-circular-hebrew, Helvetica Neue, helvetica,
arial, Hiragino Kaku Gothic Pro, Meiryo, MS Gothic, sans-serif;
font-family: var(--glue-font-family);
letter-spacing: normal;
}
.global-nav .Root__top-container {
grid-template-areas: "global-nav global-nav global-nav"
"left-sidebar main-view right-sidebar"
"left-sidebar now-playing-bar now-playing-bar" !important;
}
.Root__top-container {
grid-template-areas:
"left-sidebar main-view right-sidebar"
"left-sidebar now-playing-bar right-sidebar" !important;
gap: 0;
padding-left: 0 !important;
}
.global-nav #Desktop_PanelContainer_Id {
border-radius: 0 !important;
}
.Root__now-playing-bar {
background-color: var(--spice-player);
border-radius: 0 0 var(--corner-radius) var(--corner-radius) !important;
grid-area: now-playing-bar !important;
}
.Root__globalNav {
background-color: var(--spice-main) !important;
border-radius: var(--corner-radius) var(--corner-radius) 0 0 !important;
margin-left: calc(var(--left-sidebar-width) * 1px);
}
.Root__globalNav .main-globalNav-historyButtonsContainer,
.Root__globalNav .main-globalNav-searchSection,
.Root__globalNav .main-topBar-topbarContentRight {
-webkit-transform: scale(0.75);
transform: scale(0.75);
}
.main-home-filterChipsSection {
background-color: var(--spice-main) !important;
}
.global-nav .Root__main-view {
border-radius: 0 !important;
}
.Root__main-view {
border-radius: var(--corner-radius) var(--corner-radius) 0 0 !important;
grid-area: main-view !important;
}
.legacy .Root__top-container:not(:has(> .Root__right-sidebar)) {
padding-right: var(--main-gap);
}
.ylx .Root__top-container:not(:has(> .Root__right-sidebar > aside)) {
padding-right: var(--main-gap);
}
.Root__right-sidebar:not(:has(> aside)) {
padding-left: 0;
}
.Root__nav-bar {
grid-area: left-sidebar !important;
}
/* move the progress bar to the top */
.playback-bar {
position: absolute;
left: 0;
top: -5px;
}
.main-nowPlayingBar-nowPlayingBar {
position: relative;
padding-inline-end: 16px !important;
}
.progress-bar {
--progress-bar-height: 2px;
--progress-bar-radius: 0;
--fg-color: var(--spice-button);
--bg-color: rgba(var(--spice-rgb-text), 0.2);
}
/* add gradient to player bar */
.main-nowPlayingBar-container {
background-color: unset;
background: radial-gradient(ellipse at right 50% bottom -80px, rgba(var(--spice-rgb-sidebar), 0.55), var(--spice-main) 60%) !important;
border-radius: 0 0 var(--corner-radius) var(--corner-radius) !important;
border-top: 0;
min-width: 518px;
}
/* rearrange player bar */
.main-nowPlayingBar-left {
order: 1;
flex: 1;
width: auto;
min-width: 0 !important;
}
.main-nowPlayingBar-center {
order: 0;
flex: 1;
width: auto;
min-width: unset !important;
}
.main-nowPlayingBar-right {
order: 2;
flex: 1;
width: auto;
min-width: unset !important;
}
/* hide time elapsed */
.main-playbackBarRemainingTime-container,
.playback-bar__progress-time-elapsed {
display: none;
}
/* custom dynamic prog tooltip */
.playback-bar .prog-tooltip {
position: absolute;
min-width: 100px;
width: unset;
height: 25px;
top: -35px;
padding: 0 5px;
border-radius: 4px;
text-align: center;
color: var(--spice-text);
background-color: var(--spice-button);
opacity: 0;
transition: opacity 0.2s linear, left 0.2s linear;
}
.playback-bar:hover .prog-tooltip {
opacity: 1;
}
/* customise player controls buttons */
.player-controls__buttons {
position: relative;
margin-bottom: 0;
}
.main-shuffleButton-button {
position: absolute;
left: 200px;
}
.main-skipForwardButton-button,
.main-repeatButton-button,
.main-skipBackButton-button,
.main-shuffleButton-button {
color: var(--spice-text);
}
.player-controls__left,
.player-controls__right {
gap: 16px;
flex: 0;
}
.player-controls__right svg,
.player-controls__left svg {
width: 14px;
height: 14px;
}
/* customise play button */
.main-playPauseButton-button {
background-color: transparent !important;
}
.main-playPauseButton-button svg {
width: 32px !important;
height: 32px !important;
color: var(--spice-button);
}
/* customise right side player buttons */
.control-button {
color: var(--spice-text);
}
.main-genericButton-button {
color: var(--spice-text);
}
/* customise cards hover play button */
.main-card-PlayButtonContainer .ButtonInner-medium-iconOnly {
background-color: var(--background-base);
color: var(--spice-text);
}
/* top welcome box viz. good morning */
.view-homeShortcutsGrid-PlayButtonContainer .ButtonInner-small-iconOnly,
.view-homeShortcutsGrid-PlayButtonContainer .ButtonInner-medium-iconOnly,
.view-homeShortcutsGrid-PlayButtonContainer .ButtonInner-large-iconOnly {
background-color: var(--background-base);
color: var(--spice-text);
}
/* top bar sponsored ads */
.Button-medium-buttonPrimary-useBrowserDefaultFocusStyle .ButtonInner-medium {
background-color: var(--background-base);
color: var(--spice-text);
}
/* customise player cover art */
.main-nowPlayingWidget-coverArt .cover-art {
width: var(--bar-cover-art-size) !important;
height: var(--bar-cover-art-size) !important;
background-color: transparent;
}
.main-nowPlayingWidget-nowPlaying {
justify-content: center;
}
/* style navbar */
.main-navBar-mainNav {
gap: 0 !important;
}
.main-navBar-mainNav>div {
background-color: var(--spice-sidebar);
}
.main-yourLibraryX-navLink {
height: 48px;
}
/* change tab colours */
.main-navBar-mainNav .link-subtle,
.main-navBar-mainNav .link-subtle svg {
color: var(--spice-sidebar-text) !important;
}
/* give active nav tab a background */
.main-navBar-mainNav li:has(> .active) {
background-color: var(--spice-tab-active);
border-radius: 4px;
}
/* align library button with other nav items */
.main-yourLibraryX-header {
padding-top: 4px !important;
}
.main-yourLibraryX-navItems {
padding-bottom: 0 !important;
padding: 8px;
}
.main-yourLibraryX-navItems li {
padding-left: 16px;
}
/* remove built in scrolllist shadow */
.main-yourLibraryX-isScrolled {
box-shadow: none !important;
}
/* round playlist images */
.x-entityImage-imageContainer {
border-radius: 50% !important;
background-color: transparent;
width: 40px !important;
height: 40px !important;
align-self: center;
box-shadow: none !important;
}
li div:has(> .x-entityImage-imageContainer),
li div:has(> .main-yourLibraryX-rowCover) {
justify-content: center;
width: 48px;
}
/* folder items */
.x-entityImage-imagePlaceholder {
background-color: transparent;
color: var(--spice-sidebar-text);
}
/* local files item */
.main-yourLibraryX-rowCover {
width: 40px;
height: 40px;
}
.fRZRXRIV2YBCFLYgwDAr {
border-radius: 50% !important;
}
.fRZRXRIV2YBCFLYgwDAr>svg {
width: 15px;
height: 15px;
}
/* remove hover effect */
li>div>div::after {
background-color: transparent !important;
}
li>div::after {
background-color: transparent !important;
}
/* give background to active playlist */
.BoxComponent-group-tinted-listRow-isInteractive-hasLeadingOrMedia-paddingBlockStart_8px-paddingBlockEnd_8px-minBlockSize_56px-padding_8px,
.BoxComponent-group-tinted-listRow-isInteractive-hasFocus-hasLeadingOrMedia-paddingBlockStart_8px-paddingBlockEnd_8px-minBlockSize_56px-padding_8px {
background-color: var(--spice-tab-active);
}
/* fix scrolllist item colours */
.main-navBar-mainNav li p {
color: var(--spice-sidebar-text) !important;
}
.main-navBar-mainNav li p svg {
fill: var(--spice-sidebar-text) !important;
}
.main-yourLibraryX-listRowIconWrapper {
fill: var(--spice-sidebar-text) !important;
}
/* reduce spacing between playlist name and subtitle */
.main-yourLibraryX-listRowSubtitle {
margin-top: -8px;
}
.main-yourLibraryX-collapseButton>button {
gap: 8px;
color: var(--spice-sidebar-text) !important;
}
/* expanded sidebar buttons */
.search-searchCategory-carouselButton {
background-color: transparent;
}
.search-searchCategory-carouselButton:hover {
background-color: var(--spice-tab-active);
}
.search-searchCategory-carouselButton svg {
fill: var(--spice-sidebar-text) !important;
}
.main-yourLibraryX-iconOnly {
color: var(--spice-sidebar-text) !important;
}
.main-yourLibraryX-iconOnly:hover {
background-color: var(--spice-tab-active);
}
.main-yourLibraryX-filterArea>div>div:first-child button {
background-color: var(--spice-tab-active) !important;
}
.main-yourLibraryX-filterArea>div>div:first-child button>span {
background-color: var(--spice-tab-active) !important;
color: var(--spice-text) !important;
}
.main-yourLibraryX-libraryFilter .x-sortBox-sortDropdown,
.main-yourLibraryX-libraryFilter .x-filterBox-expandButton,
.main-yourLibraryX-libraryFilter .x-filterBox-searchIconContainer,
.main-yourLibraryX-libraryFilter .x-filterBox-filterInput,
.main-yourLibraryX-libraryFilter .x-filterBox-clearButton {
color: var(--spice-sidebar-text);
}
/* hide main view backgound gradient */
.main-entityHeader-backgroundColor,
.main-actionBarBackground-background,
.main-topBar-background,
.main-home-homeHeader {
background-color: var(--spice-main) !important;
background-image: none !important;
}
.main-topBar-background {
border-radius: var(--corner-radius);
}
.main-topBar-overlay,
.main-trackList-trackListHeader {
background-color: var(--spice-main) !important;
}
/* fix play button icon colour */
.main-playButton-PlayButton svg {
color: var(--spice-text);
}
/* fix playlist action bar buttons colour */
.main-actionBar-ActionBarRow button,
.main-actionBar-ActionBarRow svg:not(.main-playButton-PlayButton svg) {
color: rgba(var(--spice-rgb-text), 0.7);
}
.main-actionBar-ActionBarRow button:hover,
.main-actionBar-ActionBarRow button:hover svg:not(.main-playButton-PlayButton svg) {
color: var(--spice-text);
}
/* change playing icon from gif to svg */
.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-button);
content-visibility: hidden;
-webkit-mask-repeat: no-repeat;
}
/* full screen artists background */
.main-entityHeader-container.main-entityHeader-withBackgroundImage,
.main-entityHeader-background,
.main-entityHeader-background.main-entityHeader-overlay:after {
height: 100vh;
}
.artist-artistOverview-overview .main-entityHeader-withBackgroundImage h1 {
font-size: 120px !important;
line-height: 120px !important;
}
.contentSpacing,
.artist-artistDiscography-headerContainer {
padding-left: 64px;
padding-right: 64px;
}
.artist-artistOverview-overview .main-entityHeader-headerText {
justify-content: center;
}
/* progress bar moves smoothly */
.x-progressBar-fillColor {
transition: transform 1s linear;
}
.progress-bar__slider {
transition: left 1s linear;
}
.playback-progressbar-isInteractive .DuvrswZugGajIFNXObAr .x-progressBar-fillColor,
.playback-progressbar-isInteractive .DuvrswZugGajIFNXObAr .progress-bar__slider {
transition: none;
}
/* right sidebar text */
.Root__right-sidebar {
--text-base: var(--spice-sidebar-text);
--background-tinted-base: var(--spice-tab-active);
}
.Root__right-sidebar a,
.Root__right-sidebar .main-trackInfo-artists a,
.artist-artistOnTour-timeAndVenue.artist-artistOnTour-condensed,
.Root__right-sidebar .main-nowPlayingView-creditsSource,
.Root__right-sidebar .main-nowPlayingView-playNextButton,
.Root__right-sidebar .main-nowPlayingView-playNext {
color: var(--spice-sidebar-text);
}
.main-nowPlayingView-content {
--text-subdued: var(--spice-sidebar-text);
}
/* add main backshadow */
#dribbblish-back-shadow {
z-index: 5;
grid-area: main-view / main-view / now-playing-bar / main-view;
box-shadow: 0 0 10px 3px #0000003b;
border-radius: var(--corner-radius);
pointer-events: none;
}
/* add fade effect to playlist scrolllist */
.os-viewport.os-viewport-native-scrollbars-invisible[fade="full"] {
-webkit-mask-image: linear-gradient(transparent 0%, black 10%, black 90%, transparent 100%);
mask-image: linear-gradient(transparent 0%, black 10%, black 90%, transparent 100%);
}
.os-viewport.os-viewport-native-scrollbars-invisible[fade="top"] {
-webkit-mask-image: linear-gradient(transparent 0%, black 10%);
mask-image: linear-gradient(transparent 0%, black 10%);
}
.os-viewport.os-viewport-native-scrollbars-invisible[fade="bottom"] {
-webkit-mask-image: linear-gradient(black 90%, transparent 100%);
mask-image: linear-gradient(black 90%, transparent 100%);
}
/* style input els */
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;
}
.Root__nav-bar input {
border-bottom: solid 1px var(--spice-sidebar-text) !important;
color: var(--spice-sidebar-text) !important;
}
.Root__nav-bar input::placeholder {
color: rgba(var(--spice-rgb-sidebar-text), 0.5) !important;
}
/* fix connect bar styles */
.main-connectBar-connectBar {
color: var(--spice-main) !important;
border-radius: 0 0 var(--corner-radius) var(--corner-radius);
}
/* topbar play button */
.main-topBar-topbarContent .main-playButton-PlayButton>button>span {
inline-size: 32px;
block-size: 32px;
min-block-size: auto;
}
.main-topBar-topbarContent .main-playButton-PlayButton svg {
width: 18px;
height: 18px;
}
.main-topBar-topbarContent .main-playButton-PlayButton>button>span>span {
position: initial;
height: 18px;
}
/* disable dynamic lyrics background */
.lyrics-lyrics-container {
--lyrics-color-inactive: rgba(var(--spice-rgb-text), 0.3) !important;
}
.lyrics-lyrics-background {
background-color: var(--spice-main);
}
/* v1.2.14 */
.main-yourLibraryX-libraryContainer.main-yourLibraryX-libraryIsExpanded.main-yourLibraryX-libraryIsCollapsed,
.main-yourLibraryX-libraryRootlist.main-yourLibraryX-libraryIsExpanded:not(.main-yourLibraryX-libraryIsCollapsed) {
padding-bottom: 0;
}
[dir="ltr"] .main-nowPlayingWidget-coverExpanded {
transform: none;
}
.ylx .main-coverSlotExpanded-container {
bottom: calc(var(--main-gap) + 70px + 10px);
left: calc(var(--nav-bar-width) + 10px);
}
.ylx.connected .main-coverSlotExpanded-container {
bottom: calc(var(--main-gap) + 70px + 24px + 10px);
}
/* v1.2.12 -> 1.2.13 */
.main-buddyFeed-container {
background-color: inherit;
box-shadow: none;
overflow: initial;
}
.legacy-gridChange .main-coverSlotExpanded-container {
left: calc(var(--nav-bar-width) + 10px);
}
/* v1.2.0 --> 1.2.11 */
.legacy .Root__top-container {
grid-template-areas:
"left-sidebar top-bar right-sidebar"
"left-sidebar main-view right-sidebar"
"left-sidebar now-playing-bar right-sidebar" !important;
}
.Root__top-container {
padding: 10px 0;
background-color: var(--spice-sidebar);
}
.Root__right-sidebar {
background-color: var(--spice-sidebar);
}
.Root__main-view {
background-color: var(--spice-main);
}
.main-rootlist-rootlistDivider {
background-color: transparent;
}
.main-buddyFeed-activityMetadata .main-buddyFeed-username a,
.main-buddyFeed-activityMetadata .main-buddyFeed-artistAndTrackName a,
.main-buddyFeed-activityMetadata .main-buddyFeed-usernameAndTimestamp,
.main-buddyFeed-activityMetadata .main-buddyFeed-playbackContextLink {
color: var(--spice-sidebar-text) !important;
}
.main-buddyFeed-activityMetadata .main-buddyFeed-artistAndTrackName {
color: var(--spice-sidebar-text);
}
.collection-icon,
.premiumSpotifyIcon,
.search-icon {
color: var(--spice-sidebar-text) !important;
}
.main-confirmDialog-container {
background-color: var(--spice-card);
}
.main-confirmDialog-container .TypeElement-canon-textBase {
color: var(--spice-text);
}
.main-confirmDialog-buttonContainer button span {
color: var(--spice-card);
}
.main-coverSlotExpanded-container {
position: fixed;
z-index: 2;
width: 250px;
height: 250px;
bottom: calc(var(--main-gap) + var(--bar-height) + 10px);
left: calc(var(--nav-bar-width) + 20px);
}
.connected .main-coverSlotExpanded-container {
bottom: calc(var(--main-gap) + var(--bar-height) + 24px + 10px);
}
.left-sidebar-collapsed .main-coverSlotExpanded-container {
left: 82px;
}
.main-coverSlotExpanded-container img {
border-radius: 4px;
}
.cover-art {
border-radius: 4px;
}
.left-sidebar-collapsed .Root__nav-bar {
width: 72px;
}
.left-sidebar-collapsed .main-rootlist-statusIcons {
display: none;
}
.main-navBar-navBarLinkActive {
background-color: var(--spice-tab-active);
}
.Root__nav-bar .main-rootlist-rootlist .os-scrollbar-handle {
display: none;
}
.Root__top-container:has(> .Root__top-container--right-sidebar-hidden) {
padding-right: 10px;
}
/* buddy feed w/ hidden text*/
.buddyFeed-hide-text .Root__top-container:not(:has(> .Root__top-container--right-sidebar-hidden)) .Root__right-sidebar {
width: 72px !important;
}
.buddyFeed-hide-text .NdQkQZhcYIEcJnRdAYcQ,
.buddyFeed-hide-text .main-buddyFeed-header {
display: none;
}
.buddyFeed-hide-text .main-buddyFeed-friendActivity {
padding: 0 0 0 4px;
}
.buddyFeed-hide-text .main-buddyFeed-activityMetadata {
visibility: hidden;
}
.buddyFeed-hide-text .main-avatar-avatar>div>div>div {
display: flex;
justify-content: center;
padding-top: 7px;
}
.buddyFeed-hide-text .main-avatar-avatar,
.buddyFeed-hide-text .main-avatar-avatar div,
.buddyFeed-hide-text .main-buddyFeed-overlay {
width: 32px !important;
height: 32px !important;
}
.main-rootlist-rootlistDividerGradient {
background: none;
}
.main-collectionLinkButton-collectionLinkButton .main-collectionLinkButton-icon,
.main-collectionLinkButton-collectionLinkButton .main-collectionLinkButton-collectionLinkText {
opacity: 1;
}
.main-collectionLinkButton-collectionLinkButton,
.main-createPlaylistButton-button {
color: var(--spice-sidebar-text);
opacity: 1;
}
.main-likedSongsButton-likedSongsIcon {
background: none;
}
.main-likedSongsButton-likedSongsIcon>svg {
height: 20px !important;
width: 20px !important;
}
/* style added sidebar images */
.main-rootlist-rootlistItem a {
align-items: center;
border-radius: 4px;
display: flex;
height: 56px;
gap: 12px;
}
img.playlist-picture {
width: 32px;
height: 32px;
flex: 0 0 32px;
background-size: cover;
background-position: center;
border-radius: 50%;
}
img.playlist-picture[src$=".svg"] {
width: 24px;
height: 24px;
border-radius: 0;
}
.legacy .Root__nav-bar .main-rootlist-wrapper,
.legacy-gridChange .Root__nav-bar .main-rootlist-wrapper {
height: fit-content !important;
contain: none !important;
}
.main-navBar-mainNav li:has(> div > .active) {
background-color: var(--spice-tab-active);
}
.main-collectionLinkButton-selected.active {
background-color: var(--spice-tab-active) !important;
}
.legacy .main-navBar-mainNav li,
.legacy-gridChange .main-navBar-mainNav li {
background-color: transparent !important;
}
/* a.active {
background-color: var(--spice-tab-active) !important;
} */
.main-rootlist-rootlistItem:has(> .main-rootlist-rootlistItemLinkActive) {
background-color: var(--spice-tab-active) !important;
}
.main-rootlist-rootlistItemLink {
padding-left: 12px;
}
.main-rootlist-rootlistItem {
margin-left: 8px;
margin-right: 8px;
padding-left: 0 !important;
padding-right: 8px !important;
border-radius: 4px;
}
.dribs-playlist-list {
overflow: hidden;
}
.left-sidebar-collapsed .main-rootlist-expandArrow {
display: none;
}
.main-navBar-navBarLink,
.main-collectionLinkButton-collectionLinkButton,
.main-createPlaylistButton-button {
height: 56px !important;
}
.Button-md-buttonSecondary-useBrowserDefaultFocusStyle {
border: 1px solid var(--spice-text);
}
.Button-md-buttonPrimary-useBrowserDefaultFocusStyle .ButtonInner-md {
color: var(--spice-text);
}
/* sidebar speaker icon */
.CCeu9OfWSwIAJqA49n84 {
color: var(--spice-sidebar-text);
}
.legacy .Root__right-sidebar .os-content {
overflow-x: hidden;
}
.Root__right-sidebar .os-scrollbar-horizontal {
display: none;
}
.UyzJidwrGk3awngSGIwv,
.poz9gZKE7xqFwgk231J4,
.xWm_uA0Co4SXVxaO7wlB {
color: var(--spice-text);
}
.main-navBar-navBarLink {
color: var(--spice-sidebar-text);
}
.main-navBar-navBarLink:focus,
.main-navBar-navBarLink:hover {
color: var(--spice-sidebar-text);
}
.main-createPlaylistButton-createPlaylistIcon {
background-color: var(--spice-sidebar-text);
}
.main-rootlist-rootlistItemLink:link,
.main-rootlist-rootlistItemLink:visited {
color: var(--spice-sidebar-text) !important;
}
.main-rootlist-expandArrow {
color: var(--spice-sidebar-text);
}
.main-buddyFeed-actions button,
.main-buddyFeed-titleContainer {
color: var(--spice-sidebar-text) !important;
}
.main-tag-container {
background-color: var(--spice-subtext);
}
.main-buddyFeed-content {
height: 100%;
}
/* bottom scroll-bar popup fix */
.Root__main-view-overlay {
width: 100%;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 136 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

View file

@ -0,0 +1,21 @@
MIT License
Copyright (c) 2022 @Ruixi-Zhang, @yslDevelop, @ian-Liaozy, @alexcasieri30
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.

View file

@ -0,0 +1,25 @@
# Flow
## Screenshots
### Ocean
<img src="https://raw.githubusercontent.com/spicetify/spicetify-themes/master/Flow/screenshots/ocean.png" alt="img">
### Pink
<img src="https://raw.githubusercontent.com/spicetify/spicetify-themes/master/Flow/screenshots/pink.png" alt="img">
### Silver
<img src="https://raw.githubusercontent.com/spicetify/spicetify-themes/master/Flow/screenshots/silver.png" alt="img">
### Violet
<img src="https://raw.githubusercontent.com/spicetify/spicetify-themes/master/Flow/screenshots/violet.png" alt="img">
## Author
Made by:
* https://github.com/Ruixi-Zhang
* https://github.com/yslDevelop
* https://github.com/ian-Liaozy
* https://github.com/alexcasieri30

View file

@ -0,0 +1,80 @@
[Pink]
text = 8f7878
gradientTop = ebaf98
gradientBottom = f5d4b7
main = ffe8d9
subtext = 8f7878
button-active = 8f7878
button = ebaf98
sidebar = f5d4b7
player = ebaf98
card-background = e6cfd7
shadow = d9a28d
notification = f5d4b7
notification-error = f5d4b7
card-hover = ffece4
[Green]
text = 516847
gradientTop = 9bb78e
gradientBottom = b7cfac
main = e8f2e4
subtext = 797a78
button-active = 516847
button = 7d9971
sidebar = b7cfac
player = 9bb78e
card-background = e8ede6
shadow = 7d9971
notification = b7cfac
notification-error = b7cfac
card-hover = ecf8e8
[Silver]
text = 4c4d4f
gradientTop = b7bbbd
gradientBottom = d3d8db
main = d3d8db
subtext = 8d9092
button-active = a8acad
button = 8d9092
sidebar = ffffff
player = b7bbbd
card-background = e8ede6
shadow = b7bbbd
notification = ffffff
notification-error = ffffff
card-hover = e0e4e4
[Violet]
text = 78658b
gradientTop = b9adc4
gradientBottom = d4cade
main = e5dfeb
subtext = 8e7c9a
button-active = a090b0
button = 516847
sidebar = e8ede6
player = b9adc4
card-background = e8ede6
shadow = 847096
notification = b9adc4
notification-error = b9adc4
card-hover = f0e4ec
[Ocean]
text = 62828a
gradientTop = 9cb9ba
gradientBottom = c1d5d6
main = cadbdb
subtext = 7aa1a2
button-active = 9cb9ba
button = c1d5d6
sidebar = c1d5d6
player = 9cb9ba
card-background = e1ebeb
shadow = 6f9599
notification = cadbdb
notification-error = c1d5d6
card-hover = d8e4e4

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 MiB

View file

@ -0,0 +1,260 @@
:root {
--gradient-colors: var(--spice-gradienttop), var(--spice-gradientbottom);
}
.main-rootlist-rootlistItem:hover {
background-color: var(--spice-card-background);
}
.main-navBar-navBar {
background-image: linear-gradient(var(--gradient-colors));
}
/* buttons */
.main-navBar-navBarLink {
border-radius: var(--border-radius-2);
color: var(--spice-text);
}
.main-addButton-active,
.main-addButton-active:focus,
.main-addButton-active:hover {
color: var(--spice-player);
}
/* menus */
.main-card-card {
background-image: linear-gradient(var(--gradient-colors));
border-radius: 10px;
}
.main-card-card:hover {
background-color: var(--spice-card-hover);
border-radius: 10px;
}
.main-contextMenu-menuItemButton,
.main-userWidget-dropDownMenuItemButton {
/*border-radius: var(--border-radius-2);*/
color: var(--spice-text);
height: 32px;
padding-left: 8px;
}
.main-trackList-trackListHeaderStuck.main-trackList-trackListHeader {
background: transparent;
-webkit-box-shadow: 0 -1px 0 0 var(--spice-player);
box-shadow: 0 -1px 0 0 var(--spice-player);
}
.main-trackList-trackListHeaderStuck .main-trackList-trackListHeaderRow {
border-bottom: 1px solid transparent;
background: var(--spice-main);
}
.Root__now-playing-bar {
grid-area: now-playing-bar;
width: 200px;
z-index: 4;
}
#spicetify-home-config button:disabled,
#spicetify-sidebar-config button:disabled {
/*background-color: var(--spice-button-disabled) !important;*/
color: var(--spice-text) !important;
}
/* remove gradients */
.main-home-homeHeader,
.main-actionBarBackground-background {
background-image: none;
}
.main-actionBarBackground-background,
.main-home-homeHeader,
.main-topBar-background,
.main-topBar-overlay,
.x-entityHeader-overlay,
.x-actionBarBackground-background,
._UFTK833WfTNGb4agRTd,
.Ic3iDUCnC09k55peZBfC {
background-color: var(--spice-main) !important;
}
.x-actionBarBackground-background,
.x-entityHeader-overlay,
.Ic3iDUCnC09k55peZBfC,
._UFTK833WfTNGb4agRTd {
background-image: none !important;
}
.main-entityHeader-backgroundColor {
background: var(--spice-main);
}
.player-controls__buttons--new-icons {
gap: 16px;
margin-bottom: 8px;
display: flex;
flex-direction: column;
flex: 1;
justify-content: center;
align-items: center;
}
.Root__top-container {
display: grid;
grid-template-areas: "left-sidebar main-view right-sidebar now-playing-bar";
grid-template-columns: auto 1fr;
grid-template-rows: 1fr auto;
height: 100%;
min-height: 100%;
position: relative;
width: 100%;
background-color: var(--spice-main);
}
.main-nowPlayingBar-container {
display: flex;
flex-direction: column;
height: 100%;
min-width: 0px;
-webkit-user-select: none;
user-select: none;
}
.player-controls__left,
.player-controls__right {
flex-direction: column;
}
.playback-bar {
flex-direction: column;
position: relative;
}
.playback-bar__progress-time-elapsed {
position: absolute;
left: 16px;
top: 20px;
}
.playback-bar__progress-time-elapsed::after {
content: "/";
margin-left: 6px;
}
.main-playbackBarRemainingTime-container {
margin-left: 56px;
}
.main-nowPlayingBar-center {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
.main-nowPlayingBar-nowPlayingBar {
align-items: center;
border-radius: 8px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
padding: 25px 0;
height: 100%;
background-image: linear-gradient(var(--gradient-colors));
}
.Root__right-sidebar > aside {
background-image: linear-gradient(var(--gradient-colors));
}
/*button*/
.encore-dark-theme .encore-bright-accent-set {
--background-base: var(--spice-button-active);
--background-highlight: var(--spice-player);
--background-press: var(--spice-player);
--decorative-subdued: var(--spice-player);
}
/*tracklist*/
.main-trackList-trackListRow {
border-radius: var(--border-radius-2);
}
.main-trackList-trackListRow:hover {
background-color: var(--spice-card-background);
}
.prog-tooltip {
display: none;
}
.main-rootlist-rootlistDividerContainer {
position: relative;
/*color: var(--spice-gradientTop)*/
display: none;
}
.progress-bar {
width: 150px;
}
.playback-progressbar {
width: 100px;
}
.volume-bar {
flex: 0;
}
.main-nowPlayingWidget-nowPlaying {
flex-direction: column;
gap: 16px;
}
.main-coverSlotCollapsed-container {
transform: none !important;
}
.main-nowPlayingWidget-nowPlaying > button {
color: var(--spice-text);
}
.main-nowPlayingBar-extraControls {
flex-direction: column;
}
.main-yourLibraryX-entryPoints:nth-child(2) {
background-image: linear-gradient(var(--gradient-colors));
}
.main-yourLibraryX-entryPoints:nth-child(1) {
background-color: var(--spice-gradienttop);
}
/* remove hover effect */
li > div > div::after {
background-color: var(--spice-card-background) !important;
}
li > div::after {
background-color: transparent !important;
}
/* give background to active playlist */
.BoxComponent-group-tinted-listRow-isInteractive-hasLeadingOrMedia-paddingBlockStart_8px-paddingBlockEnd_8px-minBlockSize_56px-padding_8px,
.BoxComponent-group-tinted-listRow-isInteractive-hasFocus-hasLeadingOrMedia-paddingBlockStart_8px-paddingBlockEnd_8px-minBlockSize_56px-padding_8px {
background-color: var(--spice-card-background);
}
/* expanded sidebar buttons */
.search-searchCategory-carouselButton {
background-color: transparent;
}
.search-searchCategory-carouselButton:hover {
background-color: var(--spicecard-background);
}
.main-yourLibraryX-iconOnly:hover {
background-color: var(--spice-card-background);
color: var(--spice-text);
}
.Root__nav-bar {
background-color: var(--spice-main);
}
/* give active nav tab a background */
.main-navBar-mainNav li:has(> .active) {
background-color: var(--spice-card-background);
border-radius: 4px;
}
.view-homeShortcutsGrid-shortcut {
background-image: linear-gradient(var(--gradient-colors));
}
.main-actionBar-ActionBarRow > * {
color: var(--spice-text);
}
.main-actionBar-ActionBarRow svg:not(.main-playButton-PlayButton svg) {
color: var(--spice-text);
}
.x-sortBox-sortDropdown {
color: inherit;
}

View file

@ -0,0 +1,21 @@
MIT License
Copyright (c) 2019 morpheusthewhite
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.

View file

@ -0,0 +1,81 @@
# Matte
## Screenshots
### Matte
![Matte](screenshots/ylx-matte.png)
### Periwinkle
![Periwinkle](screenshots/ylx-periwinkle.png)
### Periwinkle-Dark
![Periwkinle Dark](screenshots/ylx-periwinkle-dark.png)
### Porcelain
![Porcelain](screenshots/ylx-porcelain.png)
### Gray-Dark1
![Gray Dark 1](screenshots/ylx-gray-dark1.png)
### Gray-Dark2
![Gray Dark 2](screenshots/ylx-gray-dark2.png)
### Gray-Dark3
![Gray Dark 3](screenshots/ylx-gray-dark3.png)
### Gray
![Gray](screenshots/ylx-gray.png)
### Gray-Light
![Gray Light](screenshots/ylx-gray-light.png)
## More
### Description
a Spicetify theme which features a distinct top bar, quick-to-edit CSS variables, and color schemes from Windows visual styles by KDr3w
### Credits
- Based on [Matte by KDr3w](https://www.deviantart.com/kdr3w/art/Matte-758699852) and their [other themes](https://www.deviantart.com/kdr3w/gallery/68078309/windows-10-themes)
- Created by [darkthemer](https://github.com/darkthemer)
### Notes
- Check the very top of `user.css` for quick configs
- If you use the Marketplace, go to `Marketplace > Snippets > + Add CSS` and then paste the quick configs found in `user.css`. Edit these as you wish.
![Window Controls](screenshots/quickcfg.png)
- For Windows users, here's how to make the window controls' background match with the topbar background
- Put this snippet into your `user.css` (or through the Marketplace's custom CSS feature)
```css
/* transparent window controls background */
.spotify__container--is-desktop:not(.fullscreen) body::after {
content: "";
position: absolute;
right: 0;
z-index: 999;
backdrop-filter: brightness(2.12);
/* page zoom [ctrl][+] or [ctrl][-]
edit width and height accordingly
*/
width: 135px;
height: 48px;
}
```
![Window Controls](screenshots/winctrl.png)

View file

@ -0,0 +1,575 @@
; COLORS' KEY DESCRIPTIONS
; topbar = background
; topbar-text = title, enabled history button
; topbar-subtext = unselected tabs, disabled history button
; tab-active = selected tab item, search bar background
; tab-active-text = selected tab item, search bar text
; tab-hover = hovered tab item, hovered search bar
; topbar-border = bottom border
; sidebar = background
; sidebar-text = primary text (home, search, library, playlists, etc)
; link-hover-text = hovered link item text
; link-active = selected link item background
; link-active-text = selected link item text
; sidebar-border = left or right border
; main = background
; text = primary text (heading, title, some name, song count, button text, etc)
; subtext = secondary text (description, some name, duration, tracklist album, play count, etc)
; selected-row = some details, border, button (heart, download, options in playlist or album)
; player = background
; player-text = song title, hovered text
; player-subtext = artist name, time duration
; player-selected-row = progress bar (background, duration, volume), button (playback, extra)
; player-border = top border
; button = button (lyrics, queue in player bar, on toggle in settings)
; button-active = button (play-pause button, current song title in queue, active heart, hovered button and toggle)
; button-disabled = button (off toggle and dropdown menu in settings)
; scrollbar = default
; scrollbar-hover = hovered
; context-menu = background
; context-menu-text = primary text
; context-menu-hover = hovered item backgrond
; card = hovered card, tracks in queue or playlist, etc
; shadow = context menu shadow, popup background dim, popup button background (close, carousel), toast shadow
; notification = toast background, private session indicator
; notification-error = error toast background
; misc = idk
; main-elevated = ylx carousel buttons, etc
; highlight-elevated = ylx hovered carousel buttons, etc
; highlight = ylx hovered playlist link, etc
[matte]
; topbar
topbar = 232b32
topbar-text = d0d2d9
topbar-subtext = 4a5460
tab-active = 1c2228
tab-active-text = d0d2d9
tab-hover = 131b20
topbar-border = 232b32
; sidebars
sidebar = 181e23
sidebar-text = 7e8596
link-active-text = 181e23
sidebar-border = 181e23
; main view
main = 1c2228
text = b9bcc6
subtext = 7e8596
selected-row = 5b6b79
; player bar
player = 141b1f
player-text = 969aa9
player-subtext = 6d8392
player-selected-row = 6d8392
player-border = 141b1f
; accent colors
link-hover-text = 009587
link-active = 009587
button = 01bfa5
button-active = 01bfa5
scrollbar-hover = 009688
; others
button-disabled = 2c353e
scrollbar = 39454f
context-menu = 232b32
context-menu-text = d0d2d9
context-menu-hover = 343e47
card = 232d35
shadow = 101418
notification = 1c2228
notification-error = b73434
misc = 39454f
; ylx
main-elevated = 1c2228
highlight-elevated = 232d35
highlight = 20272d
[periwinkle]
; topbar
topbar-text = ffffff
topbar-subtext = aaa5e4
tab-active-text = d0ccff
tab-hover = ffffff
; sidebars
sidebar = ffffff
sidebar-text = 010101
link-active-text = ffffff
sidebar-border = ffffff
; main view
main = ffffff
text = 010101
subtext = 6d6d6d
selected-row = 6d6d6d
; player bar
player = ffffff
player-text = 010101
player-subtext = 6d6d6d
player-selected-row = 6d6d6d
player-border = d9d9d9
; accent colors
topbar = 7269d2
tab-active = 7269d2
topbar-border = 7269d2
link-hover-text = 8c84da
link-active = 7269d2
button = 7269d2
button-active = 8c84da
scrollbar-hover = 8a82e0
context-menu-hover = 7269d2
; others
button-disabled = ebebeb
scrollbar = d9d9d9
context-menu = ffffff
context-menu-text = 010101
card = ebebeb
shadow = 363163
notification = ffffff
notification-error = ff4264
misc = 6d6d6d
; ylx
main-elevated = ffffff
highlight-elevated = ebebeb
highlight = ebebeb
[periwinkle-dark]
; topbar
topbar-text = f6f6f6
topbar-subtext = aaa5e4
tab-active-text = d0ccff
tab-hover = 383838
; sidebars
sidebar = 383838
sidebar-text = d0d0d0
link-hover-text = 8c84da
link-active-text = f6f6f6
sidebar-border = 383838
; main view
main = 383838
text = f6f6f6
subtext = d0d0d0
selected-row = d0d0d0
; player bar
player = 343434
player-text = f6f6f6
player-subtext = d0d0d0
player-selected-row = d0d0d0
player-border = 2e2e2e
; accent colors
topbar = 7269d2
tab-active = 7269d2
topbar-border = 7269d2
link-active = 7269d2
button = 7269d2
button-active = 8c84da
scrollbar-hover = 8a82e0
context-menu-hover = 7269d2
; others
button-disabled = 444444
scrollbar = 494949
context-menu = 343434
context-menu-text = f6f6f6
card = 444444
shadow = 2e2e2e
notification = 343434
notification-error = ff4264
misc = d0d0d0
; ylx
main-elevated = 383838
highlight-elevated = 444444
highlight = 444444
[porcelain]
; topbar
topbar = e8eaf0
topbar-text = 242b31
topbar-subtext = 899099
tab-active = e8eaf0
tab-active-text = 242b31
tab-hover = ffffff
topbar-border = e8eaf0
; sidebars
sidebar = dfe1e8
sidebar-text = 3f4b56
link-hover-text = 6a7495
link-active-text = dfe1e8
sidebar-border = dfe1e8
; main view
main = f9f9fb
text = 3f4b56
subtext = 70828f
selected-row = 70828f
; player bar
player = d5d8df
player-text = 364049
player-subtext = 4e5a67
player-selected-row = 4e5a67
player-border = cdd0d8
; accent colors
link-active = 43a8ff
button = 43a8ff
button-active = 038aff
scrollbar-hover = 43a8ff
; others
button-disabled = c0c5ce
scrollbar = d6dbdf
context-menu = e8eaf0
context-menu-text = 2f353c
context-menu-hover = ced2db
card = e3e6ea
shadow = 6d6e71
notification = f9f9fb
notification-error = e6395f
misc = 4e5a67
; ylx
main-elevated = f9f9fb
highlight-elevated = e3e6ea
highlight = ced1db
[rose-pine-moon]
; topbar
topbar = 141428
topbar-text = e0def4
topbar-subtext = 7a7a7a
tab-active = 1f1f1f
tab-active-text = d4d4d4
tab-hover = 272727
topbar-border = 191919
; sidebars
sidebar = 232136
sidebar-text = e0def4
link-hover-text = 6d6d6d
link-active = 423d67
link-active-text = e8e8e8
sidebar-border = 191919
; main view
main = 232136
text = e0def4
subtext = 908caa
selected-row = ebbcba
; player bar
player = 232136
player-text = e0def4
player-subtext = e0def4
player-selected-row = ebbcba
player-border = 191919
; accent colors
button-active = ebbcba
; others
button = ebbcba
button-disabled = 2a273f
scrollbar = 2a273f
scrollbar-hover = dddbf1
context-menu = 141428
context-menu-text = e0def4
context-menu-hover = 3b385c
card = 393552
shadow = 393552
notification = 393552
notification-error = eb6f92
misc = 232136
; ylx
main-elevated = 202020
highlight-elevated = 2d2d2d
highlight = 2d2d2d
[gray-dark1]
; topbar
topbar = 191919
topbar-text = d4d4d4
topbar-subtext = 7a7a7a
tab-active = 1f1f1f
tab-active-text = d4d4d4
tab-hover = 272727
topbar-border = 191919
; sidebars
sidebar = 202020
sidebar-text = d4d4d4
link-hover-text = 6d6d6d
link-active = 2d2d2d
link-active-text = e8e8e8
sidebar-border = 191919
; main view
main = 202020
text = d4d4d4
subtext = 959595
selected-row = 6d6d6d
; player bar
player = 202020
player-text = d4d4d4
player-subtext = 959595
player-selected-row = 959595
player-border = 191919
; accent colors
button-active = 2080df
; others
button = 404040
button-disabled = 252525
scrollbar = 353535
scrollbar-hover = 999999
context-menu = 202020
context-menu-text = d4d4d4
context-menu-hover = 2d2d2d
card = 2d2d2d
shadow = 0c0c0c
notification = 202020
notification-error = d32635
misc = 959595
; ylx
main-elevated = 202020
highlight-elevated = 2d2d2d
highlight = 2d2d2d
[gray-dark2]
; topbar
topbar = 191919
topbar-text = d4d4d4
topbar-subtext = 535353
tab-active = 191919
tab-active-text = d4d4d4
tab-hover = 1f1f1f
topbar-border = 191919
; sidebars
sidebar = 161616
sidebar-text = d4d4d4
link-hover-text = 6c6c6c
link-active = 1c1c1c
link-active-text = d4d4d4
sidebar-border = 161616
; main view
main = 202020
text = d4d4d4
subtext = 959595
selected-row = 6d6d6d
; player bar
player = 1a1a1a
player-text = d4d4d4
player-subtext = 959595
player-selected-row = 959595
player-border = 1a1a1a
; accent colors
button-active = 2080df
; others
button = 404040
button-disabled = 252525
scrollbar = 353535
scrollbar-hover = 999999
context-menu = 202020
context-menu-text = d4d4d4
context-menu-hover = 2d2d2d
card = 2d2d2d
shadow = 0c0c0c
notification = 202020
notification-error = d32635
misc = 959595
; ylx
main-elevated = 202020
highlight-elevated = 2d2d2d
highlight = 2d2d2d
[gray-dark3]
; topbar
topbar = 191919
topbar-text = d4d4d4
topbar-subtext = 7a7a7a
tab-active = 191919
tab-active-text = d4d4d4
tab-hover = 1f1f1f
topbar-border = 191919
; sidebars
sidebar = 131313
sidebar-text = d4d4d4
link-hover-text = 6c6c6c
link-active = 1e1e1e
link-active-text = d4d4d4
sidebar-border = 131313
; main view
main = 161616
text = d4d4d4
subtext = 959595
selected-row = 6d6d6d
; player bar
player = 101010
player-text = d4d4d4
player-subtext = 959595
player-selected-row = 959595
player-border = 101010
; accent colors
button-active = 2080df
; others
button = 404040
button-disabled = 252525
scrollbar = 353535
scrollbar-hover = 999999
context-menu = 202020
context-menu-text = d4d4d4
context-menu-hover = 2d2d2d
card = 2d2d2d
shadow = 0c0c0c
notification = 202020
notification-error = d32635
misc = 959595
; ylx
main-elevated = 161616
highlight-elevated = 2d2d2d
highlight = 2d2d2d
[gray]
; topbar
topbar = 404040
topbar-text = e9e9e9
topbar-subtext = 646464
tab-active = 333333
tab-active-text = e9e9e9
tab-hover = 303030
topbar-border = 404040
; sidebars
sidebar = 383838
sidebar-text = d4d4d4
link-hover-text = e9e9e9
link-active = 4c4c4c
link-active-text = e9e9e9
sidebar-border = 2f2f2f
; main view
main = 383838
text = e9e9e9
subtext = aaaaaa
selected-row = 6d6d6d
; player bar
player = 343434
player-text = d4d4d4
player-subtext = 7f7f7f
player-selected-row = 7f7f7f
player-border = 2e2e2e
; accent colors
button-active = 2888d7
; others
button = 898989
button-disabled = 404040
scrollbar = 494949
scrollbar-hover = a3a3a3
context-menu = 383838
context-menu-text = d4d4d4
context-menu-hover = 4c4c4c
card = 4c4c4c
shadow = 1e1e1e
notification = 383838
notification-error = e35b5b
misc = 959595
; ylx
main-elevated = 383838
highlight-elevated = 4c4c4c
highlight = 444444
[gray-light]
; topbar
topbar = 404040
topbar-text = e9e9e9
topbar-subtext = 646464
tab-active = 333333
tab-active-text = e9e9e9
tab-hover = 303030
topbar-border = 404040
; sidebars
sidebar = ffffff
sidebar-text = 010101
link-hover-text = 010101
link-active = e1e1e1
link-active-text = 010101
sidebar-border = e9e9e9
; main view
main = ffffff
text = 010101
subtext = 6d6d6d
selected-row = 6d6d6d
; player bar
player = ffffff
player-text = 010101
player-subtext = 6d6d6d
player-selected-row = 6d6d6d
player-border = e9e9e9
; accent colors
button = 2888d7
button-active = 2888d7
; others
button-disabled = dfdfdf
scrollbar = d9d9d9
scrollbar-hover = 4d4d4d
context-menu = ffffff
context-menu-text = 010101
context-menu-hover = ebebeb
card = ebebeb
shadow = 1e1e1e
notification = ffffff
notification-error = e35b5b
misc = 6d6d6d
; ylx
main-elevated = ffffff
highlight-elevated = ebebeb
highlight = ebebeb

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 35 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 187 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 78 KiB

Some files were not shown because too many files have changed in this diff Show more