Color Reverter

German Michael Zülsdorff 11 months ago

Color Reverter (discontinued)

German Michael Zülsdorff Replied 3 weeks ago

Due to a lack of feedback from your side I have stopped development and support of this component.

German Michael Zülsdorff Replied 9 months ago

Version 6.1 is available now which is compatible with Ossn 6.0

I have renamed the component to 'Color Reverter' because it's meant to basically revert the colors of ANY theme. A default light one like GoBlue to dark, and a default dark one like Flexi to light.

As already mentioned in the description, this component is not a ready-to-use one but needs a lot of interaction until every light/dark pair of a theme will be reversed.

The more I'd appreciate if you would share your finalized CSS with this community.

German Michael Zülsdorff Replied 10 months ago

Hmm ... I doubt this component will ever become an 'end use item'. :)
Because each theme comes with several different background/foreground color pairs, hence there's no simple 'change light to dark' which would work the same way everywhere, but you have to apply the colors of your choice manually, step by step.

Fortunately, meanwhile Version 5.1 is smart enough to list the classes in charge automatically with already reversed colors, and all what's left to do is pasting them to the color_modes.php file and do some fine adjusting here and there.

Okay, so let's start working on the Goblue theme ... (for example - any other theme will do)

  • Download, install and enable Version 5.1
  • Disable Ossn cache (because you're going to add several new classes)
  • Enter your account settings page and click the Color mode tab
  • Click the Darkmode checkbox

and you'll get a page like
enter image description here

That is: one background/foreground section of your site has been re-colored already.

  • now open components/SwitchToDark/plugins/default/css/color_modes.php
  • and find the corresponding class .rgb_255_255_255_rgb_51_51_51_goblue {background-color: rgb(51, 51, 51) !important; color: rgb(255, 255, 255) !important;} to get an idea

Time to locate and colorize the remaining parts ...

  • open your browser's developer window (right-click Inspect) and choose the 'Console' tab and you'll find an output like

enter image description here

  • copy the next class, here: .rgb_249_247_247_rgb_51_51_51_goblue {background-color: rgb(51, 51, 51) !important; color: rgb(249, 247, 247) !important;} and paste it at the bottom of color_modes_php
  • save the change, refresh the browser and you'll find another reversed area
  • clear the console log window, refresh your browser, and fetch the next class

Repeat the above procedure on different pages of your site. You're done if no more classes are listed in the console.

us Mary Greg Replied 10 months ago

Who can make this component an end use item?

us Mary Greg Replied 11 months ago

Can anyone completely finish this component to final use ?


Developer: Michael
License GPL v2
Type: Tools
Requires Ossn Version : 6.0
Latest Version:
Last Updated
Repository Url View Repository