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

@@ -1,15 +1,20 @@
 {% block title %}
-<title>{% if head.title != empty %}{{head.title}}{% else %}${REPO_NAME} by ${REPO_OWNER}{% endif %}</title>
+<title>{% if head.title != empty %}{{ head.title }}{% else %}${REPO_NAME} by ${REPO_OWNER}{% endif %}</title>
 {% endblock %}
 
 {% block meta %}
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 {% for meta in head.metas %}
-<meta {% for name, value in meta.attributes %}{{name}}="{{value}}" {% endfor %}>
+<meta {% for name, value in meta.attributes %}{{ name }}="{{ value }}" {% endfor %}>
 {% endfor %}
 {% 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 %}