Customizing DevTools



  • I used to be a Firefox Developer Edition user until they rolled the horrid update 57.

    One thing I miss is their Developer Tools alternate look. It's darker and easier on my eyes.
    FF DevTools

    There's the dark theme at settings, of course, but I don't quite like the default font colors. I've been trying to replicate the FF tools look on Vivaldi with custom CSS without success. I grabbed a few container classes from devtools.html and tried the rule below, but nothing happens.

    .devtools-container, #webview-container, .webpageview, .webpage-stack, #webviewdiv {
      background-color: #13171a !important;
      color: #83868b !important;
    }
    

    I can inspect the UI with the inspector, but I can't inspect the inspector with the inspector, hah.

    Is it possible to style the DevTools? Could someone point me in the right way?



  • @nihal I believe that the dev tools are from chrome, not vivaldi. As a result, they don't share the same customisable UI code as vivaldi's.

    It does have a darkmode, if thats what you're after. Tap the triple-dot icon at the top right, go to settings,, and under appearance, choose the dark theme.



  • There are devtools themes on the chrome store, therefore it should be possible to create a simple extension. They don't work with Vivaldi, because they check the Chrome version and what not, but maybe you can get it to work by getting rid of the according code. Worth a try.



  • @lonm said in Customizing DevTools:

    @nihal I believe that the dev tools are from chrome, not vivaldi. As a result, they don't share the same customisable UI code as vivaldi's.

    It does have a darkmode, if thats what you're after. Tap the triple-dot icon at the top right, go to settings,, and under appearance, choose the dark theme.

    Thanks for pointing out the dark mode, I actually know it has alternate themes. That's why there should be a way to customize it. I don't like the Zero Dark Matrix font colors, FF Dev edition has a better scheme that highlights the parts of the tags very well.

    I don't think it can be done with CSS alone, but if what I've been reading is right, it maybe can be done with an extension.

    @luetage said in Customizing DevTools:

    There are devtools themes on the chrome store, therefore it should be possible to create a simple extension. They don't work with Vivaldi, because they check the Chrome version and what not, but maybe you can get it to work by getting rid of the according code. Worth a try.

    Yeah, that's what I've seen. I'll start to try out the themes on the store to see if I have any luck, and fork out the one that works. It's been a while since I wrote extensions, but it shouldn't be hard, it's mostly just CSS styling.



  • Just so you know: No devtools custom UI theme extension works. The flag to enable experimental stuff on devtools is there, but the option to use custom themes at devtools settings does nothing.

    I also discovered that custom CSS rules are being applied to some dregree. The issue seems to arise from the devtools default theme overwriting any changes. If you use a CSS rule to set all elements backgrounds red you'll see it flash red for a second before being overlapped by the main container and all the styled elements.

    I thought about going directly to the source, but there seems to be no way to easily access the default theme files. They must be packaged, not lying around as html and css files. I also had no luck tweaking devtools.js or devtools.html, the default theme is always applied last, overwriting anything.



Looks like your connection to Vivaldi Forum was lost, please wait while we try to reconnect.