added colors.css

author/project/system/public/css/themes/default/aside.css

@@ -0,0 +1,4 @@
+@charset "UTF-8";
+
+aside {
+}

author/project/system/public/css/themes/default/colors.css

@@ -0,0 +1,37 @@
+@charset "UTF-8";
+
+@media (prefers-color-scheme: dark) {
+    :root {
+		--text-color: initial;
+		--text-color-hover: initial;
+		--text-color-active: initial;
+		--text-notice-color: initial;
+		--text-warning-color: initial;
+		--text-selected-color: initial;
+		--text-selected-background-color: initial;
+
+		--link-color: initial;
+		--link-color-hover: initial;
+		--link-color-active: initial;
+
+		color: var(--text-color);
+	}
+}
+
+@media (prefers-color-scheme: light) {
+	:root {
+		--text-color: initial;
+		--text-color-hover: initial;
+		--text-color-active: initial;
+		--text-notice-color: initial;
+		--text-warning-color: initial;
+		--text-selected-color: initial;
+		--text-selected-background-color: initial;
+
+		--link-color: initial;
+		--link-color-hover: initial;
+		--link-color-active: initial;
+
+		color: var(--text-color);
+	}
+}

author/project/system/public/css/themes/default/footer.css

@@ -0,0 +1,4 @@
+@charset "UTF-8";
+
+footer {
+}

author/project/system/public/css/themes/default/header.css

@@ -0,0 +1,4 @@
+@charset "UTF-8";
+
+header {
+}

author/project/system/public/css/themes/default/main.css

@@ -1,46 +1,9 @@
 @charset "UTF-8";
 
-* {
-	text-decoration: none;
-	outline: none;
-	border: none;
-	/* font-family: , system-ui, sans-serif; */
-	font-family: "dejavu";
-	transition: 0.1s ease-out;
-}
-
-body {
-	margin: 0;
-	min-height: 100vh;
-	padding: 0;
-	display: flex;
-	flex-direction: column;
-	background-color: var(--background, #fafafa);
-}
-
-aside {
-}
-
-header {
-}
-
 main {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
-	gap: 10px;
+	gap: var(--gap);
 	transition: 0s;
 }
-
-footer {
-}
-
-.unselectable {
-	-webkit-touch-callout: none;
-	-webkit-user-select: none;
-	-khtml-user-select: none;
-	-moz-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
-}
-

author/project/system/public/css/themes/default/system.css

@@ -0,0 +1,34 @@
+@charset "UTF-8";
+
+:root {
+	--gap: min(12px, 1rem);
+
+	/* font-family: , system-ui, sans-serif; */
+	font-family: "dejavu";
+	text-decoration: none;
+	outline: none;
+	border: none;
+	transition: 0.1s ease-out;
+}
+
+/* Selection */
+::selection {
+  color: var(--text-selected-color);
+  background: var(--text-selected-background-color);
+}
+
+::-moz-selection {
+  color: var(--text-selected-color);
+  background: var(--text-selected-background-color);
+}
+
+
+.unselectable {
+	-webkit-touch-callout: none;
+	-webkit-user-select: none;
+	-khtml-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+

author/project/system/public/index.php

@@ -17,14 +17,11 @@ ini_set('display_startup_errors', 1); */
 define('PUBLIC', __DIR__);
 
 // Initializing path to the project root directory
-define('ROOT',  INDEX . DIRECTORY_SEPARATOR	. '..' . DIRECTORY_SEPARATOR	. '..' . DIRECTORY_SEPARATOR	. '..' . DIRECTORY_SEPARATOR . '..' . DIRECTORY_SEPARATOR);
+define('ROOT',  PUBLIC . DIRECTORY_SEPARATOR	. '..' . DIRECTORY_SEPARATOR	. '..' . DIRECTORY_SEPARATOR	. '..' . DIRECTORY_SEPARATOR . '..' . DIRECTORY_SEPARATOR);
 
 // Initializing path to the directory of views 
 define('VIEWS', realpath('..' . DIRECTORY_SEPARATOR . 'views'));
 
-// Initializing path to the directory of storage 
-define('STORAGE', realpath('..' . DIRECTORY_SEPARATOR . 'storage'));
-
 // Initializing path to the directory of settings 
 define('SETTINGS', realpath('..' . DIRECTORY_SEPARATOR . 'settings'));
 

author/project/system/views/themes/default/head.html

@@ -11,5 +11,10 @@
 {% endblock %}
 
 {% block css %}
-<link type="text/css" rel="stylesheet" href="/css/themes/default/main.css" />
+<link type="text/css" rel="stylesheet" href="/css/themes/{{ theme }}/system.css" />
+<link type="text/css" rel="stylesheet" href="/css/themes/{{ theme }}/header.css" />
+<link type="text/css" rel="stylesheet" href="/css/themes/{{ theme }}/main.css" />
+<link type="text/css" rel="stylesheet" href="/css/themes/{{ theme }}/aside.css" />
+<link type="text/css" rel="stylesheet" href="/css/themes/{{ theme }}/footer.css" />
+<link type="text/css" rel="stylesheet" href="/css/themes/{{ theme }}/colors.css" />
 {% endblock %}