Skip to content

Instantly share code, notes, and snippets.

@ooliver1
Last active August 16, 2023 20:12
Show Gist options
  • Save ooliver1/3da0ca0c1bc22e17638950f06f2427da to your computer and use it in GitHub Desktop.
Save ooliver1/3da0ca0c1bc22e17638950f06f2427da to your computer and use it in GitHub Desktop.
Discord dark theme for https://next.elu.pages.dev/
:root {
--brand-260: hsl(235, 86.2%, 88.6%);
--brand-500-hsl: 235 85.6% 64.7%;
--primary-230: hsl(210, 9.1%, 87.1%);
--primary-560: hsl(225, 6.3%, 23.5%);
--primary-600: hsl(223, 6.7%, 20.6%);
--primary-630: hsl(220, 6.5%, 18.0%);
--primary-700: hsl(225, 6.3%, 12.5%);
--primary-730: hsl(225, 7.1%, 11%);
--primary-860-hsl: 240 7.7% 2.5%;
--primary-900-hsl: 0 0% 0.8%;
--yellow-300: hsl(var(--yellow-300-hsl));
--yellow-300-hsl: 40 86.4% 56.9%;
--info-warning-foreground: var(--yellow-300);
--color-bg: var(--primary-600);
--color-text: var(--primary-230);
--interactive: hsl(215, 8.8%, 73.3%);
--interactive-hover: hsl(210, 9.1%, 87.1%);
--interactive-hover-bg: hsla(228, 6%, 32.5%, 0.6);
--message-hover-bg: hsla(0, 0%, 0.8%, 0.06);
--mention-background: hsl(var(--brand-500-hsl)/0.3);
--background-mentioned: hsl(var(--yellow-300-hsl)/0.1);
--background-mentioned-hover: hsl(var(--yellow-300-hsl)/0.08);
--scrollbar-color-track: var(--primary-730);
--scrollbar-color-thumb: var(--primary-630);
--elevation-low: 0 1px 0 hsl(var(--primary-900-hsl)/0.2), 0 1.5px 0 hsl(var(--primary-860-hsl)/0.05), 0 2px 0 hsl(var(--primary-900-hsl)/0.05);
}
#settings-link {
width: 20px;
height: 20px;
padding: 6px;
border-radius: 4px;
font-size: 0;
background-repeat: no-repeat;
background-position: center;
background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20role%3D%22img%22%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22hsl%28215%2C%208.8%25%2C%2073.3%25%29%22%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M19.738%2010H22V14H19.739C19.498%2014.931%2019.1%2015.798%2018.565%2016.564L20%2018L18%2020L16.565%2018.564C15.797%2019.099%2014.932%2019.498%2014%2019.738V22H10V19.738C9.069%2019.498%208.203%2019.099%207.436%2018.564L6%2020L4%2018L5.436%2016.564C4.901%2015.799%204.502%2014.932%204.262%2014H2V10H4.262C4.502%209.068%204.9%208.202%205.436%207.436L4%206L6%204L7.436%205.436C8.202%204.9%209.068%204.502%2010%204.262V2H14V4.261C14.932%204.502%2015.797%204.9%2016.565%205.435L18%203.999L20%205.999L18.564%207.436C19.099%208.202%2019.498%209.069%2019.738%2010ZM12%2016C14.2091%2016%2016%2014.2091%2016%2012C16%209.79086%2014.2091%208%2012%208C9.79086%208%208%209.79086%208%2012C8%2014.2091%209.79086%2016%2012%2016Z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E);
}
#settings-link:hover {
background-color: var(--interactive-hover-bg);
background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20role%3D%22img%22%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22hsl%28210%2C%209.1%25%2C%2087.1%25%29%22%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M19.738%2010H22V14H19.739C19.498%2014.931%2019.1%2015.798%2018.565%2016.564L20%2018L18%2020L16.565%2018.564C15.797%2019.099%2014.932%2019.498%2014%2019.738V22H10V19.738C9.069%2019.498%208.203%2019.099%207.436%2018.564L6%2020L4%2018L5.436%2016.564C4.901%2015.799%204.502%2014.932%204.262%2014H2V10H4.262C4.502%209.068%204.9%208.202%205.436%207.436L4%206L6%204L7.436%205.436C8.202%204.9%209.068%204.502%2010%204.262V2H14V4.261C14.932%204.502%2015.797%204.9%2016.565%205.435L18%203.999L20%205.999L18.564%207.436C19.099%208.202%2019.498%209.069%2019.738%2010ZM12%2016C14.2091%2016%2016%2014.2091%2016%2012C16%209.79086%2014.2091%208%2012%208C9.79086%208%208%209.79086%208%2012C8%2014.2091%209.79086%2016%2012%2016Z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E);
}
#logout-button {
font-size: 0;
background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20role%3D%22img%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22hsl%28215%2C%208.8%25%2C%2073.3%25%29%22%20d%3D%22M18%202H7C5.897%202%205%202.898%205%204V11H12.59L10.293%208.708L11.706%207.292L16.414%2011.991L11.708%2016.706L10.292%2015.294L12.582%2013H5V20C5%2021.103%205.897%2022%207%2022H18C19.103%2022%2020%2021.103%2020%2020V4C20%202.898%2019.103%202%2018%202Z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E);
background-position: right 6px center;
background-color: transparent !important;
box-shadow: none !important;
background-repeat: no-repeat;
color: var(--interactive) !important;
padding: 6px !important;
padding-right: 38px !important;
border-radius: 4px !important;
}
#logout-button:hover {
background-color: var(--interactive-hover-bg) !important;
background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20role%3D%22img%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22hsl%28210%2C%209.1%25%2C%2087.1%25%29%22%20d%3D%22M18%202H7C5.897%202%205%202.898%205%204V11H12.59L10.293%208.708L11.706%207.292L16.414%2011.991L11.708%2016.706L10.292%2015.294L12.582%2013H5V20C5%2021.103%205.897%2022%207%2022H18C19.103%2022%2020%2021.103%2020%2020V4C20%202.898%2019.103%202%2018%202Z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E);
}
#logout-button::after {
content: 'Log Out';
font-size: initial;
}
#logout-button:hover {
background-color: var(--interactive-hover);
}
#users {
background-color: var(--primary-630);
margin: 0;
}
.message:hover {
background-color: var(--message-hover-bg) !important;
}
#messages {
scrollbar-width: auto;
scrollbar-color: var(--scrollbar-color-thumb) var(--scrollbar-color-track);
}
#messages::-webkit-scrollbar {
width: 16px;
height: 16px;
}
#messages::-webkit-scrollbar-track {
background-color: var(--scrollbar-color-track);
}
#messages::-webkit-scrollbar-thumb,
#messages::-webkit-scrollbar-track {
border: 4px solid transparent;
background-clip: padding-box;
border-radius: 8px;
}
#messages::-webkit-scrollbar-thumb {
background-color: var(--scrollbar-auto-thumb);
min-height: 40px;
}
#messages::-webkit-scrollbar-corner {
background-color: transparent;
}
#options-div {
background-color: var(--primary-600) !important;
box-shadow: var(--elevation-low);
}
#settings-div textarea {
border: none !important;
background-color: var(--primary-700) !important;
color: var(--text-normal) !important;
}
#message-input-form {
background-color: var(--primary-560) !important;
color: var(--color-text) !important;
}
.mention {
color: var(--mention-foreground) !important;
background: var(--mention-background) !important;
}
.message.mentioned {
background-color: var(--background-mentioned) !important;
position: relative;
}
.message.mentioned:hover {
background-color: var(--background-mentioned-hover) !important;
}
.message.mentioned::before {
content: '';
position: absolute;
display: block;
top: 0;
left: 0;
bottom: 0;
pointer-events: none;
width: 2px;
background-color: var(--info-warning-foreground);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment