[FEAT] Добавить готовые пресеты тем и возможность их подгрузки через URL

[An0nX]

Связан ли ваш запрос функции с проблемой? Пожалуйста, опишите.
Обновляемость некоторых кастомных стилей ввиду возможных изменений в UI требует ручного обновления Custom CSS. Другое дело была бы возможность подгружать стиль с URL и обновлять раз в период (а до пусть сидит в кэше)

Опишите желаемое решение
Реализовать возможность подгрузки с URL, добавить dropdown меню с готовыми пресетами тем, сделать возможность хранить сразу несколько тем

Опишите рассмотренные альтернативы

Дополнительный контекст
Можно реализовать как загрузку стиля через URL, так и добавить парс Update URL из самого стиля (если он взят с уловного Stylus

Пример dropdown меню с возможностью создания своих кастомных стилей (взято из aistudio.google.com)

Вот пример готового пресета темы Dark Modern Purple AMOLED (делал для себя, но делюсь для развития проекта):

/* ---------------------------------------------------------------- */
/* 1. CORE VARIABLES & AMOLED PALETTE                               */
/* ---------------------------------------------------------------- */
:root {
    /* True Black for AMOLED */
    --bg-black: #000000;
    
    /* Neon Purple Accents */
    --purple-neon: #d946ef; 
    --purple-primary: #a855f7; 
    --purple-deep: #6b21a8; 
    --purple-glow: 0 0 25px rgba(168, 85, 247, 0.3);
    
    /* Glass */
    --glass-surface: rgba(18, 18, 18, 0.7);
    --glass-border: 1px solid rgba(255, 255, 255, 0.08);
    --glass-border-hover: 1px solid rgba(168, 85, 247, 0.5);
    
    /* Overrides */
    --primary-color: #fff !important;
    --secondary-color: #a3a3a3 !important;
    --link-color: var(--purple-neon) !important;
    --sc-brand: var(--purple-primary) !important;
}

/* ---------------------------------------------------------------- */
/* 2. GLOBAL RESET & BACKGROUND                                     */
/* ---------------------------------------------------------------- */
body {
    background: var(--bg-black) !important;
    color: white !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

#content, .l-container, .l-fluid-fixed, .l-main, .l-sidebar-right, .l-content {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Scrollbar Polish */
::-webkit-scrollbar { width: 8px; background: #000; }
::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--purple-primary); }

/* ---------------------------------------------------------------- */
/* 3. PLAYER DOCK FIXES                                             */
/* ---------------------------------------------------------------- */
/* Undock the player */
.playControls {
    background: transparent !important;
    border: none !important;
    bottom: 24px !important;
    padding: 0 24px;
    pointer-events: none;
    height: auto !important;
}

.playControls__inner {
    pointer-events: auto;
    background: #121212 !important;
    border: 1px solid rgba(168, 85, 247, 0.25);
    border-radius: 16px !important;
    box-shadow: 0 10px 50px rgba(0,0,0,0.8);
    margin: 0 auto;
    max-width: 1100px;
    height: 72px !important;
    display: flex;
    align-items: center;
    padding: 0 16px;
}

/* Buttons Layout Fixes */
.playControls__elements {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

/* Symmetrical Margins for Transport Controls */
.skipControl__previous {
    margin: 0 12px 0 24px !important;
    width: 32px !important;
    min-width: 32px !important;
}
.skipControl__next {
    margin: 0 24px 0 12px !important;
    width: 32px !important;
    min-width: 32px !important;
}

/* Reset ugly borders */
.playControls__control, 
.sc-button-icon,
.shuffleControl,
.repeatControl,
.volume__button {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    color: #ccc !important;
    transition: all 0.2s ease;
}

.playControls__control:hover {
    color: var(--purple-neon) !important;
    transform: scale(1.1);
    background: transparent !important;
}

/* Main Play Button */
.playControl {
    background: linear-gradient(135deg, #9333ea, #d946ef) !important;
    border-radius: 50% !important;
    width: 46px !important;
    height: 46px !important;
    box-shadow: 0 4px 20px rgba(147, 51, 234, 0.4) !important;
    color: white !important;
    opacity: 1 !important;
    border: none !important; 
    margin: 0 !important; /* Reset margin as it is centered by flex siblings */
}

/* Queue Button Fix */
.playbackSoundBadge__showQueue {
    width: 32px !important;
    height: 32px !important;
    overflow: visible !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin-left: 12px;
    border: none !important;
    background: transparent !important;
}

/* Timeline */
.playbackTimeline__progressWrapper {
    height: 4px !important;
    background: rgba(255,255,255,0.1) !important;
    border-radius: 2px;
}
.playbackTimeline__progressBar {
    background-color: var(--purple-neon) !important;
    box-shadow: 0 0 12px var(--purple-neon);
}
.playbackTimeline__progressHandle {
    background: white !important;
    border: none !important;
    width: 12px;
    height: 12px;
    top: -4px;
    box-shadow: 0 0 10px rgba(168, 85, 247, 0.8);
}

/* ---------------------------------------------------------------- */
/* 4. MODULES & CARDS (Fixing Text Padding)                         */
/* ---------------------------------------------------------------- */
.soundBadge, 
.userBadge, 
.playableTile, 
.sidebarModule, 
.mixedSelectionModule,
.quotaMeterWrapper,
.artistConnectContainer__item {
    background-color: var(--glass-surface) !important;
    backdrop-filter: blur(12px);
    border: var(--glass-border) !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    margin-bottom: 20px !important;
    overflow: hidden; /* Clip content to border radius */
}

/* *** FIX FOR TEXT TOUCHING BORDERS *** */
.playableTile__description {
    padding: 8px 12px 14px 12px !important; /* Top Right Bottom Left */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.playableTile__heading {
    margin-bottom: 4px !important;
}

/* Hover States */
.soundBadge:hover, .playableTile:hover {
    border-color: var(--purple-primary) !important;
    background-color: rgba(30, 30, 35, 0.95) !important;
    box-shadow: var(--purple-glow);
}

/* Header */
.header {
    background: rgba(0, 0, 0, 0.95) !important;
    border-bottom: 1px solid rgba(168, 85, 247, 0.15);
    height: 52px !important;
}
.header__navMenu > li > a.selected {
    border-bottom: 3px solid var(--purple-neon) !important;
    color: var(--purple-neon) !important;
}

/* Buttons */
.sc-button {
    border-radius: 6px !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    background: transparent !important;
    color: white !important;
    font-weight: 600;
}
.sc-button-cta, .sc-button-primary {
    background: var(--purple-deep) !important;
    border-color: var(--purple-deep) !important;
}
.sc-button:hover {
    background: rgba(255,255,255,0.05) !important;
    border-color: var(--purple-neon) !important;
}

/* ---------------------------------------------------------------- */
/* 5. AD REMOVAL                                                    */
/* ---------------------------------------------------------------- */
.bannerAd, .ad-container, .billboard, [class*="upsell"], .announcement, 
.announcements, .p-ads-container, .trial-button, .sc-status-label-pro,
.premiumIconLink, .header__creatorUpsell {
    display: none !important;
}

[zxcloli666]

привет
хорошая идея, добавить такое не помешало бы

но только не знаю как лучше будет сделать загрузку свои стилей - как у flatpak с отдельным репозиторием или на github pages как-нибудь сделать. или объединить - загрузку стилей и обновление через pr, а список стилей на github pages вынести

посмотрю в ближайшее время как лучше сделать

[An0nX]

но только не знаю как лучше будет сделать загрузку свои стилей

Как сейчас + прямая ссылка куда угодно (пастебин, гит, гитеа, гитлаб и тд)

[zxcloli666]

Как сейчас + прямая ссылка куда угодно (пастебин, гит, гитеа, гитлаб и тд)

тогда не сложно будет сделать
в следующих обновлениях добавлю