Update defaut theme

public/assets/css/style.css

@@ -6,52 +6,85 @@
 */
 
 :root {
-  --background-color: #dadada;
+  color-scheme: dark light;
-  --border-radius: 10px;
-  --light-color: #ececec;
-  --nav-background-color: #34495e;
-  --text-color: #1d1e22;
-  --margin: .7em;
 
-  h1 {
+  --primary: #cc2027;
-    color: var(--text-color);
+  --primary-darken: #8E161B;
-  }
+  --primary-lighten: #D64C52;
+  --primary-text-contrast: #FFF;
 
-  .login {
+  --secondary: #20ccc5;
-    color: var(--text-color);
+  --secondary-darken: #168E89;
-    border: 1px solid var(--text-color);
+  --secondary-lighten: #4CD6D0;
-  }
+  --secondary-text-contrast: #000;
+
+  --error: #c43933;
+  --error-darken: #892723;
+  --error-lighten: #CF605B;
+  --error-text-contrast: #FFF;
+
+  --info: #206ccc;
+  --info-darken: #164B8E;
+  --info-lighten: #4C89D6;
+  --info-text-contrast: #FFF;
+
+  --success: #7dcc20;
+  --success-darken: #578E16;
+  --success-lighten: #97D64C;
+  --success-text-contrast: #000;
+
+  --warning: #cc5e20;
+  --warning-darken: #8E4116;
+  --warning-lighten: #D67E4C;
+  --warning-text-contrast: #FFF;
+
+  --background-color: light-dark(#fffbfb, #171414);
+  --background-color-darken: light-dark(#B2AFAF, #100E0E);
+  --background-color-lighten: light-dark(#FFFBFB, #454343);
+
+  --header-background-color: light-dark(#171414, #fffbfb);
+  --header-background-color-darken: light-dark(#100E0E, #B2AFAF);
+  --header-background-color-lighten: light-dark(#454343, #FFFBFB);
+
+  --header-text-color: light-dark(#fffbfb, #171414);
+  --header-text-color-secondary: #ffffffb3;
+  --header-text-color-disable: light-dark(#ffffff80, #454343);
+
+  --text-color: light-dark(#171414, #fffbfb);
+  --text-color-secondary: #ffffffb3;
+  --text-color-disable: light-dark(#454343, #ffffff80);
+
+  --text-color-inverse: light-dark(#fffbfb, #171414);
+  --text-color-secondary-inverse: #ffffffb3;
+  --text-color-disable-inverse: light-dark(#ffffff80, #454343);
+
+  --h1-color: var(--primary);
+  --h2-color: #c33d35;
+  --h3-color: #b94f44;
+  --h4-color: #ae5e52;
+  --h5-color: #a16a61;
+  --h6-color: #927671;
 }
 
 [data-theme="dark"] {
+  --background-color: #171414;
+  --text-color: #fffbfb;
+  --text-color-inverse: #171414;
+}
 
-  --background-color: #1d1e22;
+[data-theme="light"] {
-  --border-radius: 10px;
+  --background-color: #fffbfb;
-  --light-color: #ececec;
+  --text-color: #171414;
-  --nav-background-color: #34495e;
+  --text-color-inverse: #fffbfb;
-  --text-color: #1d1e22;
+
+  .card, .modal-content, .modal-header {
+    background: var(--background-color) !important;
+  }
+}
+
+:root {
   --margin: .7em;
-
+  --border-radius: 10px;
-  h1 {
-    color: var(--light-color);
-  }
-
-  .login {
-    color: var(--light-color);
-    border: 1px solid var(--light-color);
-  }
-
-  .titleBar .linkList {
-    float: right;
-
-    svg {
-      fill: var(--nav-background-color);
-    }
-
-    svg:hover {
-      fill: var(--light-color);
-    }
-  }
 }
 
 *,
@@ -71,20 +104,20 @@ body {
 }
 
 h1 {
-  color: var(--light-color);
+  color: var(--h1-color);
   font-size: 2.5rem;
   margin: 0;
 }
 
 svg {
-  fill: var(--nav-background-color);
+  fill: var(--primary);
   height: 1.2em;
   transition: .3s all ease;
   vertical-align: text-bottom;
 }
 
 svg:hover {
-  background-color: var(--nav-background-color);
+  background-color: var(--primary-lighten);
   fill: var(--light-color);
 }
 
@@ -99,12 +132,12 @@ svg:hover {
     height: 2.5em;
     width: 2.5em;
     margin: var(--margin);
-    fill: var(--nav-background-color);
+    fill: var(--primary);
   }
 
   svg:hover {
     background-color: inherit;
-    fill: var(--text-color);
+    fill: var(--primary-lighten);
   }
 }
 
@@ -124,18 +157,19 @@ svg:hover {
   padding: 0 .5em;
 }
 
+.card a {
+  display: block;
+}
+
 .card-container h3 a {
   color: var(--text-color);
   text-decoration: none;
 }
 
 .card-container .card {
-  cursor: pointer;
+  background: var(--background-color-lighten);
-}
-
-.card-container .card {
-  background: var(--light-color);
   box-shadow: 0 0 2px 2px rgba(0, 0, 0, .05);
+  cursor: pointer;
   margin: var(--margin);
   transition: .3s all ease;
   width: calc(100% / 7 - 20px);
@@ -227,7 +261,7 @@ svg:hover {
 
 .modal {
   background-color: rgb(0, 0, 0);
-  background-color: rgba(0, 0, 0, 0.4);
+  background-color: rgba(0, 0, 0, 0.6);
   display: none;
   height: 100%;
   left: 0;
@@ -242,7 +276,7 @@ svg:hover {
 .modal-content {
   animation-duration: 0.3s;
   animation-name: animatetop;
-  background-color: var(--light-color);
+  background: var(--background-color-lighten);
   border-radius: var(--border-radius);
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
   font-size: 150%;
@@ -264,12 +298,12 @@ svg:hover {
 
 .modal-header a,
 .modal-header a:visited {
-  color: var(--nav-background-color);
+  color: var(--secondary);
 }
 
 .modal-header a:hover,
 .modal-header a:visited:hover {
-  filter: brightness(1.5);
+  color: var(--secondary-lighten);
 }
 
 .userDoc {
@@ -300,7 +334,7 @@ svg:hover {
 
 .close:hover,
 .close:focus {
-  color: var(--nav-background-color);
+  color: var(--text-color-disable);
   cursor: pointer;
   text-decoration: none;
   transform: rotate(90deg);
@@ -315,22 +349,27 @@ svg:hover {
 }
 
 .modal-header {
-  background-color: var(--light-color);
   color: var(--text-color);
   padding: 1px 15px;
+  background: var(--background-color-lighten);
 }
 
 .modal-body {
   padding: 2px 16px;
 }
 
+.modal-body a {
+  display: block;
+}
+
 .modal-body img {
   position: relative;
 }
 
 nav {
-  background-color: var(--nav-background-color);
+  background-color: var(--primary);
   border-radius: var(--border-radius);
+  color: var(--primary-text-contrast);
   display: flex;
   flex-wrap: wrap;
   height: auto;
@@ -363,33 +402,15 @@ nav span {
   width: fit-content;
 }
 
-.button {
-  background-color: var(--nav-background-color);
-  border: 1px solid var(--light-color);
-  border-radius: var(--border-radius);
-  color: var(--light-color);
-  padding: .2em .3em;
-  transition: all 0.3s ease-in-out;
-}
-
-.button:hover {
-  background-color: var(--light-color);
-  border: 1px solid var(--nav-background-color);
-  color: var(--text-color);
-}
-
 nav a {
   background-clip: text;
-  background-image: linear-gradient(to right,
-      var(--background-color),
-      var(--background-color) 50%,
-      var(--light-color) 50%);
   background-position: -100%;
   background-size: 200% 100%;
-  color: transparent;
+  color: var(--text-color-inverse);
   cursor: pointer;
   display: inline-block;
   font-size: 1.5rem;
+  font-weight: bold;
   line-height: 1.5rem;
   margin: auto var(--margin);
   padding: 5px 0;
@@ -413,16 +434,10 @@ nav .active::before {
   width: 0;
 }
 
-nav .active {
-  background-image: linear-gradient(to right,
-      var(--background-color),
-      var(--background-color) 50%,
-      var(--light-color) 50%);
-}
-
 nav a:hover,
 nav .active {
   background-position: 0;
+  color: var(--text-color);
 }
 
 nav a:hover::before,
@@ -431,9 +446,9 @@ nav .active::before {
 }
 
 .login {
-  border: 1px solid var(--light-color);
+  border: 1px solid var(--background-color-lighten);
   border-radius: var(--border-radius);
-  color: var(--light-color);
+  color: var(--text-color);
   display: flex;
   flex-direction: column;
   font-size: 2rem;
@@ -446,7 +461,7 @@ nav .active::before {
 input[type=text],
 input[type=password],
 select {
-  border: 1px solid var(--nav-background-color);
+  border: 1px solid var(--background-color-lighten);
   box-sizing: border-box;
   display: inline-block;
   margin: 0 0 var(--margin) 0;
@@ -454,12 +469,79 @@ select {
   width: 100%;
 }
 
-button[type=submit] {
+input[type=text]:active,
-  height: 3em;
+input[type=password]:active,
-  margin: auto;
+select:active,
-  width: 30%;
+input[type=text]:focus,
+input[type=password]:focus,
+select:focus,
+input[type=text]:focus-visible,
+input[type=password]:focus-visible,
+select:focus-visible,
+textarea:focus-visible {
+  border: 1px solid red;
+  outline: none;
 }
 
+button,
+.button {
+  border-radius: var(--border-radius);
+  line-height: 2.5em;
+  height: 2.5em;
+  margin: 0 auto;
+  border-style: solid;
+  border-width: 1px;
+  width: 30%;
+  font-size: 2rem;
+}
+
+button[type=submit] {
+  background-color: var(--success);
+  border-color: var(--success-lighten);
+  color: var(--success-text-contrast);
+}
+
+button[type=submit]:hover {
+  background-color: var(--success-lighten);
+  border-color: var(--success-darken);
+  color: var(--success-text-contrast);
+}
+
+
+.button {
+  background-color: var(--primary-darken);
+  border-color: var(--primary-lighten);
+  color: var(--primary-text-contrast);
+  transition: all 0.3s ease-in-out;
+  text-decoration: none;
+  text-align: center;
+}
+
+.button:hover {
+  background-color: var(--primary-lighten);
+  border-color: var(--primary-darken);
+}
+
+.button-error {
+  background-color: var(--error);
+  border-color: var(--error-lighten);
+  color: var(--error-text-contrast);
+}
+
+.flex {
+  display: flex;
+  flex-flow: row wrap;
+}
+
+.readMore .button {
+  width: auto;
+  padding: .2em .3em;
+  line-height: inherit;
+  height: auto;
+}
+
+
+
 .checkbox {
   display: flex;
   gap: 10px;
@@ -471,17 +553,17 @@ button[type=submit] {
   font-size: 1.7rem;
   margin: auto;
   width: 80vw;
-  color: var(--light-color);
+  color: var(--background-color-lighten);
   border-collapse: collapse;
 
   th,
   td {
     padding: 0.5rem;
-    border: 1px solid var(--light-color);
+    border: 1px solid var(--background-color-lighten);
   }
 
   th {
-    background-color: var(--nav-background-color);
+    background-color: var(--background-color-lighten);
   }
 }
 

public/assets/js/app.js

@@ -21,10 +21,22 @@ function showReadMore(modal) {
             divModal.style.display = "none";
         }
     }
+
+    window.onclick = function (event) {
+        if (event.target == divModal) {
+            divModal.style.display = "none";
+        }
+    }
+
+    const input = document.body;
+    input.onkeydown = function (event) {
+        if (event.key == "Escape") {
+            divModal.style.display = "none";
+        }
+    };
 }
 
 function toggleFilter(element, filter) {
-
     let filterListNav = document.getElementsByTagName('nav')
     for (var i = 0; i < filterListNav.length; i++) {
         for (var i2 = 0; i2 < filterListNav[i].children.length; i2++) {
@@ -56,7 +68,15 @@ function switchTheme(e) {
     let actualTheme = document.documentElement.getAttribute('data-theme');
     if (actualTheme === null || actualTheme === 'light') {
         document.documentElement.setAttribute('data-theme', 'dark');
+        localStorage.setItem('theme', 'dark');
     } else {
         document.documentElement.setAttribute('data-theme', 'light');
+        localStorage.setItem('theme', 'light');
     }
+    return false;
+}
+
+const currentTheme = localStorage.getItem('theme') ? localStorage.getItem('theme') : null;
+if (currentTheme) {
+    document.documentElement.setAttribute('data-theme', currentTheme);
 }

public/index.php

@@ -8,6 +8,14 @@ use KTH\HTMLGenerator\HTMLGenerator;
 use Login\Login;
 use Utils\CsrfToken;
 
+/*
+#############################################################
+################ DO NOT EDIT THIS FILE ######################
+################ USE data/config.yaml  ######################
+################ OR USE CONFIG PAGE    ######################
+#############################################################
+*/
+
 $defConfig['title'] = 'KT-HomePage';
 $defConfig['desc'] = 'Dashboard de Knah Tsaeb';
 $defConfig['favicon'] = 'assets/favicons/favicon-96x96.png';

template/default/content.php

@@ -22,7 +22,7 @@
                 </h3>
                 <?php if ($config['view'] !== 'icons') : ?>
                     <p class="readMore">
-                        <a class="button" onclick="showReadMore('<?= md5($service['link']); ?>')">More info</a>
+                        <a tabindex=0 class="button" onkeydown="showReadMore('<?= md5($service['link']); ?>')" onclick="showReadMore('<?= md5($service['link']); ?>')">More info</a>
                     </p>
                 <?php endif; ?>
             </div>
@@ -31,7 +31,7 @@
             <!-- Modal content -->
             <div class="modal-content">
                 <div class="modal-header">
-                    <span class="close" id="close-<?= md5($service['link']); ?>">&times;</span>
+                    <a class="close" id="close-<?= md5($service['link']); ?>" tabindex=0 >&times;</a>
                     <h2>
                         <img class="favicon" loading="lazy" src="<?= $KTH->returnImg($service['favicon'], 'favicons'); ?>" alt="Favicon" height="32px" />
                         <?= $service['title']; ?>

template/default/edit.php

@@ -46,11 +46,15 @@ require 'titleBar.php';
         <?= $error; ?>
     </div>
 
-    <textarea rows="50" name="services" id="services"><?= $content; ?></textarea>
+    <textarea rows="50" name="services" id="services"  spellcheck="false"><?= $content; ?></textarea>
 
     <input type="hidden" name="token" value="<?= CsrfToken::generateToken(); ?>">
     <input type="hidden" name="edit" value="1" />
+
+    <div class="flex">
+        <a class="button" href="?">Cancel</a>
         <button type="submit">Save</button>
+    </div>
 </form>
 <!--
 <form action="index.php" class="login" method="post">

template/default/settings.php

@@ -29,6 +29,7 @@ require 'titleBar.php';
 
     <label for="colorScheme">Color scheme</label>
     <select name="colorScheme" id="colorScheme">
+        <option value="auto" <?= Select::isSelected('auto', $config['colorScheme']); ?>>Auto</option>
         <option value="light" <?= Select::isSelected('light', $config['colorScheme']); ?>>Light</option>
         <option value="dark" <?= Select::isSelected('dark', $config['colorScheme']); ?>>Dark</option>
     </select>
@@ -42,12 +43,16 @@ require 'titleBar.php';
 
     <p class="checkbox">
         <label for="reimport">Reimport images and user files</label>
-        <input type="checkbox" name="reimport" id="reimport" value="1"/>
+        <input type="checkbox" name="reimport" id="reimport" value="1" />
     </p>
 
     <input type="hidden" name="token" value="<?= CsrfToken::generateToken(); ?>">
     <input type="hidden" name="settings" value="1" />
+
+    <div class="flex">
+        <a class="button" href="?">Cancel</a>
         <button type="submit">Save</button>
+    </div>
 </form>
 
 <?php