Improved css theming

[glaszig]

1. reduce code duplication in css files
2. use custom.php css as base
3. load theme css after custom.php
4. simpler theme switching logic

observation: i would like to get rid of that disabled-attribute-toggling on DOMContentLoaded but for some weird reason the browser would not apply the css if leave out the disabled-attribute in the php logic.

also fixed browser-cachability of custom.php.

[billz]

Definitely an area in need of improvement. This project would benefit from Sass + Compass or some other preprocessor. But this is a great start.

[glaszig]

Sass + Compass

indeed. but that was just too much to start with for my life style right now ;)

[billz]

Testing this today. Stay tuned

[billz]

Some testing observations so far:

1. with either of the non-default themes selected, on every page load the RaspAP default theme briefly appears before the selected theme is applied. Chrome variants and Firefox exhibit this; Safari does not. Possibly due to loading css after custom.php ?
2. when the default theme is selected, custom colors selected from the color picker are only applied to the svg logo. the headers retain the last cookie value

[glaszig]

default theme briefly appears

because the theme link tags on page load all have the disabled attribute. then, upon DOMContentLoaded i go and enable the selected theme. i know, i know, this is bloody stupid. i hate this logic like hell. but for some reason i couldn't get the styles to apply by leaving out the disabled attribute via php. you've got an idea?

custom colors selected from the color picker are only applied to the svg logo

i ignored that completely. i still believe we should remove all this theming complexity and have just 2 -- light and dark ;)