Switching between dark and light colour scheme with code

Guys and Gals,

First up let me clarify the heading and just what I would like to achieve with it.

I am offering up budget priced hosting for events, from my Events listing website, with customizing of the pages I list.

So far I have created some child theme files basically all using the common name of custom, ie: custom-sidebar-page.php and footer-custom.php and header-custom.php and everything I wanted to achieve is happening.

I have gotten rid of the main menu from under the header image and removed the main site wide footer, I have plugins that allow me to show different header and background images and use different sidebars.

So the only thing left to do is be able to switch between the light and dark color schemes.

From what I have learned along the way, is that it is generally pretty simple if you know just which bits to change.

My understanding is all of the main body styling is called by the code below.

<div id="primary">
   <div id="content" role="main">

If that is the case, then I would think that I could create a new “role” if that is what is driving it called “custom” for arguments sake and call that to change what styling is being applied to that page.

I assume that I would then need 2 different page templates possible called custom-sidebar-page-light.php and custom-sidebar-page-dark.php which would make switching between the 2 different styles as simple as selecting which page template I want on the edit page.

Now the big question is this, if I am on the right track, exactly how do I do that ??? PHP coding makes my head hurt.

So you can see what I have been doing, there are 3 links below showing the Main site and 2 different versions of the modified pages.

To view one of my modified pages Click Here

To view a different version of a modified page Click Here

To view the main site layout Click Here

Any and all help will be greatly appreciated.

Kindest Regards
Bam Bam