StyledGuildsAsChannels

Stylesheet to Display Servers in a list view.
Menu expands when hovering over the regular sidebar.

Compatability

Desktop Visual Refresh

This is technically working on the 2025 Desktop Visual Refresh, but has some visual issues. A complete rewrite is in the works and will be available soon.

Requirements

Recommended:

OpenASAR - Lightweight Discord CSS Injector

Also Compatible:

Any other alternative CSS Injector such as Vencord, Vesktop or BetterDiscord will also work.

Installation

Install instructions are available as per your method of injection:

Installation Guide for OpenASAR

Installation Guide for OpenASAR

Add the following to your CSS Config:

@import url(https://pinpal.github.io/CompactDiscordServers/assets/css/main.css);

Installation Guide for Vencord & Vesktop

Installation Guide for Vencord & Vesktop

1. Navigate to the Settings Menu within Discord
2. Locate the Themes subsection within the Vencord section
3. Click on Online Themes in the pill selector at the top
4. Insert the following URL into the text box:

https://pinpal.github.io/CompactDiscordServers/assets/css/main.css

Customisation

Click to View all the variables you can adjust in your CSS Config

Sidebar Width

:root {
    // Width of the sidebar when Expanded
    --gac-expanded-width: 220px;
    // Width of the sidebar when Collapsed
    --gac-collapse-width: 72px;
}

Other Settings

:root {
    // Height of each server in the sidebar
    --gac-server-height: 48px;

    // Size of padding (white space) 
    // Also used as a multiplier for larger/smaller padding sizes
    --gac-padding: 8px;

    // How rounded the corners of servers/folders are
    --gac-border-radius: 8px;
}

Animations

:root {
    // Timing function for sidebar collapse/expand animation
    --gac-transition-timing-func: ease-in-out;
    // Duration that animation for sidebar collapse/expand takes
    --gac-transition-duration: 0.2s;
    // Delay before sidebar collapses after you stop hovering
    --gac-transition-delay: 0.65s;
}

Colors

By default, they inherit from your Discord Theme.

:root {
    // Background of servers/folders
    --gac-box-color: var(--background-secondary);
    // Background of servers/folders (when hovering)
    --gac-hover-color: var(--background-modifier-selected);

    // Color of text (eg: server name)
    --gac-text-color: var(--channels-default);
    // Color of text when hovering
    --gac-text-hover-color: var(--interactive-active);

    // Background for the header of an expanded folder
    --gac-hover-color-overlay: var(--background-modifier-hover);

    // Background for selected server (the one you are currently in)
    --gac-accent-color: var(--bg-brand);
    // Background while hovering for selected server (the one you are currently in)
    --gac-accent-hover: var(--brand-430);
}