Проблема с созданием переключателя стилей в html / css

Question

Я пытаюсь сделать простой переключатель тем, используя альтернативную css таблицу стилей.

<link rel="stylesheet" href="style1.css">
<link rel="stylesheet" title="preferred_style" href="style2.css">
<link rel="alternate stylesheet" title="alternate_style" href="style3.css">

style1. css - это постоянная таблица стилей, style2. css - это таблица стилей по умолчанию, и она активируется в начало и style3. css - это альтернативная таблица стилей, и я хочу сделать переключатель между style2 и style3.

Я сделал выпадающее меню выбора, и функция javascript вызывается при выборе опции. Вот метод JS:

function switchTheme(select_el){
            var links = document.getElementsByTagName("link");
            title = select_el.options[select_el.selectedIndex].value;
            for(link of links){

                //skip persistent stylesheet with no title
                if(!link.hasAttribute('title'))continue;
                if(link.getAttribute('title')==title){
                    link.setAttribute('rel','stylesheet');
                    link.removeAttribute('disabled');
                }else{
                    link.setAttribute('rel','alternate stylesheet');
                    link.setAttribute('disabled','true');
                }
            }
        }

Этот метод делает именно то, что должен делать, в моих инструментах разработчика я вижу, что ссылки обновлены и теперь выглядят так:

<link rel="alternate stylesheet" title="preferred_stylesheet" href="style2.css" disabled="true">
<link rel="stylesheet" title="alternate_stylesheet" href="style3.css">

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