/discord-serenade

A comfy discord theme

Primary LanguageCSS

Banner

Preview

A comfy easy, easy on eyes theme for Dicsord. Based on the colorscheme Serenade.

Overview

Overview

Auto Hide on Tile

auto-hide

Channel Separator Message Replies
Channel Separator Replies

Installation

Powercord

Clone this repo in your Powercord themes directory

cd powercord/src/Powercord/themes && git clone https://github.com/b4skyx/discord-serenade

BeautifulDiscord

A nice css injector if you need only the css injection. Hot reloading works very well.

git clone https://github.com/b4skyx/discord-serenade
beautifuldiscord --css ./discord-serenade/discord_serenade.css

Styues/Web Extension

The theme works very well with Stylus extension. It's a single big file and not refactored for the same reason. Copy the contents of [css][./discord_serenade.css] file and paste it in your newly created userstyle.

Install via UserStyles

Customization

You can use this theme as a base and customize values according to your usecase.

@import 'https://raw.githubusercontent.com/b4skyx/discord-serenade/master/discord_serenade.css';
.theme-dark {
    --background-primary: #2a2f33;
    --background-secondary: #2e3338;
    --background-tertiary: #373d41;
    --background-tertiary-alt: #31363b;
    --background-accent: #504945;
    --text-normal: #bfddb2;
    --text-spotify: #B3CFA8;
    --text-muted: #bdae93;
    --text-link: #458588;
    --background-floating: #31363b;
    --background-mentioned: #2e3338;
    --header-primary: #B3CFA7;
    --header-secondary: #bdae93;
    --header-spotify: #b8bb26;
    --interactive-normal: #B3CFA7;
    --interactive-hover: #bdae93;
    --interactive-active: #B3CFA8;
    --server-radius: 4%;
}

Similarly you can define .theme-light if you use the light theme.