Firefox DevTools Theme Maker

Text Colors

Selection:

Splitter:

Comment:

Body:

Body Alt:

Content 1:

Content 2:

Content 3:

Background Colors

Tab Toolbar:

Toolbar:

Selection:

Body:

Sidebar:

Contrast:

Highlight Colors

Blue:

Purple:

Pink:

Red:

Orange:

Light Orange:

Green:

Blue Grey:

Yellow:

Devtools Preview


          
            Inspector
            Console
            Debugger
          
          
                    <!DOCTYPE html>
          <head>
          <title>Peter Piper</title>
          <link href="css/style.css" rel="stylesheet">
          </head>

          <div class="preview">
            <div id="banner">
            <h1>peter piper</h1>
            <h2>picked a peck of pickled peppers</h2>
            </div>
            <div class="section">
              <p>
                Peter Piper picked a peck of pickled peppers.
                A peck of pickled peppers Peter Piper picked.
                If Peter Piper picked a peck of pickled peppers,
                Where's the peck of pickled peppers Peter Piper picked?
                I am selected
              </p>
            </div>
            <!-- This is a comment -->
            <div id="footer">
              <p> © Peter Piper 2019</p>
            </div>
          </div>

How to Install

Download your userChrome.css and userContent.css using this tool
Enter about:config in the Firefox address bar and click Accept the risk and continue after reading the warning.
To enable userChrome.css and userContent.css custom stylesheets enter this command in the search bar: toolkit.legacyUserProfileCustomizations.stylesheets, then double click the property to toggle it to true.

You can now close this window.
Enter about:profiles in the Firefox address bar. Find your root user profile and click Open Folder.
Drag the 2 css files into the chrome folder.
Return to the about:profiles page and click Restart Normally