diff --git a/audio/1-basara-for-men.wav b/audio/1-basara-for-men.wav new file mode 100644 index 00000000..53a95816 Binary files /dev/null and b/audio/1-basara-for-men.wav differ diff --git a/content/body/acknowledgements.php b/content/body/acknowledgements.php index 02539679..cfc8b8ce 100644 --- a/content/body/acknowledgements.php +++ b/content/body/acknowledgements.php @@ -22,6 +22,7 @@
  • Alison Hall for cleaning up and streamlining the unit testing and automated testing NPM tasks (and also doing the difficult task of updating the NPM packages within the project in 2024).
  • Sahil Singh for unit tests for the input mask component.
    • +
  • Basia Baldwin for implementing dark mode across the project.
  • Zoltan Hawryluk for starting the Enable project to begin with.
    • diff --git a/content/body/dark-mode.php b/content/body/dark-mode.php new file mode 100644 index 00000000..5538955e --- /dev/null +++ b/content/body/dark-mode.php @@ -0,0 +1,137 @@ + +

    + Many mobile and desktop users experience eye strain when using interfaces that may have very bright, white screens. + An accessibility feature like dark mode helps to solve this problem for many and has now become a preference for millions of people who use computers and mobile devices every day. +

    + +

    + This page will discuss how to access either light or dark mode on different operating systems and devices. + It will also serve as a tool for the proper development of dark mode on new and existing websites and platforms. +

    + +

    The "Rules" for Developing

    + +

    + While there may not be any explicitly set rules for what is considered dark mode, when developing not just a visually pleasing but also accessible dark mode display, + it is important to ensure that what is being displayed is accessible to all. +

    + +

    + Make sure to remember: +

    + +
      +
    1. Contrast is key!! Pay attention to the ratio (see below).
      2. +
    2. Don't forget the little details — take the time to make sure each component of the page (even ones not visible) is dark mode accessible. +
      3. +
    3. Many users with photosensitivity use dark mode, so try to avoid using very bright colors, even if the contrast ratio appears correct.
      4. +
    4. Make sure assistive technologies (such as screen readers) still work with dark mode.
      5. +
    + +

    + One, if not the most important, thing to consider and be aware of when developing any user interface, light or dark, is the contrast ratio of items on the webpage. + According to the WCAG guidelines for contrast accessibility, the “visual presentation of text” must have a contrast ratio of at least 4.5:1 (with exceptions). + In short, this means that the contrast between background color and text color needs to be above this ratio. +

    + +

    + To see an example of a proper vs. improper contrast ratio, please refer below: +

    + +
    + Good Contrast Example + Bad Contrast Example +
    + +

    + As seen above, the contrast between the first image is much better than the second. The first images text has a contrast ratio of + 9.9, much better than the contrast ratio of 1.25 + for the second images text. + +

    + +

    + However, sometimes an inaccessible contrast ratio is not so obvious. This is why it is important to use tools that check the ratio, as there are things that might be overseen. + Tools like WAVE web accessibility evaluation tools, + WebAIM Contrast Checker, + and accessible-colors + allow for developers to test their page contrasts to ensure that they are creating the most accessible user interface possible. +

    + + +

    Using Dark Mode in Different Operating Systems

    + + true, + "comment" => + "These changes can also be done at the browser level rather than the whole system if that is your preference.", +]); ?> + +

    + Every OS, whether mobile or desktop, accesses dark mode uniquely. Use this as a reference to figure out how to enable dark mode + on your device! +

    + +

    Apple:

    + + +

    Windows:

    + + +

    Android:

    + + +

    Ubuntu:

    + \ No newline at end of file diff --git a/content/body/focus-styling.php b/content/body/focus-styling.php index 839d0154..83d8d890 100644 --- a/content/body/focus-styling.php +++ b/content/body/focus-styling.php @@ -25,7 +25,7 @@ true, "comment" => - "This is recommended for use in both new and existing projects. It ", + "This is recommended for use in both new and existing projects.", ]); ?> diff --git a/content/body/link.php b/content/body/link.php index 358adbd6..39c8ccef 100644 --- a/content/body/link.php +++ b/content/body/link.php @@ -154,6 +154,7 @@ Links That Open a New Window or Tab (Opens in a new window) + (Opens in a new window)

    diff --git a/css/article.css b/css/article.css index 2c7df6d0..8f274643 100644 --- a/css/article.css +++ b/css/article.css @@ -147,6 +147,20 @@ table [role="row"]:nth-child(2n), [role="table"] [role="row"]:nth-child(2n) { background-color: #cccccc; } +@media (prefers-color-scheme: dark) { + table tr, + [role="table"] tr, + table [role="row"], + [role="table"] [role="row"] { + background-color: #222; + } + table tr:nth-child(2n), + [role="table"] tr:nth-child(2n), + table [role="row"]:nth-child(2n), + [role="table"] [role="row"]:nth-child(2n) { + background-color: #282828; + } +} table [role="rowgroup"], [role="table"] [role="rowgroup"] { display: table-row-group; diff --git a/css/bookmarklets.css b/css/bookmarklets.css index 44fb89e9..78f0de28 100644 --- a/css/bookmarklets.css +++ b/css/bookmarklets.css @@ -4,3 +4,11 @@ main strong { background: white; } +@media (prefers-color-scheme: dark) { + main strong { + background: #222; + } + .enable-drawer { + background-color: #222; + } +} diff --git a/css/button.css b/css/button.css index 0178374d..f882fe19 100644 --- a/css/button.css +++ b/css/button.css @@ -28,3 +28,8 @@ height: 0px; overflow: hidden; } +@media (prefers-color-scheme: dark) { + .button-container button[aria-disabled="true"] { + opacity: 0.7; + } +} diff --git a/css/dropdown.css b/css/dropdown.css index 94db102c..550347f3 100644 --- a/css/dropdown.css +++ b/css/dropdown.css @@ -20,6 +20,13 @@ padding-left: 1.5625rem; background-repeat: no-repeat; } +@media (prefers-color-scheme: dark) { + .enable-drawer > .enable-drawer__button { + color: #fff; + background-color: #222; + background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%20id%3D%22Layer_1%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%2292px%22%20height%3D%2292px%22%20viewBox%3D%220%200%2092%2092%22%20xml%3Aspace%3D%22preserve%22%20fill%20%3D%20%22white%22%3E%3Cpath%20id%3D%22XMLID_933_%22%20d%3D%22M72.5%2046.5c0%202.5-2%204.5-4.5%204.5H50v17c0%202.5-2%204.5-4.5%204.5S41%2070.5%2041%2068V51H24c-2.5%200-4.5-2-4.5-4.5s2-4.5%204.5-4.5h17V24c0-2.5%202-4.5%204.5-4.5s4.5%202%204.5%204.5v18h18c2.5%200%204.5%202%204.5%204.5z%22%2F%3E%3Cmetadata%3E%3Crdf%3ARDF%20xmlns%3Ardf%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2F02%2F22-rdf-syntax-ns%23%22%20xmlns%3Ardfs%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2F01%2Frdf-schema%23%22%20xmlns%3Adc%3D%22http%3A%2F%2Fpurl.org%2Fdc%2Felements%2F1.1%2F%22%3E%3Crdf%3ADescription%20about%3D%22https%3A%2F%2Ficonscout.com%2Flegal%23licenses%22%20dc%3Atitle%3D%22plus%22%20dc%3Adescription%3D%22plus%22%20dc%3Apublisher%3D%22Iconscout%22%20dc%3Adate%3D%222017-09-24%22%20dc%3Aformat%3D%22image%2Fsvg%2Bxml%22%20dc%3Alanguage%3D%22en%22%3E%3Cdc%3Acreator%3E%3Crdf%3ABag%3E%3Crdf%3Ali%3EAmit%20Jakhu%3C%2Frdf%3Ali%3E%3C%2Frdf%3ABag%3E%3C%2Fdc%3Acreator%3E%3C%2Frdf%3ADescription%3E%3C%2Frdf%3ARDF%3E%3C%2Fmetadata%3E%3C%2Fsvg%3E"); + } +} .enable-drawer > .enable-drawer__button::-webkit-details-marker { display: none; } @@ -34,6 +41,12 @@ .enable-drawer .enable-drawer__button[aria-expanded="true"] { background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%20id%3D%22Layer_1%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%2292px%22%20height%3D%2292px%22%20viewBox%3D%220%200%2092%2092%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpath%20id%3D%22XMLID_38_%22%20d%3D%22M68%2050.5H24c-2.5%200-4.5-2-4.5-4.5s2-4.5%204.5-4.5h44c2.5%200%204.5%202%204.5%204.5s-2%204.5-4.5%204.5z%22%2F%3E%3Cmetadata%3E%3Crdf%3ARDF%20xmlns%3Ardf%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2F02%2F22-rdf-syntax-ns%23%22%20xmlns%3Ardfs%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2F01%2Frdf-schema%23%22%20xmlns%3Adc%3D%22http%3A%2F%2Fpurl.org%2Fdc%2Felements%2F1.1%2F%22%3E%3Crdf%3ADescription%20about%3D%22https%3A%2F%2Ficonscout.com%2Flegal%23licenses%22%20dc%3Atitle%3D%22minus%22%20dc%3Adescription%3D%22minus%22%20dc%3Apublisher%3D%22Iconscout%22%20dc%3Adate%3D%222017-09-24%22%20dc%3Aformat%3D%22image%2Fsvg%2Bxml%22%20dc%3Alanguage%3D%22en%22%3E%3Cdc%3Acreator%3E%3Crdf%3ABag%3E%3Crdf%3Ali%3EAmit%20Jakhu%3C%2Frdf%3Ali%3E%3C%2Frdf%3ABag%3E%3C%2Fdc%3Acreator%3E%3C%2Frdf%3ADescription%3E%3C%2Frdf%3ARDF%3E%3C%2Fmetadata%3E%3C%2Fsvg%3E"); } +@media (prefers-color-scheme: dark) { + .enable-drawer[open] > .enable-drawer__button, + .enable-drawer .enable-drawer__button[aria-expanded="true"] { + background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%20id%3D%22Layer_1%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%2292px%22%20height%3D%2292px%22%20viewBox%3D%220%200%2092%2092%22%20xml%3Aspace%3D%22preserve%22%20fill%20%3D%20%22white%22%3E%3Cpath%20id%3D%22XMLID_38_%22%20d%3D%22M68%2050.5H24c-2.5%200-4.5-2-4.5-4.5s2-4.5%204.5-4.5h44c2.5%200%204.5%202%204.5%204.5s-2%204.5-4.5%204.5z%22%2F%3E%3Cmetadata%3E%3Crdf%3ARDF%20xmlns%3Ardf%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2F02%2F22-rdf-syntax-ns%23%22%20xmlns%3Ardfs%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2F01%2Frdf-schema%23%22%20xmlns%3Adc%3D%22http%3A%2F%2Fpurl.org%2Fdc%2Felements%2F1.1%2F%22%3E%3Crdf%3ADescription%20about%3D%22https%3A%2F%2Ficonscout.com%2Flegal%23licenses%22%20dc%3Atitle%3D%22minus%22%20dc%3Adescription%3D%22minus%22%20dc%3Apublisher%3D%22Iconscout%22%20dc%3Adate%3D%222017-09-24%22%20dc%3Aformat%3D%22image%2Fsvg%2Bxml%22%20dc%3Alanguage%3D%22en%22%3E%3Cdc%3Acreator%3E%3Crdf%3ABag%3E%3Crdf%3Ali%3EAmit%20Jakhu%3C%2Frdf%3Ali%3E%3C%2Frdf%3ABag%3E%3C%2Fdc%3Acreator%3E%3C%2Frdf%3ADescription%3E%3C%2Frdf%3ARDF%3E%3C%2Fmetadata%3E%3C%2Fsvg%3E"); + } +} .enable-drawer__content { display: none; } @@ -91,6 +104,12 @@ border: solid 1px #ccc; background-color: white; } +@media (prefers-color-scheme: dark) { + .enable-multiselect__button { + background-color: #222; + border: solid 1px #777; + } +} .enable-multiselect__button::-webkit-details-marker { display: none; } diff --git a/css/enable-flyout.css b/css/enable-flyout.css index b7aa8d1e..f52542ee 100644 --- a/css/enable-flyout.css +++ b/css/enable-flyout.css @@ -189,6 +189,18 @@ position: relative; z-index: 2; } +.enable-flyout__open-level-button:visited, +.enable-flyout__close-level-button:visited, +.enable-flyout__link:visited { + color: #fff; +} +@media (prefers-color-scheme: dark) { + .enable-flyout__open-level-button:visited, + .enable-flyout__close-level-button:visited, + .enable-flyout__link:visited { + color: #fff; + } +} .enable-flyout-container--positioned-left .enable-flyout__open-level-button { padding-right: 10px; } @@ -575,6 +587,32 @@ filter: none; } } +@media only screen and (min-width: 960px) and (prefers-color-scheme: dark) { + .enable-flyout--is-open .enable-flyout__level { + color: white; + background: #222; + } +} +@media only screen and (min-width: 960px) and (prefers-color-scheme: dark) { + .enable-flyout__list--photo-layout .enable-flyout__link:hover, + .enable-flyout__list--photo-layout .enable-flyout__link:focus { + color: white; + background: #222; + } +} +@media only screen and (min-width: 960px) and (prefers-color-scheme: dark) { + .enable-flyout--is-open { + color: white; + background: #222; + } +} +@media only screen and (min-width: 960px) and (prefers-color-scheme: dark) { + .enable-flyout--is-open .enable-flyout__open-level-button, + .enable-flyout--is-open .enable-flyout__close-level-button, + .enable-flyout--is-open .enable-flyout__link { + color: white; + } +} @keyframes enable-flyout__anim--mobile-open { 0% { right: calc(-1 * min(75vw, 350px)); diff --git a/css/enable-listbox.css b/css/enable-listbox.css index 5b901cf4..c2995dac 100644 --- a/css/enable-listbox.css +++ b/css/enable-listbox.css @@ -40,6 +40,13 @@ fieldset .legend, top: -1.5em; margin-bottom: 0px !important; } +@media (prefers-color-scheme: dark) { + fieldset, + .fieldset, + [role="radiogroup"] { + background-color: #333; + } +} /* These are styles just for the global error */ .error { text-align: left; @@ -54,6 +61,11 @@ fieldset .legend, height: 0.7rem; margin-right: 0.5em; } +@media (prefers-color-scheme: dark) { + .error { + color: #ff6a6a; + } +} .annotate { font-style: italic; color: #366ed4; @@ -147,3 +159,18 @@ fieldset .legend, .enable-listbox .hidden { display: none; } +@media (prefers-color-scheme: dark) { + .enable-listbox { + background: #444; + border: 1px solid #222; + } + .enable-listbox [role="listbox"] { + background: #222; + } + .enable-listbox [role="option"]:focus { + background: #0a4481; + } + .enable-listbox button { + background: #ccc; + } +} diff --git a/css/enable-slider.css b/css/enable-slider.css index 8da0d2cb..3b208796 100644 --- a/css/enable-slider.css +++ b/css/enable-slider.css @@ -414,3 +414,31 @@ input[type="range"]:focus-visible::-moz-range-thumb { .enable-slider output { padding-left: 1em; } +@media (prefers-color-scheme: dark) { + .enable-slider--horizontal { + background-color: #000014; + border: 2px solid #eee; + } + .enable-slider--horizontal .enable-slider__handle { + background-color: #6c6c6c; + border: 1px solid #eee; + } + .enable-slider__slider-range { + background-color: #8f8fff; + } + .enable-slider__number-fallback { + background: black; + color: white; + } + .enable-slider__handle:focus, + .enable-slider__handle:active, + .enable-slider__handle.focus .enable-slider__handle { + background-color: #999 !important; + } + .enable-slider__button { + background: darkgreen; + } + .html-slider__multi--container::after { + background: white; + } +} diff --git a/css/enable-toc.css b/css/enable-toc.css index cdb8f870..79aa8f21 100644 --- a/css/enable-toc.css +++ b/css/enable-toc.css @@ -137,3 +137,31 @@ .enable-toc .enable-drawer__button:hover img { background: #ddd; } +@media (prefers-color-scheme: dark) { + .enable-toc { + background-color: #222; + } + .enable-toc__move-tosidebar-button { + background-color: #333; + color: white; + } + .enable-toc__move-tosidebar-button:hover { + background-color: #111; + } + .enable-toc__hide-sidebar-button { + background-color: #333; + color: white; + } + .enable-toc__hide-sidebar-button:hover { + background-color: #111; + } + .enable-toc__link { + color: #4593f8; + } + .enable-toc__link:visited { + color: #4593f8; + } + .enable-toc .enable-drawer__button { + background-color: #222; + } +} diff --git a/css/enable-visible-on-focus.css b/css/enable-visible-on-focus.css index c94493a9..1ed8b2d0 100644 --- a/css/enable-visible-on-focus.css +++ b/css/enable-visible-on-focus.css @@ -107,3 +107,13 @@ .fake-component a { color: #330000; } +@media (prefers-color-scheme: dark) { + .fake-component { + background: #222; + color: white; + border: solid 1px #111; + } + .fake-component a { + color: #fdfbcc; + } +} diff --git a/css/figure.css b/css/figure.css index 0d0f8443..3cb8f20e 100644 --- a/css/figure.css +++ b/css/figure.css @@ -94,3 +94,17 @@ a.tile-cta::after { .video-figure .able-status { text-align: right; } +@media (prefers-color-scheme: dark) { + figure { + background: #222; + } + figure, + [role="figure"] { + background: #222; + color: #ccc; + } + figure a, + [role="figure"] a { + color: #80b5f9; + } +} diff --git a/css/focus-styling.css b/css/focus-styling.css index 7ce39388..96635e88 100644 --- a/css/focus-styling.css +++ b/css/focus-styling.css @@ -19,3 +19,12 @@ outline: solid 2px #097efb; box-shadow: 3px 3px 0 white, -3px -3px 0 white, -3px 3px 0 white, 3px -3px 0 white; } +@media (prefers-color-scheme: dark) { + #double-focus-ring-example a { + background: #7d5d12; + color: #c9e0fd; + } + #double-focus-ring-example a:visited { + color: #c589f9; + } +} diff --git a/css/form-error.css b/css/form-error.css index ab1d7241..2dd8f10c 100644 --- a/css/form-error.css +++ b/css/form-error.css @@ -144,6 +144,12 @@ top: -1.5em; display: block; } +@media (prefers-color-scheme: dark) { + .enable-form-example fieldset, + .enable-form-example .aria-form-group { + background-color: #222; + } +} .enable-form-example [role="radio"], .enable-form-example [role="checkbox"] { display: inline-block; @@ -194,3 +200,11 @@ .enable-form-example .required-symbol { color: #e60000; } +@media (prefers-color-scheme: dark) { + .enable-form-example label.required::after { + color: #ff6a6a; + } + .enable-form-example .required-symbol { + color: #ff6a6a; + } +} diff --git a/css/form.css b/css/form.css index 0572b89d..35923d26 100644 --- a/css/form.css +++ b/css/form.css @@ -40,6 +40,13 @@ fieldset .legend, top: -1.5em; margin-bottom: 0px !important; } +@media (prefers-color-scheme: dark) { + fieldset, + .fieldset, + [role="radiogroup"] { + background-color: #333; + } +} /* These are styles just for the global error */ .error { text-align: left; @@ -54,3 +61,8 @@ fieldset .legend, height: 0.7rem; margin-right: 0.5em; } +@media (prefers-color-scheme: dark) { + .error { + color: #ff6a6a; + } +} diff --git a/css/group.css b/css/group.css index 0572b89d..35923d26 100644 --- a/css/group.css +++ b/css/group.css @@ -40,6 +40,13 @@ fieldset .legend, top: -1.5em; margin-bottom: 0px !important; } +@media (prefers-color-scheme: dark) { + fieldset, + .fieldset, + [role="radiogroup"] { + background-color: #333; + } +} /* These are styles just for the global error */ .error { text-align: left; @@ -54,3 +61,8 @@ fieldset .legend, height: 0.7rem; margin-right: 0.5em; } +@media (prefers-color-scheme: dark) { + .error { + color: #ff6a6a; + } +} diff --git a/css/heading.css b/css/heading.css index 98ad5ece..096cfffb 100644 --- a/css/heading.css +++ b/css/heading.css @@ -48,6 +48,12 @@ div.heading-example [role="heading"][aria-level="1"] { text-transform: uppercase; text-shadow: 0 2px white, 0 3px #777; } +@media (prefers-color-scheme: dark) { + div.heading-example h1, + div.heading-example [role="heading"][aria-level="1"] { + color: #ccc; + } +} div.heading-example h2, div.heading-example h5 [role="heading"][aria-level="2"], div.heading-example [role="heading"][aria-level="5"] { @@ -57,6 +63,13 @@ div.heading-example [role="heading"][aria-level="5"] { font-family: "Orienta", sans-serif; border: none; } +@media (prefers-color-scheme: dark) { + div.heading-example h2, + div.heading-example h5 [role="heading"][aria-level="2"], + div.heading-example [role="heading"][aria-level="5"] { + color: #ddd; + } +} div.heading-example h2, div.heading-example [role="heading"][aria-level="2"] { font-size: 33px; @@ -79,6 +92,14 @@ div.heading-example [role="heading"][aria-level="6"] { letter-spacing: 1px; font-style: italic; } +@media (prefers-color-scheme: dark) { + div.heading-example h3, + div.heading-example h6, + div.heading-example [role="heading"][aria-level="3"], + div.heading-example [role="heading"][aria-level="6"] { + color: #ddd; + } +} div.heading-example h3, div.heading-example [role="heading"][aria-level="3"] { font-size: 30px; @@ -96,6 +117,12 @@ div.heading-example [role="heading"][aria-level="7"] { font-weight: normal; font-family: "Orienta", sans-serif; } +@media (prefers-color-scheme: dark) { + div.heading-example h4, + div.heading-example [role="heading"][aria-level="7"] { + color: #ddd; + } +} div.heading-example h4, div.heading-example [role="heading"][aria-level="4"] { font-size: 25px; @@ -105,3 +132,11 @@ div.heading-example [role="heading"][aria-level="7"] { font-size: 18px; line-height: 20px; } +@media (prefers-color-scheme: dark) { + body { + background: #222; + } + div.heading-example { + text-shadow: 0 2px 0 rgba(32, 32, 32, 0.7); + } +} diff --git a/css/home.css b/css/home.css index c391424d..047d12cb 100644 --- a/css/home.css +++ b/css/home.css @@ -35,3 +35,11 @@ body.with-open-dyslexia * { #dyslexia-switch__label { font-family: "OpenDyslexic", sans-serif; } +@media (prefers-color-scheme: dark) { + a { + color: #4593f8; + } + a:visited { + color: #c589f9; + } +} diff --git a/css/img.css b/css/img.css index 99e74dfe..1c39b079 100644 --- a/css/img.css +++ b/css/img.css @@ -133,3 +133,8 @@ text-align: center; margin-top: 120px; } +@media (prefers-color-scheme: dark) { + #icon-font-example section a { + color: #ccc; + } +} diff --git a/css/index.css b/css/index.css index ca5845e2..a004d486 100644 --- a/css/index.css +++ b/css/index.css @@ -189,3 +189,42 @@ strong { font-size: 1.375rem; color: #444; } +@media (prefers-color-scheme: dark) { + /*Enable intro section*/ + .homepage__hero--heading { + color: #ccffcc; + } + .homepage__hero { + color: #dabebe; + background: #222222; + } + /*3 components after header section*/ + main { + background-color: #111111; + } + a { + color: #4593f8; + } + /* Bottom copy heading*/ + .homepage__bottom-copy--heading { + color: #eeeeee; + } + /*What makes enable diff & found a bug section*/ + .homepage__bottom-copy { + background: #222; + color: #ccc; + } + .homepage__bottom-copy strong { + color: #ccc !important; + } + /*Want to donate code section*/ + .homepage__bottom-copy:nth-child(2n) { + background: #444; + } + .homepage__bottom-copy:nth-child(2n) a { + color: #7db4fa; + } + .homepage__bottom-copy:nth-child(2n) a:visited { + color: #c589f9; + } +} diff --git a/css/link.css b/css/link.css index 335f0d94..b868a517 100644 --- a/css/link.css +++ b/css/link.css @@ -11,6 +11,25 @@ a[target="_blank"]:visited { } a[target="_blank"] .new-window-icon { height: 0.75rem; + display: inline; +} +a[target="_blank"] .new-window-icon-dark { + height: 0.75rem; + display: none; +} +@media (prefers-color-scheme: dark) { + a[target="_blank"] { + color: #a8c7fa; + } + a[target="_blank"]:visited { + color: #4593f8; + } + a[target="_blank"] .new-window-icon { + display: none; + } + a[target="_blank"] .new-window-icon-dark { + display: inline; + } } nav.breadcrumb { padding: 0.8em 1em; @@ -39,3 +58,13 @@ nav.breadcrumb [aria-current="page"] { font-weight: 700; text-decoration: none; } +@media (prefers-color-scheme: dark) { + nav.breadcrumb [aria-current="page"] { + color: #fff; + } +} +@media (prefers-color-scheme: dark) { + nav.breadcrumb { + background: #282828; + } +} diff --git a/css/product-tile.css b/css/product-tile.css index 0f4f73bd..46337764 100644 --- a/css/product-tile.css +++ b/css/product-tile.css @@ -56,3 +56,21 @@ .product-tile--not-as-good-example mark.ins::before { content: "Current price: "; } +@media (prefers-color-scheme: dark) { + .product-tile { + color: white; + border: solid 1px #555; + } + .product-tile__badge { + background: #555; + } + .product-tile del, + .product-tile ins, + .product-tile mark { + color: white; + } + .product-tile del, + .product-tile mark.del { + color: white; + } +} diff --git a/css/radiogroup.css b/css/radiogroup.css index c300b3e0..0d74d1ec 100644 --- a/css/radiogroup.css +++ b/css/radiogroup.css @@ -114,3 +114,8 @@ fieldset .legend, border-bottom: none; text-align: left; } +@media (prefers-color-scheme: dark) { + .enable-radio [type="radio"] + label { + color: #ddd; + } +} diff --git a/css/shared/all.css b/css/shared/all.css index 4253043f..af0ddb73 100644 --- a/css/shared/all.css +++ b/css/shared/all.css @@ -478,14 +478,56 @@ iframe:focus-visible { outline: solid 2px #097efb !important; outline-offset: -2px; } -/* @media (prefers-color-scheme: dark) { + .example main { + background: #222222; + color: #ccc; + } body { - background: #000; - color: rgb(201, 209, 217); + color: #ccc; + background-color: #222222; + } + h1 { + color: #ccc; + } + h2 { + color: #ccc; + } + h3 { + color: #ccc; + } + p { + color: #ccc; + } + .enable-quote { + background: #444; + } + code { + background-color: #111; + } + strong { + color: #ccc; + } + a { + color: #4593f8; + } + a:visited { + color: #c589f9; + } + .heading__deeplink { + color: #ccc; + } + .heading__deeplink:visited { + color: #ccc; + } + .enable-example { + border: solid 1px #eee; + border-left: solid 5px #eee; + } + .enable-example span { + color: #ccc; } } -*/ /********************************************************* * a11y.css - a stylesheet to help create * accessible websites. @@ -752,6 +794,16 @@ aside, line-height: 1.4; max-width: 1024px; } +@media (prefers-color-scheme: dark) { + aside, + [role="complementary"] { + background: #555 url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3Csvg%20xmlns%3Adc%3D%22http%3A%2F%2Fpurl.org%2Fdc%2Felements%2F1.1%2F%22%20xmlns%3Acc%3D%22http%3A%2F%2Fcreativecommons.org%2Fns%23%22%20xmlns%3Ardf%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2F02%2F22-rdf-syntax-ns%23%22%20xmlns%3Asvg%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%20width%3D%2272pt%22%20height%3D%2272pt%22%20id%3D%22svg604%22%3E%0A%20%20%3Cmetadata%20id%3D%22metadata45%22%3E%0A%20%20%20%20%3Crdf%3ARDF%3E%0A%20%20%20%20%20%20%3Ccc%3AWork%20rdf%3Aabout%3D%22%22%3E%0A%20%20%20%20%20%20%20%20%3Cdc%3Aformat%3Eimage%2Fsvg%2Bxml%3C%2Fdc%3Aformat%3E%0A%20%20%20%20%20%20%20%20%3Cdc%3Atype%20rdf%3Aresource%3D%22http%3A%2F%2Fpurl.org%2Fdc%2Fdcmitype%2FStillImage%22%2F%3E%0A%20%20%20%20%20%20%20%20%3Cdc%3Atitle%2F%3E%0A%20%20%20%20%20%20%3C%2Fcc%3AWork%3E%0A%20%20%20%20%3C%2Frdf%3ARDF%3E%0A%20%20%3C%2Fmetadata%3E%0A%20%20%3Cdefs%20id%3D%22defs606%22%3E%0A%20%20%20%20%3ClinearGradient%20id%3D%22linearGradient612%22%3E%0A%20%20%20%20%20%20%3Cstop%20id%3D%22stop613%22%20style%3D%22stop-color%3A%237fa8e3%3Bstop-opacity%3A0.74117601%22%20offset%3D%220%22%2F%3E%0A%20%20%20%20%20%20%3Cstop%20id%3D%22stop614%22%20style%3D%22stop-color%3A%23ffffff%3Bstop-opacity%3A0%22%20offset%3D%221%22%2F%3E%0A%20%20%20%20%3C%2FlinearGradient%3E%0A%20%20%20%20%3ClinearGradient%20x1%3D%2250.643887%22%20y1%3D%225.3679295%22%20x2%3D%2235.752094%22%20y2%3D%2268.044357%22%20id%3D%22linearGradient615%22%20xlink%3Ahref%3D%22%23linearGradient612%22%20gradientUnits%3D%22userSpaceOnUse%22%20spreadMethod%3D%22pad%22%2F%3E%0A%20%20%3C%2Fdefs%3E%0A%20%20%3Cpath%20d%3D%22M%2012.8163%2C74.753%20C%2010.3856%2C73.6481%207.07107%2C70.1126%208.83884%2C65.2512%20L%2078.6656%2C20.8361%20c%201.9888%2C1.7678%203.5356%2C3.2041%201.9888%2C7.0711%20-1.1048%2C1.9887%20-14.2527%2C46.6248%20-14.4736%2C49.4975%20-0.8839%2C3.0936%20-3.425%2C6.8501%20-7.6235%2C6.6291%20-4.1984%2C-0.221%20-42.6474%2C-8.6179%20-45.741%2C-9.2808%20z%22%20transform%3D%22matrix(1.114903%2C0%2C0%2C1.114903%2C-5.305332%2C-3.889256)%22%20id%3D%22path794%22%20style%3D%22fill-opacity%3A0.30147125%3Bfill-rule%3Aevenodd%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M%2012.8163%2C74.753%20C%2010.3856%2C73.6481%207.07107%2C70.1126%208.83884%2C65.2512%209.72267%2C59.948%2025.6326%2C13.1021%2029.1682%2C10.8924%2031.3778%2C8.90368%2034.582%2C8.13026%2039.1119%2C9.34561%20c%203.7565%2C0.88389%2037.565%2C9.72279%2039.5537%2C11.49049%201.9888%2C1.7678%203.5356%2C3.2041%201.9888%2C7.0711%20-1.1048%2C1.9887%20-14.2527%2C46.6248%20-14.4736%2C49.4975%20-0.8839%2C3.0936%20-3.425%2C6.8501%20-7.6235%2C6.6291%20-4.1984%2C-0.221%20-42.6474%2C-8.6179%20-45.741%2C-9.2808%20z%22%20transform%3D%22matrix(1.114903%2C0%2C0%2C1.114903%2C-8.162471%2C-8.460684)%22%20id%3D%22path609%22%20style%3D%22fill%3A%233d4e67%3Bfill-rule%3Aevenodd%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M%2017.8987%2C70.9965%20C%2015.3576%2C70.3336%2011.7114%2C69.6706%2013.0373%2C65.6932%2015.468%2C55.9705%2027.8424%2C18.6264%2033.1456%2C13.986%20c%201.2154%2C-1.1049%205.3033%2C-1.5468%2013.0373%2C0.8839%208.8389%2C2.6516%2026.7375%2C8.6178%2028.5053%2C9.5017%201.7677%2C0.8839%202.4307%2C0.8839%201.1048%2C4.8614%20-1.9887%2C3.9775%20-10.8275%2C38.007%20-13.0373%2C43.7522%20-1.5467%2C4.088%20-1.8782%2C5.9662%20-4.5299%2C5.9662%22%20transform%3D%22matrix(1.114903%2C0%2C0%2C1.114903%2C-8.162471%2C-8.460684)%22%20id%3D%22path608%22%20style%3D%22fill%3A%23ffffff%3Bfill-rule%3Aevenodd%22%2F%3E%0A%20%20%3Cpath%20d%3D%22m%2028.75%2C13.75%20c%200%2C0%203.125%2C-6.25005%2010.9375%2C-4.37505%20C%2047.5%2C11.25%2078.125%2C19.375%2077.8125%2C21.875%2077.5%2C24.375%2071.875%2C39.0625%2071.5625%2C40.3125%2071.25%2C41.5625%2042.5%2C40.9375%2031.5625%2C47.5%2020.625%2C54.0625%2012.5%2C59.6875%2012.5%2C59.6875%20c%200%2C0%2011.25%2C-35%2016.25%2C-45.9375%20z%22%20transform%3D%22matrix(0.94678%2C0%2C0%2C0.94678%2C-0.480566%2C0.409517)%22%20id%3D%22path636%22%20style%3D%22fill%3Aurl(%23linearGradient615)%3Bfill-rule%3Aevenodd%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M%2029.2429%2C15.8991%2069.8423%2C26.6877%22%20transform%3D%22translate(1.135645%2C0.851736)%22%20id%3D%22path671%22%20style%3D%22fill%3Anone%3Bstroke%3A%2342667e%3Bstroke-width%3A1pt%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M%2027.8233%2C19.306%2067.8549%2C30.9464%22%20transform%3D%22matrix(0.999855%2C-0.01703691%2C0.01703691%2C0.999855%2C-0.705041%2C5.077353)%22%20id%3D%22path672%22%20style%3D%22fill%3Anone%3Bstroke%3A%2342667e%3Bstroke-width%3A1pt%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M%2029.2429%2C15.8991%2069.8423%2C26.6877%22%20transform%3D%22translate(-5.394323%2C17.0347)%22%20id%3D%22path673%22%20style%3D%22fill%3Anone%3Bstroke%3A%2342667e%3Bstroke-width%3A1pt%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M%2029.2429%2C15.8991%2069.8423%2C26.6877%22%20transform%3D%22translate(-11.35647%2C34.0694)%22%20id%3D%22path675%22%20style%3D%22fill%3Anone%3Bstroke%3A%2342667e%3Bstroke-width%3A1pt%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M%2027.8233%2C19.306%2067.8549%2C30.9464%22%20transform%3D%22matrix(0.999855%2C-0.01703691%2C0.01703691%2C0.999855%2C-13.19715%2C38.29502)%22%20id%3D%22path676%22%20style%3D%22fill%3Anone%3Bstroke%3A%2342667e%3Bstroke-width%3A1pt%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M%2027.8233%2C19.306%2067.8549%2C30.9464%22%20transform%3D%22matrix(0.999855%2C-0.01703691%2C0.01703691%2C0.999855%2C-7.235008%2C21.26032)%22%20id%3D%22path674%22%20style%3D%22fill%3Anone%3Bstroke%3A%2342667e%3Bstroke-width%3A1pt%22%2F%3E%0A%20%20%3Cg%20id%3D%22g666%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22m%2044.8581%2C15.0473%20c%20-3.4478%2C0%20-5.1105%2C-2.5484%20-5.1105%2C-6.38799%200%2C-3.83962%202.7983%2C-6.95584%206.2461%2C-6.95584%203.4478%2C0%204.5425%2C1.12884%204.5425%2C4.96845%22%20transform%3D%22matrix(0.948718%2C0%2C0%2C1%2C4.011168%2C0.567827)%22%20id%3D%22path667%22%20style%3D%22fill%3Anone%3Bstroke%3A%234f4f4f%3Bstroke-width%3A2.875%3Bstroke-linecap%3Around%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22m%2044.8581%2C14.7634%20c%20-3.4478%2C0%20-5.3944%2C-2.2645%20-5.3944%2C-6.10409%200%2C-3.83962%202.7983%2C-7.807574%206.2461%2C-7.807574%203.4478%2C0%204.8264%2C1.980574%204.8264%2C5.820184%22%20transform%3D%22matrix(0.948718%2C0%2C0%2C1%2C4.011168%2C0.567827)%22%20id%3D%22path668%22%20style%3D%22fill%3Anone%3Bstroke%3A%23c2c2c2%3Bstroke-width%3A0.625%3Bstroke-linecap%3Around%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%20%20%3Cuse%20transform%3D%22translate(10.788642%2C1.987381)%22%20id%3D%22use669%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2290%22%20height%3D%2290%22%20xlink%3Ahref%3D%22%23g666%22%2F%3E%0A%20%20%3Cg%20transform%3D%22matrix(0.69841%2C0%2C0%2C0.69841%2C31.4038%2C0.671206)%22%20id%3D%22g677%22%3E%0A%20%20%20%20%3Cdefs%20id%3D%22defs611%22%3E%0A%20%20%20%20%20%20%3ClinearGradient%20id%3D%22linearGradient626%22%3E%0A%20%20%20%20%20%20%20%20%3Cstop%20id%3D%22stop627%22%20style%3D%22stop-color%3A%23b5772d%3Bstop-opacity%3A1%22%20offset%3D%220%22%2F%3E%0A%20%20%20%20%20%20%20%20%3Cstop%20id%3D%22stop628%22%20style%3D%22stop-color%3A%23ffffff%3Bstop-opacity%3A0%22%20offset%3D%221%22%2F%3E%0A%20%20%20%20%20%20%3C%2FlinearGradient%3E%0A%20%20%20%20%20%20%3ClinearGradient%20id%3D%22linearGradient619%22%3E%0A%20%20%20%20%20%20%20%20%3Cstop%20id%3D%22stop620%22%20style%3D%22stop-color%3A%23770000%3Bstop-opacity%3A1%22%20offset%3D%220%22%2F%3E%0A%20%20%20%20%20%20%20%20%3Cstop%20id%3D%22stop621%22%20style%3D%22stop-color%3A%23ffffff%3Bstop-opacity%3A0%22%20offset%3D%221%22%2F%3E%0A%20%20%20%20%20%20%3C%2FlinearGradient%3E%0A%20%20%20%20%20%20%3ClinearGradient%20x1%3D%2266.331696%22%20y1%3D%2223.212469%22%20x2%3D%2263.465496%22%20y2%3D%2220.962799%22%20id%3D%22linearGradient622%22%20xlink%3Ahref%3D%22%23linearGradient619%22%20gradientUnits%3D%22userSpaceOnUse%22%20gradientTransform%3D%22scale(1.004516%2C0.995504)%22%20spreadMethod%3D%22pad%22%2F%3E%0A%20%20%20%20%20%20%3ClinearGradient%20x1%3D%2256.327614%22%20y1%3D%2243.377247%22%20x2%3D%2251.654526%22%20y2%3D%2239.762909%22%20id%3D%22linearGradient625%22%20xlink%3Ahref%3D%22%23linearGradient626%22%20gradientUnits%3D%22userSpaceOnUse%22%20gradientTransform%3D%22scale(0.912664%2C1.095694)%22%20spreadMethod%3D%22pad%22%2F%3E%0A%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%3Cpath%20d%3D%22M%209.33685%2C82.1156%20C%2017.9129%2C79.7641%2030.9112%2C77.5637%2040.1097%2C71.8924%2056.9851%2C62.0714%2066.0118%2C41.6332%2076.4551%2C25.5877%2077.285%2C12.3086%2064.1128%2C5.96872%2059.1331%2C8.87345%2046.4766%2C25.4722%2037.5548%2C43.5235%2023.4458%2C55.9725%2019.0886%2C66.5542%209.12934%2C82.738%209.33685%2C82.1156%20z%22%20transform%3D%22translate(3.814559%2C2.934275)%22%20id%3D%22path632%22%20style%3D%22fill-opacity%3A0.28318601%3Bfill-rule%3Aevenodd%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M%209.33685%2C82.1156%20C%2017.9129%2C79.7641%2028.5638%2C74.9228%2037.7623%2C69.2516%2054.6377%2C59.4306%2064.2512%2C38.4055%2074.6945%2C22.36%2075.5244%2C9.08092%2064.1128%2C5.96872%2059.1331%2C8.87345%2046.4766%2C25.4722%2037.5548%2C43.5235%2023.4458%2C55.9725%2019.0886%2C66.5542%209.12934%2C82.738%209.33685%2C82.1156%20z%22%20id%3D%22path617%22%20style%3D%22fill-rule%3Aevenodd%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22m%2071.9972%2C20.9076%20c%20-1.729%2C2.4898%20-3.4581%2C4.9796%20-5.1871%2C7.4694%20-2.2823%2C-5.3946%20-4.9796%2C-8.0919%20-11.8266%2C-8.7143%202.2132%2C-2.6973%204.4263%2C-5.3946%206.6395%2C-8.0919%205.5329%2C-0.6225%209.8209%2C4.1497%2010.3742%2C9.3368%20z%22%20id%3D%22path613%22%20style%3D%22fill%3A%23be6d6d%3Bfill-rule%3Aevenodd%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22m%2054.776%2C20.9076%20c%205.3946%2C-0.3458%209.1293%2C3.6656%2011.2041%2C8.2994%20-8.4377%2C13.6248%20-15.423%2C27.0422%20-29.6703%2C37.7622%200%2C0%20-3.5272%2C-10.1668%20-8.7143%2C-8.9218%206.432%2C-7.262%2021.3709%2C-28.0104%2027.1805%2C-37.1398%20z%22%20id%3D%22path614%22%20style%3D%22fill%3A%23ffbc24%3Bfill-rule%3Aevenodd%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22m%2027.0767%2C58.6698%20c%204.6684%2C-0.2421%208.6106%2C5.3255%207.5732%2C8.7144%20-2.0057%2C1.5215%20-5.2562%2C3.0431%20-7.2619%2C4.5646%20-0.3458%2C-2.7664%20-2.144%2C-4.9104%20-6.0171%2C-4.5646%201.729%2C-2.974%203.9768%2C-5.7404%205.7058%2C-8.7144%20z%22%20id%3D%22path615%22%20style%3D%22fill%3A%23e9dbb9%3Bfill-rule%3Aevenodd%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22m%2021.7859%2C66.9692%20c%203.5618%2C-0.8299%205.0488%2C2.6973%205.8096%2C4.7722%20l%20-13.2791%2C6.017%207.4695%2C-10.7892%20z%22%20id%3D%22path616%22%20style%3D%22fill%3A%23586f93%3Bfill-rule%3Aevenodd%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22m%2071.9972%2C20.9076%20c%20-1.729%2C2.4898%20-3.4581%2C4.9796%20-5.1871%2C7.4694%20-2.2823%2C-5.3946%20-4.9796%2C-8.0919%20-11.8266%2C-8.7143%202.2132%2C-2.6973%204.4263%2C-5.3946%206.6395%2C-8.0919%205.5329%2C-0.6225%209.8209%2C4.1497%2010.3742%2C9.3368%20z%22%20id%3D%22path618%22%20style%3D%22fill%3Aurl(%23linearGradient622)%3Bfill-rule%3Aevenodd%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22m%2062.8679%2C12.1932%20-5.3946%2C6.847%202.9048%2C1.0374%205.3946%2C-6.432%20-2.9048%2C-1.4524%20z%22%20id%3D%22path623%22%20style%3D%22fill%3A%23ffffff%3Bfill-rule%3Aevenodd%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22m%2054.776%2C20.9076%20c%205.3946%2C-0.3458%209.1293%2C3.6656%2011.2041%2C8.2994%20-8.4377%2C13.6248%20-15.423%2C27.0422%20-29.6703%2C37.7622%200%2C0%20-3.5272%2C-10.1668%20-8.7143%2C-8.9218%206.432%2C-7.262%2021.3709%2C-28.0104%2027.1805%2C-37.1398%20z%22%20id%3D%22path624%22%20style%3D%22fill%3Aurl(%23linearGradient625)%3Bfill-rule%3Aevenodd%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22m%2029.6703%2C56.18%20c%201.2449%2C0.7608%202.4898%2C1.5215%203.7347%2C2.2823%20C%2042.5344%2C47.6039%2046.6841%2C36.5381%2058.9257%2C24.6423%2057.7499%2C23.8815%2056.5742%2C23.1208%2055.3984%2C22.36%2048.0673%2C35.0857%2039.6987%2C47.3965%2029.6703%2C56.18%20z%22%20id%3D%22path630%22%20style%3D%22fill%3A%23ffffff%3Bfill-rule%3Aevenodd%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22m%2034.7538%2C67.2805%20c%200.2074%2C-2.1786%20-0.3113%2C-3.7348%20-1.4525%2C-5.4984%20-1.5215%2C3.3889%20-3.873%2C5.8441%20-7.1582%2C6.6395%20-0.7262%2C0.6224%201.2449%2C1.9711%201.4524%2C3.216%201.8674%2C-1.1412%207.1583%2C-3.7347%207.1583%2C-4.3571%20z%22%20id%3D%22path631%22%20style%3D%22fill%3A%239c7850%3Bfill-rule%3Aevenodd%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%3Cscript%20xmlns%3D%22%22%2F%3E%3C%2Fsvg%3E") no-repeat 1em 1em; + } + aside a, + [role="complementary"] a { + color: #a7ccfc; + } +} aside h2, [role="complementary"] h2 { font-family: "OpenSans", "Helvetica", "Arial", sans-serif; @@ -778,6 +830,24 @@ aside h2, top: 0.4rem; } } +@media only screen and (min-width: 1px) and (max-width: 719px) and (prefers-color-scheme: dark) { + aside, + [role="complementary"] { + background: #555; + } + aside h2::before, + [role="complementary"] h2::before { + content: ""; + background: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3Csvg%20xmlns%3Adc%3D%22http%3A%2F%2Fpurl.org%2Fdc%2Felements%2F1.1%2F%22%20xmlns%3Acc%3D%22http%3A%2F%2Fcreativecommons.org%2Fns%23%22%20xmlns%3Ardf%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2F02%2F22-rdf-syntax-ns%23%22%20xmlns%3Asvg%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%20width%3D%2272pt%22%20height%3D%2272pt%22%20id%3D%22svg604%22%3E%0A%20%20%3Cmetadata%20id%3D%22metadata45%22%3E%0A%20%20%20%20%3Crdf%3ARDF%3E%0A%20%20%20%20%20%20%3Ccc%3AWork%20rdf%3Aabout%3D%22%22%3E%0A%20%20%20%20%20%20%20%20%3Cdc%3Aformat%3Eimage%2Fsvg%2Bxml%3C%2Fdc%3Aformat%3E%0A%20%20%20%20%20%20%20%20%3Cdc%3Atype%20rdf%3Aresource%3D%22http%3A%2F%2Fpurl.org%2Fdc%2Fdcmitype%2FStillImage%22%2F%3E%0A%20%20%20%20%20%20%20%20%3Cdc%3Atitle%2F%3E%0A%20%20%20%20%20%20%3C%2Fcc%3AWork%3E%0A%20%20%20%20%3C%2Frdf%3ARDF%3E%0A%20%20%3C%2Fmetadata%3E%0A%20%20%3Cdefs%20id%3D%22defs606%22%3E%0A%20%20%20%20%3ClinearGradient%20id%3D%22linearGradient612%22%3E%0A%20%20%20%20%20%20%3Cstop%20id%3D%22stop613%22%20style%3D%22stop-color%3A%237fa8e3%3Bstop-opacity%3A0.74117601%22%20offset%3D%220%22%2F%3E%0A%20%20%20%20%20%20%3Cstop%20id%3D%22stop614%22%20style%3D%22stop-color%3A%23ffffff%3Bstop-opacity%3A0%22%20offset%3D%221%22%2F%3E%0A%20%20%20%20%3C%2FlinearGradient%3E%0A%20%20%20%20%3ClinearGradient%20x1%3D%2250.643887%22%20y1%3D%225.3679295%22%20x2%3D%2235.752094%22%20y2%3D%2268.044357%22%20id%3D%22linearGradient615%22%20xlink%3Ahref%3D%22%23linearGradient612%22%20gradientUnits%3D%22userSpaceOnUse%22%20spreadMethod%3D%22pad%22%2F%3E%0A%20%20%3C%2Fdefs%3E%0A%20%20%3Cpath%20d%3D%22M%2012.8163%2C74.753%20C%2010.3856%2C73.6481%207.07107%2C70.1126%208.83884%2C65.2512%20L%2078.6656%2C20.8361%20c%201.9888%2C1.7678%203.5356%2C3.2041%201.9888%2C7.0711%20-1.1048%2C1.9887%20-14.2527%2C46.6248%20-14.4736%2C49.4975%20-0.8839%2C3.0936%20-3.425%2C6.8501%20-7.6235%2C6.6291%20-4.1984%2C-0.221%20-42.6474%2C-8.6179%20-45.741%2C-9.2808%20z%22%20transform%3D%22matrix(1.114903%2C0%2C0%2C1.114903%2C-5.305332%2C-3.889256)%22%20id%3D%22path794%22%20style%3D%22fill-opacity%3A0.30147125%3Bfill-rule%3Aevenodd%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M%2012.8163%2C74.753%20C%2010.3856%2C73.6481%207.07107%2C70.1126%208.83884%2C65.2512%209.72267%2C59.948%2025.6326%2C13.1021%2029.1682%2C10.8924%2031.3778%2C8.90368%2034.582%2C8.13026%2039.1119%2C9.34561%20c%203.7565%2C0.88389%2037.565%2C9.72279%2039.5537%2C11.49049%201.9888%2C1.7678%203.5356%2C3.2041%201.9888%2C7.0711%20-1.1048%2C1.9887%20-14.2527%2C46.6248%20-14.4736%2C49.4975%20-0.8839%2C3.0936%20-3.425%2C6.8501%20-7.6235%2C6.6291%20-4.1984%2C-0.221%20-42.6474%2C-8.6179%20-45.741%2C-9.2808%20z%22%20transform%3D%22matrix(1.114903%2C0%2C0%2C1.114903%2C-8.162471%2C-8.460684)%22%20id%3D%22path609%22%20style%3D%22fill%3A%233d4e67%3Bfill-rule%3Aevenodd%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M%2017.8987%2C70.9965%20C%2015.3576%2C70.3336%2011.7114%2C69.6706%2013.0373%2C65.6932%2015.468%2C55.9705%2027.8424%2C18.6264%2033.1456%2C13.986%20c%201.2154%2C-1.1049%205.3033%2C-1.5468%2013.0373%2C0.8839%208.8389%2C2.6516%2026.7375%2C8.6178%2028.5053%2C9.5017%201.7677%2C0.8839%202.4307%2C0.8839%201.1048%2C4.8614%20-1.9887%2C3.9775%20-10.8275%2C38.007%20-13.0373%2C43.7522%20-1.5467%2C4.088%20-1.8782%2C5.9662%20-4.5299%2C5.9662%22%20transform%3D%22matrix(1.114903%2C0%2C0%2C1.114903%2C-8.162471%2C-8.460684)%22%20id%3D%22path608%22%20style%3D%22fill%3A%23ffffff%3Bfill-rule%3Aevenodd%22%2F%3E%0A%20%20%3Cpath%20d%3D%22m%2028.75%2C13.75%20c%200%2C0%203.125%2C-6.25005%2010.9375%2C-4.37505%20C%2047.5%2C11.25%2078.125%2C19.375%2077.8125%2C21.875%2077.5%2C24.375%2071.875%2C39.0625%2071.5625%2C40.3125%2071.25%2C41.5625%2042.5%2C40.9375%2031.5625%2C47.5%2020.625%2C54.0625%2012.5%2C59.6875%2012.5%2C59.6875%20c%200%2C0%2011.25%2C-35%2016.25%2C-45.9375%20z%22%20transform%3D%22matrix(0.94678%2C0%2C0%2C0.94678%2C-0.480566%2C0.409517)%22%20id%3D%22path636%22%20style%3D%22fill%3Aurl(%23linearGradient615)%3Bfill-rule%3Aevenodd%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M%2029.2429%2C15.8991%2069.8423%2C26.6877%22%20transform%3D%22translate(1.135645%2C0.851736)%22%20id%3D%22path671%22%20style%3D%22fill%3Anone%3Bstroke%3A%2342667e%3Bstroke-width%3A1pt%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M%2027.8233%2C19.306%2067.8549%2C30.9464%22%20transform%3D%22matrix(0.999855%2C-0.01703691%2C0.01703691%2C0.999855%2C-0.705041%2C5.077353)%22%20id%3D%22path672%22%20style%3D%22fill%3Anone%3Bstroke%3A%2342667e%3Bstroke-width%3A1pt%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M%2029.2429%2C15.8991%2069.8423%2C26.6877%22%20transform%3D%22translate(-5.394323%2C17.0347)%22%20id%3D%22path673%22%20style%3D%22fill%3Anone%3Bstroke%3A%2342667e%3Bstroke-width%3A1pt%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M%2029.2429%2C15.8991%2069.8423%2C26.6877%22%20transform%3D%22translate(-11.35647%2C34.0694)%22%20id%3D%22path675%22%20style%3D%22fill%3Anone%3Bstroke%3A%2342667e%3Bstroke-width%3A1pt%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M%2027.8233%2C19.306%2067.8549%2C30.9464%22%20transform%3D%22matrix(0.999855%2C-0.01703691%2C0.01703691%2C0.999855%2C-13.19715%2C38.29502)%22%20id%3D%22path676%22%20style%3D%22fill%3Anone%3Bstroke%3A%2342667e%3Bstroke-width%3A1pt%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M%2027.8233%2C19.306%2067.8549%2C30.9464%22%20transform%3D%22matrix(0.999855%2C-0.01703691%2C0.01703691%2C0.999855%2C-7.235008%2C21.26032)%22%20id%3D%22path674%22%20style%3D%22fill%3Anone%3Bstroke%3A%2342667e%3Bstroke-width%3A1pt%22%2F%3E%0A%20%20%3Cg%20id%3D%22g666%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22m%2044.8581%2C15.0473%20c%20-3.4478%2C0%20-5.1105%2C-2.5484%20-5.1105%2C-6.38799%200%2C-3.83962%202.7983%2C-6.95584%206.2461%2C-6.95584%203.4478%2C0%204.5425%2C1.12884%204.5425%2C4.96845%22%20transform%3D%22matrix(0.948718%2C0%2C0%2C1%2C4.011168%2C0.567827)%22%20id%3D%22path667%22%20style%3D%22fill%3Anone%3Bstroke%3A%234f4f4f%3Bstroke-width%3A2.875%3Bstroke-linecap%3Around%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22m%2044.8581%2C14.7634%20c%20-3.4478%2C0%20-5.3944%2C-2.2645%20-5.3944%2C-6.10409%200%2C-3.83962%202.7983%2C-7.807574%206.2461%2C-7.807574%203.4478%2C0%204.8264%2C1.980574%204.8264%2C5.820184%22%20transform%3D%22matrix(0.948718%2C0%2C0%2C1%2C4.011168%2C0.567827)%22%20id%3D%22path668%22%20style%3D%22fill%3Anone%3Bstroke%3A%23c2c2c2%3Bstroke-width%3A0.625%3Bstroke-linecap%3Around%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%20%20%3Cuse%20transform%3D%22translate(10.788642%2C1.987381)%22%20id%3D%22use669%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2290%22%20height%3D%2290%22%20xlink%3Ahref%3D%22%23g666%22%2F%3E%0A%20%20%3Cg%20transform%3D%22matrix(0.69841%2C0%2C0%2C0.69841%2C31.4038%2C0.671206)%22%20id%3D%22g677%22%3E%0A%20%20%20%20%3Cdefs%20id%3D%22defs611%22%3E%0A%20%20%20%20%20%20%3ClinearGradient%20id%3D%22linearGradient626%22%3E%0A%20%20%20%20%20%20%20%20%3Cstop%20id%3D%22stop627%22%20style%3D%22stop-color%3A%23b5772d%3Bstop-opacity%3A1%22%20offset%3D%220%22%2F%3E%0A%20%20%20%20%20%20%20%20%3Cstop%20id%3D%22stop628%22%20style%3D%22stop-color%3A%23ffffff%3Bstop-opacity%3A0%22%20offset%3D%221%22%2F%3E%0A%20%20%20%20%20%20%3C%2FlinearGradient%3E%0A%20%20%20%20%20%20%3ClinearGradient%20id%3D%22linearGradient619%22%3E%0A%20%20%20%20%20%20%20%20%3Cstop%20id%3D%22stop620%22%20style%3D%22stop-color%3A%23770000%3Bstop-opacity%3A1%22%20offset%3D%220%22%2F%3E%0A%20%20%20%20%20%20%20%20%3Cstop%20id%3D%22stop621%22%20style%3D%22stop-color%3A%23ffffff%3Bstop-opacity%3A0%22%20offset%3D%221%22%2F%3E%0A%20%20%20%20%20%20%3C%2FlinearGradient%3E%0A%20%20%20%20%20%20%3ClinearGradient%20x1%3D%2266.331696%22%20y1%3D%2223.212469%22%20x2%3D%2263.465496%22%20y2%3D%2220.962799%22%20id%3D%22linearGradient622%22%20xlink%3Ahref%3D%22%23linearGradient619%22%20gradientUnits%3D%22userSpaceOnUse%22%20gradientTransform%3D%22scale(1.004516%2C0.995504)%22%20spreadMethod%3D%22pad%22%2F%3E%0A%20%20%20%20%20%20%3ClinearGradient%20x1%3D%2256.327614%22%20y1%3D%2243.377247%22%20x2%3D%2251.654526%22%20y2%3D%2239.762909%22%20id%3D%22linearGradient625%22%20xlink%3Ahref%3D%22%23linearGradient626%22%20gradientUnits%3D%22userSpaceOnUse%22%20gradientTransform%3D%22scale(0.912664%2C1.095694)%22%20spreadMethod%3D%22pad%22%2F%3E%0A%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%3Cpath%20d%3D%22M%209.33685%2C82.1156%20C%2017.9129%2C79.7641%2030.9112%2C77.5637%2040.1097%2C71.8924%2056.9851%2C62.0714%2066.0118%2C41.6332%2076.4551%2C25.5877%2077.285%2C12.3086%2064.1128%2C5.96872%2059.1331%2C8.87345%2046.4766%2C25.4722%2037.5548%2C43.5235%2023.4458%2C55.9725%2019.0886%2C66.5542%209.12934%2C82.738%209.33685%2C82.1156%20z%22%20transform%3D%22translate(3.814559%2C2.934275)%22%20id%3D%22path632%22%20style%3D%22fill-opacity%3A0.28318601%3Bfill-rule%3Aevenodd%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M%209.33685%2C82.1156%20C%2017.9129%2C79.7641%2028.5638%2C74.9228%2037.7623%2C69.2516%2054.6377%2C59.4306%2064.2512%2C38.4055%2074.6945%2C22.36%2075.5244%2C9.08092%2064.1128%2C5.96872%2059.1331%2C8.87345%2046.4766%2C25.4722%2037.5548%2C43.5235%2023.4458%2C55.9725%2019.0886%2C66.5542%209.12934%2C82.738%209.33685%2C82.1156%20z%22%20id%3D%22path617%22%20style%3D%22fill-rule%3Aevenodd%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22m%2071.9972%2C20.9076%20c%20-1.729%2C2.4898%20-3.4581%2C4.9796%20-5.1871%2C7.4694%20-2.2823%2C-5.3946%20-4.9796%2C-8.0919%20-11.8266%2C-8.7143%202.2132%2C-2.6973%204.4263%2C-5.3946%206.6395%2C-8.0919%205.5329%2C-0.6225%209.8209%2C4.1497%2010.3742%2C9.3368%20z%22%20id%3D%22path613%22%20style%3D%22fill%3A%23be6d6d%3Bfill-rule%3Aevenodd%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22m%2054.776%2C20.9076%20c%205.3946%2C-0.3458%209.1293%2C3.6656%2011.2041%2C8.2994%20-8.4377%2C13.6248%20-15.423%2C27.0422%20-29.6703%2C37.7622%200%2C0%20-3.5272%2C-10.1668%20-8.7143%2C-8.9218%206.432%2C-7.262%2021.3709%2C-28.0104%2027.1805%2C-37.1398%20z%22%20id%3D%22path614%22%20style%3D%22fill%3A%23ffbc24%3Bfill-rule%3Aevenodd%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22m%2027.0767%2C58.6698%20c%204.6684%2C-0.2421%208.6106%2C5.3255%207.5732%2C8.7144%20-2.0057%2C1.5215%20-5.2562%2C3.0431%20-7.2619%2C4.5646%20-0.3458%2C-2.7664%20-2.144%2C-4.9104%20-6.0171%2C-4.5646%201.729%2C-2.974%203.9768%2C-5.7404%205.7058%2C-8.7144%20z%22%20id%3D%22path615%22%20style%3D%22fill%3A%23e9dbb9%3Bfill-rule%3Aevenodd%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22m%2021.7859%2C66.9692%20c%203.5618%2C-0.8299%205.0488%2C2.6973%205.8096%2C4.7722%20l%20-13.2791%2C6.017%207.4695%2C-10.7892%20z%22%20id%3D%22path616%22%20style%3D%22fill%3A%23586f93%3Bfill-rule%3Aevenodd%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22m%2071.9972%2C20.9076%20c%20-1.729%2C2.4898%20-3.4581%2C4.9796%20-5.1871%2C7.4694%20-2.2823%2C-5.3946%20-4.9796%2C-8.0919%20-11.8266%2C-8.7143%202.2132%2C-2.6973%204.4263%2C-5.3946%206.6395%2C-8.0919%205.5329%2C-0.6225%209.8209%2C4.1497%2010.3742%2C9.3368%20z%22%20id%3D%22path618%22%20style%3D%22fill%3Aurl(%23linearGradient622)%3Bfill-rule%3Aevenodd%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22m%2062.8679%2C12.1932%20-5.3946%2C6.847%202.9048%2C1.0374%205.3946%2C-6.432%20-2.9048%2C-1.4524%20z%22%20id%3D%22path623%22%20style%3D%22fill%3A%23ffffff%3Bfill-rule%3Aevenodd%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22m%2054.776%2C20.9076%20c%205.3946%2C-0.3458%209.1293%2C3.6656%2011.2041%2C8.2994%20-8.4377%2C13.6248%20-15.423%2C27.0422%20-29.6703%2C37.7622%200%2C0%20-3.5272%2C-10.1668%20-8.7143%2C-8.9218%206.432%2C-7.262%2021.3709%2C-28.0104%2027.1805%2C-37.1398%20z%22%20id%3D%22path624%22%20style%3D%22fill%3Aurl(%23linearGradient625)%3Bfill-rule%3Aevenodd%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22m%2029.6703%2C56.18%20c%201.2449%2C0.7608%202.4898%2C1.5215%203.7347%2C2.2823%20C%2042.5344%2C47.6039%2046.6841%2C36.5381%2058.9257%2C24.6423%2057.7499%2C23.8815%2056.5742%2C23.1208%2055.3984%2C22.36%2048.0673%2C35.0857%2039.6987%2C47.3965%2029.6703%2C56.18%20z%22%20id%3D%22path630%22%20style%3D%22fill%3A%23ffffff%3Bfill-rule%3Aevenodd%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22m%2034.7538%2C67.2805%20c%200.2074%2C-2.1786%20-0.3113%2C-3.7348%20-1.4525%2C-5.4984%20-1.5215%2C3.3889%20-3.873%2C5.8441%20-7.1582%2C6.6395%20-0.7262%2C0.6224%201.2449%2C1.9711%201.4524%2C3.216%201.8674%2C-1.1412%207.1583%2C-3.7347%207.1583%2C-4.3571%20z%22%20id%3D%22path631%22%20style%3D%22fill%3A%239c7850%3Bfill-rule%3Aevenodd%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%3Cscript%20xmlns%3D%22%22%2F%3E%3C%2Fsvg%3E"); + width: 2rem; + height: 2rem; + display: inline-block; + background-size: contain; + background-repeat: no-repeat; + position: relative; + top: 0.4rem; + } +} aside h3, [role="complementary"] h3 { color: #9999ff; diff --git a/css/shared/defaults.css b/css/shared/defaults.css index 2def9c9d..ee2726ff 100644 --- a/css/shared/defaults.css +++ b/css/shared/defaults.css @@ -323,11 +323,53 @@ iframe:focus-visible { outline: solid 2px #097efb !important; outline-offset: -2px; } -/* @media (prefers-color-scheme: dark) { + .example main { + background: #222222; + color: #ccc; + } body { - background: #000; - color: rgb(201, 209, 217); + color: #ccc; + background-color: #222222; + } + h1 { + color: #ccc; + } + h2 { + color: #ccc; + } + h3 { + color: #ccc; + } + p { + color: #ccc; + } + .enable-quote { + background: #444; + } + code { + background-color: #111; + } + strong { + color: #ccc; + } + a { + color: #4593f8; + } + a:visited { + color: #c589f9; + } + .heading__deeplink { + color: #ccc; + } + .heading__deeplink:visited { + color: #ccc; + } + .enable-example { + border: solid 1px #eee; + border-left: solid 5px #eee; + } + .enable-example span { + color: #ccc; } } -*/ diff --git a/css/shared/landmarks.css b/css/shared/landmarks.css index 4253043f..af0ddb73 100644 --- a/css/shared/landmarks.css +++ b/css/shared/landmarks.css @@ -478,14 +478,56 @@ iframe:focus-visible { outline: solid 2px #097efb !important; outline-offset: -2px; } -/* @media (prefers-color-scheme: dark) { + .example main { + background: #222222; + color: #ccc; + } body { - background: #000; - color: rgb(201, 209, 217); + color: #ccc; + background-color: #222222; + } + h1 { + color: #ccc; + } + h2 { + color: #ccc; + } + h3 { + color: #ccc; + } + p { + color: #ccc; + } + .enable-quote { + background: #444; + } + code { + background-color: #111; + } + strong { + color: #ccc; + } + a { + color: #4593f8; + } + a:visited { + color: #c589f9; + } + .heading__deeplink { + color: #ccc; + } + .heading__deeplink:visited { + color: #ccc; + } + .enable-example { + border: solid 1px #eee; + border-left: solid 5px #eee; + } + .enable-example span { + color: #ccc; } } -*/ /********************************************************* * a11y.css - a stylesheet to help create * accessible websites. @@ -752,6 +794,16 @@ aside, line-height: 1.4; max-width: 1024px; } +@media (prefers-color-scheme: dark) { + aside, + [role="complementary"] { + background: #555 url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3Csvg%20xmlns%3Adc%3D%22http%3A%2F%2Fpurl.org%2Fdc%2Felements%2F1.1%2F%22%20xmlns%3Acc%3D%22http%3A%2F%2Fcreativecommons.org%2Fns%23%22%20xmlns%3Ardf%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2F02%2F22-rdf-syntax-ns%23%22%20xmlns%3Asvg%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%20width%3D%2272pt%22%20height%3D%2272pt%22%20id%3D%22svg604%22%3E%0A%20%20%3Cmetadata%20id%3D%22metadata45%22%3E%0A%20%20%20%20%3Crdf%3ARDF%3E%0A%20%20%20%20%20%20%3Ccc%3AWork%20rdf%3Aabout%3D%22%22%3E%0A%20%20%20%20%20%20%20%20%3Cdc%3Aformat%3Eimage%2Fsvg%2Bxml%3C%2Fdc%3Aformat%3E%0A%20%20%20%20%20%20%20%20%3Cdc%3Atype%20rdf%3Aresource%3D%22http%3A%2F%2Fpurl.org%2Fdc%2Fdcmitype%2FStillImage%22%2F%3E%0A%20%20%20%20%20%20%20%20%3Cdc%3Atitle%2F%3E%0A%20%20%20%20%20%20%3C%2Fcc%3AWork%3E%0A%20%20%20%20%3C%2Frdf%3ARDF%3E%0A%20%20%3C%2Fmetadata%3E%0A%20%20%3Cdefs%20id%3D%22defs606%22%3E%0A%20%20%20%20%3ClinearGradient%20id%3D%22linearGradient612%22%3E%0A%20%20%20%20%20%20%3Cstop%20id%3D%22stop613%22%20style%3D%22stop-color%3A%237fa8e3%3Bstop-opacity%3A0.74117601%22%20offset%3D%220%22%2F%3E%0A%20%20%20%20%20%20%3Cstop%20id%3D%22stop614%22%20style%3D%22stop-color%3A%23ffffff%3Bstop-opacity%3A0%22%20offset%3D%221%22%2F%3E%0A%20%20%20%20%3C%2FlinearGradient%3E%0A%20%20%20%20%3ClinearGradient%20x1%3D%2250.643887%22%20y1%3D%225.3679295%22%20x2%3D%2235.752094%22%20y2%3D%2268.044357%22%20id%3D%22linearGradient615%22%20xlink%3Ahref%3D%22%23linearGradient612%22%20gradientUnits%3D%22userSpaceOnUse%22%20spreadMethod%3D%22pad%22%2F%3E%0A%20%20%3C%2Fdefs%3E%0A%20%20%3Cpath%20d%3D%22M%2012.8163%2C74.753%20C%2010.3856%2C73.6481%207.07107%2C70.1126%208.83884%2C65.2512%20L%2078.6656%2C20.8361%20c%201.9888%2C1.7678%203.5356%2C3.2041%201.9888%2C7.0711%20-1.1048%2C1.9887%20-14.2527%2C46.6248%20-14.4736%2C49.4975%20-0.8839%2C3.0936%20-3.425%2C6.8501%20-7.6235%2C6.6291%20-4.1984%2C-0.221%20-42.6474%2C-8.6179%20-45.741%2C-9.2808%20z%22%20transform%3D%22matrix(1.114903%2C0%2C0%2C1.114903%2C-5.305332%2C-3.889256)%22%20id%3D%22path794%22%20style%3D%22fill-opacity%3A0.30147125%3Bfill-rule%3Aevenodd%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M%2012.8163%2C74.753%20C%2010.3856%2C73.6481%207.07107%2C70.1126%208.83884%2C65.2512%209.72267%2C59.948%2025.6326%2C13.1021%2029.1682%2C10.8924%2031.3778%2C8.90368%2034.582%2C8.13026%2039.1119%2C9.34561%20c%203.7565%2C0.88389%2037.565%2C9.72279%2039.5537%2C11.49049%201.9888%2C1.7678%203.5356%2C3.2041%201.9888%2C7.0711%20-1.1048%2C1.9887%20-14.2527%2C46.6248%20-14.4736%2C49.4975%20-0.8839%2C3.0936%20-3.425%2C6.8501%20-7.6235%2C6.6291%20-4.1984%2C-0.221%20-42.6474%2C-8.6179%20-45.741%2C-9.2808%20z%22%20transform%3D%22matrix(1.114903%2C0%2C0%2C1.114903%2C-8.162471%2C-8.460684)%22%20id%3D%22path609%22%20style%3D%22fill%3A%233d4e67%3Bfill-rule%3Aevenodd%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M%2017.8987%2C70.9965%20C%2015.3576%2C70.3336%2011.7114%2C69.6706%2013.0373%2C65.6932%2015.468%2C55.9705%2027.8424%2C18.6264%2033.1456%2C13.986%20c%201.2154%2C-1.1049%205.3033%2C-1.5468%2013.0373%2C0.8839%208.8389%2C2.6516%2026.7375%2C8.6178%2028.5053%2C9.5017%201.7677%2C0.8839%202.4307%2C0.8839%201.1048%2C4.8614%20-1.9887%2C3.9775%20-10.8275%2C38.007%20-13.0373%2C43.7522%20-1.5467%2C4.088%20-1.8782%2C5.9662%20-4.5299%2C5.9662%22%20transform%3D%22matrix(1.114903%2C0%2C0%2C1.114903%2C-8.162471%2C-8.460684)%22%20id%3D%22path608%22%20style%3D%22fill%3A%23ffffff%3Bfill-rule%3Aevenodd%22%2F%3E%0A%20%20%3Cpath%20d%3D%22m%2028.75%2C13.75%20c%200%2C0%203.125%2C-6.25005%2010.9375%2C-4.37505%20C%2047.5%2C11.25%2078.125%2C19.375%2077.8125%2C21.875%2077.5%2C24.375%2071.875%2C39.0625%2071.5625%2C40.3125%2071.25%2C41.5625%2042.5%2C40.9375%2031.5625%2C47.5%2020.625%2C54.0625%2012.5%2C59.6875%2012.5%2C59.6875%20c%200%2C0%2011.25%2C-35%2016.25%2C-45.9375%20z%22%20transform%3D%22matrix(0.94678%2C0%2C0%2C0.94678%2C-0.480566%2C0.409517)%22%20id%3D%22path636%22%20style%3D%22fill%3Aurl(%23linearGradient615)%3Bfill-rule%3Aevenodd%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M%2029.2429%2C15.8991%2069.8423%2C26.6877%22%20transform%3D%22translate(1.135645%2C0.851736)%22%20id%3D%22path671%22%20style%3D%22fill%3Anone%3Bstroke%3A%2342667e%3Bstroke-width%3A1pt%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M%2027.8233%2C19.306%2067.8549%2C30.9464%22%20transform%3D%22matrix(0.999855%2C-0.01703691%2C0.01703691%2C0.999855%2C-0.705041%2C5.077353)%22%20id%3D%22path672%22%20style%3D%22fill%3Anone%3Bstroke%3A%2342667e%3Bstroke-width%3A1pt%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M%2029.2429%2C15.8991%2069.8423%2C26.6877%22%20transform%3D%22translate(-5.394323%2C17.0347)%22%20id%3D%22path673%22%20style%3D%22fill%3Anone%3Bstroke%3A%2342667e%3Bstroke-width%3A1pt%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M%2029.2429%2C15.8991%2069.8423%2C26.6877%22%20transform%3D%22translate(-11.35647%2C34.0694)%22%20id%3D%22path675%22%20style%3D%22fill%3Anone%3Bstroke%3A%2342667e%3Bstroke-width%3A1pt%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M%2027.8233%2C19.306%2067.8549%2C30.9464%22%20transform%3D%22matrix(0.999855%2C-0.01703691%2C0.01703691%2C0.999855%2C-13.19715%2C38.29502)%22%20id%3D%22path676%22%20style%3D%22fill%3Anone%3Bstroke%3A%2342667e%3Bstroke-width%3A1pt%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M%2027.8233%2C19.306%2067.8549%2C30.9464%22%20transform%3D%22matrix(0.999855%2C-0.01703691%2C0.01703691%2C0.999855%2C-7.235008%2C21.26032)%22%20id%3D%22path674%22%20style%3D%22fill%3Anone%3Bstroke%3A%2342667e%3Bstroke-width%3A1pt%22%2F%3E%0A%20%20%3Cg%20id%3D%22g666%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22m%2044.8581%2C15.0473%20c%20-3.4478%2C0%20-5.1105%2C-2.5484%20-5.1105%2C-6.38799%200%2C-3.83962%202.7983%2C-6.95584%206.2461%2C-6.95584%203.4478%2C0%204.5425%2C1.12884%204.5425%2C4.96845%22%20transform%3D%22matrix(0.948718%2C0%2C0%2C1%2C4.011168%2C0.567827)%22%20id%3D%22path667%22%20style%3D%22fill%3Anone%3Bstroke%3A%234f4f4f%3Bstroke-width%3A2.875%3Bstroke-linecap%3Around%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22m%2044.8581%2C14.7634%20c%20-3.4478%2C0%20-5.3944%2C-2.2645%20-5.3944%2C-6.10409%200%2C-3.83962%202.7983%2C-7.807574%206.2461%2C-7.807574%203.4478%2C0%204.8264%2C1.980574%204.8264%2C5.820184%22%20transform%3D%22matrix(0.948718%2C0%2C0%2C1%2C4.011168%2C0.567827)%22%20id%3D%22path668%22%20style%3D%22fill%3Anone%3Bstroke%3A%23c2c2c2%3Bstroke-width%3A0.625%3Bstroke-linecap%3Around%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%20%20%3Cuse%20transform%3D%22translate(10.788642%2C1.987381)%22%20id%3D%22use669%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2290%22%20height%3D%2290%22%20xlink%3Ahref%3D%22%23g666%22%2F%3E%0A%20%20%3Cg%20transform%3D%22matrix(0.69841%2C0%2C0%2C0.69841%2C31.4038%2C0.671206)%22%20id%3D%22g677%22%3E%0A%20%20%20%20%3Cdefs%20id%3D%22defs611%22%3E%0A%20%20%20%20%20%20%3ClinearGradient%20id%3D%22linearGradient626%22%3E%0A%20%20%20%20%20%20%20%20%3Cstop%20id%3D%22stop627%22%20style%3D%22stop-color%3A%23b5772d%3Bstop-opacity%3A1%22%20offset%3D%220%22%2F%3E%0A%20%20%20%20%20%20%20%20%3Cstop%20id%3D%22stop628%22%20style%3D%22stop-color%3A%23ffffff%3Bstop-opacity%3A0%22%20offset%3D%221%22%2F%3E%0A%20%20%20%20%20%20%3C%2FlinearGradient%3E%0A%20%20%20%20%20%20%3ClinearGradient%20id%3D%22linearGradient619%22%3E%0A%20%20%20%20%20%20%20%20%3Cstop%20id%3D%22stop620%22%20style%3D%22stop-color%3A%23770000%3Bstop-opacity%3A1%22%20offset%3D%220%22%2F%3E%0A%20%20%20%20%20%20%20%20%3Cstop%20id%3D%22stop621%22%20style%3D%22stop-color%3A%23ffffff%3Bstop-opacity%3A0%22%20offset%3D%221%22%2F%3E%0A%20%20%20%20%20%20%3C%2FlinearGradient%3E%0A%20%20%20%20%20%20%3ClinearGradient%20x1%3D%2266.331696%22%20y1%3D%2223.212469%22%20x2%3D%2263.465496%22%20y2%3D%2220.962799%22%20id%3D%22linearGradient622%22%20xlink%3Ahref%3D%22%23linearGradient619%22%20gradientUnits%3D%22userSpaceOnUse%22%20gradientTransform%3D%22scale(1.004516%2C0.995504)%22%20spreadMethod%3D%22pad%22%2F%3E%0A%20%20%20%20%20%20%3ClinearGradient%20x1%3D%2256.327614%22%20y1%3D%2243.377247%22%20x2%3D%2251.654526%22%20y2%3D%2239.762909%22%20id%3D%22linearGradient625%22%20xlink%3Ahref%3D%22%23linearGradient626%22%20gradientUnits%3D%22userSpaceOnUse%22%20gradientTransform%3D%22scale(0.912664%2C1.095694)%22%20spreadMethod%3D%22pad%22%2F%3E%0A%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%3Cpath%20d%3D%22M%209.33685%2C82.1156%20C%2017.9129%2C79.7641%2030.9112%2C77.5637%2040.1097%2C71.8924%2056.9851%2C62.0714%2066.0118%2C41.6332%2076.4551%2C25.5877%2077.285%2C12.3086%2064.1128%2C5.96872%2059.1331%2C8.87345%2046.4766%2C25.4722%2037.5548%2C43.5235%2023.4458%2C55.9725%2019.0886%2C66.5542%209.12934%2C82.738%209.33685%2C82.1156%20z%22%20transform%3D%22translate(3.814559%2C2.934275)%22%20id%3D%22path632%22%20style%3D%22fill-opacity%3A0.28318601%3Bfill-rule%3Aevenodd%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M%209.33685%2C82.1156%20C%2017.9129%2C79.7641%2028.5638%2C74.9228%2037.7623%2C69.2516%2054.6377%2C59.4306%2064.2512%2C38.4055%2074.6945%2C22.36%2075.5244%2C9.08092%2064.1128%2C5.96872%2059.1331%2C8.87345%2046.4766%2C25.4722%2037.5548%2C43.5235%2023.4458%2C55.9725%2019.0886%2C66.5542%209.12934%2C82.738%209.33685%2C82.1156%20z%22%20id%3D%22path617%22%20style%3D%22fill-rule%3Aevenodd%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22m%2071.9972%2C20.9076%20c%20-1.729%2C2.4898%20-3.4581%2C4.9796%20-5.1871%2C7.4694%20-2.2823%2C-5.3946%20-4.9796%2C-8.0919%20-11.8266%2C-8.7143%202.2132%2C-2.6973%204.4263%2C-5.3946%206.6395%2C-8.0919%205.5329%2C-0.6225%209.8209%2C4.1497%2010.3742%2C9.3368%20z%22%20id%3D%22path613%22%20style%3D%22fill%3A%23be6d6d%3Bfill-rule%3Aevenodd%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22m%2054.776%2C20.9076%20c%205.3946%2C-0.3458%209.1293%2C3.6656%2011.2041%2C8.2994%20-8.4377%2C13.6248%20-15.423%2C27.0422%20-29.6703%2C37.7622%200%2C0%20-3.5272%2C-10.1668%20-8.7143%2C-8.9218%206.432%2C-7.262%2021.3709%2C-28.0104%2027.1805%2C-37.1398%20z%22%20id%3D%22path614%22%20style%3D%22fill%3A%23ffbc24%3Bfill-rule%3Aevenodd%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22m%2027.0767%2C58.6698%20c%204.6684%2C-0.2421%208.6106%2C5.3255%207.5732%2C8.7144%20-2.0057%2C1.5215%20-5.2562%2C3.0431%20-7.2619%2C4.5646%20-0.3458%2C-2.7664%20-2.144%2C-4.9104%20-6.0171%2C-4.5646%201.729%2C-2.974%203.9768%2C-5.7404%205.7058%2C-8.7144%20z%22%20id%3D%22path615%22%20style%3D%22fill%3A%23e9dbb9%3Bfill-rule%3Aevenodd%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22m%2021.7859%2C66.9692%20c%203.5618%2C-0.8299%205.0488%2C2.6973%205.8096%2C4.7722%20l%20-13.2791%2C6.017%207.4695%2C-10.7892%20z%22%20id%3D%22path616%22%20style%3D%22fill%3A%23586f93%3Bfill-rule%3Aevenodd%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22m%2071.9972%2C20.9076%20c%20-1.729%2C2.4898%20-3.4581%2C4.9796%20-5.1871%2C7.4694%20-2.2823%2C-5.3946%20-4.9796%2C-8.0919%20-11.8266%2C-8.7143%202.2132%2C-2.6973%204.4263%2C-5.3946%206.6395%2C-8.0919%205.5329%2C-0.6225%209.8209%2C4.1497%2010.3742%2C9.3368%20z%22%20id%3D%22path618%22%20style%3D%22fill%3Aurl(%23linearGradient622)%3Bfill-rule%3Aevenodd%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22m%2062.8679%2C12.1932%20-5.3946%2C6.847%202.9048%2C1.0374%205.3946%2C-6.432%20-2.9048%2C-1.4524%20z%22%20id%3D%22path623%22%20style%3D%22fill%3A%23ffffff%3Bfill-rule%3Aevenodd%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22m%2054.776%2C20.9076%20c%205.3946%2C-0.3458%209.1293%2C3.6656%2011.2041%2C8.2994%20-8.4377%2C13.6248%20-15.423%2C27.0422%20-29.6703%2C37.7622%200%2C0%20-3.5272%2C-10.1668%20-8.7143%2C-8.9218%206.432%2C-7.262%2021.3709%2C-28.0104%2027.1805%2C-37.1398%20z%22%20id%3D%22path624%22%20style%3D%22fill%3Aurl(%23linearGradient625)%3Bfill-rule%3Aevenodd%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22m%2029.6703%2C56.18%20c%201.2449%2C0.7608%202.4898%2C1.5215%203.7347%2C2.2823%20C%2042.5344%2C47.6039%2046.6841%2C36.5381%2058.9257%2C24.6423%2057.7499%2C23.8815%2056.5742%2C23.1208%2055.3984%2C22.36%2048.0673%2C35.0857%2039.6987%2C47.3965%2029.6703%2C56.18%20z%22%20id%3D%22path630%22%20style%3D%22fill%3A%23ffffff%3Bfill-rule%3Aevenodd%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22m%2034.7538%2C67.2805%20c%200.2074%2C-2.1786%20-0.3113%2C-3.7348%20-1.4525%2C-5.4984%20-1.5215%2C3.3889%20-3.873%2C5.8441%20-7.1582%2C6.6395%20-0.7262%2C0.6224%201.2449%2C1.9711%201.4524%2C3.216%201.8674%2C-1.1412%207.1583%2C-3.7347%207.1583%2C-4.3571%20z%22%20id%3D%22path631%22%20style%3D%22fill%3A%239c7850%3Bfill-rule%3Aevenodd%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%3Cscript%20xmlns%3D%22%22%2F%3E%3C%2Fsvg%3E") no-repeat 1em 1em; + } + aside a, + [role="complementary"] a { + color: #a7ccfc; + } +} aside h2, [role="complementary"] h2 { font-family: "OpenSans", "Helvetica", "Arial", sans-serif; @@ -778,6 +830,24 @@ aside h2, top: 0.4rem; } } +@media only screen and (min-width: 1px) and (max-width: 719px) and (prefers-color-scheme: dark) { + aside, + [role="complementary"] { + background: #555; + } + aside h2::before, + [role="complementary"] h2::before { + content: ""; + background: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3Csvg%20xmlns%3Adc%3D%22http%3A%2F%2Fpurl.org%2Fdc%2Felements%2F1.1%2F%22%20xmlns%3Acc%3D%22http%3A%2F%2Fcreativecommons.org%2Fns%23%22%20xmlns%3Ardf%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2F02%2F22-rdf-syntax-ns%23%22%20xmlns%3Asvg%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%20width%3D%2272pt%22%20height%3D%2272pt%22%20id%3D%22svg604%22%3E%0A%20%20%3Cmetadata%20id%3D%22metadata45%22%3E%0A%20%20%20%20%3Crdf%3ARDF%3E%0A%20%20%20%20%20%20%3Ccc%3AWork%20rdf%3Aabout%3D%22%22%3E%0A%20%20%20%20%20%20%20%20%3Cdc%3Aformat%3Eimage%2Fsvg%2Bxml%3C%2Fdc%3Aformat%3E%0A%20%20%20%20%20%20%20%20%3Cdc%3Atype%20rdf%3Aresource%3D%22http%3A%2F%2Fpurl.org%2Fdc%2Fdcmitype%2FStillImage%22%2F%3E%0A%20%20%20%20%20%20%20%20%3Cdc%3Atitle%2F%3E%0A%20%20%20%20%20%20%3C%2Fcc%3AWork%3E%0A%20%20%20%20%3C%2Frdf%3ARDF%3E%0A%20%20%3C%2Fmetadata%3E%0A%20%20%3Cdefs%20id%3D%22defs606%22%3E%0A%20%20%20%20%3ClinearGradient%20id%3D%22linearGradient612%22%3E%0A%20%20%20%20%20%20%3Cstop%20id%3D%22stop613%22%20style%3D%22stop-color%3A%237fa8e3%3Bstop-opacity%3A0.74117601%22%20offset%3D%220%22%2F%3E%0A%20%20%20%20%20%20%3Cstop%20id%3D%22stop614%22%20style%3D%22stop-color%3A%23ffffff%3Bstop-opacity%3A0%22%20offset%3D%221%22%2F%3E%0A%20%20%20%20%3C%2FlinearGradient%3E%0A%20%20%20%20%3ClinearGradient%20x1%3D%2250.643887%22%20y1%3D%225.3679295%22%20x2%3D%2235.752094%22%20y2%3D%2268.044357%22%20id%3D%22linearGradient615%22%20xlink%3Ahref%3D%22%23linearGradient612%22%20gradientUnits%3D%22userSpaceOnUse%22%20spreadMethod%3D%22pad%22%2F%3E%0A%20%20%3C%2Fdefs%3E%0A%20%20%3Cpath%20d%3D%22M%2012.8163%2C74.753%20C%2010.3856%2C73.6481%207.07107%2C70.1126%208.83884%2C65.2512%20L%2078.6656%2C20.8361%20c%201.9888%2C1.7678%203.5356%2C3.2041%201.9888%2C7.0711%20-1.1048%2C1.9887%20-14.2527%2C46.6248%20-14.4736%2C49.4975%20-0.8839%2C3.0936%20-3.425%2C6.8501%20-7.6235%2C6.6291%20-4.1984%2C-0.221%20-42.6474%2C-8.6179%20-45.741%2C-9.2808%20z%22%20transform%3D%22matrix(1.114903%2C0%2C0%2C1.114903%2C-5.305332%2C-3.889256)%22%20id%3D%22path794%22%20style%3D%22fill-opacity%3A0.30147125%3Bfill-rule%3Aevenodd%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M%2012.8163%2C74.753%20C%2010.3856%2C73.6481%207.07107%2C70.1126%208.83884%2C65.2512%209.72267%2C59.948%2025.6326%2C13.1021%2029.1682%2C10.8924%2031.3778%2C8.90368%2034.582%2C8.13026%2039.1119%2C9.34561%20c%203.7565%2C0.88389%2037.565%2C9.72279%2039.5537%2C11.49049%201.9888%2C1.7678%203.5356%2C3.2041%201.9888%2C7.0711%20-1.1048%2C1.9887%20-14.2527%2C46.6248%20-14.4736%2C49.4975%20-0.8839%2C3.0936%20-3.425%2C6.8501%20-7.6235%2C6.6291%20-4.1984%2C-0.221%20-42.6474%2C-8.6179%20-45.741%2C-9.2808%20z%22%20transform%3D%22matrix(1.114903%2C0%2C0%2C1.114903%2C-8.162471%2C-8.460684)%22%20id%3D%22path609%22%20style%3D%22fill%3A%233d4e67%3Bfill-rule%3Aevenodd%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M%2017.8987%2C70.9965%20C%2015.3576%2C70.3336%2011.7114%2C69.6706%2013.0373%2C65.6932%2015.468%2C55.9705%2027.8424%2C18.6264%2033.1456%2C13.986%20c%201.2154%2C-1.1049%205.3033%2C-1.5468%2013.0373%2C0.8839%208.8389%2C2.6516%2026.7375%2C8.6178%2028.5053%2C9.5017%201.7677%2C0.8839%202.4307%2C0.8839%201.1048%2C4.8614%20-1.9887%2C3.9775%20-10.8275%2C38.007%20-13.0373%2C43.7522%20-1.5467%2C4.088%20-1.8782%2C5.9662%20-4.5299%2C5.9662%22%20transform%3D%22matrix(1.114903%2C0%2C0%2C1.114903%2C-8.162471%2C-8.460684)%22%20id%3D%22path608%22%20style%3D%22fill%3A%23ffffff%3Bfill-rule%3Aevenodd%22%2F%3E%0A%20%20%3Cpath%20d%3D%22m%2028.75%2C13.75%20c%200%2C0%203.125%2C-6.25005%2010.9375%2C-4.37505%20C%2047.5%2C11.25%2078.125%2C19.375%2077.8125%2C21.875%2077.5%2C24.375%2071.875%2C39.0625%2071.5625%2C40.3125%2071.25%2C41.5625%2042.5%2C40.9375%2031.5625%2C47.5%2020.625%2C54.0625%2012.5%2C59.6875%2012.5%2C59.6875%20c%200%2C0%2011.25%2C-35%2016.25%2C-45.9375%20z%22%20transform%3D%22matrix(0.94678%2C0%2C0%2C0.94678%2C-0.480566%2C0.409517)%22%20id%3D%22path636%22%20style%3D%22fill%3Aurl(%23linearGradient615)%3Bfill-rule%3Aevenodd%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M%2029.2429%2C15.8991%2069.8423%2C26.6877%22%20transform%3D%22translate(1.135645%2C0.851736)%22%20id%3D%22path671%22%20style%3D%22fill%3Anone%3Bstroke%3A%2342667e%3Bstroke-width%3A1pt%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M%2027.8233%2C19.306%2067.8549%2C30.9464%22%20transform%3D%22matrix(0.999855%2C-0.01703691%2C0.01703691%2C0.999855%2C-0.705041%2C5.077353)%22%20id%3D%22path672%22%20style%3D%22fill%3Anone%3Bstroke%3A%2342667e%3Bstroke-width%3A1pt%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M%2029.2429%2C15.8991%2069.8423%2C26.6877%22%20transform%3D%22translate(-5.394323%2C17.0347)%22%20id%3D%22path673%22%20style%3D%22fill%3Anone%3Bstroke%3A%2342667e%3Bstroke-width%3A1pt%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M%2029.2429%2C15.8991%2069.8423%2C26.6877%22%20transform%3D%22translate(-11.35647%2C34.0694)%22%20id%3D%22path675%22%20style%3D%22fill%3Anone%3Bstroke%3A%2342667e%3Bstroke-width%3A1pt%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M%2027.8233%2C19.306%2067.8549%2C30.9464%22%20transform%3D%22matrix(0.999855%2C-0.01703691%2C0.01703691%2C0.999855%2C-13.19715%2C38.29502)%22%20id%3D%22path676%22%20style%3D%22fill%3Anone%3Bstroke%3A%2342667e%3Bstroke-width%3A1pt%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M%2027.8233%2C19.306%2067.8549%2C30.9464%22%20transform%3D%22matrix(0.999855%2C-0.01703691%2C0.01703691%2C0.999855%2C-7.235008%2C21.26032)%22%20id%3D%22path674%22%20style%3D%22fill%3Anone%3Bstroke%3A%2342667e%3Bstroke-width%3A1pt%22%2F%3E%0A%20%20%3Cg%20id%3D%22g666%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22m%2044.8581%2C15.0473%20c%20-3.4478%2C0%20-5.1105%2C-2.5484%20-5.1105%2C-6.38799%200%2C-3.83962%202.7983%2C-6.95584%206.2461%2C-6.95584%203.4478%2C0%204.5425%2C1.12884%204.5425%2C4.96845%22%20transform%3D%22matrix(0.948718%2C0%2C0%2C1%2C4.011168%2C0.567827)%22%20id%3D%22path667%22%20style%3D%22fill%3Anone%3Bstroke%3A%234f4f4f%3Bstroke-width%3A2.875%3Bstroke-linecap%3Around%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22m%2044.8581%2C14.7634%20c%20-3.4478%2C0%20-5.3944%2C-2.2645%20-5.3944%2C-6.10409%200%2C-3.83962%202.7983%2C-7.807574%206.2461%2C-7.807574%203.4478%2C0%204.8264%2C1.980574%204.8264%2C5.820184%22%20transform%3D%22matrix(0.948718%2C0%2C0%2C1%2C4.011168%2C0.567827)%22%20id%3D%22path668%22%20style%3D%22fill%3Anone%3Bstroke%3A%23c2c2c2%3Bstroke-width%3A0.625%3Bstroke-linecap%3Around%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%20%20%3Cuse%20transform%3D%22translate(10.788642%2C1.987381)%22%20id%3D%22use669%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2290%22%20height%3D%2290%22%20xlink%3Ahref%3D%22%23g666%22%2F%3E%0A%20%20%3Cg%20transform%3D%22matrix(0.69841%2C0%2C0%2C0.69841%2C31.4038%2C0.671206)%22%20id%3D%22g677%22%3E%0A%20%20%20%20%3Cdefs%20id%3D%22defs611%22%3E%0A%20%20%20%20%20%20%3ClinearGradient%20id%3D%22linearGradient626%22%3E%0A%20%20%20%20%20%20%20%20%3Cstop%20id%3D%22stop627%22%20style%3D%22stop-color%3A%23b5772d%3Bstop-opacity%3A1%22%20offset%3D%220%22%2F%3E%0A%20%20%20%20%20%20%20%20%3Cstop%20id%3D%22stop628%22%20style%3D%22stop-color%3A%23ffffff%3Bstop-opacity%3A0%22%20offset%3D%221%22%2F%3E%0A%20%20%20%20%20%20%3C%2FlinearGradient%3E%0A%20%20%20%20%20%20%3ClinearGradient%20id%3D%22linearGradient619%22%3E%0A%20%20%20%20%20%20%20%20%3Cstop%20id%3D%22stop620%22%20style%3D%22stop-color%3A%23770000%3Bstop-opacity%3A1%22%20offset%3D%220%22%2F%3E%0A%20%20%20%20%20%20%20%20%3Cstop%20id%3D%22stop621%22%20style%3D%22stop-color%3A%23ffffff%3Bstop-opacity%3A0%22%20offset%3D%221%22%2F%3E%0A%20%20%20%20%20%20%3C%2FlinearGradient%3E%0A%20%20%20%20%20%20%3ClinearGradient%20x1%3D%2266.331696%22%20y1%3D%2223.212469%22%20x2%3D%2263.465496%22%20y2%3D%2220.962799%22%20id%3D%22linearGradient622%22%20xlink%3Ahref%3D%22%23linearGradient619%22%20gradientUnits%3D%22userSpaceOnUse%22%20gradientTransform%3D%22scale(1.004516%2C0.995504)%22%20spreadMethod%3D%22pad%22%2F%3E%0A%20%20%20%20%20%20%3ClinearGradient%20x1%3D%2256.327614%22%20y1%3D%2243.377247%22%20x2%3D%2251.654526%22%20y2%3D%2239.762909%22%20id%3D%22linearGradient625%22%20xlink%3Ahref%3D%22%23linearGradient626%22%20gradientUnits%3D%22userSpaceOnUse%22%20gradientTransform%3D%22scale(0.912664%2C1.095694)%22%20spreadMethod%3D%22pad%22%2F%3E%0A%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%3Cpath%20d%3D%22M%209.33685%2C82.1156%20C%2017.9129%2C79.7641%2030.9112%2C77.5637%2040.1097%2C71.8924%2056.9851%2C62.0714%2066.0118%2C41.6332%2076.4551%2C25.5877%2077.285%2C12.3086%2064.1128%2C5.96872%2059.1331%2C8.87345%2046.4766%2C25.4722%2037.5548%2C43.5235%2023.4458%2C55.9725%2019.0886%2C66.5542%209.12934%2C82.738%209.33685%2C82.1156%20z%22%20transform%3D%22translate(3.814559%2C2.934275)%22%20id%3D%22path632%22%20style%3D%22fill-opacity%3A0.28318601%3Bfill-rule%3Aevenodd%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M%209.33685%2C82.1156%20C%2017.9129%2C79.7641%2028.5638%2C74.9228%2037.7623%2C69.2516%2054.6377%2C59.4306%2064.2512%2C38.4055%2074.6945%2C22.36%2075.5244%2C9.08092%2064.1128%2C5.96872%2059.1331%2C8.87345%2046.4766%2C25.4722%2037.5548%2C43.5235%2023.4458%2C55.9725%2019.0886%2C66.5542%209.12934%2C82.738%209.33685%2C82.1156%20z%22%20id%3D%22path617%22%20style%3D%22fill-rule%3Aevenodd%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22m%2071.9972%2C20.9076%20c%20-1.729%2C2.4898%20-3.4581%2C4.9796%20-5.1871%2C7.4694%20-2.2823%2C-5.3946%20-4.9796%2C-8.0919%20-11.8266%2C-8.7143%202.2132%2C-2.6973%204.4263%2C-5.3946%206.6395%2C-8.0919%205.5329%2C-0.6225%209.8209%2C4.1497%2010.3742%2C9.3368%20z%22%20id%3D%22path613%22%20style%3D%22fill%3A%23be6d6d%3Bfill-rule%3Aevenodd%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22m%2054.776%2C20.9076%20c%205.3946%2C-0.3458%209.1293%2C3.6656%2011.2041%2C8.2994%20-8.4377%2C13.6248%20-15.423%2C27.0422%20-29.6703%2C37.7622%200%2C0%20-3.5272%2C-10.1668%20-8.7143%2C-8.9218%206.432%2C-7.262%2021.3709%2C-28.0104%2027.1805%2C-37.1398%20z%22%20id%3D%22path614%22%20style%3D%22fill%3A%23ffbc24%3Bfill-rule%3Aevenodd%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22m%2027.0767%2C58.6698%20c%204.6684%2C-0.2421%208.6106%2C5.3255%207.5732%2C8.7144%20-2.0057%2C1.5215%20-5.2562%2C3.0431%20-7.2619%2C4.5646%20-0.3458%2C-2.7664%20-2.144%2C-4.9104%20-6.0171%2C-4.5646%201.729%2C-2.974%203.9768%2C-5.7404%205.7058%2C-8.7144%20z%22%20id%3D%22path615%22%20style%3D%22fill%3A%23e9dbb9%3Bfill-rule%3Aevenodd%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22m%2021.7859%2C66.9692%20c%203.5618%2C-0.8299%205.0488%2C2.6973%205.8096%2C4.7722%20l%20-13.2791%2C6.017%207.4695%2C-10.7892%20z%22%20id%3D%22path616%22%20style%3D%22fill%3A%23586f93%3Bfill-rule%3Aevenodd%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22m%2071.9972%2C20.9076%20c%20-1.729%2C2.4898%20-3.4581%2C4.9796%20-5.1871%2C7.4694%20-2.2823%2C-5.3946%20-4.9796%2C-8.0919%20-11.8266%2C-8.7143%202.2132%2C-2.6973%204.4263%2C-5.3946%206.6395%2C-8.0919%205.5329%2C-0.6225%209.8209%2C4.1497%2010.3742%2C9.3368%20z%22%20id%3D%22path618%22%20style%3D%22fill%3Aurl(%23linearGradient622)%3Bfill-rule%3Aevenodd%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22m%2062.8679%2C12.1932%20-5.3946%2C6.847%202.9048%2C1.0374%205.3946%2C-6.432%20-2.9048%2C-1.4524%20z%22%20id%3D%22path623%22%20style%3D%22fill%3A%23ffffff%3Bfill-rule%3Aevenodd%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22m%2054.776%2C20.9076%20c%205.3946%2C-0.3458%209.1293%2C3.6656%2011.2041%2C8.2994%20-8.4377%2C13.6248%20-15.423%2C27.0422%20-29.6703%2C37.7622%200%2C0%20-3.5272%2C-10.1668%20-8.7143%2C-8.9218%206.432%2C-7.262%2021.3709%2C-28.0104%2027.1805%2C-37.1398%20z%22%20id%3D%22path624%22%20style%3D%22fill%3Aurl(%23linearGradient625)%3Bfill-rule%3Aevenodd%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22m%2029.6703%2C56.18%20c%201.2449%2C0.7608%202.4898%2C1.5215%203.7347%2C2.2823%20C%2042.5344%2C47.6039%2046.6841%2C36.5381%2058.9257%2C24.6423%2057.7499%2C23.8815%2056.5742%2C23.1208%2055.3984%2C22.36%2048.0673%2C35.0857%2039.6987%2C47.3965%2029.6703%2C56.18%20z%22%20id%3D%22path630%22%20style%3D%22fill%3A%23ffffff%3Bfill-rule%3Aevenodd%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22m%2034.7538%2C67.2805%20c%200.2074%2C-2.1786%20-0.3113%2C-3.7348%20-1.4525%2C-5.4984%20-1.5215%2C3.3889%20-3.873%2C5.8441%20-7.1582%2C6.6395%20-0.7262%2C0.6224%201.2449%2C1.9711%201.4524%2C3.216%201.8674%2C-1.1412%207.1583%2C-3.7347%207.1583%2C-4.3571%20z%22%20id%3D%22path631%22%20style%3D%22fill%3A%239c7850%3Bfill-rule%3Aevenodd%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%3Cscript%20xmlns%3D%22%22%2F%3E%3C%2Fsvg%3E"); + width: 2rem; + height: 2rem; + display: inline-block; + background-size: contain; + background-repeat: no-repeat; + position: relative; + top: 0.4rem; + } +} aside h3, [role="complementary"] h3 { color: #9999ff; diff --git a/css/showcode.css b/css/showcode.css index 5aa483a5..4c3570af 100644 --- a/css/showcode.css +++ b/css/showcode.css @@ -247,3 +247,14 @@ h4.showcode__heading { figure.wide .showcode__example { margin-bottom: -2.5rem; } +@media (prefers-color-scheme: dark) { + .showcode__ui { + background-color: #444; + } + .showcode__steps { + background-color: #222; + } + .showcode__steps select { + background-color: #ccc; + } +} diff --git a/css/site.css b/css/site.css index 1acb5040..d5ad6a57 100644 --- a/css/site.css +++ b/css/site.css @@ -248,6 +248,11 @@ .enable-stats__heading-icon { margin: 0 0.9375rem 0 0; } +.enable-stats__icon-dark { + height: 1.875rem; + margin: 0px 15px 5px 0px; + display: none; +} .enable-stats__label { display: inline-block; text-align: left; @@ -265,3 +270,36 @@ .enable-flyout__open-menu-button { margin-top: -3px; } +@media (prefers-color-scheme: dark) { + .enable-stats__desc { + color: white; + } + .enable-stats a { + color: #d6e0eb; + } + .enable-stats__desc--scratch { + background-color: #3c4c3d; + } + .enable-stats__desc--integrate { + background-color: #7d5d12; + } + .enable-stats__desc--npm { + background-color: #516664; + } + .enable-stats__desc--do-not { + background-color: #763f56; + } + .enable-stats__desc--style { + background-color: #432155; + } + .enable-stats__icon { + height: 1.875rem; + margin: 0px 15px 5px 0px; + display: none; + } + .enable-stats__icon-dark { + height: 1.875rem; + margin: 0px 15px 5px 0px; + display: inline-block; + } +} diff --git a/css/table.css b/css/table.css index bffb6646..732cf374 100644 --- a/css/table.css +++ b/css/table.css @@ -147,6 +147,20 @@ table [role="row"]:nth-child(2n), [role="table"] [role="row"]:nth-child(2n) { background-color: #cccccc; } +@media (prefers-color-scheme: dark) { + table tr, + [role="table"] tr, + table [role="row"], + [role="table"] [role="row"] { + background-color: #222; + } + table tr:nth-child(2n), + [role="table"] tr:nth-child(2n), + table [role="row"]:nth-child(2n), + [role="table"] [role="row"]:nth-child(2n) { + background-color: #282828; + } +} table [role="rowgroup"], [role="table"] [role="rowgroup"] { display: table-row-group; diff --git a/css/tabs.css b/css/tabs.css index 13d48bf0..dfdbcdde 100644 --- a/css/tabs.css +++ b/css/tabs.css @@ -146,3 +146,14 @@ [role="tab"] { appearance: none; } +@media (prefers-color-scheme: dark) { + [role="tabpanel"] h2 { + color: #333; + } + [role="tabpanel"] p { + color: #333; + } + [role="tabpanel"] a { + color: #075ac4; + } +} diff --git a/css/textbox.css b/css/textbox.css index c28a7087..115e8aad 100644 --- a/css/textbox.css +++ b/css/textbox.css @@ -28,6 +28,12 @@ textarea, fieldset div { margin-bottom: 10px; } +@media (prefers-color-scheme: dark) { + [role="group"], + fieldset { + background-color: #333; + } +} .enable-character-count { display: block; margin-left: 45%; diff --git a/images/dark-mode-example/DarkMode_Android.png b/images/dark-mode-example/DarkMode_Android.png new file mode 100644 index 00000000..a6f70106 Binary files /dev/null and b/images/dark-mode-example/DarkMode_Android.png differ diff --git a/images/dark-mode-example/DarkMode_MacOS.png b/images/dark-mode-example/DarkMode_MacOS.png new file mode 100644 index 00000000..34a94859 Binary files /dev/null and b/images/dark-mode-example/DarkMode_MacOS.png differ diff --git a/images/dark-mode-example/DarkMode_Ubuntu.png b/images/dark-mode-example/DarkMode_Ubuntu.png new file mode 100644 index 00000000..f26ef161 Binary files /dev/null and b/images/dark-mode-example/DarkMode_Ubuntu.png differ diff --git a/images/dark-mode-example/DarkMode_Windows.png b/images/dark-mode-example/DarkMode_Windows.png new file mode 100644 index 00000000..19b6cdae Binary files /dev/null and b/images/dark-mode-example/DarkMode_Windows.png differ diff --git a/images/dark-mode-example/DarkMode_iOS.png b/images/dark-mode-example/DarkMode_iOS.png new file mode 100644 index 00000000..9e237571 Binary files /dev/null and b/images/dark-mode-example/DarkMode_iOS.png differ diff --git a/images/dark-mode-example/badContrast_credits.png b/images/dark-mode-example/badContrast_credits.png new file mode 100644 index 00000000..c622ed45 Binary files /dev/null and b/images/dark-mode-example/badContrast_credits.png differ diff --git a/images/dark-mode-example/goodContrast_credits.png b/images/dark-mode-example/goodContrast_credits.png new file mode 100644 index 00000000..d507695e Binary files /dev/null and b/images/dark-mode-example/goodContrast_credits.png differ diff --git a/images/icons/do-not-dark.svg b/images/icons/do-not-dark.svg new file mode 100644 index 00000000..b4372c99 --- /dev/null +++ b/images/icons/do-not-dark.svg @@ -0,0 +1,4 @@ + + + + diff --git a/images/icons/integrate-dark.svg b/images/icons/integrate-dark.svg new file mode 100644 index 00000000..b824e310 --- /dev/null +++ b/images/icons/integrate-dark.svg @@ -0,0 +1,50 @@ + + + + + + + + + diff --git a/images/icons/new-window_darkmode.svg b/images/icons/new-window_darkmode.svg new file mode 100644 index 00000000..e334cc2b --- /dev/null +++ b/images/icons/new-window_darkmode.svg @@ -0,0 +1,8 @@ + + + + new window + + + + \ No newline at end of file diff --git a/images/icons/recommend-dark.svg b/images/icons/recommend-dark.svg new file mode 100644 index 00000000..73b2a7c8 --- /dev/null +++ b/images/icons/recommend-dark.svg @@ -0,0 +1,4 @@ + + + + diff --git a/images/icons/style-dark.svg b/images/icons/style-dark.svg new file mode 100644 index 00000000..5f617bdf --- /dev/null +++ b/images/icons/style-dark.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/images/main-menu/dark-mode.png b/images/main-menu/dark-mode.png new file mode 100644 index 00000000..063393a7 Binary files /dev/null and b/images/main-menu/dark-mode.png differ diff --git a/images/main-menu/dark-mode.webp b/images/main-menu/dark-mode.webp new file mode 100644 index 00000000..34b9ccea Binary files /dev/null and b/images/main-menu/dark-mode.webp differ diff --git a/images/minus-dark.svg b/images/minus-dark.svg new file mode 100644 index 00000000..a5a06238 --- /dev/null +++ b/images/minus-dark.svg @@ -0,0 +1 @@ +Amit Jakhu \ No newline at end of file diff --git a/images/plus-dark.svg b/images/plus-dark.svg new file mode 100644 index 00000000..f38e5fab --- /dev/null +++ b/images/plus-dark.svg @@ -0,0 +1 @@ +Amit Jakhu \ No newline at end of file diff --git a/images/posters/dark-mode.jpg b/images/posters/dark-mode.jpg new file mode 100644 index 00000000..b4f99c5c Binary files /dev/null and b/images/posters/dark-mode.jpg differ diff --git a/images/simple-checkmark_darkmode.svg b/images/simple-checkmark_darkmode.svg new file mode 100644 index 00000000..134b3475 --- /dev/null +++ b/images/simple-checkmark_darkmode.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/less/bookmarklets.less b/less/bookmarklets.less index 50713819..fc27f6db 100644 --- a/less/bookmarklets.less +++ b/less/bookmarklets.less @@ -7,3 +7,13 @@ main strong { background: white; } + +@media (prefers-color-scheme: dark) { + main strong { + background: #222; + } + + .enable-drawer { + background-color: #222; + } +} diff --git a/less/button.less b/less/button.less index e9bbf01f..7283b4a8 100755 --- a/less/button.less +++ b/less/button.less @@ -34,3 +34,9 @@ height: 0px; overflow: hidden; } + +@media (prefers-color-scheme: dark) { + .button-container button[aria-disabled="true"] { + opacity: 0.7; + } +} diff --git a/less/dropdown.less b/less/dropdown.less index 457994ba..4e660602 100755 --- a/less/dropdown.less +++ b/less/dropdown.less @@ -20,6 +20,12 @@ padding-left: (25 / @px); background-repeat: no-repeat; + @media (prefers-color-scheme: dark) { + color: #fff; + background-color: #222; + background-image: data-uri("../images/plus-dark.svg"); + } + .remove-default-details-styles(); &:hover { @@ -30,6 +36,10 @@ &[open] > .enable-drawer__button, & .enable-drawer__button[aria-expanded="true"] { background-image: data-uri("../images/minus.svg"); + + @media (prefers-color-scheme: dark) { + background-image: data-uri("../images/minus-dark.svg"); + } } } @@ -96,6 +106,11 @@ border: solid 1px #ccc; background-color: white; + @media (prefers-color-scheme: dark) { + background-color: #222; + border: solid 1px #777; + } + .remove-default-details-styles(); } diff --git a/less/enable-flyout.less b/less/enable-flyout.less index 325d4df2..22d75e21 100644 --- a/less/enable-flyout.less +++ b/less/enable-flyout.less @@ -255,6 +255,13 @@ position: relative; z-index: 2; } + + &:visited { + color: @color0; + @media (prefers-color-scheme: dark) { + color: @color0; + } + } } &__open-level-button { @@ -622,6 +629,11 @@ background: white; color: black; width: 100%; + + @media (prefers-color-scheme: dark) { + color: white; + background: #222; + } } &__menu-item { @@ -645,6 +657,11 @@ transform: scale(1.2); font-weight: bold; background: white; + + @media (prefers-color-scheme: dark) { + color: white; + background: #222; + } } } @@ -698,11 +715,20 @@ color: black; text-align: center; + @media (prefers-color-scheme: dark) { + color: white; + background: #222; + } + .enable-flyout__open-level-button, .enable-flyout__close-level-button, .enable-flyout__link { color: black; + @media (prefers-color-scheme: dark) { + color: white; + } + &::after { filter: none; } diff --git a/less/enable-listbox.less b/less/enable-listbox.less index 5206596a..082f07b3 100755 --- a/less/enable-listbox.less +++ b/less/enable-listbox.less @@ -100,3 +100,22 @@ display: none; } } + +@media (prefers-color-scheme: dark) { + .enable-listbox { + background: #444; + border: 1px solid #222; + + [role="listbox"] { + background: #222; + } + + [role="option"]:focus { + background: #0a4481; + } + + button { + background: #ccc; + } + } +} diff --git a/less/enable-slider.less b/less/enable-slider.less index 7ee9ae39..fd1a1293 100755 --- a/less/enable-slider.less +++ b/less/enable-slider.less @@ -507,3 +507,40 @@ input[type="range"] { padding-left: 1em; } } + +@media (prefers-color-scheme: dark) { + .enable-slider { + &--horizontal { + background-color: #000014; + border: 2px solid #eee; + + .enable-slider__handle { + background-color: #6c6c6c; + border: 1px solid #eee; + } + } + &__slider-range { + background-color: #8f8fff; + } + &__number-fallback { + background: black; + color: white; + } + &__handle { + &:focus, + &:active, + &.focus & { + background-color: #999 !important; + } + } + &__button { + background: darkgreen; + } + } + + .html-slider__multi--container { + &::after { + background: white; + } + } +} diff --git a/less/enable-toc.less b/less/enable-toc.less index be7b8133..5f8dcb7f 100644 --- a/less/enable-toc.less +++ b/less/enable-toc.less @@ -164,3 +164,39 @@ } } } + +@media (prefers-color-scheme: dark) { + .enable-toc { + background-color: #222; + + &__move-tosidebar-button { + background-color: #333; + color: white; + + &:hover { + background-color: #111; + } + } + + &__hide-sidebar-button { + background-color: #333; + color: white; + + &:hover { + background-color: #111; + } + } + + &__link { + color: #4593f8; + + &:visited { + color: #4593f8; + } + } + + .enable-drawer__button { + background-color: #222; + } + } +} \ No newline at end of file diff --git a/less/enable-visible-on-focus.less b/less/enable-visible-on-focus.less index ae51e9b4..0ad45893 100644 --- a/less/enable-visible-on-focus.less +++ b/less/enable-visible-on-focus.less @@ -113,3 +113,15 @@ color: #330000; } } + +@media (prefers-color-scheme: dark) { + .fake-component { + background: #222; + color: white; + border: solid 1px #111; + + a { + color: #fdfbcc; + } + } +} diff --git a/less/figure.less b/less/figure.less index 88722fd5..96c093cf 100755 --- a/less/figure.less +++ b/less/figure.less @@ -104,3 +104,18 @@ a.tile-cta { text-align: right; } } + +@media (prefers-color-scheme: dark) { + figure { + background: #222; + } + + figure, + [role="figure"] { + background: #222; + color: #ccc; + a { + color: #80b5f9; + } + } +} diff --git a/less/focus-styling.less b/less/focus-styling.less index e80334c7..b709e548 100644 --- a/less/focus-styling.less +++ b/less/focus-styling.less @@ -26,3 +26,15 @@ ); } } + +@media (prefers-color-scheme: dark) { + #double-focus-ring-example { + a { + background: #7d5d12; + color: #c9e0fd; + } + a:visited { + color: #c589f9; + } + } +} diff --git a/less/form-error.less b/less/form-error.less index 83809b49..5a1e7364 100755 --- a/less/form-error.less +++ b/less/form-error.less @@ -150,6 +150,10 @@ top: -1.5em; display: block; } + + @media (prefers-color-scheme: dark) { + background-color: #222; + } } [role="radio"], @@ -217,3 +221,13 @@ color: #e60000; } } + +@media (prefers-color-scheme: dark) { + .enable-form-example label.required::after { + color: #ff6a6a; + } + + .enable-form-example .required-symbol { + color: #ff6a6a; + } +} diff --git a/less/form.less b/less/form.less index ff7ae189..7486cc2a 100755 --- a/less/form.less +++ b/less/form.less @@ -39,6 +39,10 @@ fieldset, top: -1.5em; margin-bottom: 0px !important; } + + @media (prefers-color-scheme: dark) { + background-color: #333; + } } /* These are styles just for the global error */ @@ -56,3 +60,9 @@ fieldset, margin-right: 0.5em; } } + +@media (prefers-color-scheme: dark) { + .error { + color: #ff6a6a; + } +} diff --git a/less/heading.less b/less/heading.less index 9b8e7761..acc74cbe 100755 --- a/less/heading.less +++ b/less/heading.less @@ -65,6 +65,10 @@ div.heading-example { text-shadow: 0 2px white, 0 3px #777; + + @media (prefers-color-scheme: dark) { + color: #ccc; + } } h2, @@ -75,6 +79,10 @@ div.heading-example { font-weight: normal; font-family: "Orienta", sans-serif; border: none; + + @media (prefers-color-scheme: dark) { + color: #ddd; + } } h2, @@ -100,6 +108,10 @@ div.heading-example { font-family: "Orienta", sans-serif; letter-spacing: 1px; font-style: italic; + + @media (prefers-color-scheme: dark) { + color: #ddd; + } } h3, @@ -120,6 +132,10 @@ div.heading-example { color: #343434; font-weight: normal; font-family: "Orienta", sans-serif; + + @media (prefers-color-scheme: dark) { + color: #ddd; + } } h4, @@ -133,3 +149,13 @@ div.heading-example { line-height: 20 * (18 / @h7-size); } } + +@media (prefers-color-scheme: dark) { + body { + background: #222; + } + + div.heading-example { + text-shadow: 0 2px 0 rgba(32, 32, 32, 0.7); + } +} diff --git a/less/home.less b/less/home.less index 7097e054..8e5ffb03 100755 --- a/less/home.less +++ b/less/home.less @@ -48,3 +48,13 @@ body.with-open-dyslexia { #dyslexia-switch__label { font-family: "OpenDyslexic", sans-serif; } + +@media (prefers-color-scheme: dark) { + a { + color: #4593f8; + } + + a:visited { + color: #c589f9; + } +} diff --git a/less/img.less b/less/img.less index 127bb860..07c8e0f8 100755 --- a/less/img.less +++ b/less/img.less @@ -164,3 +164,11 @@ margin-top: 120px; } } + +@media (prefers-color-scheme: dark) { + #icon-font-example { + section a { + color: #ccc; + } + } +} diff --git a/less/index.less b/less/index.less index 4891700d..1b775f00 100644 --- a/less/index.less +++ b/less/index.less @@ -213,3 +213,50 @@ strong { } } } + +@media (prefers-color-scheme: dark) { + /*Enable intro section*/ + .homepage__hero--heading { + color: #ccffcc; + } + .homepage__hero { + color: #dabebe; + background: #222222; + } + + /*3 components after header section*/ + main { + background-color: #111111; + } + + a { + color: #4593f8; + } + + /* Bottom copy heading*/ + .homepage__bottom-copy--heading { + color: #eeeeee; + } + + /*What makes enable diff & found a bug section*/ + .homepage__bottom-copy { + background: #222; + color: #ccc; + } + .homepage__bottom-copy strong { + color: #ccc !important; + } + + /*Want to donate code section*/ + .homepage__bottom-copy:nth-child(2n) { + background: #444; + + a { + color: #7db4fa; + + &:visited { + color: #c589f9; + } + } + } +} diff --git a/less/link.less b/less/link.less index 50cdc785..5d019b7f 100755 --- a/less/link.less +++ b/less/link.less @@ -15,6 +15,28 @@ a[target="_blank"] { .new-window-icon { height: (12 / @px); + display: inline; + } + + .new-window-icon-dark { + height: (12 / @px); + display: none; + } + + @media (prefers-color-scheme: dark) { + color: #a8c7fa; + + &:visited { + color: #4593f8; + } + + .new-window-icon { + display: none; + } + + .new-window-icon-dark { + display: inline; + } } } @@ -47,5 +69,13 @@ nav.breadcrumb { color: #000; font-weight: 700; text-decoration: none; + + @media (prefers-color-scheme: dark) { + color: #fff; + } + } + + @media (prefers-color-scheme: dark) { + background: #282828; } } diff --git a/less/product-tile.less b/less/product-tile.less index 366a4914..fd72e3f6 100644 --- a/less/product-tile.less +++ b/less/product-tile.less @@ -62,3 +62,25 @@ } } } + +@media (prefers-color-scheme: dark) { + .product-tile { + color: white; + border: solid 1px #555; + + &__badge { + background: #555; + } + + del, + ins, + mark { + color: white; + } + + del, + mark.del { + color: white; + } + } +} diff --git a/less/radiogroup.less b/less/radiogroup.less index 6dd93f25..9fc44488 100755 --- a/less/radiogroup.less +++ b/less/radiogroup.less @@ -152,3 +152,9 @@ fieldset, text-align: left; } } + +@media (prefers-color-scheme: dark) { + .enable-radio [type="radio"] + label { + color: #ddd; + } +} diff --git a/less/shared/defaults.less b/less/shared/defaults.less index a0abe60b..ccb85cd4 100755 --- a/less/shared/defaults.less +++ b/less/shared/defaults.less @@ -397,11 +397,65 @@ iframe { }); } -/* @media (prefers-color-scheme: dark) { - body { - background: #000; - color: rgb(201, 209, 217); - } + .example main { + background: #222222; + color: #ccc; + } + + body { + color: #ccc; + background-color: #222222; + } + + h1 { + color: #ccc; + } + + h2 { + color: #ccc; + } + + h3 { + color: #ccc; + } + + p { + color: #ccc; + } + + .enable-quote { + background: #444; + } + + code { + background-color: #111; + } + + strong { + color: #ccc; + } + + a { + color: #4593f8; + } + + a:visited { + color: #c589f9; + } + + .heading__deeplink { + color: #ccc; + &:visited { + color: #ccc; + } + } + + .enable-example { + border: solid 1px #eee; + border-left: solid 5px #eee; + span { + color: #ccc; + } + } } -*/ diff --git a/less/shared/landmarks.less b/less/shared/landmarks.less index 62ca4d58..36f16691 100755 --- a/less/shared/landmarks.less +++ b/less/shared/landmarks.less @@ -170,6 +170,15 @@ aside, box-shadow: 4px 4px 0 black; line-height: 1.4; + @media (prefers-color-scheme: dark) { + background: #555 data-uri("../../images/notepad-icon.svg") no-repeat 1em + 1em; + + a { + color: #a7ccfc; + } + } + max-width: 1024px; h2 { @@ -196,6 +205,24 @@ aside, top: 0.4rem; } } + + @media (prefers-color-scheme: dark) { + background: #555; + + h2 { + &::before { + content: ""; + background: data-uri("../../images/notepad-icon.svg"); + width: 2rem; + height: 2rem; + display: inline-block; + background-size: contain; + background-repeat: no-repeat; + position: relative; + top: 0.4rem; + } + } + } } h3 { diff --git a/less/showcode.less b/less/showcode.less index bf757247..bd56561c 100755 --- a/less/showcode.less +++ b/less/showcode.less @@ -359,3 +359,15 @@ code { margin-bottom: -2.5rem; } } + +@media (prefers-color-scheme: dark) { + .showcode__ui { + background-color: #444; + } + .showcode__steps { + background-color: #222; + } + .showcode__steps select { + background-color: #ccc; + } +} diff --git a/less/site.less b/less/site.less index 78bdbbc1..c09c17a2 100644 --- a/less/site.less +++ b/less/site.less @@ -308,6 +308,12 @@ margin: 0 (15 / @px) 0 0; } + &__icon-dark { + height: (30 / @px); + margin: 0px 15px 5px 0px; + display: none; + } + &__label { display: inline-block; text-align: left; @@ -329,3 +335,47 @@ .enable-flyout__open-menu-button { margin-top: -3px; } + +@media (prefers-color-scheme: dark) { + .enable-stats__desc { + color: white; + } + + .enable-stats { + a { + color: #d6e0eb; + } + } + + .enable-stats__desc--scratch { + background-color: #3c4c3d; + } + + .enable-stats__desc--integrate { + background-color: #7d5d12; + } + + .enable-stats__desc--npm { + background-color: #516664; + } + + .enable-stats__desc--do-not { + background-color: #763f56; + } + + .enable-stats__desc--style { + background-color: #432155; + } + + .enable-stats__icon { + height: (30 / @px); + margin: 0px 15px 5px 0px; + display: none; + } + + .enable-stats__icon-dark { + height: (30 / @px); + margin: 0px 15px 5px 0px; + display: inline-block; + } +} diff --git a/less/table.less b/less/table.less index 2c8f3fbb..0f2656fd 100755 --- a/less/table.less +++ b/less/table.less @@ -144,6 +144,14 @@ table, &:nth-child(2n) { background-color: #cccccc; } + + @media (prefers-color-scheme: dark) { + background-color: #222; + + &:nth-child(2n) { + background-color: #282828; + } + } } [role="rowgroup"] { diff --git a/less/tabs.less b/less/tabs.less index 09092124..ef387f6f 100755 --- a/less/tabs.less +++ b/less/tabs.less @@ -162,3 +162,17 @@ [role="tab"] { appearance: none; } + +@media (prefers-color-scheme: dark) { + [role="tabpanel"] { + h2 { + color: #333; + } + p { + color: #333; + } + a { + color: #075ac4 + } + } +} diff --git a/less/textbox.less b/less/textbox.less index f70dca26..b45461aa 100755 --- a/less/textbox.less +++ b/less/textbox.less @@ -34,6 +34,10 @@ fieldset { div { margin-bottom: 10px; } + + @media (prefers-color-scheme: dark) { + background-color: #333; + } } .enable-character-count { diff --git a/package.json b/package.json index 10114d99..16e93367 100644 --- a/package.json +++ b/package.json @@ -150,7 +150,7 @@ "wicg-inert": "^3.1.2" }, "lint-staged": { - "*.{js,jsx,ts,tsx,css,less}": [ + "*.{js,jsx,ts,tsx,less}": [ "eslint", "npm run stylelint" ], diff --git a/php-list.txt b/php-list.txt index 68d463a8..bd370eaa 100644 --- a/php-list.txt +++ b/php-list.txt @@ -5,6 +5,7 @@ button.php carousel.php checkbox.php combobox.php +dark-mode.php description-list.php dialog.php dropdown.php diff --git a/sitemap.txt b/sitemap.txt index 635f0562..cb39a69a 100644 --- a/sitemap.txt +++ b/sitemap.txt @@ -7,6 +7,7 @@ https://www.useragentman.com/enable/button.php https://www.useragentman.com/enable/carousel.php https://www.useragentman.com/enable/checkbox.php https://www.useragentman.com/enable/combobox.php +https://www.useragentman.com/enable/dark-mode.php https://www.useragentman.com/enable/description-list.php https://www.useragentman.com/enable/dialog.php https://www.useragentman.com/enable/dropdown.php diff --git a/templates/data/meta-info.json b/templates/data/meta-info.json index b99b6090..ea734dfd 100644 --- a/templates/data/meta-info.json +++ b/templates/data/meta-info.json @@ -191,6 +191,10 @@ "desc": "One exception to the First Rule of ARIA is HTML5 autocomplete using the datalist tag, which is not as accessible as the ARIA datalist role", "isNPM": "true" }, + "dark-mode.php": { + "title": "Dark Mode", + "desc": "This page will show you how to ensure your website has proper contrast as well as the overall function for dark mode." + }, "date.php": { "title": "Accessible Date Widget", "desc": "Depending on the browser, the HTML5 is not keyboard/screen reader friendly. What is a web developer to do? ", diff --git a/templates/includes/documentation-header.php b/templates/includes/documentation-header.php index a8d07a67..ca0211a6 100755 --- a/templates/includes/documentation-header.php +++ b/templates/includes/documentation-header.php @@ -588,6 +588,20 @@ class="enable-flyout enable-flyout__level enable-flyout__dropdown"> "sectionName": "Code Patterns" }, "content": [{ + "id": "flyout__subsection", + "props": { + "id": "styling", + "sectionName": "Styling" + }, + "content": [{ + "id": "flyout__link", + "props": { + "label": "Dark Mode", + "url-slug": "dark-mode", + "alt": "" + } + }] + }, { "id": "flyout__subsection", "props": { "id": "focus-management", diff --git a/templates/includes/stats.php b/templates/includes/stats.php index 5e98f076..9d217e9d 100644 --- a/templates/includes/stats.php +++ b/templates/includes/stats.php @@ -3,7 +3,8 @@ if (isset($isForNewBuilds) && $isForNewBuilds == true) { ?>
    - recommended solution + +
    @@ -11,6 +12,7 @@
    +
    @@ -20,6 +22,7 @@
    +
    @@ -29,6 +32,7 @@
    +
    @@ -38,10 +42,11 @@
    +
    - \ No newline at end of file +