Как сделать смену тёмной темы плавно?

Question

[Алексей Королёв]

Есть скрипт, который меняет тему путём замены стилей. Сменив тему и перезагружая страницу, всё равно на долю секунды появляется светлая тема. когда находишься в тёмной.

Как сделать так, чтобы светлая тема не просвечивалась при перезагрузке страницы? Или может есть простые аналоги такого скрипта?

<div class="content">
<button class="mode-switch d-none d-lg-block" title="Сменить тему" id="toggleThemeBtn">
         <svg class="moon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" width="24" height="24" viewBox="0 0 24 24">
            <defs></defs>
            <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"></path>
         </svg>
         <svg class ="sun" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" width="612px" height="612px" viewBox="0 0 612 612" style="enable-background:new 0 0 612 612;" xml:space="preserve">
<g>
	<g id="_x37__5_">
		<g>
			<path d="M76.5,286.875H19.125C8.568,286.875,0,295.443,0,306c0,10.557,8.568,19.125,19.125,19.125H76.5     c10.557,0,19.125-8.568,19.125-19.125C95.625,295.443,87.057,286.875,76.5,286.875z M306,95.625     c10.557,0,19.125-8.568,19.125-19.125V19.125C325.125,8.568,316.557,0,306,0c-10.557,0-19.125,8.568-19.125,19.125V76.5     C286.875,87.057,295.443,95.625,306,95.625z M490.002,148.792l40.182-40.182c7.401-7.401,7.401-19.393,0-26.794     s-19.394-7.401-26.795,0l-40.182,40.182c-7.401,7.401-7.401,19.393,0,26.794C470.609,156.194,482.601,156.194,490.002,148.792z      M141.716,443.509l-40.182,40.182c-7.401,7.401-7.401,19.393,0,26.794s19.393,7.401,26.794,0l40.182-40.182     c7.401-7.401,7.401-19.393,0-26.794S149.118,436.107,141.716,443.509z M130.203,157.246c7.478,7.478,19.584,7.478,27.042,0     c7.459-7.478,7.459-19.584,0-27.042L116.682,89.62c-7.478-7.478-19.584-7.478-27.043,0c-7.478,7.478-7.478,19.584,0,27.043     L130.203,157.246z M306,516.375c-10.557,0-19.125,8.568-19.125,19.125v57.375c0,10.557,8.568,19.125,19.125,19.125     c10.557,0,19.125-8.568,19.125-19.125V535.5C325.125,524.943,316.557,516.375,306,516.375z M481.797,454.754     c-7.478-7.478-19.584-7.478-27.043,0c-7.478,7.479-7.478,19.584,0,27.043l40.564,40.564c7.478,7.478,19.584,7.478,27.043,0     c7.459-7.479,7.478-19.584,0-27.043L481.797,454.754z M592.875,286.875H535.5c-10.557,0-19.125,8.568-19.125,19.125     c0,10.557,8.568,19.125,19.125,19.125h57.375c10.557,0,19.125-8.568,19.125-19.125C612,295.443,603.432,286.875,592.875,286.875z      M306,133.76c-95.128,0-172.24,77.112-172.24,172.24S210.872,478.24,306,478.24S478.24,401.128,478.24,306     S401.128,133.76,306,133.76z M306,439.837c-73.918,0-133.837-59.919-133.837-133.837S232.082,172.163,306,172.163     S439.837,232.082,439.837,306S379.918,439.837,306,439.837z"/>
		</g>
	</g>
</g>
</svg>
</button>

</div>

if (!localStorage.theme) localStorage.theme = "light"
document.body.className = localStorage.theme

let toggleThemeBtn = document.querySelector('#toggleThemeBtn');
toggleThemeBtn.onclick = () => {
    document.body.classList.toggle("dark")
    localStorage.theme = document.body.className || "light"
}

body{
  margin: 0;
  padding: 0;
  transition: .4s;
}
 
body.dark{
  background: #00151f;
  transition: .4s; 
} 
#toggleThemeBtn {
  cursor: pointer;
}
.moon{
  display:none;
}
.sun{
  width:24px;
  height:24px;
  display:block;
}
.dark #toggleThemeBtn .sun{
  display:none;
}
.dark #toggleThemeBtn .moon{
  display:block;
}

Comments

[Froggyweb]

Ну у тебя пока не загрузится js будет тема по умолчанию. Можно вынести это в head

if (!localStorage.theme) localStorage.theme = "light"
document.body.className = localStorage.theme

ну и критический css сделать.
Можно тему писать не в локалсторадж, а в куки и уже на сервере проставлять нужный класс

[Алексей Королёв]

Froggyweb, вставил это в head и скрипт перестал полностью работать

Answer 1

[gsaw]

Imho, что бы не моргало, надо уже сервером отдавать правильный вариант. Service Side Rendering. Либо весь <div class="content"> готовить скриптом и добавлять на страницу целиком.

Comments

[Алексей Королёв]

А как это в моём случае будет выглядеть?

Answer 2

[Aetae]

Твоя задача - чтобы код прилетел и обработался с первым полученным по сети куском, т.е. код надо размещать в head и повыше. На момент срабатывания может даже не быть body, так что следует использовать html (document.documentElement).

Comments

[Алексей Королёв]

А как это реализовать на практике?

[Aetae]

Алексей Королёв, что конкретно непонятно? Вроде же всё человеческим языком написано.