[VB5] Create an Inverted Color Theme off Existing Theme Using Just Few CSS [Free]

broduer41 · 29-11-2022, 06:54 AM

If you have a light theme in your forum, you can easily create a dark theme off it, or a dark theme into a light theme, using just few lines of CSS!

How cool is it that you don't have to customize every vB stylevars just to create a dark or light theme and you just let the browser do its magic to detect what the inverted color is for each element on a page?

Here's a fun quick way to test how color inversion would look like in your own forum. Follow the below steps:
Navigate to your forum to any page.
Press F12 or right-click any element on your page and click Inspect or Inspect element.
Open the Console tab.
Paste the code below in the console.

Code:
$('body').css({filter:'invert(1)', 'backdrop-filter':'invert(0)'}); $('img,iframe').css({filter:'invert(1)'}); openAlertDialog({title:'Invert Color Theme', message:"This is how your site would look like if colors are inverted. It still needs few CSS tweaks to undo color inversion on background images, icons, and others that you don't want to be inverted. You can try doing this test for each of your available styles/themes and for any page on your site.<br /><br/>NOTE: This style is obviously not saved to your site. It will go away when you reload this page."});

Press Enter.
Be amazed and say "Wow! "
If you want to proceed with this, then follow these steps to use it in your forum.

Logon to AdminCP.
Navigate to Styles > Style Manager.
Find the style/theme you want to base the inverted color style.
In the "Choose Action..." dropdown, choose "Add Child Style".
Rename the title as desired.
Choose "No" in the Allow User Selection option. You will set it to "Yes" later when the style is fully ready.
Click Save.
Navigate to your forum.
Choose the new style you just created. It should be exactly identical to it parent style since you haven't made any CSS changes yet.
Go to AdminCP > Style Manager or SiteBuilder > Style > CSS Editor to edit the css_additional template of the new style you created.
Enter the following CSS code. (The below code is just the base CSS code you need. You still need to add more code to it to undo the color inversion for any elements you don't want to be inverted)

Code:
/* Invert Color Theme - START */
     /* Invert color of all elements */
     body {
         filter: invert(1);
         backdrop-filter: invert(0);
     }
     /* Undo invert of all images and iframes */
     img,
     iframe {
         filter: invert(1);
     }
     /* Invert Color Theme - END */

Save.
Reload your forum to see the style changes.
To undo color inversion on elements you don't want to be inverted, do the following.
Find the element.
Right-click and choose Inspect or Inspect element.
Find the id or class of that element. There may be multiple classes in it.
Add the code in css_additional to undo the color inversion using the following format:

Code:
/* Undo color inversion of specific elements */
         #ThisIsTheId,
         #ThisIsAnotherId,
         .ThisIsTheClass,
         .ThisIsAnotherClass {
              filter: invert(1);
         }

But if you want to keep the color inversion of the site logo, then add this CSS:

Code:
/* Keep color inversion of site logo */
         #header .site-logo img {
              filter: invert(0);
         }

Save.
Reload your forum to see the changes.
Keep finding new elements and adding new id or class to the above code.
When you're ready, you can release the new style to the public by doing the following steps.
Navigate to the new style by going to AdminCP > Style Manager > [New style you created] > Edit Settings.
Set the "Allow User Selection" option to Yes.
Save.
Go to Settings > Options > Style & Language Settings.
Set "Allow Users To Change Styles" to Yes.
Save.
Repeat the whole steps for every style/theme you want to create an inverted theme off it.
NOTE:
If you add new custom CSS in css_additional of the parent theme/style in the future, do not forget to also add it to the css_additional of the inverted-color child style.

Enjoy!

Please see attached screenshot of how it looks like for the vB5 Default Style when using this mod.

[Image: vbulletin-dark.jpg]

cagrikoc · 13-03-2023, 05:10 PM

teşekkürler kardeşim çok güzel bı anlatim

[VB5] Create an Inverted Color Theme off Existing Theme Using Just Few CSS [Free]

Submitted by broduer41, 29-11-2022, 06:54 AM, Thread ID: 255199

RE: [VB5] Create an Inverted Color Theme off Existing Theme Using Just Few CSS [Free]