Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improved css theming #915

Open
wants to merge 20 commits into
base: master
Choose a base branch
from
Open

Conversation

glaszig
Copy link
Contributor

@glaszig glaszig commented May 29, 2021

  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
Copy link
Member

billz commented May 29, 2021

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
Copy link
Contributor Author

glaszig commented May 29, 2021

Sass + Compass

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

@billz
Copy link
Member

billz commented May 31, 2021

Testing this today. Stay tuned

@billz
Copy link
Member

billz commented May 31, 2021

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
Copy link
Contributor Author

glaszig commented May 31, 2021

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 ;)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants