[Unpacked Extension] Dark Chrome CSS

  • A small extension I did some time ago to make dark-ish any chrome:// and vivaldi:// pages.
    Tested on Vivaldi 2.1.1337.35 / Chromium 70.0.3538.77. (1337 snapshots or stable).
    Works fine on chromium 71 too (latest snaps).

    [ Guide ] + [ Last version ] (Updated on 27/11/18)

    Changelog [Since 1.0]

    • (new) Changed --cr-page-host_-_color;
    • Changed cat.png (well actually is the same);
    • Cleaned up code: the one used in various pages is now in the first section;
    • Fixed invisible areas in vivaldi://sync-internals;
    • Fixed tree views invert mistake;
    • (new) Fixed most text which had become invisible;
    • Fixed most tables in chrome:// pages;
    • Fixed most chrome:// exotic pages;
    • Fixed vivaldi://print: wasn't dark anymore after buttons invert;
    • (new) Improved color contrast on links, texts and tables;
    • Inverted most buttons/input/textbox/select etc;
    • (new) More chrome:// pages now uses specific values (and not html/body ones);
    • Minor color changes: most g-blue was replaced with shades of gray;
    • Minor color changes: slightly changed shades of red/green/gray;
    • (new) Most tables now use specific selectors (which should be helpful);
    • Removed background/permissions (weren't useful).
      (new) Removed legacy vivaldi://extension code (you'll find in a txt);
      (new) Some edits where selectors were changed/add/removed.

    Things known:

    • Material pages are still partially unthemed - I really don't know how to tame them; chome://flags work fine ^^
    • Some (minor) areas are still unthemed - usually black on dark gray: are behind a <style>, don't have a CSS selector (text) or are :host. I don't know if/how style them.
    • Vivaldi://discards tab header is now unthemed: is under a <style> on chromium71 (latest snapshot).

    Let me know when/if you find them, so I can (try) to fix something without opening all chrome:// any single time ๐Ÿ˜›

    Test version of 25/11/18 is the same. Only 1.7 instead of 1.8 in manifest. I waited a bit to check few things on 1337 version and to try this on latest snapshot.

  • Works, good job. At first I thought you are theming devtools and I got confused, maybe change the title to something other than Dev Extension ๐Ÿ˜›

  • It works fine. The colors are not โ€นuglyโ€บ: the green isโ€ฆgreen and the red is really red, that's all. And as @luetage , I thought, at first sight, it was about theming devtools.

  • Well done @Hadden89

    Would it be possible to have it look to Vivaldi's style sheet (or wherever the var(--colors) are located so that you could then use them and have it themed by the settings in Vivaldi?

  • @sjudenim It should be doable, I'm doing some test
    edit working on better and easier solution

    Hard. As it actually need another script to expose vivaldi colors from UI to the extension. I fear will become too complicated, as chromium may change a lot of selectors in the meantime.

  • @hadden89 The extension doesn't load, you have an error in your manifest file.

    edit: damn, that's not an extension ๐Ÿ˜ƒ
    2nd edit: it's an extension after all, where is the manifest file?
    3rd edit: now I'm just confused, this is a custom hook for the dead custom hooks project? why??!

  • @luetage Which one? Do you mean in the first post?
    The previous js is for browser.html... I should have written it.

  • edit

  • I've tried this, and it seems to still kind of work with vivaldi 2.0 snapshots.

    The "material design" cards, don't get themed fully though - they remain white.

    Also, the extension functions perfectly fine without the permissions and background in the manifest, I'm not sure why they were there.

  • @lonm Actually they're not need.
    I was experimenting to understand why is not shown in task manager and then I forgot to remove them. I guess I'll do it. Permissions removed.
    About the cards, I tried to change them, but the style seems to be hidden somewhere (in a style scope?)
    I've never understood how to skin them as #card have a background: white and not a Material Design variable like expected, same for some links which still are blue (under a color: rgba value) ๐Ÿ˜ž
    Basically, I can only change :root, html and body - for Material Design - while I can change any value for other chromium pages. Still don't know how overcome this limitation.

  • //EDIT: Moved info in first post.
    Test version of 25/11/18 is quite the same ๐Ÿ™‚


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