Modifiez le thème du site Web réactif sur le clic du bouton

J'ai quatre types de fichiers CSS afin que je puisse ouvrir mon site Web dans un bureau, un mobile et une tablette. J'ai appelé ces pages CSS via la fonction javascript dans une page javascript externe et l'étiquette de script appelée dans la page d'index. Le code que j'ai écrit est ci-dessous mais le problème n'est pas tel qu'il fonctionne bien. Maintenant, en utilisant ce même concept, je souhaite modifier la couleur du thème du site qui s'ouvre dans tout, c'est-à-dire mobile, tablette, bureau ou tout écran large. Donc, mon vrai problème est cela. Veuillez me suggérer des idées.

Le code est ici que j'ai utilisé dans le fichier .js pour un site réactif pour appeler tous les css

function adjustStyle(width) { width = parseInt(width); if (width < 350) { $("#size-stylesheet").attr("href", "css/mobile.css"); } else if ((width >= 351) && (width < 600)) { $("#size-stylesheet").attr("href", "css/narrow.css"); } else if ((width >= 601) && (width < 900)) { $("#size-stylesheet").attr("href", "css/medium.css"); }else { $("#size-stylesheet").attr("href", "css/wide.css"); } } $(function() { adjustStyle($(this).width()); $(window).resize(function() { adjustStyle($(this).width()); }); });

Maintenant pour modifier la couleur du thème, je dois écrire plus de css pour tous les css. Je suis totalement nouveau dans la conception d'un site Web réactif, toute aide sera appréciée et toutes les suggestions seront acceptées.

Si vous construisiez un site Web réactif, je souhaiterais une mise en page fluide avec des requêtes multimédias . Il ne devrait pas y avoir de fichiers css différents pour différentes largeurs, sauf si la conception change drastiquement entre les différentes largeurs. (Ce que je pense que cela ne devrait pas faire, puisque cela risquerait probablement de confondre les utilisateurs).

Afin de changer le thème de couleur du site sur un clic de bouton, je ferais quelque chose de semblable à ce que vous faites maintenant avec vos fichiers css pour différentes largeurs.

Je voudrais extraire tout ce qui a trait aux couleurs dans son propre fichier css, et nommez-le par exemple default-theme.css. Si j'aimerais alors passer à un thème sombre en cliquant sur un bouton, je créerais un nouveau fichier css appelé par exemple dark-theme.css et enregistrer quelque chose comme la fonction suivante sur l'événement onclick du bouton:

 function adjustTheme(width) { $("#theme-stylesheet").attr("href", "css/dark-theme.css"); }

Je suggérerais d'utiliser un seul fichier css. Comme il serait difficile de conserver tout dans des fichiers css distincts. Vous pouvez utiliser la requête multimédia css pour la même: Css3 Media Query . Exemple

 @media screen and (max-width: 300px) { body { background-color: lightblue; }

}