title: Firefox: How to test prefers-color-scheme?
body: <p>In Firefox 67, one can use media queries to detect user <a href="https://davidwalsh.name/demo/prefers-color-scheme.php" rel="noreferrer">preference on light or dark theme.</a></p>
  
  <p>In my version of Firefox (under Ubuntu), it seems that my preference is light theme. That is, the following CSS gives a blue background:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@media (prefers-color-scheme: light) {
     :root {}
    body {
      background-color: blue;
    }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>How can I change my Firefox preferences so that <code>prefers-color-scheme: dark</code> 
  evaluates to true?</p>
  
  <p>I found an add-on that seems to do the trick, but I must be doing something wrong with my own CSS, as it does not work on my page.
  <a href="https://davidwalsh.name/demo/prefers-color-scheme.php" rel="noreferrer">Dark Website forcer</a></p>