Запрет рендеринга страницы при вставке тега ссылки CSS в JS

Question

Я хотел бы позволить моим пользователям выбирать между "светлой" темой (по умолчанию) и "темной" темой, которая обеспечивается добавлением другого файла CSS.

Вот код JavaScript. Как видите, я постарался предусмотреть дополнительные темы в будущем.

var themes = {
    "dark": "HTML/css/dark-theme.css"
};

var themeCssLink = document.createElement('link');
themeCssLink.setAttribute('rel', 'stylesheet');
document.getElementsByTagName('head')[0].appendChild(themeCssLink);

var theme = localStorage.getItem('theme');
if (!(theme in themes))
    theme = null;
if (theme !== null)
    themeCssLink.setAttribute('href', themes[theme])

Проблема в том, что страница отображается до того, как загружается темная тема CSS, вызывая яркую белую вспышку, которую я хотел бы знать, как ее предотвратить.

Еще одна вещь, которую я попробовал, заключалась в том, чтобы поместить в HTML элемент-пустышку:

<link href='' rel='stylesheet' type='text/css' id='theme-css'>

а затем просто изменив href в JavaScript:

var themeCssLink = document.getElementById('theme-css');
var theme = localStorage.getItem('theme');
if (!(theme in themes))
    theme = null;
if (theme !== null)
    themeCssLink.setAttribute('href', themes[theme]);

К сожалению, это имеет тот же эффект.

Как убедить браузер заблокировать рендеринг до тех пор, пока не будет загружен CSS-файл темы?

Answer 1

Просто поместите ваш JavaScript-скрипт перед вашим CSS, чтобы ваша тема загружалась до вашего основного CSS.

Если вы делаете это, вы должны быть осторожны с файлом main.css, чтобы он не перекрывал загруженную ранее тему css.