Cómo agregar un CSS que podemos cambiar. como si cambiamos en un lugar, el color de todo el sitio web debería cambiar.
Captura de pantalla: captura de pantalla de Muestra
Sitio web de muestra: https://themezhub.net/rikada-demo-05/rikada/index.html#
como puede ver en el sitio web anterior, tienen un control deslizante en el lado izquierdo y contienen una lista de colores, si elige cualquier color, todo el color del sitio web cambiará.
¿Cómo hacer así?.
Ejemplo :
Defino el código de color en un lugar de CSS o sitio web y luego todo el sitio web debe cambiarse de acuerdo con él.
Debe agregar la clase con la etiqueta del body al hacer clic en los colores del lado izquierdo. Luego agregue CSS de color para cada elemento que desee actualizar.
"Defino el código de color en un lugar de CSS o sitio web y luego todo el sitio web debe cambiarse de acuerdo con él".
Arriba, es la mejor idea para un color tan dinámico para las páginas web.
Código de ejemplo: -
function change(color){ $("body").removeClass(); $("body").addClass(color); } body.black { background-color : black; color: white; } body.black .heading_1{ font-size: 30px; font-weight : bold; } body.red { background-color : red; color: white; } body.red .heading_2{ font-size: 30px; font-weight : bold; } body.green { background-color : green; color: white; } body.green .heading_3{ font-size: 30px; font-weight : bold; } body.blue { background-color : blue; color: white; } body.blue .heading_4{ font-size: 30px; font-weight : bold; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <html> <body class="black"> <span class="heading_1"> This is Black </span><br/> <span class="heading_2"> This is Red </span><br/> <span class="heading_3"> This is Green </span><br/> <span class="heading_4"> This is Blue </span><br/> <br/> <button onclick="change('black')"> Black </button> <button onclick="change('red')"> Red </button> <button onclick="change('green')"> Green </button> <button onclick="change('blue')"> Blue </button> </body> </html> Puede definir cualquier estilo para cualquiera de sus elementos en la página ( I have it on heading in my case ), también puede definir cualquier clase para cualquiera de los elementos ( body.<class> in my case ) en la página con respecto a la cual vas a cambiar el estilo de otros elementos.