Advertisement
Guest User

Untitled

a guest
Aug 17th, 2019
136
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 3.38 KB | None | 0 0
  1. var swatches = {
  2. swatchesArray: ['blue', 'pink', 'green', 'yellow', 'purple', 'orange', 'dark'],
  3. pageClass: '.netoPage',
  4. styles: function(){
  5. return `
  6. /* Blue */
  7.  
  8. .netoPage.blue #netoToolbar {
  9. background-color: #083E52;
  10. border-bottom: solid 1px #083E52;
  11. }
  12. .netoPage.blue .netoToolbar--search {
  13. background-color: #0a4c65;
  14. }
  15.  
  16. /* Pink */
  17.  
  18. .netoPage.pink #netoToolbar {
  19. background-color: #BC1F56;
  20. border-bottom: solid 1px #BC1F56;
  21. }
  22. .netoPage.pink #netoToolbar .netoToolbar--search {
  23. background-color: #EF4A7E;
  24. }
  25.  
  26. /* Green */
  27.  
  28. .netoPage.green #netoToolbar {
  29. background-color: #56C1A8;
  30. border-bottom: solid 1px #56C1A8;
  31. }
  32. .netoPage.green #netoToolbar .netoToolbar--search {
  33. background-color: #2A9D83;
  34. }
  35.  
  36. /* Yellow */
  37.  
  38. .netoPage.yellow #netoToolbar {
  39. background-color: #E1AA25;
  40. border-bottom: solid 1px #E1AA25;
  41. }
  42. .netoPage.yellow #netoToolbar .netoToolbar--search {
  43. background-color: #FFC907;
  44. }
  45.  
  46. /* Purple */
  47.  
  48. .netoPage.purple #netoToolbar {
  49. background-color: #622B7C;
  50. border-bottom: solid 1px #622B7C;
  51. }
  52. .netoPage.purple #netoToolbar .netoToolbar--search {
  53. background-color: #A769AB;
  54. }
  55.  
  56. /* Orange */
  57.  
  58. .netoPage.orange #netoToolbar {
  59. background-color: #EC8623;
  60. border-bottom: solid 1px #EC8623;
  61. }
  62. .netoPage.orange #netoToolbar .netoToolbar--search {
  63. background-color: #FBB042;
  64. }
  65.  
  66. /* Dark */
  67.  
  68. .netoPage.dark #netoToolbar {
  69. background-color: #383D3F;
  70. border-bottom: solid 1px #383D3F;
  71. }
  72. .netoPage.dark #netoToolbar .netoToolbar--search {
  73. background-color: #86898A;
  74. }
  75. `;
  76. },
  77. inject: function(){
  78. var styleSheet = swatches.styles();
  79. var content = `<style>${styleSheet}</style>`;
  80.  
  81. $('head').append(content);
  82. },
  83. switch: function(colour, time = 3000){
  84. if(colour){
  85. $.each(swatches.swatchesArray, function(i, v){
  86. $(swatches.pageClass).removeClass(v);
  87. });
  88.  
  89. $(swatches.pageClass).addClass(colour);
  90. }else{
  91. var i = 0;
  92.  
  93. window.setInterval(function(){
  94. if (i < swatches.swatchesArray.length - 1){
  95. i = i + 1;
  96. } else {
  97. i = 0;
  98. }
  99.  
  100. $.each(swatches.swatchesArray, function(i, v){
  101. $(swatches.pageClass).removeClass(v);
  102. });
  103.  
  104. $(swatches.pageClass).addClass(swatches.swatchesArray[i]);
  105.  
  106. }, time);
  107. }
  108. },
  109. init: function(){
  110. swatches.inject();
  111. swatches.switch('dark');
  112. }
  113. }
  114.  
  115. swatches.init();
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement