main.js
или main.ts
импортируете его:import '@fontsource/source-sans-pro';
import '@fontsource/source-sans-pro/cyrillic.css';
head
:+ function applyTheme() {
+ const isDark = (localStorage.getItem('is-dark-theme') ?? 'true') === 'true';
+ if (isDark) {
+ document.body.classList.remove('light-mode');
+ document.body.classList.add('dark-mode');
+ } else {
+ document.body.classList.remove('dark-mode');
+ document.body.classList.add('light-mode');
+ }
+ }
- var dark = true;
function themeChange() {
- var element = document.body;
-
- if (dark == true) {
- element.classList.remove("dark-mode");
- element.classList.add("light-mode");
- dark = false;
- }
-
- else {
- element.classList.remove("light-mode");
- element.classList.add("dark-mode");
- dark = true;
- }
+ localStorage.setItem('is-dark-theme', !((localStorage.getItem('is-dark-theme') ?? 'true') === 'true'));
+ applyTheme();
}
+ window.addEventListener('DOMContentLoaded', function () {
+ applyTheme();
+ });
.event {
width: 300px;
height: 100px;
&__caption {
color: blue;
}
&__description {
color: green;
}
}
@media screen and (max-width: 768px) {
.event {
&__caption {
color: red;
}
}
}
.event {
width: 300px;
height: 100px;
&__caption {
color: blue;
@media screen and (max-width: 768px) {
color: red;
}
}
&__description {
color: green;
}
}