source-native.scss

@import "icon-layout";
@import "icons-default";

// IDs manually scraped from https://github.com/codedotspectra/themes/blob/master/mini-themes/settingsIcons.css.

/*
    Variables:
    
    --settings-icon-color: white;
  
    --settings-subscriptions: #7289da;
    --settings-hypesquad: #fbb848;
    --settings-logout: #f04747;
*/

/* Loader */
$icons-betterdiscord: (
    general: 3, emotes: 4, 
    plugins: 5, themes: 6, 
    custom: 7 // custom css
);

@each $name, $id in $icons-betterdiscord {
    #bd-settings-sidebar > span > div >
    .ui-tab-bar-item:nth-child(#{$id})::before {
        --icon: #{svg("./icons/loader/" + $name + ".svg")};
    }
}

/* Platform Specific */
$icons-windows: (
    overlay: 15, notifications: 16,
    keybinds: 17, game-activity: 18,
    text-images: 19, appearance: 20, 
    streamer-mode: 21, language: 22,
    os-settings: 23, changelog: 25,
    logout: 28
);

$icons-unix: (
    notifications: 15, keybinds: 16,
    game-activity: 17, text-images: 18,
    appearance: 19, streamer-mode: 20,
    language: 21
);

$icons-linux: ( os-settings: 22, changelog: 24, logout: 27 );

$icons-macos: ( changelog: 23, logout: 26 );

$selector: ".layer-3QrUeG[aria-label=USER_SETTINGS] .side-8zPYf6>.item-PXvHYJ";


@each $name, $id in $icons-windows {
    html.platform-win #{$selector}:nth-child(#{$id})::before {
        --icon: #{svg("./icons/default/" + $name + ".svg")};
        
        @if $name == logout {
            --settings-icon-color: var(--settings-logout);
        }
    }
}

/* Linux, & MacOS */
@each $name, $id in $icons-unix {
    html:not(.platform-win) #{$selector}:nth-child(#{$id})::before {
        --icon: #{svg("./icons/default/" + $name + ".svg")};
    }
}

@each $name, $id in $icons-macos {
    html.platform-osx #{$selector}:nth-child(#{$id})::before {
        --icon: #{svg("./icons/default/" + $name + ".svg")};
        
        @if $name == logout {
            --settings-icon-color: var(--settings-logout);
        }
    }
}

@each $name, $id in $icons-linux {
    html.platform-linux #{$selector}:nth-child(#{$id})::before {
        --icon: #{svg("./icons/default/" + $name + ".svg")};
        
        @if $name == logout {
            --settings-icon-color: var(--settings-logout);
        }
    }
}