Announcement

Collapse
No announcement yet.

How to Create an Inverted Color Theme off Existing Theme Using Just Few CSS

Collapse
X
Collapse
First Prev Next Last
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Official - Free How to Create an Inverted Color Theme off Existing Theme Using Just Few CSS

    If you have a light theme in your forum (or any website for that matter), 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.
      Code:
      $('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."});
      For other websites that don't have jQuery, you can run this code instead:
      Code:
      	document.body.style.filter = 'invert(1)';
      	document.body.style.backdropFilter = 'invert(0)';
      	document.querySelectorAll('img, iframe').forEach(function(el) { el.style.filter = 'invert(1)'; });
      	setTimeout(function () { alert("Invert Color Theme Test by vBMods.rocks\n\nThis 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.\n\nNOTE: This style is obviously not saved to your site. It will go away when you reload this page."); }, 500);
    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. You can also do these to non-vB websites. You just ignore the vB-specific steps and simply add the specified code in the CSS of your website.
    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)
      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 */
    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 here 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:
        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);
        		}
      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. <--- Solution to this is in post #7

    If you don't want to create a separate theme for your site and instead want your site to be automatically converted into Dark mode when user enabled Dark mode preference at the OS, device or browser setting, then head on to post #5 in this thread.


    Enjoy!

    Here's how it looks like for the vB5 Default Style when using this mod.

    Click image for larger version  Name:	vbulletin-dark-small.png Views:	0 Size:	337.0 KB ID:	23634


    If you want to see how vbmods.rocks looks like with a dark theme using this mod, head over to the Style/Theme dropdown at the lower left section of the footer and then choose "vBMods.rocks Dark".
    Last edited by glennrocksvb; 03-05-2022, 09:25 PM.
    Helpful? Donate. Thanks!
    Buy me a coffeePayPal QR Code
    Fast VPS Host for vBulletin:
    A2 Hosting & IONOS

    #2
    So ! The things one can learn just by being a member of vBMods.rocks.
    The Linux Community has given me much. I do what I can to return the favor!

    Comment


      #3
      Try the "Invert Color Theme Test" script on your forum and post a screenshot of it for us to see how it looks like on your site.
      Helpful? Donate. Thanks!
      Buy me a coffeePayPal QR Code
      Fast VPS Host for vBulletin:
      A2 Hosting & IONOS

      Comment


        #4
        Before:

        Click image for larger version  Name:	Screen Shot 2022-02-05 at 9.16.02 AM.png Views:	0 Size:	718.7 KB ID:	23647

        After:

        Click image for larger version  Name:	Screen Shot 2022-02-05 at 9.15.40 AM.png Views:	0 Size:	687.6 KB ID:	23648
        The Linux Community has given me much. I do what I can to return the favor!

        Comment


        • glennrocksvb
          glennrocksvb commented
          Editing a comment
          Nice! You can skip inverting the color of the logo by following Step 14.4. Maybe it would look better with inverted color.

        #5
        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 website content itself. 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:
        Code:
        /* 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.

        Demo:

        I have installed this CSS on this site. If you enable Dark mode on your OS, device or browser, you'll see this site in Dark mode. You can also watch demo on YouTube below:



        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.
        Last edited by glennrocksvb; 02-11-2022, 05:24 PM.
        Helpful? Donate. Thanks!
        Buy me a coffeePayPal QR Code
        Fast VPS Host for vBulletin:
        A2 Hosting & IONOS

        Comment


          #6
          Thank you again
          it is very useful mod

          Comment


          • glennrocksvb
            glennrocksvb commented
            Editing a comment
            Looks good!

          #7
          Originally posted by glennrocksvb View Post
          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.
          It will be tedious and impractical to do this in the css_addiontal template of the child theme every time you make a change to the css_additional template of the original parent theme. The solution to this is to just import the css_additional.css file from the child theme.

          Steps:
          1. While browser is open, press F12 to open DevTools.
          2. Click Network tab.
          3. Click CSS tab.
          4. Type "css_additional" in the Filter field.
          5. Navigate to your forum.
          6. Select the filtered result and copy the Request URL for the css_additional.css
          7. Use that URL in the @import statement in the css_additional template of the child theme with inverted color theme. It is preferred to use a relative path by removing the base URL. See sample code below
          Code:
          @import '/css.php?styleid=1&td=ltr&sheet=css_additional.css';
          See screenshot below for reference of the steps above.



          The timestamp querystring parameter "ts" in the URL is not required. You can include it or not in the import statement.
          Last edited by glennrocksvb; 03-05-2022, 09:29 PM.
          Helpful? Donate. Thanks!
          Buy me a coffeePayPal QR Code
          Fast VPS Host for vBulletin:
          A2 Hosting & IONOS

          Comment


            #8
            Hi,

            So i try this in the "Black-red" theme original from vbulletin.
            But the thing that is not made black, is the entire background.
            All of the icons etc. are changed, but the wrapper/body or whatever you call it, stays white.

            Can you help me please?

            Thanks

            Comment


              #9
              I tried doing this for Black Red theme and I see the background as all black.

              Click image for larger version

Name:	black-red-inverted.png
Views:	38
Size:	76.0 KB
ID:	24512
              Helpful? Donate. Thanks!
              Buy me a coffeePayPal QR Code
              Fast VPS Host for vBulletin:
              A2 Hosting & IONOS

              Comment


                #10
                With me, it does this:

                Attached Files

                Comment


                  #11
                  Can you post the CSS code you're using?
                  Helpful? Donate. Thanks!
                  Buy me a coffeePayPal QR Code
                  Fast VPS Host for vBulletin:
                  A2 Hosting & IONOS

                  Comment


                    #12
                    Yes offcourse,

                    I used your code from above :

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

                    Comment


                      #13
                      That looks correct. I'd have to see the site in order for me to see what's wrong.
                      Helpful? Donate. Thanks!
                      Buy me a coffeePayPal QR Code
                      Fast VPS Host for vBulletin:
                      A2 Hosting & IONOS

                      Comment


                        #14
                        Should i send you a PM with my site and a admin account?

                        Comment


                        • glennrocksvb
                          glennrocksvb commented
                          Editing a comment
                          No need for admin account.

                        #15
                        adama, I got your PM. I can confirm that this does not work on Firefox. Firefox does not support CSS Backdrop Filter by default. There is a Mozilla bug report for this. Per MDN browser compatibility chart, it says that you can manually enable CSS Backdrop Filter on Firefox by enabling layout.css.backdrop-filter.enabled and gfx.webrender.all preferences (set both to true) in about:config (navigate to it in the browser address bar). But when I enabled them the auto-dark mode still doesn't work.

                        I will check further if there's a solution to it.
                        Helpful? Donate. Thanks!
                        Buy me a coffeePayPal QR Code
                        Fast VPS Host for vBulletin:
                        A2 Hosting & IONOS

                        Comment

                        Latest Topics

                        Collapse

                        Working...
                        X