Theme support for angularjs application

mallik vala

unread,

Jan 27, 2014, 12:48:56 PM1/27/14

to ang...@googlegroups.com

Hi everyone,

We are designing an app using AngularJS and bootstrap, the design challenge is, there will be multiple bootstrap.css files each with different color and size themes (old and visually challenged people can choose theme with darker and bigger fonts) There will be dropdown button to choose, on click of which theme has to change allover the application.

I am new to Angular, not proficient with its patterns etc., could anyone kindly give a few lines on how to start it.

My idea is to play with $rootscope or ng-app module as they have access to each dom element under their control. in my app <html> has ng-app attribute. Please correct me if wrong..

Thanks,

Mallik

Francesco Rizzi

unread,

Jan 28, 2014, 8:53:05 AM1/28/14

to ang...@googlegroups.com

I'm pretty new to angularJS myself, but from what you described, if the changes are purely CSS,

when the user selects to apply a theme instead of another, I'd simply add a CSS class to the body element,

and then have my CSS account for it.

In other words, I'd have CSS for these two:

#MainContent { background-color: white; }

.alternateTheme #MainContent { background-color: black; }

When the user clicks on the button to activate alternate theme, I'd grab the body tag and add the alternateTheme class to it

OR, you could use the angularjs ngClass directive ( http://docs.angularjs.org/api/ng.directive:ngClass ) on the body element.

HTH,

F.

mallik vala

unread,

Jan 28, 2014, 12:20:53 PM1/28/14

to ang...@googlegroups.com

Francesco,

Thanks for the inputs.

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/cV5ZSt6DSKI/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/groups/opt_out.

--
Mallik

Reply all

Reply to author

Forward