~yerinalexey/public-inbox

This thread contains a patchset. You're looking at the original emails, but you may wish to use the patch review UI. Review patch

[PATCH dark.sr.ht] Use prefers-color-scheme media query

Details
Message ID
<20201107183927.22627-1-greg@gpanders.com>
DKIM signature
missing
Download raw message
Patch: +368 -366
This wraps the entire stylesheet in a @media selector that is only
active when the OS itself is set to "dark mode". This provides a more
cohesive experience for the user.
---
 darksrht.user.css | 734 +++++++++++++++++++++++-----------------------
 1 file changed, 368 insertions(+), 366 deletions(-)

diff --git a/darksrht.user.css b/darksrht.user.css
index defaec7..3e13b90 100644
--- a/darksrht.user.css
+++ b/darksrht.user.css
@@ -10,371 +10,373 @@
==/UserStyle== */

@-moz-document domain("sr.ht") {
  /* Basics */
  body {
    background: #343434;
    color: #eee;
  @media (prefers-color-scheme: dark) {
    /* Basics */
    body {
      background: #343434;
      color: #eee;
    }

    a,
    a:hover {
      color: #ddd !important;
    }

    code,
    pre {
      color: #eee;
    }

    pre.message-body,
    pre {
      background: #222;

      padding: 8px;
    }

    .code-view {
      padding-right: 0px !important;
    }

    .navbar-text,
    .text-muted {
      color: #aaa !important;
    }

    .btn.btn-default {
      color: #444 !important;
    }

    .event,
    .header-extension {
      background: #444;
    }

    a.tag {
      color: #ccc !important;
    }

    /* Separators */
    h3,
    h4 {
      border-bottom-color: #626262;
    }

    /* Linelight */
    .code-view .lines a.selected::before,
    .code-view .lines a:target::before {
      background: #346194;
    }

    /* Code ruler (colorcolumn for vim users) */
    .code-view .ruler > span {
      border-right-color: #aeadad;
    }

    /* Header */
    .nav .nav-item .nav-link {
      color: #ccc !important;
    }

    .header-tabbed {
      border-color: #444;
    }

    .header-tabbed .nav .nav-item:hover .nav-link,
    .markdown-nav .nav .nav-item:hover .nav-link,
    .blob-nav .nav .nav-item:hover .nav-link {
      background: #666;
    }

    .header-tabbed .nav .nav-link.active {
      background: #444;
    }

    .blob-nav .nav .nav-link.active {
      background: #333;
    }

    .blob-nav .nav .nav-item {
      margin-bottom: 0;
    }

    .blob-nav .nav .nav-item .nav-link {
      border-bottom: none;
    }

    /* Blob/tree view */
    .tree-list .mode {
      color: #eee;
    }

    .code-view .lines {
      background: #444;
    }

    /* Header that appears on Markdown files */
    .markdown-nav .nav {
      border-color: #343434;
    }

    .markdown-nav .nav .nav-link.active {
      background: #444;
    }

    /* Alerts */
    .alert a:not(.btn) {
      color: #444 !important;
    }

    /* Forms */
    .form-control[readonly] {
      background: #999;
    }

    /* Logo? */
    .navbar-brand .icon svg path {
      color: #eee;
    }

    /* Patchsets */
    .prepare-patchset .event-list input[type="radio"]:checked + .event,
    .prepare-patchset .event-list input[type="radio"]:checked ~ .event {
      background: #385576 !important;
    }

    /* Tables on man.sr.ht */
    .table-primary,
    .table-primary > td,
    .table-primary > th {
      background: #346194;
    }

    .table-hover .table-primary:hover > td,
    .table-hover .table-primary:hover > th,
    .table-hover .table-primary:hover {
      background: #385576;
    }

    /* Build output on builds.sr.ht */
    .table-code {
      background: #222;
      overflow-y: auto;
    }

    /* Fix expanders */
    details {
      border-left-color: #eee;
    }

    .message-header details[open] > div,
    summary {
      background: inherit !important;
    }

    /* Highlight current service properly */
    .navbar-nav .nav-item.active .nav-link {
      color: #fff !important;
    }

    .navbar-nav .nav-item:not(.active) .nav-link {
      color: #848484 !important;
    }

    /* Tables */
    .markdown table tbody td,
    .table tbody td {
      border-color: #444;
    }

    .markdown table td,
    .table td {
      background: #444;
    }

    /* Monokai theme */
    .highlight pre {
      color: #f8f8f2;
    }
    .highlight pre .hll {
      background-color: #49483e;
    }
    .highlight pre .c {
      color: #75715e;
    } /* Comment */
    .highlight pre .err {
      color: #960050;
      background-color: #1e0010;
    } /* Error */
    .highlight pre .k {
      color: #66d9ef;
    } /* Keyword */
    .highlight pre .l {
      color: #ae81ff;
    } /* Literal */
    .highlight pre .n {
      color: #f8f8f2;
    } /* Name */
    .highlight pre .o {
      color: #f92672;
    } /* Operator */
    .highlight pre .p {
      color: #f8f8f2;
    } /* Punctuation */
    .highlight pre .cm {
      color: #75715e;
    } /* Comment.Multiline */
    .highlight pre .cp {
      color: #75715e;
    } /* Comment.Preproc */
    .highlight pre .c1 {
      color: #75715e;
    } /* Comment.Single */
    .highlight pre .cs {
      color: #75715e;
    } /* Comment.Special */
    .highlight pre .ge {
      font-style: italic;
    } /* Generic.Emph */
    .highlight pre .gp {
      color: #66d9ef;
      font-weight: bold;
    } /* Generic.Prompt */
    .highlight pre .gs {
      font-weight: bold;
    } /* Generic.Strong */
    .highlight pre .kc {
      color: #66d9ef;
    } /* Keyword.Constant */
    .highlight pre .kd {
      color: #66d9ef;
    } /* Keyword.Declaration */
    .highlight pre .kn {
      color: #f92672;
    } /* Keyword.Namespace */
    .highlight pre .kp {
      color: #66d9ef;
    } /* Keyword.Pseudo */
    .highlight pre .kr {
      color: #66d9ef;
    } /* Keyword.Reserved */
    .highlight pre .kt {
      color: #66d9ef;
    } /* Keyword.Type */
    .highlight pre .ld {
      color: #e6db74;
    } /* Literal.Date */
    .highlight pre .m {
      color: #ae81ff;
    } /* Literal.Number */
    .highlight pre .s {
      color: #e6db74;
    } /* Literal.String */
    .highlight pre .na {
      color: #a6e22e;
    } /* Name.Attribute */
    .highlight pre .nb {
      color: #f8f8f2;
    } /* Name.Builtin */
    .highlight pre .nc {
      color: #a6e22e;
    } /* Name.Class */
    .highlight pre .no {
      color: #66d9ef;
    } /* Name.Constant */
    .highlight pre .nd {
      color: #a6e22e;
    } /* Name.Decorator */
    .highlight pre .ni {
      color: #f8f8f2;
    } /* Name.Entity */
    .highlight pre .ne {
      color: #a6e22e;
    } /* Name.Exception */
    .highlight pre .nf {
      color: #a6e22e;
    } /* Name.Function */
    .highlight pre .nl {
      color: #f8f8f2;
    } /* Name.Label */
    .highlight pre .nn {
      color: #f8f8f2;
    } /* Name.Namespace */
    .highlight pre .nx {
      color: #a6e22e;
    } /* Name.Other */
    .highlight pre .py {
      color: #f8f8f2;
    } /* Name.Property */
    .highlight pre .nt {
      color: #f92672;
    } /* Name.Tag */
    .highlight pre .nv {
      color: #f8f8f2;
    } /* Name.Variable */
    .highlight pre .ow {
      color: #f92672;
    } /* Operator.Word */
    .highlight pre .w {
      color: #f8f8f2;
    } /* Text.Whitespace */
    .highlight pre .mf {
      color: #ae81ff;
    } /* Literal.Number.Float */
    .highlight pre .mh {
      color: #ae81ff;
    } /* Literal.Number.Hex */
    .highlight pre .mi {
      color: #ae81ff;
    } /* Literal.Number.Integer */
    .highlight pre .mo {
      color: #ae81ff;
    } /* Literal.Number.Oct */
    .highlight pre .sb {
      color: #e6db74;
    } /* Literal.String.Backtick */
    .highlight pre .sc {
      color: #e6db74;
    } /* Literal.String.Char */
    .highlight pre .sd {
      color: #e6db74;
    } /* Literal.String.Doc */
    .highlight pre .s2 {
      color: #e6db74;
    } /* Literal.String.Double */
    .highlight pre .se {
      color: #ae81ff;
    } /* Literal.String.Escape */
    .highlight pre .sh {
      color: #e6db74;
    } /* Literal.String.Heredoc */
    .highlight pre .si {
      color: #e6db74;
    } /* Literal.String.Interpol */
    .highlight pre .sx {
      color: #e6db74;
    } /* Literal.String.Other */
    .highlight pre .sr {
      color: #e6db74;
    } /* Literal.String.Regex */
    .highlight pre .s1 {
      color: #e6db74;
    } /* Literal.String.Single */
    .highlight pre .ss {
      color: #e6db74;
    } /* Literal.String.Symbol */
    .highlight pre .bp {
      color: #f8f8f2;
    } /* Name.Builtin.Pseudo */
    .highlight pre .vc {
      color: #f8f8f2;
    } /* Name.Variable.Class */
    .highlight pre .vg {
      color: #f8f8f2;
    } /* Name.Variable.Global */
    .highlight pre .vi {
      color: #f8f8f2;
    } /* Name.Variable.Instance */
    .highlight pre .il {
      color: #ae81ff;
    } /* Literal.Number.Integer.Long */
  }

  a,
  a:hover {
    color: #ddd !important;
  }

  code,
  pre {
    color: #eee;
  }

  pre.message-body,
  pre {
    background: #222;

    padding: 8px;
  }

  .code-view {
    padding-right: 0px !important;
  }

  .navbar-text,
  .text-muted {
    color: #aaa !important;
  }

  .btn.btn-default {
    color: #444 !important;
  }

  .event,
  .header-extension {
    background: #444;
  }

  a.tag {
    color: #ccc !important;
  }

  /* Separators */
  h3,
  h4 {
    border-bottom-color: #626262;
  }

  /* Linelight */
  .code-view .lines a.selected::before,
  .code-view .lines a:target::before {
    background: #346194;
  }

  /* Code ruler (colorcolumn for vim users) */
  .code-view .ruler > span {
    border-right-color: #aeadad;
  }

  /* Header */
  .nav .nav-item .nav-link {
    color: #ccc !important;
  }

  .header-tabbed {
    border-color: #444;
  }

  .header-tabbed .nav .nav-item:hover .nav-link,
  .markdown-nav .nav .nav-item:hover .nav-link,
  .blob-nav .nav .nav-item:hover .nav-link {
    background: #666;
  }

  .header-tabbed .nav .nav-link.active {
    background: #444;
  }

  .blob-nav .nav .nav-link.active {
    background: #333;
  }

  .blob-nav .nav .nav-item {
    margin-bottom: 0;
  }

  .blob-nav .nav .nav-item .nav-link {
    border-bottom: none;
  }

  /* Blob/tree view */
  .tree-list .mode {
    color: #eee;
  }

  .code-view .lines {
    background: #444;
  }

  /* Header that appears on Markdown files */
  .markdown-nav .nav {
    border-color: #343434;
  }

  .markdown-nav .nav .nav-link.active {
    background: #444;
  }

  /* Alerts */
  .alert a:not(.btn) {
    color: #444 !important;
  }

  /* Forms */
  .form-control[readonly] {
    background: #999;
  }

  /* Logo? */
  .navbar-brand .icon svg path {
    color: #eee;
  }

  /* Patchsets */
  .prepare-patchset .event-list input[type="radio"]:checked + .event,
  .prepare-patchset .event-list input[type="radio"]:checked ~ .event {
    background: #385576 !important;
  }

  /* Tables on man.sr.ht */
  .table-primary,
  .table-primary > td,
  .table-primary > th {
    background: #346194;
  }

  .table-hover .table-primary:hover > td,
  .table-hover .table-primary:hover > th,
  .table-hover .table-primary:hover {
    background: #385576;
  }

  /* Build output on builds.sr.ht */
  .table-code {
    background: #222;
    overflow-y: auto;
  }

  /* Fix expanders */
  details {
    border-left-color: #eee;
  }

  .message-header details[open] > div,
  summary {
    background: inherit !important;
  }

  /* Highlight current service properly */
  .navbar-nav .nav-item.active .nav-link {
    color: #fff !important;
  }

  .navbar-nav .nav-item:not(.active) .nav-link {
    color: #848484 !important;
  }

  /* Tables */
  .markdown table tbody td,
  .table tbody td {
    border-color: #444;
  }

  .markdown table td,
  .table td {
    background: #444;
  }

  /* Monokai theme */
  .highlight pre {
    color: #f8f8f2;
  }
  .highlight pre .hll {
    background-color: #49483e;
  }
  .highlight pre .c {
    color: #75715e;
  } /* Comment */
  .highlight pre .err {
    color: #960050;
    background-color: #1e0010;
  } /* Error */
  .highlight pre .k {
    color: #66d9ef;
  } /* Keyword */
  .highlight pre .l {
    color: #ae81ff;
  } /* Literal */
  .highlight pre .n {
    color: #f8f8f2;
  } /* Name */
  .highlight pre .o {
    color: #f92672;
  } /* Operator */
  .highlight pre .p {
    color: #f8f8f2;
  } /* Punctuation */
  .highlight pre .cm {
    color: #75715e;
  } /* Comment.Multiline */
  .highlight pre .cp {
    color: #75715e;
  } /* Comment.Preproc */
  .highlight pre .c1 {
    color: #75715e;
  } /* Comment.Single */
  .highlight pre .cs {
    color: #75715e;
  } /* Comment.Special */
  .highlight pre .ge {
    font-style: italic;
  } /* Generic.Emph */
  .highlight pre .gp {
    color: #66d9ef;
    font-weight: bold;
  } /* Generic.Prompt */
  .highlight pre .gs {
    font-weight: bold;
  } /* Generic.Strong */
  .highlight pre .kc {
    color: #66d9ef;
  } /* Keyword.Constant */
  .highlight pre .kd {
    color: #66d9ef;
  } /* Keyword.Declaration */
  .highlight pre .kn {
    color: #f92672;
  } /* Keyword.Namespace */
  .highlight pre .kp {
    color: #66d9ef;
  } /* Keyword.Pseudo */
  .highlight pre .kr {
    color: #66d9ef;
  } /* Keyword.Reserved */
  .highlight pre .kt {
    color: #66d9ef;
  } /* Keyword.Type */
  .highlight pre .ld {
    color: #e6db74;
  } /* Literal.Date */
  .highlight pre .m {
    color: #ae81ff;
  } /* Literal.Number */
  .highlight pre .s {
    color: #e6db74;
  } /* Literal.String */
  .highlight pre .na {
    color: #a6e22e;
  } /* Name.Attribute */
  .highlight pre .nb {
    color: #f8f8f2;
  } /* Name.Builtin */
  .highlight pre .nc {
    color: #a6e22e;
  } /* Name.Class */
  .highlight pre .no {
    color: #66d9ef;
  } /* Name.Constant */
  .highlight pre .nd {
    color: #a6e22e;
  } /* Name.Decorator */
  .highlight pre .ni {
    color: #f8f8f2;
  } /* Name.Entity */
  .highlight pre .ne {
    color: #a6e22e;
  } /* Name.Exception */
  .highlight pre .nf {
    color: #a6e22e;
  } /* Name.Function */
  .highlight pre .nl {
    color: #f8f8f2;
  } /* Name.Label */
  .highlight pre .nn {
    color: #f8f8f2;
  } /* Name.Namespace */
  .highlight pre .nx {
    color: #a6e22e;
  } /* Name.Other */
  .highlight pre .py {
    color: #f8f8f2;
  } /* Name.Property */
  .highlight pre .nt {
    color: #f92672;
  } /* Name.Tag */
  .highlight pre .nv {
    color: #f8f8f2;
  } /* Name.Variable */
  .highlight pre .ow {
    color: #f92672;
  } /* Operator.Word */
  .highlight pre .w {
    color: #f8f8f2;
  } /* Text.Whitespace */
  .highlight pre .mf {
    color: #ae81ff;
  } /* Literal.Number.Float */
  .highlight pre .mh {
    color: #ae81ff;
  } /* Literal.Number.Hex */
  .highlight pre .mi {
    color: #ae81ff;
  } /* Literal.Number.Integer */
  .highlight pre .mo {
    color: #ae81ff;
  } /* Literal.Number.Oct */
  .highlight pre .sb {
    color: #e6db74;
  } /* Literal.String.Backtick */
  .highlight pre .sc {
    color: #e6db74;
  } /* Literal.String.Char */
  .highlight pre .sd {
    color: #e6db74;
  } /* Literal.String.Doc */
  .highlight pre .s2 {
    color: #e6db74;
  } /* Literal.String.Double */
  .highlight pre .se {
    color: #ae81ff;
  } /* Literal.String.Escape */
  .highlight pre .sh {
    color: #e6db74;
  } /* Literal.String.Heredoc */
  .highlight pre .si {
    color: #e6db74;
  } /* Literal.String.Interpol */
  .highlight pre .sx {
    color: #e6db74;
  } /* Literal.String.Other */
  .highlight pre .sr {
    color: #e6db74;
  } /* Literal.String.Regex */
  .highlight pre .s1 {
    color: #e6db74;
  } /* Literal.String.Single */
  .highlight pre .ss {
    color: #e6db74;
  } /* Literal.String.Symbol */
  .highlight pre .bp {
    color: #f8f8f2;
  } /* Name.Builtin.Pseudo */
  .highlight pre .vc {
    color: #f8f8f2;
  } /* Name.Variable.Class */
  .highlight pre .vg {
    color: #f8f8f2;
  } /* Name.Variable.Global */
  .highlight pre .vi {
    color: #f8f8f2;
  } /* Name.Variable.Instance */
  .highlight pre .il {
    color: #ae81ff;
  } /* Literal.Number.Integer.Long */
}
-- 
2.29.2
Reply to thread Export thread (mbox)