search

OtterBrowser / otter-browser

Otter Browser aims to recreate the best aspects of the classic Opera (12.x) UI using Qt5
https://otter-browser.org
GNU General Public License v3.0
1.79k stars 272 forks source link

Inspect GUI to be able to make useful Advanced Interface Style Sheet (CSS) #1744

Open jabcreations opened 1 year ago

jabcreations commented 1 year ago

How do I use the inspector to inspect the GUI itself instead of the current tab's website DOM?

I use dark mode and want to customize the GUI's colors a bit. Adding * {color: #fff;} to a CSS file helps though breaks things like the back/forward buttons (I always use icon with text on side for button customization).

Emdek commented 1 year ago

@jabcreations, you mean the browser UI? See this: https://doc.qt.io/qt-5/stylesheet-reference.html There is an option to set such stylesheet, and there is some initial groundwork for defining custom color palettes (obviously with predefined dark / inverted one) for the UI too, but got stalled due to lack of feedback.

jabcreations commented 1 year ago

Okay, I'd be happy to provide feedback though I'd need some ideas. I am very particular about how I want the GUI of any given browser to be.

I did get QToolBar {background-color: #f0f !important;} to work though only with the "Fusion" widget style. Setting max-height: 24px !important did not result in any changes. Waterfox Classic and Vivaldi can have their browser GUI DOM inspected and thus customized albeit anything Gecko is an HTML/CSS nightmare; Vivaldi's code isn't too atrocious.

Okay...so I can edit my style sheet and switch between Fusion, another theme and then back to Fusion to avoid having to restart the browser to apply updated styles. I updated the CSS selector to QToolBar, QStatusBar and now the status bar is also fuschia.

When I set the toolbars background-color to black the icons disappear ... and I'm having a little trouble. I attempted to use QStatusBar * {filter: invert(1);} to reverse the color/background without success, I'm not sure how to change the icon appearance otherwise. Having a DOM inspector for the browser's GUI would help tremendously.