Beautify your pre-loading (white)screen CSS mod

[dude99]

@stardepp The same as OP code, & if you want to use both then choose one for light theme & the other for dark theme as explained in the post.

example, I add it to light theme with this:

.theme-light .webpageview.active.visible:not(.internal) .webpage {
background-color: var(--colorAccentBgDarker); background-size: 49px; background-position: center; background-blend-mode: soft-light;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 128 128"><g fill="rgb(0 0 0 /33%)"><path d="M111.84 16.33c-9.05-9-22.91-9-47.84-9s-38.79 0-47.84 9S7.11 39.16 7.11 64s0 38.65 9.05 47.67 22.91 9 47.84 9 38.79 0 47.84-9 9.05-22.83 9.05-47.67 0-38.65-9.05-47.67zM94 94.09A42.54 42.54 0 1 1 94 34a42.68 42.68 0 0 1 0 60.09z"/><path d="M84 42.89a7.07 7.07 0 0 0-4.88 10.28 11.84 11.84 0 0 1 1.2 5.28c0 .24-.06.7-.11 1.16a11.34 11.34 0 0 1-11.92 10.08A11.13 11.13 0 0 1 59 63.94c-1.45-2.42-2.84-4.89-4.26-7.34-2-3.4-3.91-6.81-5.89-10.19a6.79 6.79 0 0 0-6.51-3.65 7.06 7.06 0 0 0-5.76 10.7q4 7 8.05 14c4.42 7.65 8.81 15.32 13.26 23a6.72 6.72 0 0 0 6.67 3.53 7 7 0 0 0 5.8-3.82q10.49-18.36 21.05-36.62a7.36 7.36 0 0 0 1-4.77A7.08 7.08 0 0 0 84 42.89z"/></g></svg>');} 

Then, dark theme will have squares & light theme will have V logos.

[stardepp]

@dude99 I have inserted it like this:

But the Vivaldi logo at the start of Vivaldi does not change yet, what did I do wrong?

[dude99]

@stardepp it doesn't alter the big gray logo, it replace the pre-loading screen during light theme. So you will have to switch to light theme to see it's effect.

[stardepp]

@dude99 said in Beautify your pre-loading (white)screen CSS mod:

@stardepp it doesn't alter the big gray logo, it replace the pre-loading screen during light theme. So you will have to switch to light theme to see it's effect.

Hello @dude99,

I'm very interested in your custom V-Logo, but I'm still a beginner in Vivaldi modifications. Friendly asked: Could you program me a ready .css modification for your custom V-Logo?

[dude99]

@stardepp This is how it looks like in different theme:

/* dark theme preloading squares  */
.theme-dark .webpageview.active.visible:not(.internal) .webpage {background: repeating-conic-gradient( var(--colorBorder) 0deg  90deg, var(--colorBorderIntense) 0 180deg) 0 0/ 1.78vmax 1.78vmax !important;}

/* light theme preloading v logo */
.theme-light .webpageview.active.visible:not(.internal) .webpage {
background-color: var(--colorAccentBgDarker); background-size: 49px; background-position: center; background-blend-mode: soft-light;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 128 128"><g fill="rgb(0 0 0 /33%)"><path d="M111.84 16.33c-9.05-9-22.91-9-47.84-9s-38.79 0-47.84 9S7.11 39.16 7.11 64s0 38.65 9.05 47.67 22.91 9 47.84 9 38.79 0 47.84-9 9.05-22.83 9.05-47.67 0-38.65-9.05-47.67zM94 94.09A42.54 42.54 0 1 1 94 34a42.68 42.68 0 0 1 0 60.09z"/><path d="M84 42.89a7.07 7.07 0 0 0-4.88 10.28 11.84 11.84 0 0 1 1.2 5.28c0 .24-.06.7-.11 1.16a11.34 11.34 0 0 1-11.92 10.08A11.13 11.13 0 0 1 59 63.94c-1.45-2.42-2.84-4.89-4.26-7.34-2-3.4-3.91-6.81-5.89-10.19a6.79 6.79 0 0 0-6.51-3.65 7.06 7.06 0 0 0-5.76 10.7q4 7 8.05 14c4.42 7.65 8.81 15.32 13.26 23a6.72 6.72 0 0 0 6.67 3.53 7 7 0 0 0 5.8-3.82q10.49-18.36 21.05-36.62a7.36 7.36 0 0 0 1-4.77A7.08 7.08 0 0 0 84 42.89z"/></g></svg>');}

Again, you can switch the dark/light theme pattern around via .theme-light & .theme-dark in the beginning of each line of code.

[stardepp]

@dude99 Thanks for your effort, you are a .css modifications master

[dude99]

@stardepp Nah... Im just a script kitty. LOL

There are much about CSS I still don't know of, especially the newer features... Im falling behind a lot lately, but too lazy to get back into learning new stuff.

[Swashbuckler]

Is there an alternative or update to this code? It works but half of the time I still see the white screen.

[dude99]

@Swashbuckler Sorry, i can't fix this CSS mod, cuz I don't have access to latest build.

[Zalex108]

@Swashbuckler

Hi,
Try the Switch

[Swashbuckler]

@Zalex108 unfortunately that is old guide, vivaldi now ignores chrome dark mode flag, and I can't use "dark mode for websites" setting cause it looks very bad compared to dark reader addon.

[Zalex108]

@Swashbuckler

The link points to the Menu option using a Switch, not related to the Flag.
Look for Menu

[Swashbuckler]

@Zalex108
i did try "--force-dark-mode" launch option, it also did nothing to the white screen.

[Swashbuckler]

This post is deleted!

[Swashbuckler]

This post is deleted!

[Zalex108]

@Swashbuckler
I'll try,
IIRC, that setting managed the start up screen.

[Swashbuckler]

I fixed the white screen on loading new tabs, but it needs to be done for each site you visit in ublock, like this:

www.google.com##html:style(background:#1f1f1f!important)

edit: still doesn't fix white screen for history or bookmarks, only for opening with address bar.

[barbudo2005]

@Swashbuckler

Use "Start Page" as New tab page:

In setting of the Start page:

Said:

it looks very bad compared to dark reader addon.

Of course this is the case, since the inversion of the page is clearly a deficient method.

[Swashbuckler]

@barbudo2005 yeah, I do use empty start page with my own custom image, but it doesn't fix that white screen without adding the html style hack to each site.

[barbudo2005]

@Swashbuckler

Do you use Dark Reader?