_variables.scss

@use "app.scss";

/* ═══════『 ⚠️・Important tips 』═══════
*
*   ➥ To comment or uncomment a line you need to put those "/" and "*" characters as you can see at the beginning and ending of my comments.
*      (You don't need to put a * at each line like I do, it's just for readability). See more here : https://developer.mozilla.org/en-US/docs/Web/CSS/Comments
*
*   ➥ You can play with the values and see how it goes, don't delete "px" after the value if you don't have knowledges in CSS.
*
*   ➥ To change the colors, replace the HEX code with the one you picked here : https://htmlcolorcodes.com
*/

/* ═══════『 🚫 ・ No scrollbars 』- Comment the line below if you want the scrollbar back */
@forward "stuff/custom/no-scrollbar";

/* ═══════『 🎵 ・ Powercord  seek bar 』- Comment the line below if you want the dafault one */
@forward "stuff/custom/powercord-spotify";

/* ═══════『 🎵 ・ Vizality  seek bar 』- Comment the line below if you want the dafault one */
@forward "stuff/custom/vizality-spotify";

:root {

/* ═══════『 💨 ・ Animations 』- If you don't want a high CPU usage, comment the line below */
--disable-animations: 2s channel-unread infinite;

/* ═══════『 🖼️ ・ Background in the status picker 』═══════
*
*   ➥ Image : Replace the url of the current image with yours
*
*   ➥ Color : Delete the url("https://mywebsite/example.png") and replace it by an HEX color
*
*   ℹ️ : This background isn't and cannot be linked to the new Nitro banners or USRBG 
*/

--status-background: url('https://i.imgur.com/ODa8LKK.jpg');

/* ═══════『 ⚙️ / 🎤 / 🎧 ・ User button 』═══════
*
*   ➥ A higher value will means more space between the icons and a lower ...
*
*    ℹ️ : If you want to revert those to the old area, join the support server and check #css-snippets
*
*/

/* Spacing - Default value : 8px */
--user-buttons-spacing: 8px;

/* Color - Default value : #096DC0 */
--user-buttons-color: #096DC0;

/* ═══════『 ⭕ Roundness settings 』═══════
*
*    ➥ A higher value will means more rounded corners and a lower ...
*       0 ➜ Square
*       25 ➜ Circle
*/

/* Avatars - Default value : 5px */
--avatar-radius: 5px;  

/* Status - Default value : 3px */
--status-radius: 3px; 

/* Servers - Default value : 8px */
--server-radius: 8px;

/* ═══════『 😃 Colored emoji picker 』═══════
*   Change the value to "100%" if you want the default one */

--colored-emoji: grayscale(0%);

/* ═══════『 📜 Server/channel list 』═══════ */

/* Mention - Default value : #F04747 */
--mention-color: #F04747;

/* Unread - Default value : #7289DA */
--unread-color: #7289DA;

/*  『 🔴 Mention colors in chat 』 */

/* Bar on the right - Default value : #C66262 */
--mention-color-bar: #C66262;

/* Background - Default value : #C662621F */
--mention-color-background: #C662621F;

/* On hover - Default value : #C6626226 */
--mention-color-hover: #C6626226;

/* ═══════『 💬 Chat buttons 』═══════ */

/* Default value : #7289DA */
--chat-buttons: #7289DA;

/* ═══════『 💬 Spotify seek bar 』═══════ */

// Vizality - Default value : #1EDC62
--spotify-in-discord__spotify-brand-color: #1EDC62;

// Powercord - Default value : #1EDC62
--spotify-color: #1EDC62 !important;

/* ═══════『 🟢 Status 』═══════ */

/* Online - Default value : #43B581 */
--online: #43B581;

/* Iddle - Default value : #FAA61A */
--iddle: #FAA61A;

/* Do Not Disturb - Default value : #F04747 */
--dnd: #F04747;

/* Offline - Default value : #747F8D */
--offline: #747F8D;

/* Streaming - Default value : #593695 */
--streaming: #593695;

/* ═══════『 🔰 User popout 』═══════ */

/* Playing wave color */
--playing: #7289da;

/* Listening wave color */
--listening: #1db653;

--role-circle: 5px;

/* ═══════『 🗑️ Discord logo 』═══════
*   Set it to "block" if you still want it */

--discord-logo: none;

}

.theme-dark {
    --background-tertiary: #101320;
    --background-secondary: #1e2233;
    --background-secondary-alt: #191f2e;
    --background-primary: #23283d;
    --background-mobile-primary: #23283d;
    --background-mobile-secondary: #1e2233;
    --channeltextarea-background: #191f2e;
    --background-accent: #6E85D3;
    --background-message-hover: transparent;
    --background-modifier-hover: #00000010;
    --background-modifier-active: #0000001a;
    --background-modifier-selected: #0000001f;
    --deprecated-card-bg: #12141f63;
    --background-floating: #101320;
    --deprecated-quickswitcher-input-background:#101320;
    --elevation-low: none;
    --scrollbar-auto-thumb: #121722;
    --scrollbar-auto-track: #191f2e;
    --scrollbar-thin-thumb: #141925;
    --toast-background: #1e2233 !important;
    --toast-header: #101320 !important;
    --toast-contents: #23283d !important;
    --activity-card-background: #101320;
}

.theme-light {
    --background-tertiary: #101320;
    --background-secondary: #1e2233;
    --background-secondary-alt: #191f2e;
    --background-primary: #23283d;
    --background-accent: #6E85D3;
    --background-modifier-hover: #262b41;
    --background-modifier-active: #262b41;
    --header-primary: #fff;
    --header-secondary: #b1b5b9;
    --text-normal: #8e9297;
}