Color Reverter 6.1 (former Switch To Dark)

I. Release Notes

Current Version: 6.1
Requirements: Ossn >= 6.0
License: GNU General Public License v2


II. Purpose and Usage

A showcase inspired by


It will be Your task to interactively sort out the colors you want to change, first, and then save the derived classes in the CSS file.

The idea behind this component is to reverse the foreground and background colors of a theme with just one click in the end. 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


III. Changes

Version 1.0 shows how to

  • derive sliding switches from standard bootstrap checkboxes (thanks to Jan Enning, see )
  • add a new page to your site -> open `https://YOURSITE/color_toggle`
  • use jquery to change the fore- and background color of your site

Figure 1


Version 2.0 shows how to

  • implement the sliding switch by means of javascript
  • make it easily accessable from the center of every page now

Figure 2


Version 3.0 shows how to

  • use a Cookie to permanently save a once chosen color mode in the member's broswer, making it obsolete to switch to darkmode on every page again and again


Version 4.0 shows how to

  • append a custom menu entry to the topbar menu
  • jquery to exclude some parts of the dom tree from traversing
  • use the browser's console.log utility
  • use a red colored helper class to mark elements of interest

Figure 3


Version 5.0 shows how to

  • add a new menu section tab to the account settings page. it's up to you to keep both Darkmode checkboxes in place or just use one of them

Figure 4


Version 5.1 will

  • show how to pass a value of a PHP variable to Javascript
  • fix a glitch which was causing some 'light on light' background / foreground pairs
  • display ready-to-use classes in the console log window
  • add support for multiple themes


Version 6.1

  • has been verified to work flawlessly with Ossn 6.0 and PHP 8
  • is using Ossn's own Cookie get and set functions
  • comes with a complete set of language files
  • has been renamed to Color Reverter because it will revert the colors of ANY theme, light to dark and dark to light