Switch To Dark

This component/theme doesn't work with the latest OSSN version.
German ~Z~ Man 1 month ago

Switch To Dark

A showcase inspired by https://www.opensource-socialnetwork.org/discussion/view/5330/componernt-switch-to-dark

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

[ Download ]

Version 1.0 shows how to

Switching a Goblue page to darkmode ...
switching Goblue to dark

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

enter image description here

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
  • instruct 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

enter image description here

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

enter image description here

  • make use of Ossn's localization in PHP and Javascript
  • use regular expressions to change some parts of a given string
  • use advanced jquery selectors

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
German ~Z~ Man Replied 1 month 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 1 month ago

Who can make this component an end use item?

us Mary Greg Replied 1 month ago

Can anyone completely finish this component to final use ?


Developer: ~Z~
License GPL v2
Type: Uncategorized
Minimum Requirement:
Latest Version:
Last Updated
Repository Url View Repository