Register Members List Search Today's Posts Mark Forums Read

Reply
 
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 Version: 1.00, by noypiscripter (Coder/Designer) noypiscripter is offline
Developer Last Online: Sep 2022 I like it Show Printable Version Email this Page

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

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

  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)

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

  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:

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

Download Now

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

Screenshots

Click image for larger version

Name:	vbulletin-dark.jpg
Views:	40
Size:	57.8 KB
ID:	158929  

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.
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
  #2  
Old 09 Feb 2022, 20:39
noypiscripter's Avatar
noypiscripter noypiscripter is offline
 
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
  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:

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

GIPHY for vB5 | AutoLinker | Video Attachments Player | New Registered Users Module | Clear System Cache Cron | DragNDrop Upload | Topic AJAX AutoUpdate | Force Read Topic
Reply With Quote
Reply


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

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?

All times are GMT. The time now is 19:31.

Layout Options | Width: Wide Color: