SkeuoCord
A complete skeuomorphic overhaul for Discord.
231
Live preview
Full Discord interface with this theme applied — powered by ThemePreview.
Screenshot
1
/**2
* @name SkeuoCord3
* @author Marda334
* @version Auto Update5
* @description A complete skeuomorphic overhaul for Discord.6
* @website https://github.com/Marda33/SkeuoCord7
* @source https://marda33.github.io/SkeuoCord/updates/SkeuoCordBase.css8
*/9
10
@import url("https://marda33.github.io/SkeuoCord/updates/SkeuoCordBase.css");11
/*replace SkeuoCordBase with SkeuoCord_BGImport to use custom BG image*/12
/*replace SkeuoCordBase with SkeuoCord_BGImport_ExtTransp to use custom BG image with more transparency*/13
/*replace SkeuoCordBase with SkeuoCord_Recolor to change default blue accent color with your own, SkeuoCord_Recolor_CustomBG for recolor+custom BG*/14
15
:root {16
/*---Theme Settings---*/17
/*Custom BG - enter the link to the image you want to use as the app background, keep quotes*/18
--bg-image: url('here') center/cover no-repeat;19
/*User Avatar Border Radius Values - change all below to 999px for circle avatars, set back to default values for square avatars*/20
--maskradius: 2px; /*default: 2px*/21
--avatarradius: 3px; /*default: 3px*/22
--smallavatarradius: 2px; /*default: 2px*/23
--medavatarradius: 4px; /*default: 4px*/24
--largeavatarradius: 5px ; /*default: 5px*/25
/*User Avatar Border Values - change all to none to remove avatar borders*/26
--smallborder_dark: 2px solid rgba(152,152,153); /*default: 2px solid rgba(152,152,153)*/27
--smallborder_light: 2px solid rgba(82,82,83); /*default: 2px solid rgba(82,82,83)*/28
--chatborder_dark: 0 0 0 2px rgba(230,230,230,0.6), 0 0 4px 4px rgba(0,0,0,0.5); /*default: 0 0 0 2px rgba(230,230,230,0.6), 0 0 4px 4px rgba(0,0,0,0.5)*/29
--chatborder_light: 0 0 0 2px rgba(60,60,60,0.8), 0 0 4px 4px rgba(0,0,0,0.27); /*default: 0 0 0 2px rgba(60,60,60,0.8), 0 0 4px 4px rgba(0,0,0,0.27)*/30
--medborder_dark: 0 0 0 3px rgba(230,230,230,0.6), 0 0 4px 4px rgba(0,0,0,0.6); /*default: 0 0 0 3px rgba(230,230,230,0.6), 0 0 4px 4px rgba(0,0,0,0.6)*/31
--medborder_light: 0 0 0 3px rgba(60,60,60,0.8), 0 0 4px 4px rgba(0,0,0,0.27); /*default: 0 0 0 3px rgba(60,60,60,0.8), 0 0 4px 4px rgba(0,0,0,0.27)*/32
--largeborder_dark: 0 0 0 4px rgba(230,230,230,0.6), 0 0 5px 5px rgba(0,0,0,0.6); /*default: 0 0 0 4px rgba(230,230,230,0.6), 0 0 5px 5px rgba(0,0,0,0.6)*/33
--largeborder_light: 0 0 0 4px rgba(60,60,60,0.8), 0 0 5px 5px rgba(0,0,0,0.27); /*default: 0 0 0 4px rgba(60,60,60,0.8), 0 0 5px 5px rgba(0,0,0,0.27)*/34
/*Text Shadows - change to edit text shadows for dark theme, light theme and buttons*/35
--dark_shadows: 0px 0px 5px rgba(0,0,0,0.6); /*default: 0px 0px 5px rgba(0,0,0,0.6);*/36
--light_shadows: 0px 0px 5px rgba(114,114,114,0.5); /*default: 0px 0px 5px rgba(114,114,114,0.5);*/37
--button_shadows: 0px 0px 5px rgba(0,0,0,0.5); /*default: 0px 0px 5px rgba(0,0,0,0.5);*/38
/*UI Gradients - change main UI element gradient colors*/39
/*---Headers-Footers - for server name header-user menu footer-chat textbox, Toolbars - for channel toolbar---*/40
--header_dark_top: rgb(58,58,58); /*default: rgb(58,58,58)*/41
--header_dark_bottom: rgb(0,0,0); /*default: rgb(0,0,0)*/42
--header_light_top: rgb(228,228,228); /*default: rgb(228,228,228)*/43
--header_light_bottom: rgb(174,174,174); /*default: rgb(174,174,174)*/44
--toolbar_dark_top: rgb(88,88,88); /*default: rgb(88,88,88)*/45
--toolbar_dark_bottom: rgb(29,29,29); /*default: rgb(29,29,29)*/46
--toolbar_light_top: rgb(211,211,211); /*default: rgb(211,211,211)*/47
--toolbar_light_bottom: rgb(154,154,154); /*default: rgb(154,154,154)*/48
/*---Cells - for unthemed profiles, file embeds etc.---*/ 49
--cell_dark_top: hsl(220, calc(var(--saturation-factor, 1) * 7.7%), 22.9%); /*default: hsl(220, calc(var(--saturation-factor, 1) * 7.7%), 22.9%)*/50
--cell_dark_bottom: hsl(210, calc(var(--saturation-factor, 1) * 3.4%), 11.4%); /*default: hsl(210, calc(var(--saturation-factor, 1) * 3.4%), 11.4%)*/51
--cell_light_top: hsl(30, calc(var(--saturation-factor, 1) * 3.4%), 88.6%); /*default: hsl(30, calc(var(--saturation-factor, 1) * 3.4%), 88.6%)*/52
--cell_light_bottom: hsl(40, calc(var(--saturation-factor, 1) * 7.7%), 77.1%); /*default: hsl(40, calc(var(--saturation-factor, 1) * 7.7%), 77.1%)*/53
/*---Backgrounds - Main for server column-page BGs, list for channel-DMs-members list BGs, sidebar for settings sidebar BG---*/ 54
--mainbg_dark_top: hsl(210, calc(var(--saturation-factor, 1) * 7.7%), 5.1%); /*default: hsl(210, calc(var(--saturation-factor, 1) * 7.7%), 5.1%)*/55
--mainbg_dark_bottom: hsl(216, calc(var(--saturation-factor, 1) * 5.7%), 17.1%); /*default: hsl(216, calc(var(--saturation-factor, 1) * 5.7%), 17.1%)*/56
--mainbg_light_top: hsl(45, calc(var(--saturation-factor, 1) * 4.8%), 83.5%); /*default: hsl(45, calc(var(--saturation-factor, 1) * 4.8%), 83.5%)*/57
--mainbg_light_bottom: hsl(40, calc(var(--saturation-factor, 1) * 5.7%), 89.6%); /*default: hsl(40, calc(var(--saturation-factor, 1) * 5.7%), 89.6%)*/58
--listbg_dark_top: hsl(240, calc(var(--saturation-factor, 1) * 3.7%), 10.6%); /*default: hsl(240, calc(var(--saturation-factor, 1) * 3.7%), 10.6%)*/59
--listbg_dark_bottom: hsl(225, calc(var(--saturation-factor, 1) * 8.0%), 19.6%); /*default: hsl(225, calc(var(--saturation-factor, 1) * 8.0%), 19.6%)*/60
--listbg_light_top: hsl(48, calc(var(--saturation-factor, 1) * 3.4%), 70.8%); /*default: hsl(48, calc(var(--saturation-factor, 1) * 3.4%), 70.8%)*/61
--listbg_light_bottom: hsl(43, calc(var(--saturation-factor, 1) * 8.6%), 84.1%); /*default: hsl(43, calc(var(--saturation-factor, 1) * 8.6%), 84.1%)*/62
--sidebar_dark_top: hsl(223, calc(var(--saturation-factor, 1) * 7.5%), 18.2%); /*default: hsl(223, calc(var(--saturation-factor, 1) * 7.5%), 18.2%)*/63
--sidebar_dark_bottom: hsl(210, calc(var(--saturation-factor, 1) * 4.0%), 9.8%); /*default: hsl(210, calc(var(--saturation-factor, 1) * 4.0%), 9.8%)*/64
--sidebar_light_top: hsl(43, calc(var(--saturation-factor, 1) * 11.5%), 88.0%); /*default: hsl(43, calc(var(--saturation-factor, 1) * 11.5%), 88.0%)*/65
--sidebar_light_bottom: hsl(60, calc(var(--saturation-factor, 1) * 4.3%), 77.1%); /*default: hsl(60, calc(var(--saturation-factor, 1) * 4.3%), 77.1%)*/66
/*---Backgrounds For Custom BG (RGB values only, leave no spaces)---*/67
--maintransp_dark_top: 12,13,14; /*default: 12,13,14*/68
--maintransp_dark_bottom: 41,43,46; /*default: 41,43,46*/69
--maintransp_light_top: 215,214,211; /*default: 215,214,211*/70
--maintransp_light_bottom: 230,229,227; /*default: 230,229,227*/71
--chattransp_dark_top: 54,57,63; /*default: 54,57,63*/72
--chattransp_dark_bottom: 41,43,46; /*default: 41,43,46*/73
--chattransp_light_top: 227,226,225; /*default: 227,226,225*/74
--chattransp_light_bottom: 201,198,192; /*default: 201,198,192*/75
--listtransp_dark_top: 26,26,28; /*default: 26,26,28*/76
--listtransp_dark_bottom: 46,48,54; /*default: 46,48,54*/77
--listtransp_light_top: 183,182,178; /*default: 183,182,178*/78
--listtransp_light_bottom: 218,216,211; /*default: 218,216,211*/79
--sidebartransp_dark_top: 43,45,50; /*default: 43,45,50*/80
--sidebartransp_dark_bottom: 24,25,26; /*default: 24,25,26*/81
--sidebartransp_light_top: 228,226,221; /*default: 228,226,221*/82
--sidebartransp_light_bottom: 199,199,194; /*default: 199,199,194*/83
/*------*/84
}85