Color Reverter

This component/theme works with latest OSSN version.
German ~Z~ Man 2 months ago

Color Reverter

(former Switch To Dark)


The aim of this component is to reverse the foreground and background colors of a theme with just one click after the necessary CSS classes have been added to its CSS file. The developer console of your browser will assist you with some ready-to-use suggestions, but there's still a lot to be fine-tuned. Thus even a CSS wizzard should expect at least 1 hour getting finished.

Almost every line of code is comprehensively commented and therefore interesting for everyone who wants to get into the development of Ossn components and themes in general.

[ Details | Download | Support ]

German ~Z~ Man Replied 3 weeks 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 ~Z~ Man Replied 2 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 2 months ago

Who can make this component an end use item?

us Mary Greg Replied 2 months ago

Can anyone completely finish this component to final use ?


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