Assuming you have jQuery I'd do it as follows
index.html
 | | |
| Code: <!doctype html> <html> <head> <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script src="styles.js"></script> <link id="css" rel="stylesheet" href="blue.css"> </head> <body> <h1>'lo Bob.</h1> <button id="switch">Switch</button> </body> </html> | |
| | |
styles.js
| | |
| Code: $(document).ready(function() { $("#switch").click(function(){ $("#css").attr("href", function (idx, oldValue) { return oldValue === "red.css" ? "blue.css" : "red.css"; }); }); }); | |
| | |
blue.css
| | |
| Code: h1 {color: blue} | |
| | |
red.css
| | |
| Code: h1 {color: red} | |
| | |
Having said that, I'm a backend developer, I rarely even dabble in javascript, and I've no clue if this will interfere with angular.