psi-4ward / psitransfer

Simple open source self-hosted file sharing solution.
BSD 2-Clause "Simplified" License
1.5k stars 217 forks source link

Add Darkmode #214

Closed Alkl58 closed 2 years ago

Alkl58 commented 2 years ago

The CSS Change will detect the browser preffered color scheme and will then apply a simple dark mode.

grafik

psi-4ward commented 2 years ago

Nice idea! But I think the contrasts are a bit to hard. Let me play with the colors a bit ;)

psi-4ward commented 2 years ago

/* Dark Mode */
@media (prefers-color-scheme: dark) {
  body {
    color: #e6e6e6;
    background-color: #1B1E20;
  }

  .panel {
    background-color: #2A2E32;
  }

  .panel-primary > .panel-heading {
    background-color: #1d4c74;
    color: inherit;
  }

  .panel-info > .panel-heading {
    background-color: #2e758a;
    color: inherit;
  }

  .panel-default > .panel-heading {
    background-color: #3e3e3e;
  }

  .form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
    background-color: #585858;
  }

  .btn-info {
    background-color: #2e758a;
  }

  .btn-success {
    background-color: #1f761f;
  }

  .well {
    background-color: #2A2E32;
  }

  a:hover, a:focus {
    color: #549ddd;
  }

  .form-control {
    color: #fff;
    background-color: #222;
  }

  .table-hover > tbody > tr:hover {
    background-color: #2b2b2b;
  }

  .expanded {
    background: #2A2E32 !important;
  }

  .table-striped > tbody > tr:nth-of-type(2n+1) {
    background-color: #2A2E32;
  }

  .modal-content {
    background-color: #282828;
  }

  pre {
    color: #fff;
    background-color: #151515;
  }

  .table > tbody > tr > td {
    border-top: 1px solid #5F6265;
  }

}

hmm I'm not really a good designer :D