I finished adding settings - added a dark theme

(the styles themselves have not yet been rewritten and look disgusting)

blog/index.py

@@ -18,7 +18,7 @@
 # Полирование проекта
 # todo + Сделать настройки:
 #  1) + Выключатель цветных рамочек
-#  2) - Тёмная-светлая тема
+#  2) + Тёмная-светлая тема
 #  3) + Включение мемного режима ;)
 #  4) + Отключение всех стилей
 

blog/resources/scripts/settings.js

@@ -105,7 +105,19 @@ function theming(toggleId) {
 }
 
 function applyThemes(isChecked) {
-	// Пока не готово
+	const links = document.querySelectorAll('link[rel="stylesheet"]');
+
+	links.forEach(link => {
+		let href = link.getAttribute('href');
+
+		if (isChecked) {
+			href = href.replace('/light/', '/night/');
+		} else {
+			href = href.replace('/night/', '/light/');
+		}
+
+		link.setAttribute('href', href);
+	});
 }
 
 function framing(toggleId) {

blog/resources/styles/night/base.css

@@ -0,0 +1,102 @@
+/*
+ * Ядро стилей для всего блога
+ */
+
+body {
+	font-family: 'Lato', sans-serif;
+	margin: 0;
+	padding: 0;
+	background-color: #666;
+}
+
+header {
+	background-color: #333;
+    color: #fff;
+    text-align: center;
+    padding: 1em;
+    position: relative; /* Установка относительной позиции */
+}
+.avatar-container {
+    width: 150px; /* Размер кружка */
+    height: 150px;
+    overflow: hidden; /* Обрезать изображение, чтобы оно не выходило за границы кружка */
+    border-radius: 50%; /* Создание кружка */
+    position: absolute; /* Абсолютное позиционирование */
+    left: 1em; /* Размещение слева от родительского элемента */
+    top: 50%; /* Размещение по вертикали в центре родительского элемента */
+    transform: translateY(-50%); /* Коррекция вертикального выравнивания */
+}
+.avatar-container img {
+    width: 100%; /* Заполнить весь кружок изображением */
+    height: auto;
+    border-radius: 50%; /* Поддержание круглой формы */
+}
+.header-text {
+    flex-grow: 1; /* Растягивание текстового блока на всю доступную ширину */
+}
+
+#mainNav {
+	background-color: #454545;
+	padding: 1em;
+	text-align: center;
+}
+#docsMenu,
+#blogMenu,
+#viaryMenu,
+#galleryMenu,
+#codeMenu {
+	display: none;
+	flex-basis: 100%;
+	flex-direction: column;
+	margin-top: 30px; /* или другое значение отступа сверху */
+}
+#mainNav a,
+#docsMenu a,
+#blogMenu a,
+#viaryMenu a,
+#galleryMenu a,
+#codeMenu a {
+	margin: 5px;
+	padding: 10px;
+	background-color: #e4e4e4;
+	text-decoration: none;
+	color: #333;
+	border-radius: 5px;
+}
+/* Change the color of links on hover */
+#mainNav a:hover {
+	background-color: #aaa;
+	color: black;
+	transition: background-color 0.5s ease, color 0.5s ease;
+}
+/* Add a color to the active/current link */
+#mainNav a.active {
+	background-color: #bbb;
+	color: black;
+}
+
+main {
+	max-width: 800px;
+	min-height: 400px;
+	margin: 20px auto;
+	padding: 20px;
+	background-color: #777;
+}
+
+footer {
+	padding: 1em;
+	background-color: #333;
+	color: #fff;
+}
+.footer-container {
+	display: flex;
+	justify-content: space-between;
+}
+.column-left {
+	padding-left: 50px;
+	width: 48%; /* Задайте ширину колонок по вашему усмотрению */
+}
+.column-right {
+	text-align: center;
+	width: 48%; /* Задайте ширину колонок по вашему усмотрению */
+}

blog/resources/styles/night/biography.css

@@ -0,0 +1,24 @@
+/*
+ * Стили для биографии
+ */
+
+.biography {
+	position: relative;
+	padding: 20px;
+	border: 1px solid #ccc;
+	border-radius: 5px;
+	background-color: rgba(255, 255, 255, 0.8);
+	font-family: 'Montserrat', sans-serif;
+}
+.biography .title{
+	margin: 10px;
+	text-align: center;
+	font-size: 36px;
+	font-weight: 700;
+}
+.biography .subtitle {
+	font-weight: 700;
+}
+.biography .foto {
+	text-align: center;
+}

blog/resources/styles/night/button.css

@@ -0,0 +1,60 @@
+/*
+ * Стили для кнопок
+ */
+
+.button-container {
+    display: flex;
+}
+.button-container > *:not(:last-child) {
+    margin-right: 10px; /* Отступ справа между всеми элементами кроме последнего */
+}
+.button-container button,
+.button-container input[type="file"] {
+	width: 100%;
+	padding: 10px;
+	margin-bottom: 15px;
+	border: 1px solid #ccc;
+	border-radius: 4px;
+	box-sizing: border-box;
+	font-family: 'Montserrat', sans-serif;
+}
+.button-container button.button-add {
+	background-color: #3498db; /* Зеленый цвет для кнопки "Добавить пост" */
+	color: white;
+	cursor: pointer;
+	transition: background-color 0.3s ease;
+}
+.button-container button.button-add:hover {
+	background-color: #2980b9; /* Зеленый цвет для кнопки "Добавить пост" */
+}
+.button-container button.button-file {
+	background-color: #3498db; /* Зеленый цвет для кнопки "Добавить пост" */
+	color: white;
+	cursor: pointer;
+	transition: background-color 0.3s ease;
+}
+.button-container button.button-file:hover {
+	background-color: #2980b9; /* Зеленый цвет для кнопки "Добавить пост" */
+}
+.button-container button.button-update {
+	background-color: #f1c40f; /* Красный цвет для кнопки "Удалить пост" */
+	color: white;
+	cursor: pointer;
+	transition: background-color 0.3s ease;
+}
+.button-container button.button-update:hover {
+	background-color: #d4ac0d; /* Красный цвет для кнопки "Удалить пост" */
+}
+.button-container button.button-delete {
+	background-color: #e74c3c; /* Красный цвет для кнопки "Удалить пост" */
+	color: white;
+	cursor: pointer;
+	transition: background-color 0.3s ease;
+}
+.button-container button.button-delete:hover {
+	background-color: #c0392b; /* Красный цвет для кнопки "Удалить пост" */
+}
+/* Дополнительные стили для элемента input[type="file"] */
+.button-container input[type="file"] {
+	padding: 10px;
+}

blog/resources/styles/night/diary.css

@@ -0,0 +1,43 @@
+/*
+ * Стили для страницы списка постов и сновидений
+ */
+
+.diary-item {
+	/* Стили для article */
+	border: 1px solid #ccc;
+	padding: 20px;
+	border-radius: 8px;
+	background-color: rgba(255, 255, 255, 0.8);
+	font-family: 'Montserrat', sans-serif;
+}
+.diary-item a {
+	text-decoration: none;
+	color: #3498db; /* Синий цвет для ссылок на посты */
+}
+.diary-item a:hover {
+	text-decoration: underline;
+}
+.diary-item .entry-title {
+	/* Стили для вложенного p с классом post-description */
+	margin: 8px 0px;
+	margin-top: 0px;
+	font-size: 24px;
+}
+.diary-item .entry-description {
+	/* Стили для вложенного p с классом post-description */
+	margin:8px 0px;
+	font-size: 16px;
+	color: #333;
+}
+.diary-item .tags {
+	margin: 8px 0px;
+	font-size: 16px;
+	color: #333;
+}
+.diary-item .entry-date {
+	/* Стили для вложенного p с классом post-date */
+	margin: 8px 0px;
+	margin-bottom: 0px;
+	font-size: 14px;
+	color: #555;
+}

blog/resources/styles/night/diary_entry.css

@@ -0,0 +1,46 @@
+/*
+ * Стили для страницы содержимого поста и сновидения
+ */
+
+.diary-entry {
+	position: relative;
+	border: 1px solid #ddd;
+	padding: 20px;
+	border-radius: 8px;
+	background-color: rgba(255, 255, 255, 0.8);
+	font-family: 'Montserrat', sans-serif;
+}
+.diary-entry .title {
+	margin: 10px 0px;
+	text-align: center;
+	font-size: 36px;
+}
+.diary-entry .description {
+	margin: 10px 0px;
+	font-size: 18px;
+}
+.diary-entry .tags {
+	font-size: 18px;
+}
+.diary-entry .date {
+	margin: 10px 0px;
+	text-align: right;
+	font-size: 16px;
+}
+.diary-entry .importance {
+	margin: 10px 0px;
+	text-align: right;
+	font-size: 16px;
+}
+.diary-entry .divider {
+	border: 0;
+	border-top: 1px solid #ddd;
+	margin: 0px 0px 15px 0px;
+}
+.diary-entry .content {
+	font-size: 16px;
+	line-height: 1.6;
+}
+.diary-entry .content .image {
+	text-align: center;
+}

blog/resources/styles/night/file_list.css

@@ -0,0 +1,33 @@
+/*
+ * Стили для списка файлов
+ */
+
+.file-list {
+	list-style: none;
+	display: flex;
+	flex-wrap: wrap;
+	gap: 20px; /* Расстояние между изображениями */
+}
+.file-item {
+	text-align: center;
+	width: 128px; /* Ширина блока с изображением */
+}
+.thumbnail-container {
+	width: 128px;
+	height: 128px;
+	overflow: hidden;
+	position: relative;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+.thumbnail-container img {
+	width: 100%;
+	height: 100%;
+	object-fit: contain;
+}
+.file-icon {
+	max-width: 100%;
+	max-height: 100%;
+	object-fit: cover;
+}