Add Dark Theme by dasGoogle · Pull Request #581 · fsr-de/myHPI

dasGoogle · 2024-07-29T17:35:05Z

Keep in mind to update bootstrap (you may need to manually delete some files so that the install works).

Closes #502

Changes small parts of the light theme:

SilvanVerhoeven · 2024-07-29T19:17:00Z

Keep in mind to update bootstrap (you may need to manually delete some files so that the install works).

Something I saw after I deleted the files manually: The script has an update (-u) and remove -r flag, which removes the previously installed version

SilvanVerhoeven · 2024-07-29T23:18:22Z

@@ -9,7 +9,7 @@ <h5 class="text-break">{{ result.title }}</h5>
                {{ result.specific.date|date:"SHORT_DATE_FORMAT" }}


Adding comments to random lines to make them resolvable one by one

Is it possible to remove the border (or make it same color as the highlight) on hover?

For that to work, we might need a more significant contrast between the hover highlight and the background color

This design:

Old design:

SilvanVerhoeven · 2024-07-29T23:19:19Z

@@ -9,7 +9,7 @@ <h5 class="text-break">{{ result.title }}</h5>
                {{ result.specific.date|date:"SHORT_DATE_FORMAT" }}
            </time>


Is it intentionally that the divider in the user menu seems to be gone?

Old menu for comparison:

SilvanVerhoeven · 2024-07-29T23:19:28Z

@@ -9,7 +9,7 @@ <h5 class="text-break">{{ result.title }}</h5>
                {{ result.specific.date|date:"SHORT_DATE_FORMAT" }}
            </time>
        </hgroup>


The mobile menu needs its background back ^^

SilvanVerhoeven · 2024-07-29T23:19:38Z

        </hgroup>
-        <span class="text-dark">
+        <span class="search-preview">
            {% if result.search_description %}


The border at the bottom of the menu seems to be gone, which sometimes makes it hard to differentiate it from the background:

This is the old design:

SilvanVerhoeven · 2024-07-29T23:19:47Z

-        <span class="text-dark">
+        <span class="search-preview">
            {% if result.search_description %}
                {{ result.search_description }}


The input elements now seems to be gray by default, which looks like they would be disabled. Could we make them white again?

SilvanVerhoeven · 2024-07-29T23:20:28Z

 .footer-myhpi {
-    background-color: var(--bs-gray-700);
+    background-color: var(--bs-gray-800);



Is there a way to increase the contrast? Firefox throws a contrast warning

SilvanVerhoeven · 2024-07-29T23:20:36Z

-    background-color: var(--bs-gray-700);
+    background-color: var(--bs-gray-800);

    .page-content {


The border between top bar and content is not visible any more. For better distinction, could we introduce it again?

This is how it looked:

SilvanVerhoeven · 2024-07-29T23:20:44Z

+    background-color: var(--bs-gray-800);

    .page-content {
        padding-top: 1.5rem;


A difference between the menu and background color would be helpful to differentiate both better (now they flow into each other):

Before:

Especially helpful in the dark mode:

SilvanVerhoeven · 2024-07-29T23:21:03Z

@@ -5,20 +5,25 @@
 $primary: #F5631E;


Making the breadcrumbs gray again could help differentiating them from the page content:

Before:

SilvanVerhoeven · 2024-07-29T23:21:14Z

@@ -5,20 +5,25 @@
 $primary: #F5631E;
 $secondary: #F5631E;


In [myhpi/core/templates/core/sidebar.html](https://github.com/fsr-de/myHPI/pull/525/files/bc3f7996429831f3857afe63e7b344cfd023d219#diff-8c66ac3d840d267494b184c335c50d73e56b70724f454183f3af2b86242632a7), there is the following comment:



Could be addressed now, since we updated to 5.3

SilvanVerhoeven · 2024-07-29T23:26:48Z

+$gray-700: #777;
+$gray-800: #555;
+$gray-900: #333;



Is it wanted that there is no difference between the webpage background and the content background? The orange bar at the top and the footer at the bottom look a little bit lost to me without the content background

This might also fix the lack of contrast between table cells and content background: