Цвет темы сайта не меняется

Question

Я хочу изменить цвет темы сайта, и я использую этот способ, он не работает должным образом.Кто-нибудь может помочь?

<a href="javascript:void(0)" id="switch" class="gray-color">&nbsp;</a>
<a href="javascript:void(0)" id="switch2" class="green-color">&nbsp;</a>
<a href="javascript:void(0)" id="switch3" class="yellow-color">&nbsp;</a>

$("#switch").click(function () {
               $('head').append('<link rel="stylesheet" href="css/theme-gray.css"  title="gray" class="gray" />');
               $('link[title="yellow"]').remove();               
           });
$("#switch3").click(function () {
               $('head').append('<link rel="stylesheet" href="css/theme-yellow.css"  title="yellow" class="yellow" />');
               $('link[title="gray"]').remove();   
           });
$("#switch2").click(function () {
               $('link[title="yellow"]').remove();
               $('link[title="gray"]').remove();
 });

См. Скрины

Answer 1

Попробуйте этот код.

$(".theme-link").click(function () {
    console.log($(this).attr("data-theme"));

    $('#theme').attr("href", $(this).attr("data-theme") );        
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" id="theme" href="css/theme-gray.css"  title="gray" class="gray" />

<a href="javascript:void(0)" data-theme="css/theme-gray.css" class="theme-link">gary</a>
<a href="javascript:void(0)" data-theme="css/theme-green.css" class="theme-link">green</a>
<a href="javascript:void(0)" data-theme="css/theme-yellow.css" class="theme-link">yellow</a>