dark.css

dark.css

/* Twitter / X Dark Theme */

header {
  display: none;
}

.info {
  display: none;
}

/* =========================
   Base
   ========================= */

html,
body,
html.isIframe {
  background-color: #000000 !important;
}

.chat.chat {
  color: #e7e9ea;
}

/* =========================
   Buttons
   ========================= */

.button.button {
  color: #e7e9ea;
  border: 1px solid #536471;
  background-color: #202327;
  background-image: none;
  box-shadow: none;
  border-radius: 9999px;
  transition: background-color 0.15s ease;
}

.button.button:hover {
  background-color: #2f3336;
}

.button.button:active {
  background-color: #3a3f43;
  box-shadow: none;
}

/* Primary / accent buttons */
.button--primary.button--primary {
  color: #ffffff;
  border-color: #1d9bf0;
  background-color: #1d9bf0;
  background-image: none;
}

.button--primary.button--primary:hover {
  background-color: #1a8cd8;
}

/* Danger */
.button--danger.button--danger {
  color: #f4212e;
  border: 1px solid #f4212e;
  box-shadow: none;
  background-color: transparent;
  background-image: none;
}

.button--danger.button--danger:hover {
  color: #ffffff;
  background-color: rgba(244, 33, 46, 0.1);
}

.button--danger.button--danger:active {
  background-color: rgba(244, 33, 46, 0.2);
  box-shadow: none;
}

/* =========================
   Tooltip
   ========================= */

.tooltip.tooltip {
  color: #e7e9ea;
  border-color: #38444d;
  background-color: #202327;
}

/* =========================
   Controls
   ========================= */

.button-down.button-down {
  background-color: #202327;
}

.button-down.button-down.show.new {
  box-shadow: 0 0 0 2px #1d9bf0;
}

/* =========================
   Inputs
   ========================= */

.input-text.input-text {
  color: #e7e9ea;
  border: 1px solid #536471;
  background-color: #000000;
  box-shadow: none;
  border-radius: 4px;
}

.input-text.input-text:focus {
  border-color: #1d9bf0;
  box-shadow: 0 0 0 1px #1d9bf0;
}

.input-text.input-text::-webkit-input-placeholder {
  color: #71767b;
}

.input-text.input-text::-moz-placeholder {
  color: #71767b;
}

.input-text.input-text:-ms-input-placeholder {
  color: #71767b;
}

/* =========================
   Header
   ========================= */

.header-bar.header-bar {
  background-color: #000000;
  border-bottom: 1px solid #2f3336;
}

.header-icon.header-icon {
  background-color: transparent;
}

.header-icon.header-icon:hover {
  background-color: rgba(239, 243, 244, 0.1);
}

.header-icon.header-icon:active {
  background-color: rgba(239, 243, 244, 0.2);
}

.header-channel.header-channel {
  color: #e7e9ea;
}

/* =========================
   Posts
   ========================= */

.post-name.post-name {
  color: #71767b;
}

.post.post {
  border-color: #2f3336;
  background-color: #000000;
}

.post.post:hover {
  background-color: rgba(255, 255, 255, 0.03);
}

.post.post.me {
  background-color: rgba(29, 155, 240, 0.08);
}

.post-avatar.post-avatar {
  box-shadow: none;
}

.post-avatar--troll.post-avatar--troll {
  color: #71767b;
  background: #16181c;
}

.time.time {
  color: #71767b;
}

.post-time-dot.post-time-dot {
  background-color: #536471;
}

.post-message.post-message.unread .post-time-dot {
  background-color: #1d9bf0;
}

.post-time-tag.post-time-tag {
  color: #e7e9ea;
  border-color: #38444d;
  background: #16181c;
}

/* =========================
   Code
   ========================= */

.chat.chat code,
.chat.chat pre {
  color: #e7e9ea;
  border: 1px solid #2f3336;
  background-color: #16181c;
}

.chat.chat pre code {
  border: none;
}

.chat.chat blockquote {
  color: #e7e9ea;
  border: none;
  border-left: 4px solid #1d9bf0;
  background: #16181c;
}

.chat.chat hr {
  border-color: #2f3336;
}

.message-avatar.message-avatar {
  box-shadow: none;
}

/* =========================
   Message Input
   ========================= */

.message-input.message-input {
  color: #e7e9ea;
  border: 1px solid #536471;
  background-color: #000000;
  box-shadow: none;
  border-radius: 9999px;
  -webkit-font-smoothing: antialiased;
}

.message-input.message-input:hover {
  border-color: #71767b;
}

.message-input.message-input:focus {
  border-color: #1d9bf0;
  background-color: #000000;
  box-shadow: 0 0 0 1px #1d9bf0;
}

.message-input.message-input::-webkit-input-placeholder {
  color: #71767b;
}

.message-input.message-input::-moz-placeholder {
  color: #71767b;
}

.message-input.message-input:-ms-input-placeholder {
  color: #71767b;
}

/* =========================
   Join
   ========================= */

.join.join {
  color: #71767b;
  border-color: #2f3336;
  background-color: #16181c;
}

.join-hl.join-hl {
  color: #e7e9ea;
}

.join-hint.join-hint {
  color: #71767b;
}

/* =========================
   Sidebar
   ========================= */

.aside.aside {
  background-color: #000000;
  border-left: 1px solid #2f3336;
}

.menu-item.menu-item {
  color: #e7e9ea;
  border-color: #2f3336;
  background-color: #16181c;
}

.menu-item.menu-item:hover {
  background-color: #1d1f23;
}

.menu-item.menu-item:active {
  box-shadow: none;
}

.menu-item.menu-item.isOn {
  color: #ffffff;
  border: 1px solid #2f3336;
  border-left: 3px solid #1d9bf0;
  box-shadow: none;
  background-color: #16181c;
}

/* =========================
   Participants
   ========================= */

.participants.participants {
  color: #e7e9ea;
  border-color: #2f3336;
  background-color: #16181c;
}

.counter.counter {
  color: #71767b;
  border-color: #2f3336;
  background-color: #202327;
}

/* =========================
   Popup
   ========================= */

.popup-box.popup-box {
  color: #e7e9ea;
}

.popup-header.popup-header {
  border-color: #2f3336;
  background-color: #16181c;
}

.popup-header-title.popup-header-title {
  color: #e7e9ea;
}

.popup-content.popup-content {
  background-color: #000000;
}

.popup-link.popup-link {
  color: #1d9bf0;
  border-color: #2f3336;
  background: #16181c;
}

.popup-link.popup-link:hover {
  background-color: #1d1f23;
}

.popup-footer.popup-footer {
  color: #71767b;
  border-color: #2f3336;
  background-color: #16181c;
}

/* =========================
   Iframe
   ========================= */

html.isIframe {
  background-color: #000000 !important;
}