PublicisSapient · basiabaldwin · Jun 6, 2024 · Jun 11, 2024 · Jun 11, 2024 · Jun 11, 2024
diff --git a/audio/1-basara-for-men.wav b/audio/1-basara-for-men.wav
diff --git a/content/body/acknowledgements.php b/content/body/acknowledgements.php
@@ -22,6 +22,7 @@
   <li><a href="https://github.com/alisonhall">Alison Hall</a> 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).
   </li>
   <li>Sahil Singh for unit tests for the <a href="input-mask.php">input mask component</a>.</li>
+  <li><a href="https://github.com/basiabaldwin">Basia Baldwin</a> for implementing dark mode across the project. 
   <li><a href="https://www.useragentman.com/">Zoltan Hawryluk</a> for starting the Enable project to begin with.</li>
 </ul>
 

diff --git a/content/body/dark-mode.php b/content/body/dark-mode.php
@@ -0,0 +1,137 @@
+
+<p>
+    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.
+</p>
+
+<p>
+  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. 
+</p>
+
+<h2>The "Rules" for Developing</h2>
+
+<p>
+  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.
+</p>
+
+<p>
+    Make sure to remember:
+</p>
+
+<ol>
+  <li>Contrast is key!! Pay attention to the ratio (see below).</li>
+  <li>Don't forget the little details — take the time to <em>make sure</em> each component of the page (even ones not visible) is dark mode accessible. 
+  </li>
+  <li>Many users with photosensitivity use dark mode, so try to avoid using very bright colors, even if the contrast ratio appears correct.</li>
+  <li>Make sure assistive technologies (such as screen readers) still work with dark mode.</li> 
+</ol>
+
+<p>
+    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 <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html">WCAG guidelines for contrast accessibility</a>, 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.
+</p>
+
+<p>
+    To see an example of a proper vs. improper contrast ratio, please refer below:
+</p>
+
+<div class="enable-example">
+    <img src="images/dark-mode-example/goodContrast_credits.png" width=800 height=155
+    alt="Good Contrast Example">
+    <img src="images/dark-mode-example/badContrast_credits.png" width=800 height=155
+    alt="Bad Contrast Example">
+</div>
+
+<p>
+    As seen above, the contrast between the first image is much better than the second.  The first images text has a contrast ratio of 
+    <strong>9.9</strong>, much better than the contrast ratio of <strong>1.25</strong> 
+    for the second images text.
+
+</p>
+
+<p>
+    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 <a href="https://wave.webaim.org/">WAVE</a> web accessibility evaluation tools, 
+    <a href="https://webaim.org/resources/contrastchecker/">WebAIM Contrast Checker</a>,
+    and <a href="https://accessible-colors.com/">accessible-colors</a>
+    allow for developers to test their page contrasts to ensure that they are creating the most accessible user interface possible.
+</p>
+
+
+<h2>Using Dark Mode in Different Operating Systems</h2>
+
+<?php includeStats([
+    "isStyle" => true,
+    "comment" =>
+        "These changes can also be done at the browser level rather than the whole system if that is your preference.",
+]); ?>
+
+<p>
+    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!
+</p>
+
+<h3>Apple:</h3>
+<ul>
+  <li><strong>Mac (OSX):</strong>
+    <ol>
+        <li>Open <strong>System Settings</strong>.</li>
+        <li>Select <strong>Appearance</strong>.</li>
+        <li>In <strong><em>Appearance</em></strong>, you will have the option to choose Light, Dark, or Auto.</li>
+    </ol>
+    <img src="images/dark-mode-example/DarkMode_MacOS.png" width=400 height=349
+    alt="MacOS System Settings Dark Mode">
+  </li>
+
+  <li><strong>Mobile (iOS):</strong>
+    <ol>
+        <li>Open <strong>Settings</strong>.</li>
+        <li>Select <strong>Display & Brightness</strong>.</li>
+        <li>Under <strong><em>Appearance</em></strong>, you will again see the option for Light, Dark, or Automatic.</li>
+    </ol>
+    <img src="images/dark-mode-example/DarkMode_iOS.png" width=192 height=400
+    alt="iPhone/iPad Settings Dark Mode">
+  </li>
+</ul>
+
+<h3>Windows:</h3>
+<ul>
+  <li><strong>Desktop:</strong>
+    <ol>
+        <li>Select <strong>Start</strong> and open <strong>Settings</strong>.</li>
+        <li>Select <strong>Personalization</strong> and navigate to <strong>Colors</strong>.</li>
+        <li>In <strong><em>Colors</em></strong> under <strong><em>Choose your mode</em></strong>, you will have the option to choose Light, Dark, or Custom, as well as change your accent color to your preference.</li>
+    </ol>
+    <img src="images/dark-mode-example/DarkMode_Windows.png" width=400 height=315
+    alt="Windows Color Settings Dark Mode">
+  </li>
+</ul>
+
+<h3>Android:</h3>
+<ul>
+  <li><strong>Mobile:</strong>
+    <ol>
+        <li>Open <strong>Settings</strong>.</li>
+        <li>Select <strong>Display & brightness</strong>.</li>
+        <li>In <strong><em>Display</em></strong>, toggle Dark mode based on your preference.</li>
+    </ol>
+    <img src="images/dark-mode-example/DarkMode_Android.png" width=193 height=400
+    alt="Android Dark Theme Settings">
+  </li>
+</ul>
+
+<h3>Ubuntu:</h3>
+<ul>
+  <li><strong>Desktop:</strong>
+    <ol>
+        <li>Open <strong>Settings</strong>.</li>
+        <li>Select <strong>Appearance</strong>.</li>
+        <li>In <strong><em>Appearance</em></strong>, under <strong><em>Style</em></strong>, you will see the option to choose Light or Dark mode.</li>
+    </ol>
+    <img src="images/dark-mode-example/DarkMode_Ubuntu.png" width=400 height=333
+    alt="Ubuntu Dark Mode Settings">
+  </li>
+</ul>
diff --git a/content/body/focus-styling.php b/content/body/focus-styling.php
@@ -25,7 +25,7 @@
 <?php includeStats([
     "isForNewBuilds" => 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
@@ -154,6 +154,7 @@
       Links That Open a New Window or Tab
 
       <img class="new-window-icon" src="images/icons/new-window.svg" alt="(Opens in a new window)" />
+      <img class="new-window-icon-dark" src="images/icons/new-window_darkmode.svg" alt="(Opens in a new window)" />
 
     </a>
   </p>

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;
+  }
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -154,6 +154,7 @@ @@
           Links That Open a New Window or Tab
           <img class="new-window-icon" src="images/icons/new-window.svg" alt="(Opens in a new window)" />
+          <img class="new-window-icon-dark" src="images/icons/new-window_darkmode.svg" alt="(Opens in a new window)" />
         </a>
       </p>
@@ Expand Down @@