Access DevTools to be able to create themes

Hello I’m looking for how to access DevTools to be able to create themes but I come across this now.

So I would like to know how to do it because before it worked very well

firefox_jVvgVOWscY

I also see that the way to create themes has changed suddenly I am totally lost… :grimacing:

In the Appearance tab, you’ll find the documentation about the extensions itself. You should read trough the documentation to understand what the package.json should contain.

How to create the Extension?

After you’ve created the extension folder with the package.json itself, you’ll add a CSS file to the folder. In there you can override code or add new code.

You can add multiple version of the theme, that you will need to declare in the package.json.
Example:

"themes": [
      {
         "name": "Version 1",
         "source": "Version1.css",
         "apiVersion": 1,
         "image": "Version1.png"
     },
     {
         "name": "Version 2",
         "source": "Version2.css",
         "apiVersion": 1,
         "image": "Version2.png"
     }
]

Where to get Code?

If you’ll add --remote-debugging-port=9988 to the the desktop shortcut, you can access the DevTools via localhost:9988 in the browser.

From there on you can inspect elements and edit their appearance for “testing” the change.
-> These changes are not permanent.

Add these changes to the CSS.

Image

The image type can be an png or svg. The best resolution that fits the frame of the window is 1024x768 px.

3 Likes
twitch instagram twitter facebook