Discord+
A sleek, customizable Discord theme, inspired by Material
1.2K
Live preview
Full Discord interface with this theme applied — powered by ThemePreview.
Screenshot
1
/**2
* @name Discord+3
* @author PlusInsta4
* @authorId 3099319751023001605
* @authorLink https://plusinsta.xyz6
* @version 3.4.17
* @description A sleek, customizable Discord theme.8
* @donate https://ko-fi.com/plusinsta9
* @website https://plusinsta.github.io/discord-plus10
* @source https://github.com/PlusInsta/discord-plus/tree/master/src11
* @updateUrl https://plusinsta.github.io/discord-plus/DiscordPlus.theme.css12
* @invite 2Jwh2nS13
*/14
@import url('https://plusinsta.github.io/discord-plus/src/DiscordPlus-source.theme.css');15
16
.theme-dark {17
--dplus-backdrop: url('https://i.ibb.co/1yMXFFr/Moonlit-Dusk-2018.webp');18
/* Image or color for the backdrop. Defaults to accent color on error. */19
20
--dplus-accent-color-hue: 320;21
--dplus-accent-color-saturation: 60%;22
--dplus-accent-color-lightness: 31%;23
/* Accent colors accentuate foreground elements. */24
/* https://hslpicker.com */25
26
--dplus-foreground-color-hue-base: 210;27
--dplus-foreground-color-hue-links: 197;28
--dplus-foreground-color-saturation-amount: 1;29
--dplus-foreground-color-lightness-amount: 1;30
/* These determine the color of foreground elements. */31
/*32
* NOTE: "Amount" is an offset, where 1.0 is normal, and 0.5 is reduced by 50%.33
* An example: If an element has a base lightness of 0.45,34
* setting --dplus-foreground-color-lightness-amount to 0.835
* results in the element getting a final lightness of 0.25.36
* While your offsets can be any number, the final values will always be between 0 and 1. */37
38
--dplus-background-color-hue: 320;39
--dplus-background-color-saturation-amount: 1;40
--dplus-background-color-lightness-amount: 1;41
--dplus-background-color-alpha: 0.8;42
/* This determines the color and opacity of surfaces. */43
/* If the foreground is hard to read, try adjusting these values. */44
}45
46
/* If you use light theme, you can modify it separately from dark theme. */47
/* The instructions above work for light theme too. */48
.theme-light {49
--dplus-backdrop: url('https://i.ibb.co/CKzkqnyk/Dawn-2020.webp');50
51
--dplus-accent-color-hue: 320;52
--dplus-accent-color-saturation: 60%;53
--dplus-accent-color-lightness: 31%;54
55
--dplus-foreground-color-hue-base: 210;56
--dplus-foreground-color-hue-links: 197;57
--dplus-foreground-color-saturation-amount: 1;58
--dplus-foreground-color-lightness-amount: 1;59
60
--dplus-background-color-hue: 320;61
--dplus-background-color-saturation-amount: 1;62
--dplus-background-color-lightness-amount: 1;63
--dplus-background-color-alpha: 0.8;64
}65
66
:root {67
--dplus-font-ui: 'Poppins';68
--dplus-font-body: 'Roboto';69
--dplus-font-header: 'Righteous';70
/* You can use any font that is installed, but you need to input its web name. */71
/* If you just installed a font, you may need to restart the app or device first. */72
73
--dplus-radius-ui: 10px;74
/* Rounding on square corners of app elements. Should be absolute size, e.g. pixels. */75
--dplus-radius-avatar: 20%;76
/* Rounding of user profile icons. Should be relative size, e.g. percentage. */77
--dplus-radius-server: 20%;78
/* Rounding of server profile icons. Should be relative size, e.g. percentage. */79
80
--dplus-spacing-ui: 10px;81
/* This value affects overall padding and margins across the app. */82
/* Increasing this will make the app less compact. */83
--dplus-spacing-app: 10px;84
/* This value affects spacing between major app elements. */85
/* Increasing this will make the backdrop easier to see. */86
87
--dplus-icon-avatar-chat: 64px;88
/* This affects the size of user profile icons as seen in the chat. */89
--dplus-icon-avatar-list: 32px;90
/* The size of user profile icons as seen in lists. */91
--dplus-icon-avatar-profile: 80px;92
/* The size of user profile icons as seen on the full profile. */93
}94