Changeset 252167 in webkit


Ignore:
Timestamp:
Nov 6, 2019 6:42:48 PM (5 years ago)
Author:
commit-queue@webkit.org
Message:

Support CSS Dark Mode for PrettyDiff.rb.
​https://bugs.webkit.org/show_bug.cgi?id=203874.

Patch by James Savage <James Savage> on 2019-11-06
Reviewed by Tim Horton.

  • PrettyPatch/PrettyPatch.rb: Modify CSS to support dark mode. I used

CSS variables in places where colors were shared, but otherwise provided
alternate style rules individually. Some colors looked fine in both
appearances, and those I left with only their light definition.

Location:
trunk/Websites/bugs.webkit.org
Files:
2 edited

Legend:

Unmodified
Added
Removed

  • trunk/Websites/bugs.webkit.org/ChangeLog

    r249483 r252167  
     12019-11-06  James Savage  <james.savage@apple.com>
     2
     3        Support CSS Dark Mode for PrettyDiff.rb.
     4        https://bugs.webkit.org/show_bug.cgi?id=203874.
     5
     6        Reviewed by Tim Horton.
     7
     8        * PrettyPatch/PrettyPatch.rb: Modify CSS to support dark mode. I used
     9        CSS variables in places where colors were shared, but otherwise provided
     10        alternate style rules individually. Some colors looked fine in both
     11        appearances, and those I left with only their light definition.
     12
    1132019-09-04  Aakash Jain  <aakash_jain@apple.com>
    214

  • trunk/Websites/bugs.webkit.org/PrettyPatch/PrettyPatch.rb

    r235262 r252167  
    180180<meta charset='utf-8'>
    181181<style>
     182:root {
     183    color-scheme: light dark;
     184    --link-color: #039;
     185    --border-color: #ddd;
     186    --grouped-bg-color: #eee;
     187    --page-bg-color: white;
     188}
     189
    182190:link, :visited {
    183191    text-decoration: none;
    … …  
    186194
    187195:link {
    188     color: #039;
     196    color: var(--link-color);
     197}
     198
     199@media (prefers-color-scheme: dark) {
     200    :root {
     201        --link-color: #09f;
     202        --border-color: #222;
     203        --grouped-bg-color: #111;
     204        --page-bg-color: black;
     205    }
     206
     207    :visited {
     208        color: #882bce;
     209    }
     210
     211    body {
     212        background-color: var(--page-bg-color);
     213        color: #eee;
     214    }
    189215}
    190216
    191217.FileDiff {
    192218    background-color: #f8f8f8;
    193     border: 1px solid #ddd;
     219    border: 1px solid var(--border-color);
    194220    font-family: monospace;
    195221    margin: 1em 0;
    196222    position: relative;
     223}
     224
     225@media (prefers-color-scheme: dark) {
     226    .FileDiff {
     227        background-color: #212121;
     228    }
    197229}
    198230
    … …  
    207239}
    208240
     241@media (prefers-color-scheme: dark) {
     242    h1 {
     243        color: #ccc;
     244    }
     245}
     246
    209247h1 :link, h1 :visited {
    210248    color: inherit;
    … …  
    213251h1 :hover {
    214252    color: #555;
    215     background-color: #eee;
     253    background-color: var(--grouped-bg-color);
     254}
     255
     256@media (prefers-color-scheme: dark) {
     257    h1 :hover {
     258        color: #aaa;
     259    }
    216260}
    217261
    … …  
    228272
    229273.DiffSection {
    230     background-color: white;
    231     border: solid #ddd;
     274    background-color: var(--page-bg-color);
     275    border: solid var(--border-color);
    232276    border-width: 1px 0px;
    233277}
    … …  
    269313
    270314.lineNumber, .expansionLineNumber {
    271     border-bottom: 1px solid #998;
    272     border-right: 1px solid #ddd;
     315    --border-bottom-color: #998;
     316    border-bottom: 1px solid var(--border-bottom-color);
     317    border-right: 1px solid var(--border-color);
    273318    color: #444;
    274319    display: inline-block;
    … …  
    279324}
    280325
     326@media (prefers-color-scheme: dark) {
     327    .lineNumber, .expansionLineNumber {
     328        --border-bottom-color: #424242;
     329        color: #bbb;
     330    }
     331}
     332
    281333.lineNumber {
    282334  background-color: #eed;
    283335}
    284336
     337@media (prefers-color-scheme: dark) {
     338    .lineNumber {
     339        background-color: #121212;
     340    }
     341}
     342
    285343.expansionLineNumber {
    286   background-color: #eee;
     344  background-color: var(--grouped-bg-color);
    287345}
    288346
    … …  
    294352
    295353.image {
    296     border: 2px solid black;
     354    border: 2px solid text;
    297355}
    298356
    … …  
    302360}
    303361
     362@media (prefers-color-scheme: dark) {
     363    .context, .context .lineNumber {
     364        color: #a24bb7;
     365        background-color: #1f0f24;
     366    }
     367}
     368
    304369.Line.add, .FileDiff .add {
    305370    background-color: #dfd;
    … …  
    311376}
    312377
     378@media (prefers-color-scheme: dark) {
     379    .Line.add, .FileDiff .add {
     380        background-color: #242;
     381    }
     382
     383    .Line.add ins {
     384        background-color: #186e0c;
     385    }
     386}
     387
    313388.Line.remove, .FileDiff .remove {
    314389    background-color: #fdd;
    … …  
    318393    background-color: #e99;
    319394    text-decoration: none;
     395}
     396
     397@media (prefers-color-scheme: dark) {
     398    .Line.remove, .FileDiff .remove {
     399        background-color: #410000;
     400    }
     401
     402    .Line.remove del {
     403        background-color: #8d1e0b;
     404    }
    320405}
    321406
    … …  
    360445  left: 0;
    361446  right: 0;
    362   border: 1px solid #ddd;
    363   background-color: #eee;
     447  border: 1px solid var(--border-color);
     448  background-color: var(--grouped-bg-color);
    364449  font-family: sans-serif;
    365450  position: fixed;
    … …  
    393478  top: 10%;
    394479  bottom: 10%;
    395   background: white;
     480  background: var(--page-bg-color);
    396481}
    397482
    … …  
    402487
    403488.commentContext .lineNumber {
    404   background-color: yellow;
     489    background-color: yellow;
     490}
     491
     492@media (prefers-color-scheme: dark) {
     493    .commentContext .lineNumber {
     494        background-color: #770;
     495        color: white;
     496    }
    405497}
    406498
    407499.selected .lineNumber {
    408   background-color: #69F;
    409   border-bottom-color: #69F;
    410   border-right-color: #69F;
     500  --selection-color: #69f;
     501  background-color: var(--selection-color);
     502  border-bottom-color: var(--selection-color);
     503  border-right-color: var(--selection-color);
     504}
     505
     506@media (prefers-color-scheme: dark) {
     507    .selected .lineNumber {
     508        color: white;
     509    }
    411510}
    412511
    413512.ExpandLinkContainer {
    414513  opacity: 0;
    415   border-top: 1px solid #ddd;
    416   border-bottom: 1px solid #ddd;
     514  border-top: 1px solid var(--border-color);
     515  border-bottom: 1px solid var(--border-color);
    417516}
    418517
    … …  
    439538.LinkContainer a:after {
    440539  content: " | ";
    441   color: black;
     540  color: text;
    442541}
    443542
    … …  
    447546
    448547.LinkContainer label {
    449   color: #039;
     548  color: var(--link-color);
    450549}
    451550
    … …  
    466565.comment, .previousComment, .frozenComment {
    467566  background-color: #ffd;
     567}
     568
     569@media (prefers-color-scheme: dark) {
     570    .comment, .previousComment, .frozenComment {
     571        background-color: #373700;
     572    }
    468573}
    469574
    … …  
    507612  top: -1.3em;
    508613  padding: 0 3px;
    509   outline: 1px solid #DDD;
     614  outline: 1px solid var(--border-color);
    510615  color: #8FDF5F;
    511   font-size: small;   
    512   background-color: #EEE;
     616  font-size: small;
     617  background-color: var(--grouped-bg-color);
    513618}
    514619
    … …  
    516621  outline: 0px;
    517622}
     623
    518624.autosave-state.saving {
    519625  color: #E98080;
Note: See TracChangeset for help on using the changeset viewer.