https://pi.ac.th/assets/js/change_color.js

1$(document).ready(function() {
2     $('#normally_bg').click(function normally_bg() {
3         $("body").css("background-color", "");
4         $("body").css("color", "");
5         $("a").css("color", "");
6         $("h1").css("color", "");
7         $("h2").css("color", "");
8         $("h2").css("color", "");
9         $("h3").css("color", "");
10         $("h4").css("color", "");
11         $("h5").css("color", "");
12         $("h6").css("color", "");
13         $("p").css("color", "");
14         $("li").css("color","");
15         $("li i,li div").css("color", "");
16         $("small").css("color", "");
17         $("marquee").css("color", "");
18         // $("img").css("filter", "grayscale(100%)");
19         $(".f-1").css("color", "");
20         $(".f-1").css("background-color", "");
21         $(".f-2").css("color", "");
22         $(".f-2").css("background-color", "");
23         $(".f-3").css("color", "F00");
24         $(".f-3").css("background-color", "");
25         $(".btn-main").css("background-color", "");
26         $(".btn-main").css("color", "");
27         $(".white-bg").css("background-color", "");
28         $(".bg-main").css("background-color", "");
29         $(".title-header").css("border-bottom", "");
30         $(".title-news").css("color","");
31         $(".news-info").css("background-color","");
32         $(".news-info").css("border-bottom", "");
33         $(".card-body").css("background-color","");
34         $(".title-card").css("color","");
35         $(".title-bg").css("background-color","");
36         $(".breadcrumb-menu").css("color","");
37         $(".breadcrumb-menu .active").css("color","");
38         $(".form-label").css("color","");
39         $(".form-control-search-header").css("color","");
40         $(".media-bg").css("background-color", "");
41         $(".dropdown-menu").css("background-color", "");
42         $(".rounded-border").css("border", "");
43         $(".page-item .page-link").css("color", "");
44         $(".page-item .page-link").css("background-color", "");
45         $(".page-item.active .page-link").css("color", "");
46         $(".page-item.active .page-link").css("background-color", "");
47         $(".contact-footer").css("color", "");
48         $("footer").css("background-color", "");
49         $("footer").css("border-top", "");
50         $(".comfooter").css("background-color", "");
51         $(".comfooter").css("color", "");
52     });
53 });
54 
55 $(document).ready(function() {
56     $('#black_bg').click(function black_bg() {
57         $("body").css("background-color", "#000");
58         $("body").css("color", "#FFF");
59         $("a").css("color", "#FFF");
60         $("h1").css("color", "#FFF");
61         $("h2").css("color", "#FFF");
62         $("h2").css("color", "#FFF");
63         $("h3").css("color", "#FFF");
64         $("h4").css("color", "#FFF");
65         $("h5").css("color", "#FFF");
66         $("h6").css("color", "#FFF");
67         $("p").css("color", "#FFF");
68         $("li").css("color","#FFF");
69         $("li i,li div").css("color", "#FFF");
70         $("small").css("color", "#FFF");
71         $("marquee").css("color", "#FFF");
72         // $("img").css("filter", "grayscale(100%)");
73         $(".f-1").css("color", "#FFF");
74         $(".f-1").css("background-color", "none");
75         $(".f-2").css("color", "#FFF");
76         $(".f-2").css("background-color", "#000");
77         $(".f-3").css("color", "#FFFF00");
78         $(".f-3").css("background-color", "#000");
79         $(".btn-main").css("background-color", "#FFF");
80         $(".btn-main").css("color", "#000");
81         $(".white-bg").css("background-color", "#000");
82         $(".bg-main").css("background-color", "#000");
83         $(".title-header").css("border-bottom", "3px #FFF solid");
84         $(".title-news").css("color","#FFF");
85         $(".news-info").css("background-color","#000");
86         $(".news-info").css("border-bottom", "1px #FFF solid");
87         $(".card-body").css("background-color","#000");
88         $(".title-card").css("color","#000");
89         $(".title-bg").css("background-color","#FFF");
90         $(".breadcrumb-menu").css("color","#000");
91         $(".breadcrumb-menu .active").css("color","#000");
92         $(".form-label").css("color","#FFF");
93         $(".form-control-search-header").css("color","#FFF");
94         $(".form-control-search-header").css("backgroubd-color","none");
95         $(".form-control-search-header").css("border-color","#FFF");
96         $(".media-bg").css("background-color", "#000");
97         $(".dropdown-menu").css("background-color", "#000");

98         $(".rounded-border").css("border", "1px #FFF solid");
99         $(".page-item .page-link").css("color", "#FFF");
100         $(".page-item .page-link").css("background-color", "#707070");
101         $(".page-item.active .page-link").css("color", "#000");
102         $(".page-item.active .page-link").css("background-color", "#FFF");
103         $(".contact-footer").css("color", "#FFF");
104         $("footer").css("background-color", "#000");
105         $("footer").css("border-top", "1px #FFF solid");
106         $(".comfooter").css("background-color", "#FFF");
107         $(".comfooter").css("color", "#000");
108     });
109 });
110 
111 $(document).ready(function() {
112     $('#yellow_bg').click(function yellow_bg() {
113         $("body").css("background-color", "#000");
114         $("body").css("color", "#FFFF00");
115         $("a").css("color", "#FFFF00");
116         $("h1").css("color", "#FFFF00");
117         $("h2").css("color", "#FFFF00");
118         $("h2").css("color", "#FFFF00");
119         $("h3").css("color", "#FFFF00");
120         $("h4").css("color", "#FFFF00");
121         $("h5").css("color", "#FFFF00");
122         $("h6").css("color", "#FFFF00");
123         $("p").css("color", "#FFFF00");
124         $("li").css("color","#FFFF00");
125         $("li i,li div").css("color", "#FFFF00");
126         $("small").css("color", "#FFFF00");
127         $("marquee").css("color", "#FFFF00");
128         // $("img").css("filter", "sepia(100%)");
129         $(".f-1").css("color", "#FFF");
130         $(".f-1").css("background-color", "none");
131         $(".f-2").css("color", "#FFF");
132         $(".f-2").css("background-color", "#000");
133         $(".f-3").css("color", "#FFFF00");
134         $(".f-3").css("background-color", "#000");
135         $(".btn-main").css("background-color", "#FFFF00");
136         $(".btn-main").css("color", "#000");
137         $(".white-bg").css("background-color", "#000");
138         $(".bg-main").css("background-color", "#000");
139         $(".title-header").css("border-bottom", "3px #FFFF00 solid");
140         $(".title-news").css("color","#FFFF00");
141         $(".news-info").css("background-color","#000");
142         $(".news-info").css("border-bottom", "1px #FFFF00 solid");
143         $(".card-body").css("background-color","#000");
144         $(".title-card").css("color","#000");
145         $(".title-bg").css("background-color","#FFFF00");
146         $(".breadcrumb-menu").css("color","#000");
147         $(".breadcrumb-menu .active").css("color","#000");
148         $(".form-label").css("color","#FFFF00");
149         $(".media-bg").css("background-color", "#000");
150         $(".dropdown-menu").css("background-color", "#000");
151         $(".rounded-border").css("border", "1px #FFFF00 solid");
152         $(".page-item .page-link").css("color", "#FFFF00");
153         $(".page-item .page-link").css("background-color", "#707070");
154         $(".page-item.active .page-link").css("color", "#000");
155         $(".page-item.active .page-link").css("background-color", "#FFFF00");
156         $(".contact-footer").css("color", "#FFFF00");
157         $("footer").css("background-color", "#000");
158         $("footer").css("border-top", "1px #FFFF00 solid");
159         $(".comfooter").css("background-color", "#FFFF00");
160         $(".comfooter").css("color", "#000");
161     });
162 });