Skip to content

Instantly share code, notes, and snippets.

@BbaassTMH
Forked from devilesk/classic-light-theme.css
Last active January 6, 2021 17:35
Show Gist options
  • Save BbaassTMH/9c97ccef50bfa429372105092db8a93e to your computer and use it in GitHub Desktop.
Save BbaassTMH/9c97ccef50bfa429372105092db8a93e to your computer and use it in GitHub Desktop.
Discord light theme with a dark theme server and channel list to get a classic light theme look
//META{"name":"Classic-Lightv5","description":"Discord's old light theme","author":"Devilesk & Bbaass_TMH","version":"06-01-2021"}*//
/* windows top bar background color is transparent and based on the whole app background color */
.appMount-3lHmkl, .typeWindows-1za-n7, .platform-win {
--background-tertiary:#202225;
}
/* this contains everything below the windows top bar. set the background-tertiary back to the light theme color,
* otherwise the search bar background and border around wells in the chat section will be dark which we don't want */
/* 30-09-2020 -- added layer-v9HyYc to this because I noticed some things had text for light mode mixed with a
* background for dark mode, making text unreadable. */
.container-2lgZY8, .layer-v9HyYc {
--background-tertiary:#e3e5e8;
}
/* channel sidebar has a top left rounded corner where a white background peeks out so get rid of it */
.platform-win .sidebar-2K8pFh {
border-top-left-radius: 0px;
}
/* css vars taken from dark theme and applied to server list, channel list, windows top bar */
.guilds-1SWlCJ, .sidebar-2K8pFh, .titleBar-AC4pGV {
--activity-card-background:#202225;
--background-accent:#4f545c;
--background-floating:#18191c;
--background-modifier-accent:hsla(0,0%,100%,0.06);
--background-modifier-active:rgba(79,84,92,0.24);
--background-modifier-hover:rgba(79,84,92,0.16);
--background-modifier-selected:rgba(79,84,92,0.32);
--background-primary:#36393f;
--background-secondary:#2f3136;
--background-tertiary:#202225;
--channels-default:#8e9297;
--channeltextarea-background:#40444b;
--deprecated-card-bg:rgba(32,34,37,0.6);
--deprecated-card-editable-bg:rgba(32,34,37,0.3);
--deprecated-panel-background:#292b2f;
--deprecated-quickswitcher-input-background:#72767d;
--deprecated-quickswitcher-input-placeholder:hsla(0,0%,100%,0.3);
--deprecated-store-bg:#36393f;
--deprecated-text-input-bg:rgba(0,0,0,0.1);
--deprecated-text-input-border:rgba(0,0,0,0.3);
--deprecated-text-input-border-disabled:#202225;
--deprecated-text-input-border-hover:#040405;
--deprecated-text-input-prefix:#dcddde;
--elevation-high:0 8px 16px rgba(0,0,0,0.24);
--elevation-low:0 1px 0 rgba(4,4,5,0.2),0 1.5px 0 rgba(6,6,7,0.05),0 2px 0 rgba(4,4,5,0.05);
--guild-header-text-shadow:0 1px 1px rgba(0,0,0,0.4);
--header-primary:#fff;
--header-secondary:#b9bbbe;
--interactive-active:#fff;
--interactive-hover:#dcddde;
--interactive-muted:#4f545c;
--interactive-normal:#b9bbbe;
--logo-primary:#fff;
--text-link:#00b0f4;
--text-muted:#72767d;
--text-normal:#dcddde;
}
/* 08-02-2020 -- fixes the username-mute-deafen-settings below the
* channel list having been changed to light in an update */
.panels-j1Uci_ {
--background-secondary-alt:#292b2f;
}
/* 06-01-2021 -- fixes the header when viewing a user's profile */
.topSectionNormal-2-vo2m {
--header-primary: #060607;
--header-secondary: #4f5660;
--text-normal: #2e3338;
--text-muted: #747f8d;
--text-link: #0067e0;
--channels-default: #6a7480;
--interactive-normal: #4f5660;
--interactive-hover: #2e3338;
--interactive-active: #060607;
--interactive-muted: #c7ccd1;
--background-primary: #fff;
--background-secondary: #f2f3f5;
--background-secondary-alt: #ebedef;
--background-tertiary: #e3e5e8;
--background-accent: #747f8d;
--background-floating: #fff;
--background-mobile-primary: #f8f9f9;
--background-mobile-secondary: #fff;
--background-modifier-hover: rgba(116,127,141,0.08);
--background-modifier-active: rgba(116,127,141,0.16);
--background-modifier-selected: rgba(116,127,141,0.24);
--background-modifier-accent: rgba(6,6,7,0.08);
--background-mentioned: rgba(250,166,26,0.1);
--background-mentioned-hover: rgba(250,166,26,0.2);
--background-message-hover: rgba(6,6,7,0.02);
--background-help-warning: rgba(250,166,26,0.1);
--background-help-info: rgba(0,103,224,0.1);
--scrollbar-thin-thumb: rgba(79,84,92,0.3);
--scrollbar-thin-track: transparent;
--scrollbar-auto-thumb: #ccc;
--scrollbar-auto-track: #f2f2f2;
--scrollbar-auto-scrollbar-color-thumb: #e3e5e8;
--scrollbar-auto-scrollbar-color-track: #f2f3f5;
--elevation-stroke: 0 0 0 1px rgba(6,6,7,0.08);
--elevation-low: 0 1px 0 rgba(6,6,7,0.1),0 1.5px 0 rgba(6,6,7,0.025),0 2px 0 rgba(6,6,7,0.025);
--elevation-medium: 0 4px 4px rgba(0,0,0,0.08);
--elevation-high: 0 8px 16px rgba(0,0,0,0.16);
--logo-primary: #7289da;
--focus-primary: #00b0f4;
--radio-group-dot-foreground: #4e5d94;
--guild-header-text-shadow: 0 1px 1px hsla(0,0%,100%,0.4);
--channeltextarea-background: #ebedef;
--activity-card-background: #fff;
--textbox-markdown-syntax: #6a7480;
--deprecated-card-bg: #f8f9f9;
--deprecated-card-editable-bg: rgba(246,246,247,0.6);
--deprecated-store-bg: #f8f9f9;
--deprecated-quickswitcher-input-background: #fff;
--deprecated-quickswitcher-input-placeholder: rgba(79,84,92,0.3);
--deprecated-text-input-bg: rgba(79,84,92,0.02);
--deprecated-text-input-border: rgba(79,84,92,0.3);
--deprecated-text-input-border-hover: #b9bbbe;
--deprecated-text-input-border-disabled: #dcddde;
--deprecated-text-input-prefix: #b9bbbe;
}
@XytharDX
Copy link

Thanks for latest update, exactly what I was looking for

@BbaassTMH
Copy link
Author

Just fixed incorrect backgrounds for private server emote info and the header of the "mentions / unreads" dropdown.

If anyone else who uses this notices something else that has an unreadable mix of dark/light text/background, let me know.
I myself don't use all features of Discord, e.g. screenshare or voice stuff so if an update messes things up in those menus I won't know.

@BbaassTMH
Copy link
Author

Fixed the header when viewing a user's profile being dark text on dark background.


Also added the theme name and description metadata on line 1 so it can just be downloaded and put in the themes folder directly.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment