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

Mod Options

[vBMods.rocks] Create an Inverted Color Theme off Existing Theme Using Just Few CSS Details »

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

Mod Information

Jump To Comments

The Developer

About Developer

Mod Version: 1.00, by noypiscripter (Coder/Designer) noypiscripter is offline

Developer Last Online: Sep 2023

vB Version: 5.5.5	Rating: (1 vote - 5.00 average)	Installs: 1
Released: 04 Feb 2022	Last Update: Never	Downloads: 0
Not Supported

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:

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.
Block Disabled: (Update License Status)
Suspended or Unlicensed Members Cannot View Code.
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 from.
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)
Block Disabled: (Update License Status)
Suspended or Unlicensed Members Cannot View Code.
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.
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:
  Block Disabled: (Update License Status)
  Suspended or Unlicensed Members Cannot View Code.
  But if you want to keep the color inversion of the site logo, then add this CSS:
  Block Disabled: (Update License Status)
  Suspended or Unlicensed Members Cannot View Code.
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.
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.
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

Download Now

Only licensed members can download files, Click Here for more information.

Screenshots

Show Your Support

To receive notifications regarding updates -> Click to Mark as Installed.
This modification may not be copied, reproduced or published elsewhere without author's permission.

No members have liked this post.

Similar Mod
Mod	Developer	Type	Replies	Last Post
Show Thread Enhancements [vBMods.rocks] Add Custom Profile Fields in Postbit	noypiscripter	vBulletin 5.x Products & Extensions	14	02 Feb 2022 04:31
New Posting Features [vBMods.rocks] Quote Selected Text	noypiscripter	vBulletin 5.x Products & Extensions	8	02 Feb 2022 04:29
Show Thread Enhancements [vBMods.rocks] Display Status Update in Postbit	noypiscripter	vBulletin 5.x Products & Extensions	1	29 Jan 2019 15:31
Calendar Enhancements [vBMods.rocks] Event Date That Rocks using CSS	noypiscripter	vBulletin 5.x Template Modifications	4	05 Apr 2017 18:32
Forum Display Enhancements [vBMods.rocks] Display Forum Description on Forum Channel page using an Ad Module	noypiscripter	vBulletin 5.x Products & Extensions	15	24 Nov 2016 15:24

Comments

09 Feb 2022, 20:39

noypiscripter noypiscripter is offline

Coder/Designer

Join Date: Aug 2013

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

Windows
- Go to Settings > Personalization > Colors and then choose Dark for the default app mode.
Mac
- Go to Apple menu > System Preferences > General > Appearance and then choose Dark or Auto.
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.
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:

Block Disabled: (Update License Status)
Suspended or Unlicensed Members Cannot View Code.

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.

__________________
Glenn Vergara, an ex-vB Developer, now a vB Mod Developer

No members have liked this post.

« Previous Mod | Next Mod »

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

Mod Options
Show Printable Version Email this Page

Posting Rules
You may not post new threads You may not post replies You may not post attachments You may not edit your posts BB code is On Smilies are On [IMG] code is On HTML code is Off

New To Site?	Need Help?
About vBulletin.org You will need to register to Participate Review Our Site Rules	Mark Forums Read Do Your Research Before Hiring! Site Map Meet Our Staff Do Not Sell or Share My Personal Information

All times are GMT. The time now is 10:20.

The Official vBulletin Modifications Site.

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