Added basic button

zapisy/apps/common/assets/main/_variables.scss

@@ -13,12 +13,11 @@ $h5-font-size: $font-size-base * 1.25 !default;
 $h6-font-size: $font-size-base !default;
 
 $enable-responsive-font-sizes: true;
-$breadcrumb-bg: #ffffff;
 
 $input-placeholder-color: #adb5bd; // gray-500
 
-$primary: rgb(0, 102, 158) !default;
-$success: rgb(0, 115, 54) !default;
+$primary: rgb(0, 102, 158) !default; // rgb(0, 102, 158) !default;
+$success: rgb(0, 115, 54) !default; //rgb(0, 115, 54) !default;
 
 $blue: #007bff !default;
 $link-color: $blue !default;

zapisy/apps/common/assets/main/index.scss

@@ -2,6 +2,93 @@
 @import "~bootstrap/scss/bootstrap";
 @import "~bootstrap-print-css/css/bootstrap-print";
 
+:root {
+  --banner-color: #d95900; //kolor górnego paska (pomarańczowy w developmencie)
+  --primary-color: #007bff;
+  --secondary-color: #6c757d;
+  --background-color: #ffffff;
+  --main-background-color: #ffffff; /* Jasny tryb - kolor główny #ffffff*/
+  --breadcrumb-bg: var(
+    --main-background-color
+  ); //background "folderu na linki" (był w variables)
+  --footer-background-color: #f8f9fa;
+  --text-color: #000000;
+  --tab-background-color: #0077b7;
+  --tab-text-color: #0077b7;
+  --tag-highliht-color: #ffffff;
+  --loginbox-background-color: #f5f5f5;
+  --dropdown-background-color: #848484bf;
+  --news--background-color: #f9f9f9;
+  --news--date-color: #000000;
+  --footer-text-color: #000000;
+  --bs-secondary-color: #212529bf;
+  --export-timetable-btn: var(--btn-light);
+  --top-background-color: #00709e;
+  --vote-background-color: #eeeeee;
+  --a-bg-secondary-color: #545b62;
+  --a-bg-info-color: #117a8b;
+  --a-bg-success-color: #00401e;
+  --btn-outline-info: #af0505;
+  --btn-link-focus: #0056b3;
+  --colgroup-table-info-type-bg: #ab0202;
+  --table-infobox-th-bg: #f9f9f9;
+}
+
+body.dark-mode {
+  --banner-color: #893809;
+  --primary-color: #0d6efd;
+  --secondary-color: #938a82;
+  --background-color: #000000;
+  --main-background-color: #1e1e1e; /* Ciemny tryb - kolor główny */
+  --breadcrumb-bg: var(--main-background-color); //background "folderu na linki"
+  --footer-background-color: #2c2b2b;
+  --text-color: #ffffff;
+  --tab-background-color: #005f92;
+  --tab-text-color: #41ace5;
+  --tag-highliht-color: #ffffff;
+  --loginbox-background-color: #504d4d;
+  --dropdown-background-color: #848484bf;
+  --news--background-color: #4d4747;
+  --news--date-color: #ffffff;
+  --footer-text-color: #ffffff;
+  --bs-secondary-color: #acbdcdbf; //ustawia kolor aktywnego linku i ukośników w "folderze na linki"
+  --export-timetable-btn: var(--btn-light);
+  --top-background-color: #00709e;
+  --vote-background-color: #5b5b5b;
+  --a-bg-secondary-color: #545b62;
+  --a-bg-info-color: #117a8b;
+  --a-bg-success-color: #00401e;
+  --btn-outline-info: #af0505;
+  --btn-link-focus: #0056b3;
+  --colgroup-table-info-type-bg: #ab0202;
+  --table-infobox-th-bg: #f9f9f9;
+}
+
+#theme-toggler {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 16px;
+  padding: 10px 15px;
+  border: none;
+  color: var(--text-color);
+  background-color: var(--dropdown-background-color);
+  cursor: pointer;
+  border-radius: 5px;
+  transition: background-color 0.3s ease;
+}
+
+#theme-toggler i {
+  font-size: 20px;
+}
+
+/* Ukrycie tekstu na mniejszych ekranach */
+@media (max-width: 600px) {
+  .button-text {
+    display: none;
+  }
+}
+
 @page {
   size: auto;
 }
@@ -18,11 +105,13 @@ footer {
   margin-top: auto;
   padding-top: 5rem;
   .container-fluid {
+    background-color: var(--footer-background-color);
     padding: 1rem 0;
     p {
       margin: 0.5rem 0;
     }
   }
+  color: var(--footer-text-color);
 }
 
 .form-group {
@@ -49,19 +138,19 @@ footer {
 }
 
 .btn-link {
-  color: #007bff;
+  color: var(--primary-color); // literki na pracownikach na filtrowaniu
   text-decoration: none;
 }
 
 .btn-link:hover,
 .btn-link:focus {
-  color: #0056b3;
+  color: var(--btn-link-focus);
   text-decoration: underline;
 }
 
 .btn-outline-info:hover,
 .btn-outline-info:active {
-  color: white !important;
+  color: var(--btn-outline-info) !important;
 }
 
 a {
@@ -78,22 +167,22 @@ a.badge {
 }
 
 a.badge:hover {
-  color: #fff;
+  color: var(--tag-highliht-color); // podświetlenie tagów (przedmioty)
 }
 
 a.bg-secondary:hover,
 a.bg-secondary:focus {
-  background-color: #545b62 !important;
+  background-color: var(--a-bg-secondary-color) !important;
 }
 
 a.bg-info:hover,
 a.bg-info:focus {
-  background-color: #117a8b !important;
+  background-color: var(--a-bg-info-color) !important;
 }
 
 a.bg-success:hover,
 a.bg-success:focus {
-  background-color: #00401e !important;
+  background-color: var(--a-bg-success-color) !important;
 }
 
 a.bg-info:focus {
@@ -132,25 +221,27 @@ div.header {
 }
 
 .top {
-  background-color: #00709e;
+  background-color: var(--top-background-color);
 }
 
 // Developement runs will flash orange top bar.
 body.debug {
   .top {
-    background-color: rgb(217, 89, 0);
+    background-color: var(--banner-color);
   }
+  background-color: var(--main-background-color);
+  color: var(--text-color);
 }
 
-div.top .topbar .inline-inputs label {
-  float: none;
-  color: #ffffff;
-}
+// div.top .topbar .inline-inputs label {// This part may be obsolete I didin't find any problems when I removed it
+//   float: none;
+//   color: #ffffff; // kolor tekstu w górnym pasku
+// }
 
 #login-dropdown {
   .dropdown-menu {
     padding: 12px;
-    background: rgba($light, 0.75);
+    background: var(--dropdown-background-color);
 
     .btn {
       padding: 10px 5px;
@@ -211,7 +302,9 @@ div.top .topbar .inline-inputs label {
 }
 
 div.loginbox {
-  background-color: #f5f5f5;
+  background-color: var(
+    --loginbox-background-color
+  ); // okienko logowania dla niedostępnych dla każdego stron
   -webkit-border-radius: 6px;
   -moz-border-radius: 6px;
   border-radius: 6px;
@@ -230,32 +323,26 @@ div.loginbox {
       flex: 0 0 auto;
       margin: 0 2px;
       a {
-        background-color: #005f92;
+        // nieaktywna zakładka
+        background-color: var(--tab-background-color);
         color: #ffffff;
         margin-right: 1px;
       }
 
       &.active a {
-        background-color: #ffffff;
-        color: #005f92;
+        // aktywna zakładka
+        background-color: var(--main-background-color);
+        color: var(--tab-text-color);
         margin-right: 1px;
       }
     }
   }
 }
-
 .table-infobox th {
-  background-color: #f9f9f9;
+  background-color: var(--table-infobox-th-bg);
 }
-
-@include media-breakpoint-up(lg) {
-  .table-infobox th {
-    white-space: nowrap;
-  }
-
-  colgroup col.header-column {
-    width: 1%;
-  }
+colgroup col.table-info-type {
+  background-color: var(--colgroup-table-info-type-bg);
 }
 
 // Required field marker in forms.
@@ -268,10 +355,10 @@ div.loginbox {
 .od-news-item {
   margin: 2rem 0;
   padding: 4rem;
-  background: var(--bs-light);
+  background: var(--news--background-color);
 
   .od-news-date {
-    color: var(--bs-dark);
+    color: var(--news--date-color);
     font-style: italic;
     display: block;
     @media (min-width: 992px) {
@@ -297,5 +384,9 @@ div.loginbox {
 }
 
 .background-gray {
-  background-color: $gray-200;
+  background-color: var(--vote-background-color);
+}
+
+.navbar-brand {
+  color: var(--text-color);
 }

zapisy/templates/base.html

@@ -11,7 +11,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <title>{% block main-subtitle %}{% endblock %} &ndash; {% block title %}System Zapisów{% endblock %}</title>
     <meta name="description" content="System obsługi cyklu dydaktycznego Instytut Informatyki Uniwersytetu Wrocławskiego">
-
+
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
     <link rel="shortcut icon" href="{% static 'common/images/favicon.ico' %}">
     <!-- Global site tag (gtag.js) - Google Analytics -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=UA-109984921-1"></script>
@@ -66,6 +67,7 @@
                     </ul>
                 {% if user.is_authenticated %}
                     <div class="navbar-nav ms-auto">
+                        {% include 'theme-toggler.html' %}                        
                         <span class="navbar-text">
                             <strong>
                                 {{ user.get_full_name }}
@@ -94,6 +96,7 @@
                     </div>
                 {% else %}
                     <ul class="navbar-nav">
+                        {% include 'theme-toggler.html' %}
                         <li class="nav-item dropdown" id="login-dropdown">
                             <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                             data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"  data-bs-auto-close="outside" >
@@ -215,7 +218,7 @@
     {% block rendered_bundles %}
     {% endblock %}
     <footer class="d-print-none">
-        <div class="container-fluid bg-light">
+        <div class="container-fluid">
             <div class="container">
                 <p>
                     &copy; {% now "Y" %} <a href="http://www.ii.uni.wroc.pl/">Instytut Informatyki UWr</a>
@@ -230,4 +233,4 @@
     </footer>
 </body>
 
-</html>
+</html>

zapisy/templates/theme-toggler.html

@@ -0,0 +1,30 @@
+<button id="theme-toggler" class="btn ms-3">
+    <i class="far fa-moon"></i> <span class="button-text">Tryb ciemny</span>
+</button>
+
+<script>
+document.addEventListener("DOMContentLoaded", () => {
+    const button = document.getElementById("theme-toggler");
+    const icon = button.querySelector("i");
+    const text = button.querySelector(".button-text");
+
+    const isDarkMode = localStorage.getItem("theme") === "dark";
+    if (isDarkMode) {
+        document.body.classList.add("dark-mode");
+        icon.classList.replace("fa-moon", "fa-sun");
+        text.textContent = "Tryb jasny";
+    }
+    button.addEventListener("click", () => {
+        const isDark = document.body.classList.toggle("dark-mode");
+        localStorage.setItem("theme", isDark ? "dark" : "light");
+
+        if (isDark) {
+            icon.classList.replace("fa-moon", "fa-sun");
+            text.textContent = "Tryb jasny";
+        } else {
+            icon.classList.replace("fa-sun", "fa-moon");
+            text.textContent = "Tryb ciemny";
+        }
+    });
+});
+</script>