[Extension] (23/03/20) Dark Chrome CSS 2.3

[Hadden89]

Download links:

(Updated on 23/03/20)
Chromium 80.0.3987.88 / Vivaldi 2.11.1811.28 (RC)

• [ Dark Chrome 2.3 unpacked ]

• [ Dark Chrome 2.3 CRX version ]

What's this?

A small unpacked extension to give a dark theme to chrome:// pages, especially the ones which aren't covered yet by chromium default dark theme, like the ://settings page.

Where it works?

This extension is made and usually tested with the most recent Vivaldi snapshot when it reachs RC branch (pre-stable), so it should work with the most recent stable and with recent snapshots. Will actually works with any recent chromium, but is tested only on Vivaldi. Should work fine even on mac and linux, but the last one hasn't a dark theme, so I can't gurantee for it.

It’s complete?

I try to cover any area, but sometimes a chromium update may break something. I also try to be coherent with the new dark theme, as Chromium also takes color from several sources. I’ll fix what I can.

It slowdown the browser?

It shouldn’t. While it inject the css to chrome pages, it does it with chromium native APIs, so it should be quite fast.

I don’t like the colors…

Just open custom.css and your edits

I need it?

Well, actually is an extension/modding tool. So, if you are not interested in messing with browser css or internal pages, probably you don’t need it.

It’s safe?

I didn’t placed harmful things inside, The js inside is just to inject the custom.css to chrome:// pages and won't do any strange connection.
You can disable/remove the extension anytime: you shouldn't face any issue doing that and won't corrupt vivaldi in any way.

Installation guide

Prerequisites

• Vivaldi Browser or any chromium based browser.
  Only tested on Vivaldi.
• Enable chrome://flags/#extensions-on-chrome-urls. This extension need to access to chrome urls. Without the flag, the installation will fail.
• [Optional] Enable chrome://flags/#debug-packed-apps.
  This will help your future modding purposes, and will make easier to inspect what this extension do.

CRX version

• Download the crx version.
• Drag the crx file at the chrome://extensions page
• (Optional?) Enable developer mode at chrome://extensions page if need.
• Restart Vivaldi.
• Open any supported chrome:// vivaldi:// internal >> pages to see what is changed..

Unpacked version

• Copy chromecss folder where you like.
  I keep it under /Vivaldi/Unpacked/Chromecss/ for convenience.
• Enable developer mode at chrome://extensions.
  This will allow to load the folder in the archive.
• Press Load unpacked extension switch at chrome://extensions and point the chrome css folder.
• Restart Vivaldi.
• Open any supported chrome:// vivaldi:// internal >> pages to see what is changed..

(Few) screenshots

FLAGS

GPU

SYNC

VERSION

The colors could be slightly different now

Known issues:

• Follow the default chromium dark theme since 2.2, so you should use that for the best results.
  ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~
• Material pages may be partially unthemed
  This shouldn't happen anymore as such pages are handled by chromium itself, plus few color tweaks by this addon.
  ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~
• Network error pages are unthemed
  These are buried deeper in the chromium code.
  ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~
• Very few small areas could be unthemed; will be handled when proper selector are made.
  ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~
• chrome://discards is not properly themed as it lacks selectors and inherit most code from body (which is better not change too much).
  ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~
• chrome://omnibox is unthemed.
  Actually is not a big issue, as Vivaldi don't use this feature.
  ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~
• Vivaldi://print is now unthemed
  Now it follows the dark theme by chromium

[luetage]

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

[hlehyaric]

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.

[sjudenim]

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?

[Hadden89]

@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, and easily borked as chromium and vivaldi itself may change a lot of selectors in the meantime.

[Hadden89]

This post is deleted!

[luetage]

@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??!

[Hadden89]

This post is deleted!

[Hadden89]

This post is deleted!

[LonM]

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.

[Hadden89]

@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.

[Hadden89]

//EDIT: Moved info in first post.

[gyaani]

Works nice!

to everyone: make sure to RESTART after enabling those settings!!!

Also OP DO you if its possible to theme "could not find server or ip page" ? Like when a page does not load or when a wrong address is tried? like : http://random.random/

[Hadden89]

@gyaani I don't know if it is possible.
Actually, the extension only can hook the css on chrome:// vivaldi:// pages (rely on a chrome flag) while some internal pages - as the network error and some material design pages - are buried deeper in the chromium code.
Not easy, I fear.

[gyaani]

@Hadden89 hmm too bad... Thanks for extension though.
and maybe add the restart vivaldi requirement to the guide ?

[Hadden89]

Updated code for newer snapshots

[Hadden89]

2.0 is out.
Updated to Vivaldi 2.5.1497.4 / Chromium 73.0.3683.88
Code should be easier to read/edit now

[Hadden89]

Updated to Chromium 75.0.3770.82 / Vivaldi 2.6.1566.31 (RC1)

Changelog 2.1: Just few correction for newer chromiums [74-75] (link colors, table background colors and so on)
I've also add an (experimental) .crx package of the mod to install this in the drag 'n drop way.
You still need to enable chrome://flags/#extensions-on-chrome-urls before or it will fail

I just hope chromium won't switch every page to Material Design or it'll very hard (or almost impossible) to keep this alive.

[Hadden89]

@raed Blame my laziness for that.
The name is always the same to avoid updating the links in the forum/blog any time a new version is out (so it stays autosynced with my gdrive).
However, only the css file is modified and when I see an ugly mistake (like a forgotten bracket) I push the fix and suggest to get the fixed version.
But I check any chrome:// page before doing that, so this shouldn't happen.
(I also don't keep the older versions, as it is written/tested only on the current version I use and chromium evolve quite fast)

[Hadden89]

New version for chromium 76 built around the new dark theme.
(Changelog is now in the package; crx is now a separate download)