modern-indicators.theme.css

/**
    * @name Modern Indicators
    * @description Updates Discord's indicators to feel more modern.
    * @version 2.1.0
    * @author LuckFire
    *
    * @invite vYdXbEzqDs
    * @website https://github.com/discord-extensions
    * @source https://github.com/discord-extensions/modern-indicators
**/

@import url('https://discord-extensions.github.io/modern-indicators/src/source.css');

/* || Accent Colors
 * Accent colors use HSL to remain compatible with Discord's built in saturation accessibility feature.
 * To the bigbrains out there, I know this is unnecessary. This is just how I prefer to do things.
 */
.theme-light {
    --indicator-unread: 0, calc(var(--saturation-factor, 1) * 0%), 0%;
    --indicator-selected: 235, calc(var(--saturation-factor, 1) * 86%), 65%;
    --indicator-connected: 139, calc(var(--saturation-factor, 1) * 47.6%), 48.6%;
    --indicator-hovered: hsla(var(--indicator-unread), 0.08);
    --text-active: black;
}
.theme-dark {
    --indicator-unread: 0, calc(var(--saturation-factor, 1) * 0%), 100%;
    --indicator-selected: 235, calc(var(--saturation-factor, 1) * 86%), 65%;
    --indicator-connected: 139, calc(var(--saturation-factor, 1) * 86%), 65%;
    --indicator-hovered: hsla(var(--indicator-unread), 0.045);
    --text-active: white;
}

/* || Main Customization */
:root {
    --indicator-border-size: 2px;
    --indicator-border-style: solid;
    --indicator-rounding: 0;

/* || Advanced Coloring */
    --item-selected-icon: hsl(var(--indicator-selected));
    --item-selected-indicator: hsl(var(--indicator-selected));
    --item-selected-background: hsla(var(--indicator-selected), 0.1);
    --item-selected-background-hover: hsla(var(--indicator-selected), 0.2);

    --item-connected-icon: hsl(var(--indicator-connected));
    --item-connected-indicator: hsl(var(--indicator-connected));
    --item-connected-background: hsl(var(--indicator-connected), 0.1);
    --item-connected-background-hover: hsl(var(--indicator-connected), 0.2);

    --item-unread-icon: hsl(var(--indicator-unread));
    --item-unread-indicator: hsl(var(--indicator-unread), 0.5);
    --item-unread-background: hsl(var(--indicator-unread), 0.025);
    --item-unread-background-hover: hsl(var(--indicator-unread), 0.045);
}