Discord dark theme for https://next.elu.pages.dev/

theme.css

: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);
}