Miscellaneous Hacks - [vBMods.rocks] Create an Inverted Color Theme off Existing Theme Using Just Few CSS

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 the 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:

1. Navigate to your forum to any page.
2. Press F12 or right-click any element on your page and click Inspect or Inspect element.
3. Open the Console tab.
4. Paste the code below in the console.
   

   $('body').css({filter:'invert(1)', 'backdrop-filter':'invert(0)'}); $('img,iframe').css({filter:'invert(1)'}); openAlertDialog({title:'Invert Color Theme Test by vBMods.rocks', 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."});

5. Press Enter.
6. Be amazed and say "Wow! "

If you want to proceed with this, then follow these steps to use it in your forum.

1. Logon to AdminCP.
2. Navigate to Styles > Style Manager.
3. Find the style/theme you want to base the inverted color style from.
4. In the "Choose Action..." dropdown, choose "Add Child Style".
5. Rename the title as desired.
6. Choose "No" in the Allow User Selection option. You will set it to "Yes" later when the style is fully ready.
7. Click Save.
8. Navigate to your forum.
9. 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.
10. Go to AdminCP > Style Manager or SiteBuilder > Style > CSS Editor to edit the css_additional template of the new style you created.
11. 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)
    

    	/* 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 */

12. Save.
13. Reload your forum to see the style changes.
14. To undo color inversion on elements you don't want to be inverted, do the following.
    1. Find the element.
    2. Right-click and choose Inspect or Inspect element.
    3. Find the id or class of that element. There may be multiple classes in it. You don't have to add them all. Post any questions in vbmods.rocks on how to identify which class to use and I will help you.
    4. Add the code in css_additional to undo the color inversion using the following format:
       

       		/* 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:
       

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

    5. Save.
    6. Reload your forum to see the changes.
    7. Keep finding new elements and adding new id or class to the above code.
15. When you're ready, you can release the new style to the public by doing the following steps.
    1. Navigate to the new style by going to AdminCP > Style Manager > [New style you created] > Edit Settings.
    2. Set the "Allow User Selection" option to Yes.
    3. Save.
    4. Go to Settings > Options > Style & Language Settings.
    5. Set "Allow Users To Change Styles" to Yes.
    6. Save.
16. 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.

For more details and support, please head over to https://vbmods.rocks/forum/vbulletin...g-just-few-css

[noypiscripter]

Let's take this mod to another level!

What if a user had enabled Dark mode preference through the Operating System setting or the browser setting and your forum automatically turned into a Dark mode too? Wouldn't that be super awesome?

How to Enable Dark Mode on Your Computer or Mobile Device

1. Windows
   • Go to Settings > Personalization > Colors and then choose Dark for the default app mode.
2. Mac
   • Go to Apple menu > System Preferences > General > Appearance and then choose Dark or Auto.
3. Chrome for Android
   • Go to Settings > Theme and then choose "System default" or Dark.
   • If System default is chosen, dark mode is enabled when you turn on Battery Saver on the device or enable Dark theme on the device.
4. iPhone
   • Go to Settings > Display & Brightness and then choose Dark or Automatic.

Without the CSS code in this post, setting Dark mode at the OS, device or browser level, only the browser tabs and browser controls will turn dark but not the websites. But with the CSS code below, your forum (or any website for that matter) will automatically turn into Dark mode. If the device has auto dark mode enabled based on certain event (e.g. sunset) or at a specific time, then when user visits your site, it will automatically be in Dark mode too!

Add this CSS in css_additional template of the light theme/style:

/* Auto Detect Dark Mode - START */
@media (prefers-color-scheme: dark) {
    /* Copy and paste all CSS code for Dark Theme you've created based from the steps in the first post */
}
/* Auto Detect Dark Mode - END */

For browser support, please see this compatibility chart.

Watch demo on YouTube below:

https://www.youtube.com/watch?v=Ln4vqs1rWL0

In the demo, I used my Android phone and set "System default" in the Theme settings in Chrome browser app and then enabled Dark mode by turning on Battery Saver on the device.