userstyles/src/headscaleui.user.css

/* ==UserStyle==
@name           Gruvbox for Headscale-UI
@namespace      git.m3.fyi/Marsn3
@version        1.0.3
@description    A dark Theme for Headscale-UI
@author         Marsn3
@homepageURL https://git.m3.fyi/Marsn3/userstyles
@updateURL https://git.m3.fyi/Marsn3/userstyles/~raw/main/src/headscaleui.user.css
@license MIT
==/UserStyle== */

@-moz-document domain("vpn.m3.fyi") {
  .modal-trigger {
    color: var(--yellow);
  }
  img[src="static/img/headscale3-dots.png"] {
    filter: invert(100%) sepia(100%);
    -webkit-filter: invert(100%) sepia(100%);
  }
  .red.darken-1 {
    background-color: var(--bg3) !important;
  }
  body {
    background-color: var(--bg);
    color: var(--fg);
  }
  .modal,
  .card {
    background-color: var(--bg1);
  }
  .modal .modal-close {
    color: var(--fg);
  }
  .modal-footer {
    background-color: var(--bg_h) !important;
    color: var(--fg);
  }
  .collection.with-header .collection-header,
  .collapsible-header,
  .collection .collection-item {
    background-color: var(--bg1);
    border-bottom: 1px solid var(--bg3);
  }
  .collection {
    border: 1px solid var(--bg3);
  }
  .btn,
  .btn-small,
  .btn-large {
    color: var(--fg);
    background-color: var(--green);
  }
  .btn:hover,
  .btn-small:hover,
  .btn-large:hover {
    background-color: var(--green-dim);
  }
  .material-icons,
  nav ul a,
  nav .brand-logo,
  .btn-floating i {
    color: var(--fg);
  }
  .grey.lighten-2 {
    background-color: var(--fg4) !important;
    color: var(--fg);
  }
  .z-depth-1 {
    box-shadow: 0 2px 2px 0 rgba(40, 40, 40, 0.14),
      0 3px 1px -2px rgba(40, 40, 40, 0.12), 0 1px 5px 0 rgba(40, 40, 40, 0.2);
  }
  nav ul a:hover {
    background-color: rgba(40, 40, 40, 0.1);
  }

  .orange-text,
  .yellow-text {
    color: var(--yellow) !important;
  }
  .card
    .card-action
    a:not(.btn):not(.btn-small):not(.btn-large):not(.btn-large):not(
      .btn-floating
    ):hover {
    color: var(--yellow-dim) !important;
  }
  .green-text,
  .input-field .prefix.active {
    color: var(--green) !important;
  }
  .red.darken-3,
  .green {
    background-color: var(--green) !important;
  }
  .white-text {
    color: var(--fg) !important;
  }
  .blue-grey.lighten-1 {
    background-color: var(--blue-dim) !important;
  }
  .blue-grey-text.text-lighten-1 {
    color: var(--blue-dim) !important;
  }
  .teal-text.text-lighten-1 {
    color: var(--aqua) !important;
  }
  .teal.lighten-1 {
    background-color: var(--aqua) !important;
  }
  .grey-text {
    color: var(--gray) !important;
  }
  .green-text.text-lighten-2 {
    color: var(--green-dim) !important;
  }
  .material-tooltip {
    color: var(--fg);
    background-color: var(--bg2);
  }
  .dropdown-content li {
    color: var(--fg);
  }
  .collection .collection-item.avatar i.circle {
    color: var(--fg);
    background-color: var(--bg3);
  }
  .dropdown-content li > a,
  .dropdown-content li > span {
    color: var(--fg);
  }
  .divider {
    background-color: var(--bg4);
  }
  #dropdown1 > li:nth-child(3) {
    background-color: var(--bg1);
  }
  table.striped > tbody > tr:nth-child(2n + 1) {
    background-color: var(--bg4);
  }
  .input-field > label {
    color: var(--fg3);
  }
  input:not([type]):not(.browser-default),
  input[type="text"]:not(.browser-default),
  input[type="password"]:not(.browser-default),
  input[type="email"]:not(.browser-default),
  input[type="url"]:not(.browser-default),
  input[type="time"]:not(.browser-default),
  input[type="date"]:not(.browser-default),
  input[type="datetime"]:not(.browser-default),
  input[type="datetime-local"]:not(.browser-default),
  input[type="month"]:not(.browser-default),
  input[type="tel"]:not(.browser-default),
  input[type="number"]:not(.browser-default),
  input[type="search"]:not(.browser-default),
  textarea.materialize-textarea {
    border-bottom: 1px solid var(--fg3);
  }
  input:not([type]):not(.browser-default):focus:not([readonly]) + label,
  input[type="text"]:not(.browser-default):focus:not([readonly]) + label,
  input[type="password"]:not(.browser-default):focus:not([readonly]) + label,
  input[type="email"]:not(.browser-default):focus:not([readonly]) + label,
  input[type="url"]:not(.browser-default):focus:not([readonly]) + label,
  input[type="time"]:not(.browser-default):focus:not([readonly]) + label,
  input[type="date"]:not(.browser-default):focus:not([readonly]) + label,
  input[type="datetime"]:not(.browser-default):focus:not([readonly]) + label,
  input[type="datetime-local"]:not(.browser-default):focus:not([readonly])
    + label,
  input[type="month"]:not(.browser-default):focus:not([readonly]) + label,
  input[type="tel"]:not(.browser-default):focus:not([readonly]) + label,
  input[type="number"]:not(.browser-default):focus:not([readonly]) + label,
  input[type="search"]:not(.browser-default):focus:not([readonly]) + label,
  textarea.materialize-textarea:focus:not([readonly]) + label,
  a {
    color: var(--green);
  }

  input:not([type]):not(.browser-default):focus:not([readonly]),
  input[type="text"]:not(.browser-default):focus:not([readonly]),
  input[type="password"]:not(.browser-default):focus:not([readonly]),
  input[type="email"]:not(.browser-default):focus:not([readonly]),
  input[type="url"]:not(.browser-default):focus:not([readonly]),
  input[type="time"]:not(.browser-default):focus:not([readonly]),
  input[type="date"]:not(.browser-default):focus:not([readonly]),
  input[type="datetime"]:not(.browser-default):focus:not([readonly]),
  input[type="datetime-local"]:not(.browser-default):focus:not([readonly]),
  input[type="month"]:not(.browser-default):focus:not([readonly]),
  input[type="tel"]:not(.browser-default):focus:not([readonly]),
  input[type="number"]:not(.browser-default):focus:not([readonly]),
  input[type="search"]:not(.browser-default):focus:not([readonly]),
  textarea.materialize-textarea:focus:not([readonly]) {
    border-bottom: 1px solid var(--green);
    box-shadow: 0 1px 0 0 var(--green);
  }
}