dark mode for timeghost

timeghost-dark.user.css

/* ==UserStyle==
    @name           timeghost - going dark
    @namespace      github.com/openstyles/stylus
    @version        1.0.0
    @description    A new userstyle
    @author         thiago@timeghost.io
    ==/UserStyle== */
@-moz-document domain("web.timeghost.io") {
  :root {
    --base-bg: #242424;
    --card-bg: #282828;
    --border-bg: #323236;
    --badge-bg: #333;
    --text-color: #fff;
    --text-muted-color: #dfdfdf;
  }

  body,
  html .mat-expansion-panel,
  html .mat-expansion-panel > .mat-expansion-panel-header,
  html .mat-expansion-panel .mat-expansion-panel-content,
  html .mat-expansion-panel .mat-expansion-panel-body,
  div[class*="item-entry-container"],
  .mat-toolbar,
  .mat-drawer,
  .page-content div[class*="page-container"] .header,
  .app-loader,
  .mat-menu-panel,
  .mat-dialog-container,
  html .mat-card {
    background-color: var(--base-bg) !important;
    color: var(--text-muted-color);
  }
  html,
  body {
    background-color: var(--base-bg) !important;
    color: var(--text-muted-color);
  }
  html .mat-checkbox .mat-checkbox-frame,
  .mat-radio-outer-circle {
    border-color: rgba(255, 255, 255, 0.175);
  }
  .mat-card-subtitle {
    color: rgba(255, 255, 255, 0.54);
  }
  .mat-drawer.has-border,
  .shell-inner {
    border-right-width: 0px !important;
  }
  html .tg-input-container > .tg-input-label,
  .mat-list-item-content,
  .mat-expansion-panel-title-main,
  .cdk-overlay-pane {
    color: var(--text-muted-color);
  }
  .mat-drawer-content,
  .page-content div[class*="page-container"] .container-native,
  .page-content div[class*="page-router-container"] .container-native,
  html .fx-input-container,
  .mat-select-panel,
  .mat-drawer-container {
    background-color: #111 !important;
    color: var(--text-muted-color);
  }

  html .tg-input-container {
    background-color: var(--card-bg);
    border: 1px solid var(--border-bg);
    color: #fff;
  }
  .mat-card > .mat-card-header,
  .mat-paginator,
  html .badge {
    background-color: #333;
    color: var(--text-muted-color);
  }
  html .badge-stroked {
    border-color: #333;
  }
  .tg-input-suffix .mat-divider-vertical {
    background-color: rgba(255, 255, 255, 0.01);
  }
  .tg-input-suffix .badge {
    background-color: rgba(255, 255, 255, 0.01);
  }
  html .mat-menu-item,
  html .mat-menu-item .material-icons,
  html .mat-list-item,
  #app-root .mat-drawer,
  #app-root .shell-main,
  html .shell-main .mat-list .mat-list-item,
  html .tg-input-container input.tg-input,
  .calDate > .calDateDayOfMonth,
  .calDate > .calDateWeekDay,
  .mat-select-value,
  .mat-calendar-body-cell-content,
  .mat-date-range-input-separator,
  .mat-calendar-body-label,
  .calDate > .calDate-grouping {
    color: #efefef;
  }
  .calDate > .calDate-grouping {
    background-color: #444;
  }
  html .tg-input-container.tg-input-status-disabled,
  html .tg-input-container.tg-input-status-disabled:hover,
  html .tg-input-container.tg-input-status-disabled:active,
  html .tg-input-container.tg-input-status-disabled:focus {
    background: rgba(0, 0, 0, 0.05) !important;
    color: #ccc;
  }
  html .tg-input-container.tg-input-status-disabled textarea::placeholder,
  html .tg-input-container.tg-input-status-disabled input::placeholder,
  .mat-list-base .mat-subheader,
  html .tg-input-container textarea::placeholder,
  .mat-form-field-appearance-legacy .mat-form-field-label,
  .mat-form-field-appearance-legacy .mat-hint,
  .mat-select-arrow,
  .mat-calendar-table-header,
  .mat-option,
  html .tg-input-container input::placeholder {
    color: #aaa !important;
  }
  .mat-form-field-appearance-legacy .mat-form-field-underline {
    background-color: rgba(255, 255, 255, 0.65);
  }
  .mat-select-panel .mat-option.mat-selected:not(.mat-option-multiple) {
    background-color: rgba(255, 255, 255, 0.05);
  }
  .mat-stroked-button:not(.mat-button-disabled),
  html .mat-checkbox-radio .mat-radio-outer-circle,
  html .mat-checkbox .mat-checkbox-frame {
    border-color: rgba(255, 255, 255, 0.175);
  }
  .mat-fab.mat-accent.mat-button-disabled,
  .mat-fab.mat-button-disabled.mat-button-disabled,
  .mat-fab.mat-primary.mat-button-disabled,
  .mat-fab.mat-warn.mat-button-disabled,
  .mat-flat-button.mat-accent.mat-button-disabled,
  .mat-flat-button.mat-button-disabled.mat-button-disabled,
  .mat-flat-button.mat-primary.mat-button-disabled,
  .mat-flat-button.mat-warn.mat-button-disabled,
  .mat-mini-fab.mat-accent.mat-button-disabled,
  .mat-mini-fab.mat-button-disabled.mat-button-disabled,
  .mat-mini-fab.mat-primary.mat-button-disabled,
  .mat-mini-fab.mat-warn.mat-button-disabled,
  .mat-raised-button.mat-accent.mat-button-disabled,
  .mat-raised-button.mat-button-disabled.mat-button-disabled,
  .mat-raised-button.mat-primary.mat-button-disabled,
  .mat-raised-button.mat-warn.mat-button-disabled {
    color: rgba(255, 255, 255, 0.425);
  }
}