Merge branch '145-dark-mode' into 'master'

Resolve "Dark mode" Closes #145 See merge request enrichment-2024/qivip!101
dark_mode
2025-07-11 14:57:56 +00:00 · 2025-07-11 16:54:00 +02:00 · 2025-07-04 11:57:25 +00:00 · 2025-07-04 13:56:32 +02:00 · 2025-06-29 17:45:42 +02:00 · 2025-06-29 17:43:28 +02:00
40 changed files with 409 additions and 274 deletions
--- a/django/library/admin.py
+++ b/django/library/admin.py
@@ -30,10 +30,35 @@ class QuizImageAdmin(admin.ModelAdmin):
 class QuestionImageAdmin(admin.ModelAdmin):
     list_display = ('image',)  

+
+from django import forms
+from .models import QuizCategory
+
+class QuizCategoryForm(forms.ModelForm):
+    color = forms.CharField(
+        widget=forms.TextInput(attrs={'type': 'color'})
+    )
+
+    class Meta:
+        model = QuizCategory
+        fields = '__all__'
+from django.utils.html import format_html
+@admin.register(QuizCategory)
+class QuizCategoryAdmin(admin.ModelAdmin):
+    form = QuizCategoryForm
+    list_display = ('name', 'color_preview', 'color')
+
+    def color_preview(self, obj):
+        return format_html(
+            '<div style="width: 24px; height: 24px; background-color: {}; border: 2px solid #000;"></div>',
+            obj.color
+        )
+    color_preview.short_description = "Farbe"       
+        
 # Registrierung der Modelle im Admin
 admin.site.register(QivipQuiz, QivipQuizAdmin)
 admin.site.register(QivipQuestion, QivipQuestionAdmin)
-admin.site.register(QuizCategory, QuizCategoryAdmin)
+#admin.site.register(QuizCategory, QuizCategoryAdmin)
 admin.site.register(QivipQuizFavorite, QivipQuizFavoriteAdmin)
 admin.site.register(QuizImage, QuizImageAdmin)
 admin.site.register(QuestionImage, QuestionImageAdmin)
--- a/django/library/forms.py
+++ b/django/library/forms.py
@@ -6,6 +6,14 @@ class QuizForm(forms.ModelForm):
        model = QivipQuiz
        fields = ['name', 'description', 'status', 'category','difficulty','credits']

+    def __init__(self, *args, **kwargs):
+        super(QuizForm, self).__init__(*args, **kwargs)
+        for field in self.fields.values():
+            field.widget.attrs.update({
+                'class': 'dark:bg-[#2a2f3a]! dark:text-white'
+            })
+           
+
 class QuestionForm(forms.ModelForm):
    class Meta:
        model = QivipQuestion
@@ -34,5 +42,5 @@ class QuizFilterForm(forms.Form):
        required=False,
        label="Kategorie",
        widget=forms.Select(attrs={
-            'class': 'border-2 border-gray-300 rounded-lg p-2 w-full'
+            'class': 'border-2 border-gray-300 rounded-lg p-2 w-full dark:bg-[#2a2f3a] dark:text-white'
        }))
--- a/django/library/migrations/0057_quizcategory_color.py
+++ b/django/library/migrations/0057_quizcategory_color.py
@@ -0,0 +1,18 @@
+# Generated by Django 5.1.7 on 2025-07-02 11:31
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('library', '0056_alter_quizrating_unique_together'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='quizcategory',
+            name='color',
+            field=models.CharField(default='#000000', help_text='Farbe als Hex-Code, z.B. #ff0000', max_length=7),
+        ),
+    ]
--- a/django/library/models.py
+++ b/django/library/models.py
@@ -148,6 +148,12 @@ class QuizCategory(models.Model):
    name = models.CharField(max_length=100, unique=True)
    description = models.TextField(blank=True, null=True)
    slug = models.SlugField(unique=True, blank=True)
+    color= models.CharField(
+        max_length=7,
+        default="#000000",
+        help_text="Farbe als Hex-Code, z.B. #ff0000"
+    )
+

    def save(self, *args, **kwargs):
        if not self.slug:
--- a/django/library/views.py
+++ b/django/library/views.py
@@ -372,8 +372,7 @@ def new_quiz(request):


            #quiz.creator = request.user
-            if form.has_changed():
-                quiz.save()
+            quiz.save()
            #form.save_m2m()  # Speichert die Many-to-Many Beziehungen (Tags)
            return redirect('library:detail_quiz', pk=quiz.pk)
            
@@ -412,8 +411,8 @@ def edit_quiz(request, pk):
            status = form.cleaned_data.get('status')
            if status == 'öffentlich' and not quiz.published_at:
                quiz.published_at = timezone.now()
-            if form.has_changed():
-                form.save()
+            
+            form.save()
            for img in QuizImage.objects.all():
                try:
                    img.delete()
@@ -607,7 +606,6 @@ def new_question(request):
            question.credits=request.POST.get('credits',"")
        except:
            question.credits=""
-        
        question.save()
        #return modified(request, pk=quiz.pk)
        return redirect('library:detail_quiz', pk=quiz.pk)
--- a/django/static/css/t-input.css
+++ b/django/static/css/t-input.css
@@ -17,7 +17,7 @@ a.qp-a-button-small {
 .register input{@apply p-3 rounded-full bg-gray-200 focus:scale-105 transition duration-200 font-black w-full;}

 .input-group {
-    @apply flex flex-col gap-4 max-w-md mx-auto p-6 bg-white rounded-xl shadow-lg;
+    @apply flex flex-col gap-4 max-w-md mx-auto p-6 bg-white rounded-xl shadow-lg; 
 }

 .input-group form {
--- a/django/templates/404.html
+++ b/django/templates/404.html
@@ -1,7 +1,7 @@
 {% extends 'base.html' %}

 {% block content %}
-<div class="max-w-2xl mx-auto mt-20 p-6 bg-white shadow-xl rounded-2xl text-center">
+<div class="max-w-2xl mx-auto mt-20 p-6 bg-white shadow-xl rounded-2xl text-center dark:bg-transparent">
  
  <div class="flex justify-center items-center gap-4">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
@@ -21,8 +21,8 @@
    </svg>
  </div>

-  <h2 class="text-2xl font-semibold text-gray-800 mb-2 ">Seite nicht gefunden</h2>
-  <p class="text-lg text-gray-600 mb-6">Ups, die angeforderte Seite wurde nicht gefunden. Überprüfen Sie die URL oder kehren Sie zur Startseite zurück.</p>
+  <h2 class="text-2xl font-semibold text-gray-800 mb-2 dark:text-white ">Seite nicht gefunden</h2>
+  <p class="text-lg text-gray-600 mb-6 dark:text-white">Ups, die angeforderte Seite wurde nicht gefunden. Überprüfen Sie die URL oder kehren Sie zur Startseite zurück.</p>

  <div class="flex justify-center">
    <a href="{% url 'homepage:home' %}"
--- a/django/templates/accounts/home.html
+++ b/django/templates/accounts/home.html
@@ -3,8 +3,8 @@
 {% block content %}


-<div class="flex justify-center  items-center mt-12 ">
-<div class="input-group p-4 m-2 border-blue-600 border-2 rounded-xl shadow-md">
+<div class="flex justify-center  items-center mt-12">
+<div class="input-group p-4 m-2 border-blue-600 border-2 rounded-xl shadow-md   dark:bg-transparent! dark:text-white! ">
    <div class="grid place-content-center h-full mb-4 flex-col items-center justify-between">
      
        <h1 class="text-center m-4 text-3xl lg:text-6xl">Willkommen,  <b>{{ request.user.username }}</b>!</h1>
@@ -18,16 +18,16 @@
            <button class="text-center text-sm w-full mt-4 font-light text-red-600"><a  href="{% url 'accounts:delete_account'  %}">Account löschen</a></button>
   

-  <div class="border-2 border-blue-600 p-6 rounded-xl shadow-inner bg-blue-50 flex flex-col gap-4 items-start mt-8">
+  <div class="border-2 border-blue-600 p-6 rounded-xl shadow-inner bg-blue-50 flex flex-col gap-4 items-start mt-8 dark:bg-transparent">
  
-  <div class="flex items-center gap-2 text-xl font-semibold text-blue-800">
+  <div class="flex items-center gap-2 text-xl font-semibold text-blue-800  dark:text-blue-600">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-yellow-500">
      <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 18.75h-9m9 0a3 3 0 0 1 3 3h-15a3 3 0 0 1 3-3m9 0v-3.375c0-.621-.503-1.125-1.125-1.125h-.871M7.5 18.75v-3.375c0-.621.504-1.125 1.125-1.125h.872m5.007 0H9.497m5.007 0a7.454 7.454 0 0 1-.982-3.172M9.497 14.25a7.454 7.454 0 0 0 .981-3.172M5.25 4.236c-.982.143-1.954.317-2.916.52A6.003 6.003 0 0 0 7.73 9.728M5.25 4.236V4.5c0 2.108.966 3.99 2.48 5.228M5.25 4.236V2.721C7.456 2.41 9.71 2.25 12 2.25c2.291 0 4.545.16 6.75.47v1.516M7.73 9.728a6.726 6.726 0 0 0 2.748 1.35m8.272-6.842V4.5c0 2.108-.966 3.99-2.48 5.228m2.48-5.492a46.32 46.32 0 0 1 2.916.52 6.003 6.003 0 0 1-5.395 4.972m0 0a6.726 6.726 0 0 1-2.749 1.35m0 0a6.772 6.772 0 0 1-3.044 0" />
    </svg>
    Erfolge
  </div>

-  <ul class="list-disc pl-6 text-base text-gray-700">
+  <ul class="list-disc pl-6 text-base text-gray-700 dark:text-white">
    <li><b>{{ my_quizzes_number }}</b> Quizze erstellt</li>
    <li><b>{{ my_questions_number }}</b> Fragen insgesamt erstellt</li>
  </ul>
@@ -37,7 +37,7 @@
        </div>
       
        <div class="flex justify-end">
-            <span class="text-[clamp(0.6rem,5vw,1rem)] font-black overflow-x-auto mt-1 ml-0.75 text-blue-600 p-0.75 bg-white">qivip
+            <span class="text-[clamp(0.6rem,5vw,1rem)] font-black overflow-x-auto mt-1 ml-0.75 text-blue-600 p-0.75 bg-white dark:bg-transparent">qivip
            </span>
            </div>
 </div>
--- a/django/templates/accounts/login.html
+++ b/django/templates/accounts/login.html
@@ -4,7 +4,7 @@
 {% block content %}
    <div class="grid place-content-center h-120 mt-12 mb-12 ">
    <div class="w-80 p-4 m-2 border-blue-600 border-2 rounded-xl shadow-md lg:w-90">
-        <h2 class="text-2xl text-center p-4 font-black">Anmeldung</h2>
+        <h2 class="text-2xl text-center p-4 font-black dark:text-white">Anmeldung</h2>
        <form class="space-y-4" method="post">
            {% if form.errors %}
            <div class=" items-center text-red-600 font-black overflow-x-auto break-words text-center">
--- a/django/templates/accounts/register.html
+++ b/django/templates/accounts/register.html
@@ -4,7 +4,7 @@
 <div class="grid place-content-center h-120 mt-12 mb-12">

        <div class="w-80 p-4 m-2 border-blue-600 border-2 rounded-xl shadow-md lg:w-90">
-        <h2 class="text-2xl text-center p-4 font-black">Registrieren</h2>
+        <h2 class="text-2xl text-center p-4 font-black dark:text-white">Registrieren</h2>

        <form class=" space-y-4" method="post">
            {% if form.errors %}
--- a/django/templates/base.html
+++ b/django/templates/base.html
@@ -1,6 +1,6 @@
 {% load static %}
 <!DOCTYPE html>
-<html lang="de">
+<html lang="de" class="dark:bg-gray-900">
 <head>
    <link rel="icon" type="image/png" href="{% static 'icons/favicon.png' %}">
    <meta charset="UTF-8">
@@ -75,5 +75,6 @@
    <style>html {
        overflow-y: scroll;
      }</style>
+      
 </body>
 </html>
--- a/django/templates/homepage/home.html
+++ b/django/templates/homepage/home.html
@@ -4,9 +4,9 @@
 <div class="grid place-content-center md:h-screen h-150 w-full -z-50 top-0 p-4">
    <div class="text-center">
        <h2 class="font-bold md:text-8xl text-6xl md:mb-8 text-blue-600">qivip</h2>
-        <h3 class="mt-4 italic font-extralight sm:text-4xl text-md">weil Lernen auch Spaß <br> machen kann!</h3>
+        <h3 class="mt-4 italic font-light sm:text-4xl text-md bg-gradient-to-r from-pink-500 via-purple-600 to-blue-700 bg-clip-text text-transparent">weil Lernen auch Spaß <br> machen kann!</h3>
    </div>
-    <div class="grid sm:grid-cols-3 place-items-stretch text-center mt-8 gap-4 p-4 border-3 bg-blue-100 border-blue-100 rounded-md">
+    <div class="grid sm:grid-cols-3 place-items-stretch text-center mt-8 gap-4 p-4 border-3 bg-blue-100 border-blue-100 rounded-md dark:bg-gray-900 dark:border-0">
        <a class="qp-a-button bg-green-500 text-white" href="{% url 'play:join_game' %}">Teilnehmen</a>
        <a class="qp-a-button bg-indigo-500 text-white" href="{% url 'library:overview_quiz' %}">Moderieren</a>
        <a class="qp-a-button bg-purple-500 text-white" href="{% url 'library:new_quiz' %}">Erstellen</a>
@@ -25,13 +25,13 @@
 {% if faqs %}
 <div class="container mx-auto px-4 sm:px-6 lg:px-8 mt-8 mb-6">
  <div class="flex items-center gap-3">
-    <h2 class="text-2xl font-bold text-gray-900">FAQs</h2>
+    <h2 class="text-2xl font-bold text-gray-900 dark:text-white">FAQs</h2>
    <div class="h-0.5 flex-grow bg-gradient-to-r from-blue-600 to-transparent rounded-full"></div>
  </div>
 </div>


-    <div class="input-group !max-w-4xl tracking-wide">
+    <div class="input-group !max-w-4xl tracking-wide dark:!bg-gray-900 dark:!text-white">
        <h1 class="font-black text-blue-600 flex justify-between gap-2 lg:text-lg">


@@ -43,7 +43,7 @@
 </div>

 {% for faq in faqs %}
-<div class="input-group mt-2.5 !max-w-4xl hover:!bg-gray-50">
+<div class="input-group mt-2.5  !max-w-4xl hover:bg-gray-50 dark:!bg-gray-900 dark:!text-white ">
        <details>
            <summary class="flex justify-between cursor-pointer font-bold">{{ faq.question }}
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-7">
--- a/django/templates/homepage/impress.html
+++ b/django/templates/homepage/impress.html
@@ -1,8 +1,8 @@
 {% extends 'base.html' %}
 {% block content%}

-    <div class="flex justify-center  items-center mt-12 ">
-        <div class="input-group p-4 m-2 border-blue-600 border-2 rounded-xl shadow-md">
+    <div class="flex justify-center  items-center mt-12">
+        <div class="input-group p-4 m-2 border-blue-600 border-2 rounded-xl shadow-md  dark:!bg-transparent dark:!text-white ">
            <div class="grid place-content-center h-120">
              
                <h1 class="text-center m-4 text-3xl lg:text-6xl">Impressum</b></h1>
@@ -12,7 +12,7 @@
            </div>

                <div class="flex justify-end">
-                    <span class="text-[clamp(0.6rem,5vw,1rem)] font-black overflow-x-auto mt-1 ml-0.75 text-blue-600 p-0.75 bg-white">qivip
+                    <span class="text-[clamp(0.6rem,5vw,1rem)] font-black overflow-x-auto mt-1 ml-0.75 text-blue-600 p-0.75 bg-white dark:bg-transparent ">qivip
                    </span>
                    </div>
        </div>
--- a/django/templates/homepage/privacy.html
+++ b/django/templates/homepage/privacy.html
@@ -2,7 +2,7 @@

        {% block content%}
        <div class="flex justify-center  items-center mt-12 ">
-            <div class="input-group p-4 m-2 border-blue-600 border-2 rounded-xl shadow-md">
+            <div class="input-group p-4 m-2 border-blue-600 border-2 rounded-xl shadow-md dark:!bg-transparent dark:!text-white">
                <div class="grid place-content-center h-120">
                  
                    <h1 class="text-center m-4 text-3xl lg:text-6xl">Datenschutz-</br>erklärung</h1>
@@ -12,7 +12,7 @@
                </div>
    
                    <div class="flex justify-end">
-                        <span class="text-[clamp(0.6rem,5vw,1rem)] font-black overflow-x-auto mt-1 ml-0.75 text-blue-600 p-0.75 bg-white">qivip
+                        <span class="text-[clamp(0.6rem,5vw,1rem)] font-black overflow-x-auto mt-1 ml-0.75 text-blue-600 p-0.75 bg-white dark:!bg-transparent ">qivip
                        </span>
                        </div>
            </div>
--- a/django/templates/library/delete_confirmation.html
+++ b/django/templates/library/delete_confirmation.html
@@ -3,15 +3,15 @@
 {% block content %}
 <div class="container mx-auto px-4">
    <div class="max-w-lg mx-auto mt-10">
-        <div class="bg-white rounded-lg shadow-md p-6 border-blue-600 border-2 rounded-xl shadow-md">
+        <div class="bg-white rounded-lg shadow-md p-6 border-blue-600 border-2 rounded-xl shadow-md dark:text-white dark:bg-transparent">
            <div class="text-center">
                <svg class="mx-auto h-12 w-12 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
                </svg>
                
-                <h2 class="mt-4 text-xl font-bold text-gray-900">Löschen bestätigen</h2>
+                <h2 class="mt-4 text-xl font-bold text-gray-900 dark:text-white">Löschen bestätigen</h2>
                
-                <p class="mt-2 text-sm text-gray-600">
+                <p class="mt-2 text-sm text-gray-600 dark:text-white">
                    {% if object.quiz_id %}
                        Möchten Sie die Frage "{{ object.data.question }}" wirklich löschen? Diese Aktion kann nicht rückgängig gemacht werden.
                    {% else %}
--- a/django/templates/library/detail_quiz.html
+++ b/django/templates/library/detail_quiz.html
@@ -4,21 +4,21 @@

 <div class="container mx-auto px-4">
    
-    <div class="flex flex-wrap space-y-2 items-center justify-between mb-6">
-        <h1 class="text-2xl font-bold mr-4 ">{{ quiz.name }}</h1> 
+    <div class="flex flex-wrap space-y-2 items-center justify-between mb-6 dark:text-white">
+        <h1 class="text-2xl font-bold mr-4 dark:text-white ">{{ quiz.name }}</h1> 
     
-        <div class=" flex flex-wrap space-x-2  ">
+        <div class=" flex flex-wrap space-x-2   ">
           
            <div class="flex flex-wrap">
            {% if quiz.user_id == request.user %}
            <a href="{% url 'library:edit_quiz' quiz.id %}" class=" text-white px-2 py-2 rounded-md text-sm lg:text-lg hover:scale-110 transition-colors">
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-7 text-gray-600">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-7 text-gray-600 dark:text-white">
                    <path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" />
                  </svg>
                  
            </a>
            <a href="{% url 'library:delete_quiz' quiz.id %}" class=" text-white px-2 py-2 rounded-md text-sm lg:text-lg hover:scale-110 transition-colors">
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-7 text-gray-600">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-7 text-gray-600 dark:text-white">
                    <path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
                  </svg>
            </a>
@@ -54,13 +54,13 @@
    </div>

    {% if quiz.description %}
-    <p class="text-gray-600 mb-4">{{ quiz.description }}</p>
+    <p class="text-gray-600 mb-4 dark:text-gray-400">{{ quiz.description }}</p>
    {% endif %}
    <div class="flex justify-end mb-4">
    {% if detail == True %}
    
 <a href="{% url 'library:detail_quiz' quiz.id %}?show_answers=false">
-    <div class="flex items-center mr-2">
+    <div class="flex items-center mr-2 dark:text-white">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
        <path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 0 0 1.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.451 10.451 0 0 1 12 4.5c4.756 0 8.773 3.162 10.065 7.498a10.522 10.522 0 0 1-4.293 5.774M6.228 6.228 3 3m3.228 3.228 3.65 3.65m7.894 7.894L21 21m-3.228-3.228-3.65-3.65m0 0a3 3 0 1 0-4.243-4.243m4.242 4.242L9.88 9.88" />
      </svg>
@@ -71,7 +71,7 @@
 {% else %}

 <a href="{% url 'library:detail_quiz' quiz.id %}?show_answers=true">
-    <div class="flex items-center mr-2">
+    <div class="flex items-center mr-2 dark:text-white">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
    <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" />
    <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" /> 
@@ -85,7 +85,7 @@
 </div> 


-    <div class="bg-white rounded-lg shadow-md border-blue-600 border-2 rounded-xl shadow-md">
+    <div class="bg-white rounded-lg shadow-md border-blue-600 border-2 rounded-xl shadow-md dark:!bg-transparent dark:text-white">
        <div class="border-b border-gray-200 p-4">
            <div class="flex justify-between items-center flex-wrap">
                <h2 class="text-xl font-semibold">Fragen
@@ -123,7 +123,7 @@
                

                
-                    <div class="w-full rounded-xl p-4 hover:bg-gray-50">
+                    <div class="w-full rounded-xl p-4 hover:bg-gray-50 dark:hover:bg-[#2a2f3a] dark:text-white">
                        <p>{{ forloop.counter }}.</p>
                        {% if quiz.user_id == request.user %} <a class="block flex h-full w-full" href="{% url 'library:edit_question' question.id %}" > {% endif %}
                        <div class="flex justify-between items-start">
@@ -144,7 +144,7 @@
                                        {% for option in question.data.options %}
                                      
                                            
-                                            <li class="flex items-center text-sm">
+                                            <li class="flex items-center text-sm ">
                                               
                                                {% if option.is_correct %}
                                                    <svg class="h-4 w-4 text-green-500 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -152,10 +152,10 @@
                                                    </svg>
                                                    <span class="font-medium text-green-700">{{ option.value }}</span>
                                                {% else %}
-                                                    <svg class="h-4 w-4 text-gray-400 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                                    <svg class="h-4 w-4 text-gray-400 mr-1.5 dark:text-white " fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 12H6"/>
                                                    </svg>
-                                                    <span class="text-gray-600">{{ option.value }}</span>
+                                                    <span class="text-gray-600 dark:text-white">{{ option.value }}</span>
                                                {% endif %}
                                            </li>
                                        {% endfor %}                           
@@ -173,7 +173,7 @@
                                                  <svg class="h-4 w-4 text-green-500 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                                                    </svg>
-                                                    <span class="font-medium text-green-700">{{ option.value }}</span>
+                                                    <span class="font-medium text-green-700 dark:text-white">{{ option.value }}</span>
                                            </li>
                                        {% endfor %}
                                    </ul>
@@ -186,7 +186,7 @@
                                {% for option in question.data.options %}
                                    {% if option.is_correct %}
                                    <p class="text-sm">
-                                    <span class="text-gray-500">Richtige Antwort:</span>
+                                    <span class="text-gray-500 dark:text-white">Richtige Antwort:</span>
                                    <span class="ml-1 font-medium {% if option.value == "Wahr" %} text-green-700 {% else %}text-red-700{% endif %}">{{ option.value }}</span>
                                </p>
                                    {% endif %}
@@ -209,7 +209,7 @@
                                <a href=" {% url 'library:delete_question' question.id %}" 
                class="  text-red-700 px-4 py-1 rounded hover:scale-110 ">
                {% if quiz.user_id == request.user %}
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-7 text-gray-600">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="dark:text-white size-7 text-gray-600">
                    <path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
                  </svg>
                  {% endif %}
@@ -236,45 +236,55 @@

    <div class="flex justify-end">   
        {% if quiz.base_quiz %}
-        <p class="text-gray-600 mt-2 ">Bearbeitung:<span class="text-blue-600 font-bold"> <a href="{% url 'library:overview_quiz' %}?filter=1&user={{ quiz.user_id }}">{{ quiz.user_id }}</a></span></p>
+        <p class="text-gray-600 mt-2 dark:text-white">Bearbeitung:<span class="text-blue-600 font-bold"> <a href="{% url 'library:overview_quiz' %}?filter=1&user={{ quiz.user_id }}">{{ quiz.user_id }}</a></span></p>
        {% else %}
-        <p class="text-gray-600 mt-2 ">Autor:<span class="text-blue-600 font-bold"> <a href="{% url 'library:overview_quiz' %}?filter=1&user={{ quiz.user_id }}">{{ quiz.user_id }}</a></span></p>
+        <p class="text-gray-600 mt-2 dark:text-white">Autor:<span class="text-blue-600 font-bold"> <a href="{% url 'library:overview_quiz' %}?filter=1&user={{ quiz.user_id }}">{{ quiz.user_id }}</a></span></p>
        {% endif %}
    </div>

 <div class="flex justify-end">   
 {% if quiz.base_quiz %}
-<p class="text-gray-600  ">Kopie von: <a href="{% url 'library:detail_quiz' quiz.base_quiz.id %}"><span class="text-blue-600 font-bold">{{ quiz.base_quiz}}</span></a></p>
+<p class="text-gray-600 dark:text-white ">Kopie von: <a href="{% url 'library:detail_quiz' quiz.base_quiz.id %}"><span class="text-blue-600 font-bold">{{ quiz.base_quiz}}</span></a></p>
 {% endif %}
 </div>
 <div class="flex justify-end">  
    {% if quiz.base_quiz %}
-    <p class="text-gray-600 ">Autor:<span class="text-blue-600 font-bold"> <a href="{% url 'library:overview_quiz' %}?filter=1&user={{ quiz.base_quiz.user_id }}">{{ quiz.base_quiz.user_id }}</a></span></p>
+    <p class="text-gray-600 dark:text-white">Autor:<span class="text-blue-600 font-bold"> <a href="{% url 'library:overview_quiz' %}?filter=1&user={{ quiz.base_quiz.user_id }}">{{ quiz.base_quiz.user_id }}</a></span></p>
    {% endif %}
 </div>

 <div class="flex flex-col max-w-full">
-    Credits: 
+     <p class="text-gray-600 mt-2 dark:text-white ">Credits: </p>
    {% if quiz.credits %}
-        <p class="text-gray-600 mb-2 w-full break-words">
-            <span class="font-bold break-words">{{ quiz.credits }}</span>
+        <p class="text-blue-500 mb-2 w-full break-words dark:text-gray-400  ">
+            <span class="break-words italic">{{ quiz.credits }}</span>
+            <span class="font-normal break-words text-gray-600 dark:text-white">(Credits für das Quiz)</span>
        </p>
+        {% else %}
+        <p class="text-gray-500 dark:text-gray-400 ">Keine Credits für das Quizformular vorhanden!</p>
    {% endif %}
+    
 </div>

 <div class="flex flex-col max-w-full">
    <ul class="space-y-2">
-        {% for question in questions %}
-            {% if question.credits %}
-                <li class="text-gray-600 mb-2 w-full break-words font-bold break-words">
-                    {{ question.credits }}
-                    <span class="font-medium text-gray-500 break-words">(Frage: {{ forloop.counter }})</span>
-                </li>
-            {% endif %}
-        {% endfor %}
+        {% regroup questions by credits as grouped_credits %}
+        {% if grouped_credits|length == 1 and not grouped_credits.0.grouper %}
+            <li class="text-gray-500 dark:text-gray-400 ">Keine Credits für die Fragen vorhanden!</li>
+        {% else %}
+            {% for question in questions %}
+                {% if question.credits %}
+                    <li class="text-blue-500 mb-2 w-full break-words  break-words dark:text-gray-400 ">
+                        <span class="italic">{{ question.credits }}</span>
+                        <span class="font-normal break-words text-gray-600 dark:text-white">(Frage: {{ forloop.counter }})</span>
+                    </li>
+                {% endif %}
+            {% endfor %}
+        {% endif %}
    </ul>
 </div>

+
 </div>

 {% endblock %}
--- a/django/templates/library/form.html
+++ b/django/templates/library/form.html
@@ -1,7 +1,14 @@
 {% extends 'base.html' %}

+
 {% block content %}
-<div class="input-group  border-blue-600 border-2 rounded-xl shadow-md mt-12">
+<style>
+  .dark label {
+    color: white!important;
+  }
+</style>
+
+<div class="dark input-group  border-blue-600 border-2 rounded-xl shadow-md mt-12 dark:text-white! dark:bg-transparent!">
    <form method="post" enctype="multipart/form-data">
        {% csrf_token %}
        {{ form.as_p }}
@@ -15,7 +22,7 @@
        {% endif %}
        <div>
            <label class="font-bold" for="quiz_image">Bild:</label>
-            <input  class="bg-blue-200 p-2 m-2 rounded-lg border-2 border-blue-400" type="file" name="quiz_image" id="quiz_image">
+            <input  class="max-w-full bg-blue-200 p-2 m-2 rounded-lg border-2 border-blue-400 dark:bg-transparent" type="file" name="quiz_image" id="quiz_image">
        </div>

       <div class="text-center text-gray-600 text-sm dislay-flex align-bottom">
--- a/django/templates/library/head.html
+++ b/django/templates/library/head.html
@@ -12,14 +12,14 @@

 {% block head %}
 <div class="container mx-auto px-4 py-4 flex justify-between items-center">
-    <button id="filterButton" class="p-2 hover:bg-gray-100 rounded-lg transition-colors duration-200 flex items-center gap-2 text-gray-700">
+    <button id="filterButton" class="dark:text-white dark:hover:bg-[#2a2f3a]  p-2 hover:bg-gray-100 rounded-lg transition-colors duration-200 flex items-center gap-2 text-gray-700">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
        </svg>
        <span>Filter</span>
    </button>
    <div class="flex gap-2">
-        <a href="{% url link %}" class="inline-flex items-center px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors duration-200">
+        <a href="{% url link %}" class="dark:bg-transparent dark:text-white dark:hover:bg-[#2a2f3a] inline-flex items-center px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors duration-200">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
            </svg>
@@ -35,13 +35,13 @@
 </div>

 <div id="filterPanel" class="container mx-auto px-4 {% if request.GET.filter == '1' %}block{% else %}hidden{% endif %}">
-    <div class="bg-white rounded-xl shadow-lg p-6 border border-gray-200">
+    <div class="bg-white rounded-xl shadow-lg p-6 border border-gray-200 dark:bg-transparent dark:text-white ">
      <form action="{% url link %}" method="get" class="grid grid-cols-1 md:grid-cols-3 gap-6">
         <input type="hidden" name="filter" id="filter-input"> 
        <div class="space-y-2">
            <div class="flex gap-2">
            <input type="checkbox" name="use_min_amount_questions" id="use_min_amount_questions" {% if form.use_min_amount_questions.value %}checked{% endif %}>
-            <label class="block text-sm font-medium text-gray-700">minimale Anzahl an Fragen</label>
+            <label class="block text-sm font-medium text-gray-700 dark:text-white">minimale Anzahl an Fragen</label>
            </div>
            <input 
      type="range" 
@@ -51,22 +51,22 @@
      max="100" 
      step="1"
      value="{{ form.min_amount_questions.value|default_if_none:0 }}" 
-      class="w-full accent-blue-600"
+      class="w-full accent-blue-600 dark:text-white"
      oninput="document.getElementById('min_amount_value').textContent = this.value + ' Frage(n)'"
    {% if not form.use_min_amount_questions.value %}disabled{% endif %}
    >

-    <span id="min_amount_value" class="text-sm font-semibold text-gray-800">
+    <span id="min_amount_value" class="text-sm font-semibold text-gray-800 dark:text-white">
      {{ form.min_amount_questions.value|default_if_none:0 }} Frage(n)
    </span>
    <br>
-    <span class="text-xs text-gray-600"> Quizze anderer User werden erst ab min. 1 Frage angezeigt.</span>
+    <span class="text-xs text-gray-600 dark:text-white"> Quizze anderer User werden erst ab min. 1 Frage angezeigt.</span>
    </div>

        <div class="space-y-2">
            <div class="flex gap-2">
            <input type="checkbox" name="use_max_amount_questions" id="use_max_amount_questions" {% if form.use_max_amount_questions.value %}checked{% endif %}>
-            <label class="block text-sm font-medium text-gray-700">maximale Anzahl an Fragen</label>
+            <label class="block text-sm font-medium text-gray-700 dark:text-white">maximale Anzahl an Fragen</label>
            </div>
       <input 
      type="range" 
@@ -81,22 +81,22 @@
       {% if not form.use_max_amount_questions.value %}disabled{% endif %}
    >

- <span id="max_amount_value" class="text-sm font-semibold text-gray-800">
+ <span id="max_amount_value" class="text-sm font-semibold text-gray-800 dark:text-white">
      {{ form.max_amount_questions.value|default_if_none:100 }} Frage(n)
    </span>
 </div>

                <div class="space-y-2">
-            <label class="block text-sm font-medium text-gray-700">veröffentlicht von User</label>
-            <input type="text" name="user" class="border-2 border-gray-300 rounded-lg p-2 w-full" id="id_user" value="{{ form.user.value|default_if_none:'' }}">
+            <label class="block text-sm font-medium text-gray-700 dark:text-white">veröffentlicht von User</label>
+            <input type="text" name="user" class="border-2 border-gray-300 rounded-lg p-2 w-full dark:text-white" id="id_user" value="{{ form.user.value|default_if_none:'' }}">
        </div>
       <div class="space-y-2">
-        <label class="block text-sm font-medium text-gray-700">Kategorie</label>
+        <label class="block text-sm font-medium text-gray-700 dark:text-white">Kategorie</label>
        {{ form.categories }}

    </div> 
       <div class="space-y-2">
-        <label class="block text-sm font-medium text-gray-700">Suche</label>
+        <label class="block text-sm font-medium text-gray-700 dark:text-white">Suche</label>
             {{ form.search }}

    </div> 
--- a/django/templates/library/overview_quiz.html
+++ b/django/templates/library/overview_quiz.html
@@ -18,20 +18,28 @@
 {% endblock %}

 <!-- Alle -->
-<div class="container mx-auto px-4 sm:px-6 lg:px-8 mt-8 mb-6">
-    {% if user.is_authenticated %}
+<div class="container mx-auto px-4 sm:px-6 lg:px-8 mt-8 mb-6 dark:text-white">
+   

      <div class="flex justify-end  text-sm mb-2">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6 text-blue-600">
      <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
      </svg>
      <div class="gap-2 mx-2">
+      {% if user.is_authenticated %}
      Anzahl aller Ergebnisse:
      <span class="font-bold"> {{ total_all_found }}</span>
      </div>
      (verschiedene: 
-      <span class="font-bold ml-1"> {{ total_all }}</span>) </div>
-        
+      <span class="font-bold ml-1"> {{ total_all }}</span>)
+      {% else %}
+      Anzahl aller Ergebnisse:
+      <span class="font-bold"> {{ total_all_found }}</span>
+      </div>
+       {% endif %}
+      </div>
+     
+        {% if user.is_authenticated %}
    <div class="flex flex-wrap justify-end gap-4 font-bold text-blue-600 whitespace-nowrap text-sm mb-2 md:mb-0">
        <p class="font-black underline">Alle ({{ total_all }})</p>
    <a href="{{ url_my }}?{{ request.GET.urlencode }}">Meine Quizze ({{ total_my }})</a>
@@ -40,7 +48,7 @@
     
          {% endif %}
          <div class="flex items-center gap-3">
-    <h2 id="all-quizzes" class="text-2xl font-bold text-gray-900">Alle</h2>
+    <h2 id="all-quizzes" class="text-2xl font-bold text-gray-900 dark:text-white">Alle</h2>
    <div class="h-0.5 flex-grow bg-gradient-to-r from-blue-600 to-transparent rounded-full"></div>
  </div>
 
@@ -52,7 +60,7 @@
 <div class="container mx-auto px-4 sm:px-6 lg:px-8">
  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 auto-rows-fr">
    {% for quiz in all_quizzes %}
-    <article class="relative min-h-[20rem] rounded-xl shadow-lg overflow-hidden bg-white flex flex-col">
+    <article class="relative min-h-[20rem] rounded-xl shadow-lg overflow-hidden flex flex-col">
        <!-- Image Section (Top) -->
        <div class="h-48 w-full relative flex-shrink-0">
          {% if quiz.image %}
@@ -70,17 +78,17 @@
          {% endif %}
          {% if user.is_authenticated %}
          {% if quiz.id not in favorite_quiz_ids %}
-          <div class="absolute top-4 right-4 bg-white bg-opacity-60 text-white px-4 py-2 rounded-lg shadow-lg">
+          <div class="absolute top-4 right-4 bg-white bg-opacity-60 text-white px-4 py-2 rounded-lg shadow-lg dark:bg-[#2a2f3a]">
           
            <a  class="favorite-link" href="{% url 'library:favorite_quiz' quiz.pk %}">
-            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="text-black size-6">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="text-black size-6 dark:text-white">
              <path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z" />
            </svg>
          </a>
          </div>
          
          {% else %}
-          <div class="absolute top-4 right-4 bg-white bg-opacity-60 text-white px-4 py-2 rounded-lg shadow-lg">
+          <div class="absolute top-4 right-4 bg-white bg-opacity-60 text-white px-4 py-2 rounded-lg shadow-lg dark:bg-[#2a2f3a]">
          <a class="favorite-link" href="{% url 'library:favorite_quiz' quiz.pk %}">
            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="text-yellow-400 size-6">
              <path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z" />
@@ -89,16 +97,27 @@
          </div>
          {% endif %}
          {% endif %}
+                    <div class="dark:bg-[#2a2f3a] max-w-6/10 h-max-12 truncate absolute top-4 left-4 bg-white bg-opacity-60 text-white px-4 py-2 rounded-lg shadow-lg ">
+           
+            <div  class="flex items-center gap-2">
+          <span class="rounded-full w-4 h-4 flex-shrink-0" style="background-color: {{ quiz.category.color }};"></span>
+             <a class=" text-gray-800 truncate text-sm dark:text-white" title="{{ quiz.category }}" href="{% url 'library:overview_quiz' %}?filter=1&categories={{ quiz.category.id }}">{{ quiz.category }}</a>
+            </div>
+          </div>
+
+
+
+
        </div>

        <!-- Content Section (Bottom) -->
-        <div class="flex-grow bg-white p-4 flex flex-col gap-3">
+        <div class="flex-grow bg-white p-4 flex flex-col gap-3 dark:bg-[#2a2f3a] dark:text-white"  >
          <!-- Title -->
          <h2 class="text-xl font-bold text-gray-900 break-words mb-2"> 
-            <a href="{% url 'library:detail_quiz' quiz.id %}" class="hover:text-blue-600 transition-colors">{{ quiz.name }}</a>
+            <a href="{% url 'library:detail_quiz' quiz.id %}" class="hover:text-blue-600 transition-colors dark:text-white">{{ quiz.name }}</a>
          </h2>
          <!-- Description -->
-          <p class="text-sm text-gray-700 break-words mb-3">{{ quiz.description }}</p>
+          <p class="text-sm text-gray-700 break-words mb-3 dark:text-white">{{ quiz.description }}</p>

          <!-- Quiz Info Grid -->
          <div class="grid grid-cols-2 gap-x-4 gap-y-3 text-sm">
@@ -107,7 +126,7 @@
              <svg class="w-4 h-4 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
              </svg>
-              <span class="text-gray-800">{{ quiz.difficulty }}</span>
+              <span class="text-gray-800 dark:text-white">{{ quiz.difficulty }}</span>
            </div>
            
            <!-- Questions Count -->
@@ -115,7 +134,7 @@
              <svg class="w-4 h-4 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
              </svg>
-              <span class="text-gray-800">{{ quiz.questions.count }} Fragen</span>
+              <span class="text-gray-800 dark:text-white">{{ quiz.questions.count }} Fragen</span>
            </div>
            
            <!-- Status -->
@@ -123,8 +142,11 @@
              <svg class="w-4 h-4 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
              </svg>
-              <span class="text-gray-800">{{ quiz.status }}</span>
+              <span class="text-gray-800 dark:text-white">{{ quiz.status }}</span>
            </div>
+
+
+
            


@@ -138,9 +160,9 @@
                  <span class="text-gray-300 text-base">★</span>
                {% endif %}
              {% endfor %}
-              <span class="text-gray-600 text-sm">({{ quiz.rating_count }})</span>
+              <span class="text-gray-600 text-sm dark:text-white">({{ quiz.rating_count }})</span>
              {% else %}
-              <span class="text-gray-600 text-sm">Noch keine Bewertungen</span>
+              <span class="text-gray-600 text-sm dark:text-white">Noch keine Bewertungen</span>
              {% endif %}
            </div>
          </div>
@@ -165,13 +187,13 @@
 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"  class="text-green-400 size-4">
  <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
 </svg>
-<span class="text-gray-800 text-sm "><span class="font-medium">{{ quiz.published_at |naturaltime }}</span> <span class="text-sm">erst. veröffentlicht</span> </span>
+<span class="text-gray-800 text-sm dark:text-white"><span class="font-medium dark:text-white">{{ quiz.published_at |naturaltime }}</span> <span class="text-sm">erst. veröffentlicht</span> </span>
 </div>
 {% endif %}


          <!-- Action Buttons -->
-          <div class="flex justify-between items-center gap-2 mt-3 border-t pt-3">
+          <div class="flex justify-between items-center gap-2 mt-3 border-t pt-3"  >
            {% if quiz.questions.count != 0 %}
            <a href="{% url 'play:create_game' quiz.id %}" 
               class="px-3 py-1.5 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-lg transition-colors duration-200 flex items-center gap-2">
@@ -186,12 +208,26 @@
            {% endif %}
            <div class="flex gap-1">
              <a href="{% url 'library:detail_quiz' quiz.id %}" 
-                 class="p-1.5 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg transition-colors duration-200">
+                 class="p-1.5 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg transition-colors duration-200 dark:bg-transparent dark:text-white dark:hover:bg-gray-700 ">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                </svg>
              </a>
+              {% if quiz.user_id == request.user %}
+              <a href="{% url 'library:edit_quiz' quiz.id %}" 
+                 class="p-1.5 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg transition-colors duration-200 dark:bg-transparent dark:text-white dark:hover:bg-gray-700">
+                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
+                </svg>
+              </a>
+              <a href="{% url 'library:delete_quiz' quiz.id %}" 
+                 class="p-1.5 bg-red-100 hover:bg-red-200 text-red-700 rounded-lg transition-colors duration-200 dark:bg-transparent dark:text-white dark:hover:bg-gray-700">
+                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                </svg>
+              </a>
+              {% endif %}
            </div>
          </div>
        </div>
@@ -211,7 +247,7 @@
    </a>
    {% endif %}
    
-    <span class="px-3 py-1 text-gray-600">Seite {{ all_quizzes.number }} von {{ all_quizzes.paginator.num_pages }}</span>
+    <span class="px-3 py-1 text-gray-600 dark:text-white">Seite {{ all_quizzes.number }} von {{ all_quizzes.paginator.num_pages }}</span>
    
    {% if all_quizzes.has_next %}
    <a href="?all_page={{ all_quizzes.next_page_number }}&{{ querystring_all }}" 
@@ -226,7 +262,7 @@
 </div>
 {% else %}
 <div class="container mx-auto px-4 sm:px-6 lg:px-8 mt-4">
-  <p class="text-gray-600 text-center">Keine öffentlichen Quiz gefunden.</p>
+  <p class="text-gray-600 text-center  dark:text-white">Keine Quiz gefunden.</p>
 </div>
 {% endif %}<script>

--- a/django/templates/library/overview_quiz_favorite.html
+++ b/django/templates/library/overview_quiz_favorite.html
@@ -22,14 +22,14 @@

 {% if user.is_authenticated %}

-<div class="container mx-auto px-4 sm:px-6 lg:px-8 mt-8 mb-6">
+<div class="container mx-auto px-4 sm:px-6 lg:px-8 mt-8 mb-6 dark:text-white">


      <div class="flex justify-end  text-sm mb-2">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6 text-blue-600">
      <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
      </svg>
-      <div class="gap-2 mx-2">
+      <div class="gap-2 mx-2 ">
      Anzahl aller Ergebnisse:
      <span class="font-bold"> {{ total_all_found }}</span>
      </div>
@@ -46,7 +46,7 @@


        <div class="flex items-center gap-3">
-    <h2 id="my-quizzes" class="text-2xl font-bold text-gray-900">Meine Favoriten</h2>
+    <h2 id="my-quizzes" class="text-2xl font-bold text-gray-900 dark:text-white">Meine Favoriten</h2>
    <div class="h-0.5 flex-grow bg-gradient-to-r from-blue-600 to-transparent rounded-full"></div>
  </div>
 </div>
@@ -54,9 +54,9 @@
 <div class="container mx-auto px-4 sm:px-6 lg:px-8">
  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 auto-rows-fr">
    {% for quiz in favorite_quizzes %}
-    <article class="relative min-h-[20rem] rounded-xl shadow-lg overflow-hidden bg-white flex flex-col">
+    <article class="relative min-h-[20rem] rounded-xl shadow-lg overflow-hidden bg-white flex flex-col ">
        <!-- Image Section (Top) -->
-        <div class="h-48 w-full relative flex-shrink-0">
+        <div class="h-48 w-full relative flex-shrink-0 ">
          {% if quiz.image %}
          <div class="relative w-full h-full inset-0 bg-cover bg-center">
            <!-- Hintergrundbild -->
@@ -72,17 +72,17 @@
          {% if user.is_authenticated %}
          {% if quiz.favorite == False %}
         
-          <div class="absolute top-4 right-4 bg-white bg-opacity-60 text-white px-4 py-2 rounded-lg shadow-lg">
+          <div class="absolute top-4 right-4 bg-white bg-opacity-60 text-white px-4 py-2 rounded-lg shadow-lg dark:bg-[#2a2f3a]">
           
            <a class="favorite-link" href="{% url 'library:favorite_quiz' quiz.pk %}">
-            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="text-black size-6">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="text-black size-6 dark:text-white">
              <path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z" />
            </svg>
          </a>
          </div>
          
          {% else %}
-          <div class="absolute top-4 right-4 bg-white bg-opacity-60 text-white px-4 py-2 rounded-lg shadow-lg">
+          <div class="absolute top-4 right-4 bg-white bg-opacity-60 text-white px-4 py-2 rounded-lg shadow-lg dark:bg-[#2a2f3a]">
          <a class="favorite-link" href="{% url 'library:favorite_quiz' quiz.pk %}">
            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="text-yellow-400 size-6">
              <path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z" />
@@ -91,18 +91,30 @@
          </div>
          {% endif %}
          {% endif %}
+                    <div class="dark:bg-[#2a2f3a] max-w-6/10 h-max-12 truncate absolute top-4 left-4 bg-white bg-opacity-60 text-white px-4 py-2 rounded-lg shadow-lg ">
+           
+            <div  class="flex items-center gap-2">
+          <span class="rounded-full w-4 h-4 flex-shrink-0" style="background-color: {{ quiz.category.color }};"></span>
+           
+              <a class=" text-gray-800 truncate text-sm dark:text-white" title="{{ quiz.category }}" href="{% url 'library:overview_quiz' %}?filter=1&categories={{ quiz.category.id }}">{{ quiz.category }}</a>
+            </div>
+          </div>
+
+
+
+
        </div>

        

        <!-- Content Section (Bottom) -->
-        <div class="flex-grow bg-white p-4 flex flex-col gap-3">
+        <div class="flex-grow bg-white p-4 flex flex-col gap-3 dark:bg-[#2a2f3a] dark:text-white">
          <!-- Title -->
          <h2 class="text-xl font-bold text-gray-900 break-words mb-2"> 
-            <a href="{% url 'library:detail_quiz' quiz.id %}" class="hover:text-blue-600 transition-colors">{{ quiz.name }}</a>
+            <a href="{% url 'library:detail_quiz' quiz.id %}" class="hover:text-blue-600 transition-colors dark:text-white">{{ quiz.name }}</a>
          </h2>
          <!-- Description -->
-          <p class="text-sm text-gray-700 break-words mb-3">{{ quiz.description }}</p>
+          <p class="text-sm text-gray-700 break-words mb-3 dark:text-white">{{ quiz.description }}</p>

          <!-- Quiz Info Grid -->
          <div class="grid grid-cols-2 gap-x-4 gap-y-3 text-sm">
@@ -111,7 +123,7 @@
              <svg class="w-4 h-4 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
              </svg>
-              <span class="text-gray-800">{{ quiz.difficulty }}</span>
+              <span class="text-gray-800 dark:text-white">{{ quiz.difficulty }}</span>
            </div>
            
            <!-- Questions Count -->
@@ -119,7 +131,7 @@
              <svg class="w-4 h-4 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
              </svg>
-              <span class="text-gray-800">{{ quiz.questions.count }} Fragen</span>
+              <span class="text-gray-800 dark:text-white">{{ quiz.questions.count }} Fragen</span>
            </div>
            
            <!-- Status -->
@@ -127,7 +139,7 @@
              <svg class="w-4 h-4 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
              </svg>
-              <span class="text-gray-800">{{ quiz.status }}</span>
+              <span class="text-gray-800 dark:text-white">{{ quiz.status }}</span>
            </div>
            
            <!-- Rating -->
@@ -140,9 +152,9 @@
                  <span class="text-gray-300 text-base">★</span>
                {% endif %}
              {% endfor %}
-                <span class="text-gray-600 text-sm">({{ quiz.rating_count }})</span>
+                <span class="text-gray-600 text-sm dark:text-white">({{ quiz.rating_count }})</span>
              {% else %}
-                <span class="text-gray-600 text-sm">Noch keine Bewertungen</span>
+                <span class="text-gray-600 text-sm dark:text-white">Noch keine Bewertungen</span>
              {% endif %}
            </div>
          </div>
@@ -169,7 +181,7 @@
 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"  class="text-green-400 size-4">
  <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
 </svg>
-<span class="text-gray-800 text-sm "><span class="font-medium">{{ quiz.published_at |naturaltime }}</span> <span class="text-sm">erst. veröffentlicht</span> </span>
+<span class="text-gray-800 text-sm dark:text-white "><span class="font-medium dark:text-white">{{ quiz.published_at |naturaltime }}</span> <span class="text-sm">erst. veröffentlicht</span> </span>
 </div>
 {% endif %}

@@ -190,7 +202,7 @@

            <div class="flex gap-1">
              <a href="{% url 'library:detail_quiz' quiz.id %}" 
-                 class="p-1.5 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg transition-colors duration-200">
+                 class="p-1.5 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg transition-colors duration-200 dark:bg-transparent dark:text-white dark:hover:bg-gray-700">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
@@ -198,13 +210,13 @@
              </a>
              {% if quiz.user_id == request.user %}
              <a href="{% url 'library:edit_quiz' quiz.id %}" 
-                 class="p-1.5 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg transition-colors duration-200">
+                 class="p-1.5 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg transition-colors duration-200 dark:bg-transparent dark:text-white dark:hover:bg-gray-700">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                </svg>
              </a>
              <a href="{% url 'library:delete_quiz' quiz.id %}" 
-                 class="p-1.5 bg-red-100 hover:bg-red-200 text-red-700 rounded-lg transition-colors duration-200">
+                 class="p-1.5 bg-red-100 hover:bg-red-200 text-red-700 rounded-lg transition-colors duration-200 dark:bg-transparent dark:text-white dark:hover:bg-gray-700">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                </svg>
@@ -217,10 +229,10 @@
    {% endfor %}
    
  </div>
-
-  <!-- Pagination für Meine Quizze -->
+  
+  <!-- Pagination für favorite Quizze -->
  {% if favorite_quizzes.paginator.num_pages > 1 %}
-  <div class="flex justify-center space-x-2 mt-6 mb-8">
+  <div class="flex justify-center space-x-2 mt-6 mb-8 ">
    {% if favorite_quizzes.has_previous %}
    <a href="?favorite_page={{ favorite.previous_page_number }}&{{ querystring_favorite }}" 
       class="px-3 py-1 bg-gray-100 text-gray-700 hover:bg-gray-200 rounded-lg transition-colors">
@@ -230,7 +242,7 @@
    </a>
    {% endif %}
    
-    <span class="px-3 py-1 text-gray-600">Seite {{ favorite_quizzes.number }} von {{ favorite_quizzes.paginator.num_pages }}</span>
+    <span class="dark:text-white px-3 py-1 text-gray-600">Seite {{ favorite_quizzes.number }} von {{ favorite_quizzes.paginator.num_pages }}</span>
    
    {% if favorite_quizzes.has_next %}
    <a href="?favorite_page={{ favorite_quizzes.next_page_number }}&{{ querystring_favorite }}" 
@@ -245,7 +257,7 @@
 </div>
 {% else %}
 <div class="container mx-auto px-4 sm:px-6 lg:px-8 mt-4">
-  <p class="text-gray-600 text-center">Keine favorisierten Quiz gefunden.</p>
+  <p class="text-gray-600 text-center  dark:text-white">Keine favorisierten Quiz gefunden.</p>
 </div>
 {% endif %}<script>
  document.addEventListener('DOMContentLoaded', function () {
--- a/django/templates/library/overview_quiz_my.html
+++ b/django/templates/library/overview_quiz_my.html
@@ -20,7 +20,7 @@


 {% if user.is_authenticated %}
-<div class="container mx-auto px-4 sm:px-6 lg:px-8 mt-8 mb-6">
+<div class="container mx-auto px-4 sm:px-6 lg:px-8 mt-8 mb-6 dark:text-white">

      <div class="flex justify-end  text-sm mb-2">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6 text-blue-600">
@@ -41,7 +41,7 @@
    <a href="{{ url_favorite }}?{{ request.GET.urlencode }}">Meine Favoriten ({{ total_favorite }})</a>
  </div>
  <div class="flex items-center gap-3">
-    <h2 id="my-quizzes" class="text-2xl font-bold text-gray-900">Meine Quizze</h2>
+    <h2 id="my-quizzes" class="text-2xl font-bold text-gray-900 dark:text-white">Meine Quizze</h2>
    <div class="h-0.5 flex-grow bg-gradient-to-r from-blue-600 to-transparent rounded-full"></div>
  </div>
 </div>
@@ -69,17 +69,19 @@
          {% endif %}
          {% if user.is_authenticated %}
          {% if quiz.id not in favorite_quiz_ids %}
-          <div class="absolute top-4 right-4 bg-white bg-opacity-60 text-white px-4 py-2 rounded-lg shadow-lg">
+          <div class="absolute top-4 right-4 bg-white bg-opacity-60 text-white px-4 py-2 rounded-lg shadow-lg dark:bg-[#2a2f3a]">
+
+            
           
            <a class="favorite-link" href="{% url 'library:favorite_quiz' quiz.pk %}">
-            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="text-black size-6">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="text-black size-6 dark:text-white">
              <path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z" />
            </svg>
          </a>
          </div>
          
          {% else %}
-          <div class="absolute top-4 right-4 bg-white bg-opacity-60 text-white px-4 py-2 rounded-lg shadow-lg">
+          <div class="absolute top-4 right-4 bg-white bg-opacity-60 text-white px-4 py-2 rounded-lg shadow-lg dark:bg-[#2a2f3a]">
          <a class="favorite-link" href="{% url 'library:favorite_quiz' quiz.pk %}">
            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="text-yellow-400 size-6">
              <path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z" />
@@ -88,18 +90,28 @@
          </div>
          {% endif %}
          {% endif %}
+                    <div class="dark:bg-[#2a2f3a] max-w-6/10 h-max-12 truncate absolute top-4 left-4 bg-white bg-opacity-60 text-white px-4 py-2 rounded-lg shadow-lg ">
+           
+            <div  class="flex items-center gap-2">
+          <span class="rounded-full w-4 h-4 flex-shrink-0" style="background-color: {{ quiz.category.color }};"></span>
+            <a class=" text-gray-800 truncate text-sm dark:text-white" title="{{ quiz.category }}" href="{% url 'library:overview_quiz' %}?filter=1&categories={{ quiz.category.id }}">{{ quiz.category }}</a>
+            </div>
+          </div>
+
+
+
        </div>

        

        <!-- Content Section (Bottom) -->
-        <div class="flex-grow bg-white p-4 flex flex-col gap-3">
+        <div class="flex-grow bg-white p-4 flex flex-col gap-3 dark:bg-[#2a2f3a] dark:text-white">
          <!-- Title -->
          <h2 class="text-xl font-bold text-gray-900 break-words mb-2"> 
-            <a href="{% url 'library:detail_quiz' quiz.id %}" class="hover:text-blue-600 transition-colors">{{ quiz.name }}</a>
+            <a href="{% url 'library:detail_quiz' quiz.id %}" class="hover:text-blue-600 transition-colors dark:text-white">{{ quiz.name }}</a>
          </h2>
          <!-- Description -->
-          <p class="text-sm text-gray-700 break-words mb-3">{{ quiz.description }}</p>
+          <p class="text-sm text-gray-700 break-words mb-3 dark:text-white">{{ quiz.description }}</p>

          <!-- Quiz Info Grid -->
          <div class="grid grid-cols-2 gap-x-4 gap-y-3 text-sm">
@@ -108,7 +120,7 @@
              <svg class="w-4 h-4 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
              </svg>
-              <span class="text-gray-800">{{ quiz.difficulty }}</span>
+              <span class="text-gray-800 dark:text-white">{{ quiz.difficulty }}</span>
            </div>
            
            <!-- Questions Count -->
@@ -116,7 +128,7 @@
              <svg class="w-4 h-4 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
              </svg>
-              <span class="text-gray-800">{{ quiz.questions.count }} Fragen</span>
+              <span class="text-gray-800 dark:text-white">{{ quiz.questions.count }} Fragen</span>
            </div>
            
            <!-- Status -->
@@ -124,7 +136,7 @@
              <svg class="w-4 h-4 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
              </svg>
-              <span class="text-gray-800">{{ quiz.status }}</span>
+              <span class="text-gray-800 dark:text-white">{{ quiz.status }}</span>
            </div>
            
            <!-- Rating -->
@@ -137,9 +149,9 @@
                  <span class="text-gray-300 text-base">★</span>
                {% endif %}
              {% endfor %}
-              <span class="text-gray-600 text-sm">({{ quiz.rating_count }})</span>
+              <span class="text-gray-600 text-sm dark:text-white">({{ quiz.rating_count }})</span>
              {% else %}
-              <span class="text-gray-600 text-sm">Noch keine Bewertungen</span>
+              <span class="text-gray-600 text-sm dark:text-white">Noch keine Bewertungen</span>
              {% endif %}
            </div>
          </div>
@@ -168,7 +180,7 @@
 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"  class="text-green-400 size-4">
  <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
 </svg>
-<span class="text-gray-800 text-sm "><span class="font-medium">{{ quiz.published_at |naturaltime }}</span> <span class="text-sm">erst. veröffentlicht</span> </span>
+<span class="text-gray-800 text-sm dark:text-white"><span class="font-medium dark:text-white">{{ quiz.published_at |naturaltime }}</span> <span class="text-sm">erst. veröffentlicht</span> </span>
 </div>
 {% endif %}

@@ -188,7 +200,7 @@
            {% endif %}
            <div class="flex gap-1">
              <a href="{% url 'library:detail_quiz' quiz.id %}" 
-                 class="p-1.5 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg transition-colors duration-200">
+                 class="p-1.5 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg transition-colors duration-200 dark:bg-transparent dark:text-white dark:hover:bg-gray-700">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
@@ -196,13 +208,13 @@
              </a>
              {% if quiz.user_id == request.user %}
              <a href="{% url 'library:edit_quiz' quiz.id %}" 
-                 class="p-1.5 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg transition-colors duration-200">
+                 class="p-1.5 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg transition-colors duration-200 dark:bg-transparent dark:text-white dark:hover:bg-gray-700">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                </svg>
              </a>
              <a href="{% url 'library:delete_quiz' quiz.id %}" 
-                 class="p-1.5 bg-red-100 hover:bg-red-200 text-red-700 rounded-lg transition-colors duration-200">
+                 class="p-1.5 bg-red-100 hover:bg-red-200 text-red-700 rounded-lg transition-colors duration-200 dark:bg-transparent dark:text-white dark:hover:bg-gray-700">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                </svg>
@@ -228,7 +240,7 @@
    </a>
    {% endif %}
    
-    <span class="px-3 py-1 text-gray-600">Seite {{ my_quizzes.number }} von {{ my_quizzes.paginator.num_pages }}</span>
+    <span class="px-3 py-1 text-gray-600 dark:text-white">Seite {{ my_quizzes.number }} von {{ my_quizzes.paginator.num_pages }}</span>
    
    {% if my_quizzes.has_next %}
    <a href="?my_page={{ my_quizzes.next_page_number }}&{{ querystring_my }}" 
@@ -243,7 +255,7 @@
 </div>
 {% else %}
 <div class="container mx-auto px-4 sm:px-6 lg:px-8 mt-4">
-  <p class="text-gray-600 text-center">Keine eigenen Quiz gefunden.</p>
+  <p class="text-gray-600 text-center  dark:text-white">Keine eigenen Quiz gefunden.</p>
 </div>
 {% endif %}<script>
  document.addEventListener('DOMContentLoaded', function () {
--- a/django/templates/library/question/question_input.html
+++ b/django/templates/library/question/question_input.html
@@ -3,23 +3,23 @@
 {% block content %}
 <div class="container mx-auto px-4">
    <div class="flex justify-between items-center mb-6">
-        <h1 class="text-2xl font-bold">{% if question %}Frage bearbeiten{% else %}Neue Eingabe Frage{% endif %}</h1>
+        <h1 class="text-2xl font-bold dark:text-white">{% if question %}Frage bearbeiten{% else %}Neue Eingabe Frage{% endif %}</h1>
        <a href="{% url 'library:detail_quiz' quiz.id %}" 
           class="bg-gray-100 text-gray-700 px-4 py-2 rounded-md hover:bg-gray-200 transition-colors">
            Zurück zum Quiz
        </a>
    </div>

-    <div class="bg-white rounded-lg shadow-md p-6 border-blue-600 border-2 rounded-xl shadow-md">
+    <div class="bg-white rounded-lg shadow-md p-6 border-blue-600 border-2 rounded-xl shadow-md dark:bg-transparent dark:text-white">
        <form method="post" class="space-y-6" enctype="multipart/form-data">
            {% csrf_token %}
            
            <!-- Question Text -->
            <div>
-                <label for="question" class="block text-sm font-medium text-gray-700">Frage</label>
+                <label for="question" class="block text-sm font-medium text-gray-700 dark:text-white">Frage</label>
                <div class="mt-1">
                    <textarea name="question" id="question" rows="4"
-                           class="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
+                           class="dark:bg-[#2a2f3a] shadow-sm  focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
                           required>{{ question.data.question }}</textarea>
                </div>
            </div>
@@ -33,17 +33,17 @@
            {% endif %}
            <div>
                <label class="font-bold" for="question_image">Bild:</label>
-                <input class="bg-blue-200 p-2 m-2 rounded-lg border-2 border-blue-400" type="file" name="question_image" id="question_image">
+                <input class="max-w-full bg-blue-200 p-2 m-2 rounded-lg border-2 border-blue-400 dark:bg-transparent" type="file" name="question_image" id="question_image">
            </div>

            <!-- Eingabe  -->
            {% if question and question.data.options %}
            {% for option in question.data.options %}
            <div> 
-                <label class="block text-sm font-medium text-gray-700 mb-2">Richtige Antwort</label>
+                <label class="block text-sm font-medium text-gray-700 mb-2 dark:text-white">Richtige Antwort</label>
                <div class="flex space-x-4">
                    <textarea name="correct_answer" rows="2"
-                    class="shadow-sm focus:ring-blue-500 focus:border-blue-500 flex-grow sm:text-sm border-gray-300 rounded-md"
+                    class="dark:bg-[#2a2f3a] focus:outline-none focus:ring-2 shadow-sm focus:ring-blue-500 focus:border-blue-500 flex-grow sm:text-sm border-gray-300 rounded-md"
                    required>{{ option.value }}</textarea>
            
                </div>
@@ -52,10 +52,10 @@
            {% endfor %}
            {% else %}
            <div> 
-                <label class="block text-sm font-medium text-gray-700 mb-2">Richtige Antwort</label>
+                <label class="block text-sm font-medium text-gray-700 mb-2 dark:text-white">Richtige Antwort</label>
                <div class="flex space-x-4">
                    <textarea name="correct_answer" rows="2"
-                    class="shadow-sm focus:ring-blue-500 focus:border-blue-500 flex-grow sm:text-sm border-gray-300 rounded-md"
+                    class="dark:bg-[#2a2f3a] shadow-sm  focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 flex-grow sm:text-sm border-gray-300 rounded-md"
                    required></textarea>
            
                </div>
@@ -66,7 +66,7 @@

            <div class="p-4">
                <label class="font-bold" for="time_per_question">Zeit pro Frage:</label>
-                <select name="time_per_question" id="time_per_question">
+                <select name="time_per_question" id="time_per_question" class="dark:text-white dark:bg-[#2a2f3a]  focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    <option value="10" {% if standard_time_per_question == "10" or time_per_question == "10" %}selected{% endif %}>10 Sekunden</option>
                    <option value="20" {% if standard_time_per_question == "20" or time_per_question == "20" %}selected{% endif %}>20 Sekunden</option>
                    <option value="30" {% if standard_time_per_question == "30" or time_per_question == "30" %}selected{% endif %}>30 Sekunden</option>
@@ -76,10 +76,10 @@
                    <option value="300" {% if standard_time_per_question == "300" or time_per_question == "300" %}selected{% endif %}>5 Minuten</option>
                </select>
            </div>
-                                       <label for="credits" class="block text-sm font-medium text-gray-700">Credits</label>
+                                       <label for="credits" class="block text-sm font-medium text-gray-700 dark:text-white">Credits</label>
                <div class="mt-1">
                    <textarea name="credits" rows="4"
-                           class="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
+                           class="dark:bg-[#2a2f3a] shadow-sm  focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
                           >{{ credits }}</textarea>
                </div>

--- a/django/templates/library/question/question_multiple_choice.html
+++ b/django/templates/library/question/question_multiple_choice.html
@@ -3,22 +3,22 @@
 {% block content %}
 <div class="container mx-auto px-4">
    <div class="flex justify-between items-center mb-6">
-        <h1 class="text-2xl font-bold">{% if question %}Frage bearbeiten{% else %}Neue Multiple Choice Frage{% endif %}</h1>
+        <h1 class="text-2xl font-bold dark:text-white">{% if question %}Frage bearbeiten{% else %}Neue Multiple Choice Frage{% endif %}</h1>
        <a href="{% url 'library:detail_quiz' quiz.id %}" 
           class="bg-gray-100 text-gray-700 px-4 py-2 rounded-md hover:bg-gray-200 transition-colors">
            Zurück zum Quiz
        </a>
    </div>
-    <div class="bg-white rounded-lg shadow-md p-6 border-blue-600 border-2 rounded-xl shadow-md">
+    <div class="bg-white rounded-lg shadow-md p-6 border-blue-600 border-2 rounded-xl shadow-md dark:bg-transparent dark:text-white">
        <form method="post" class="space-y-6" enctype="multipart/form-data">
            {% csrf_token %}
            
            <!-- Question Text -->
            <div>
-                <label for="question" class="block text-sm font-medium text-gray-700">Frage</label>
+                <label for="question" class="block text-sm font-medium text-gray-700 dark:text-white">Frage</label>
                <div class="mt-1">
                    <textarea name="question" id="question" rows="4"
-                           class="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
+                           class="dark:bg-[#2a2f3a] shadow-sm  focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
                           required>{{ question.data.question|default:'' }}</textarea>
                </div>
            </div>
@@ -33,24 +33,24 @@
            {% endif %}
            <div>
                <label class="font-bold" for="question_image">Bild:</label>
-                <input value="image.url" class="bg-blue-200 p-2 m-2 rounded-lg border-2 border-blue-400" type="file" name="question_image" id="question_image">
+                <input value="image.url" class="max-w-full bg-blue-200 p-2 m-2 rounded-lg border-2 border-blue-400 dark:bg-transparent" type="file" name="question_image" id="question_image">
            </div>

            <!-- Options -->
            <div>
-                <label class="block text-sm font-medium text-gray-700 mb-2">Antwortmöglichkeiten</label>
+                <label class="block text-sm font-medium text-gray-700 mb-2  dark:text-white">Antwortmöglichkeiten</label>
                <div id="options-container" class="space-y-3">
                    {% if question and question.data.options %}
                        {% for option in question.data.options %}
                            <div class="flex items-center space-x-3">
                                <textarea name="option_{{ forloop.counter }}" rows="2"
-                                       class="shadow-sm focus:ring-blue-500 focus:border-blue-500 flex-grow sm:text-sm border-gray-300 rounded-md"
+                                       class="dark:bg-[#2a2f3a] shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 flex-grow sm:text-sm border-gray-300 rounded-md"
                                       required>{{ option.value }}</textarea>
                                <label class="inline-flex items-center">
                                    <input type="checkbox" name="correct_{{ forloop.counter }}" value="1"
-                                           class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded"
+                                           class=" focus:outline-none focus:ring-2 focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded"
                                           {% if option.is_correct %}checked{% endif %}>
-                                    <span class="ml-2 text-sm text-gray-600">Richtig</span>
+                                    <span class="ml-2 text-sm text-gray-600 dark:text-white">Richtig</span>
                                </label>
                                <button type="button" onclick="removeOption(this)"
                                        class="text-red-600 hover:text-red-800 transition-colors">
@@ -63,7 +63,7 @@
                    {% else %}
                        <div class="flex items-center space-x-3">
                            <textarea name="option_1" rows="2"
-                                   class="shadow-sm focus:ring-blue-500 focus:border-blue-500 flex-grow sm:text-sm border-gray-300 rounded-md"
+                                   class="shadow-sm  focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 flex-grow sm:text-sm border-gray-300 rounded-md"
                                   required></textarea>
                            <label class="inline-flex items-center">
                                <input type="checkbox" name="correct_1" value="1"
@@ -79,11 +79,11 @@
                        </div>
                        <div class="flex items-center space-x-3">
                            <textarea name="option_2" rows="2"
-                                   class="shadow-sm focus:ring-blue-500 focus:border-blue-500 flex-grow sm:text-sm border-gray-300 rounded-md"
+                                   class="shadow-sm  focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 flex-grow sm:text-sm border-gray-300 rounded-md"
                                   required></textarea>
                            <label class="inline-flex items-center">
                                <input type="checkbox" name="correct_2" value="1"
-                                       class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded">
+                                       class=" focus:outline-none focus:ring-2 focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded">
                                <span class="ml-2 text-sm text-gray-600">Richtig</span>
                            </label>
                            <button type="button" onclick="removeOption(this)"
@@ -95,7 +95,7 @@
                        </div>
                        <div class="flex items-center space-x-3">
                            <textarea name="option_3" rows="2"
-                                   class="shadow-sm focus:ring-blue-500 focus:border-blue-500 flex-grow sm:text-sm border-gray-300 rounded-md"
+                                   class="shadow-sm  focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 flex-grow sm:text-sm border-gray-300 rounded-md"
                                   required></textarea>
                            <label class="inline-flex items-center">
                                <input type="checkbox" name="correct_3" value="1"
@@ -111,7 +111,7 @@
                        </div>
                        <div class="flex items-center space-x-3">
                            <textarea name="option_4" rows="2"
-                                   class="shadow-sm focus:ring-blue-500 focus:border-blue-500 flex-grow sm:text-sm border-gray-300 rounded-md"
+                                   class="shadow-sm  focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 flex-grow sm:text-sm border-gray-300 rounded-md"
                                   required></textarea>
                            <label class="inline-flex items-center">
                                <input type="checkbox" name="correct_4" value="1"
@@ -138,7 +138,7 @@

            <div class="p-4">
                <label class="font-bold" for="time_per_question">Zeit pro Frage:</label>
-                <select name="time_per_question" id="time_per_question">
+                <select name="time_per_question" id="time_per_question" class="dark:text-white dark:bg-[#2a2f3a] focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    <option value="10" {% if standard_time_per_question == "10" or time_per_question == "10" %}selected{% endif %}>10 Sekunden</option>
                    <option value="20" {% if standard_time_per_question == "20" or time_per_question == "20" %}selected{% endif %}>20 Sekunden</option>
                    <option value="30" {% if standard_time_per_question == "30" or time_per_question == "30" %}selected{% endif %}>30 Sekunden</option>
@@ -148,10 +148,10 @@
                    <option value="300" {% if standard_time_per_question == "300" or time_per_question == "300" %}selected{% endif %}>5 Minuten</option>
                </select>
            </div>
-                                                   <label for="credits" class="block text-sm font-medium text-gray-700">Credits</label>
+                                                   <label for="credits" class="block text-sm font-medium text-gray-700  dark:text-white">Credits</label>
                <div class="mt-1">
                    <textarea name="credits" rows="4"
-                           class="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
+                           class="dark:bg-[#2a2f3a] shadow-sm  focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md "
                           >{{ credits }}</textarea>
                </div>

@@ -182,20 +182,21 @@ function addOption() {
    const div = document.createElement('div');
    div.className = 'flex items-center space-x-3';
    div.innerHTML = `
-        <textarea name="option_${optionCount}" rows="2"
-               class="shadow-sm focus:ring-blue-500 focus:border-blue-500 flex-grow sm:text-sm border-gray-300 rounded-md"
-               required></textarea>
-        <label class="inline-flex items-center">
-            <input type="checkbox" name="correct_${optionCount}" value="1"
-                   class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded">
-            <span class="ml-2 text-sm text-gray-600">Richtig</span>
-        </label>
-        <button type="button" onclick="removeOption(this)"
-                class="text-red-600 hover:text-red-800 transition-colors">
-            <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
-            </svg>
-        </button>
+                                <textarea name="option_{{ forloop.counter }}" rows="2"
+                                       class="dark:bg-[#2a2f3a] shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 flex-grow sm:text-sm border-gray-300 rounded-md"
+                                       required>{{ option.value }}</textarea>
+                                <label class="inline-flex items-center">
+                                    <input type="checkbox" name="correct_{{ forloop.counter }}" value="1"
+                                           class=" focus:outline-none focus:ring-2 focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded"
+                                           {% if option.is_correct %}checked{% endif %}>
+                                    <span class="ml-2 text-sm text-gray-600 dark:text-white">Richtig</span>
+                                </label>
+                                <button type="button" onclick="removeOption(this)"
+                                        class="text-red-600 hover:text-red-800 transition-colors">
+                                    <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
+                                    </svg>
+                                </button>
    `;
    
    container.appendChild(div);
--- a/django/templates/library/question/question_true_false.html
+++ b/django/templates/library/question/question_true_false.html
@@ -3,23 +3,23 @@
 {% block content %}
 <div class="container mx-auto px-4">
    <div class="flex justify-between items-center mb-6">
-        <h1 class="text-2xl font-bold">{% if question %}Frage bearbeiten{% else %}Neue Wahr/Falsch Frage{% endif %}</h1>
+        <h1 class="text-2xl font-bold  dark:text-white">{% if question %}Frage bearbeiten{% else %}Neue Wahr/Falsch Frage{% endif %}</h1>
        <a href="{% url 'library:detail_quiz' quiz.id %}" 
           class="bg-gray-100 text-gray-700 px-4 py-2 rounded-md hover:bg-gray-200 transition-colors">
            Zurück zum Quiz
        </a>
    </div>

-    <div class="bg-white rounded-lg shadow-md p-6 border-blue-600 border-2 rounded-xl shadow-md">
+    <div class="bg-white rounded-lg shadow-md p-6 border-blue-600 border-2 rounded-xl shadow-md dark:bg-transparent dark:text-white">
        <form method="post" class="space-y-6" enctype="multipart/form-data">
            {% csrf_token %}
            
            <!-- Question Text -->
            <div>
-                <label for="question" class="block text-sm font-medium text-gray-700">Frage</label>
+                <label for="question" class="block text-sm font-medium text-gray-700  dark:text-white">Frage</label>
                <div class="mt-1">
                    <textarea name="question" id="question" rows="4"
-                           class="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
+                           class="dark:bg-[#2a2f3a] shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
                           required>{{ question.data.question }}</textarea>
                </div>
            </div>
@@ -33,31 +33,31 @@
            {% endif %}
            <div>
                <label class="font-bold" for="question_image">Bild:</label>
-                <input class="bg-blue-200 p-2 m-2 rounded-lg border-2 border-blue-400" type="file" name="question_image" id="question_image">
+                <input class="max-w-full bg-blue-200 p-2 m-2 rounded-lg border-2 border-blue-400 dark:bg-transparent" type="file" name="question_image" id="question_image">
            </div>

            <!-- True/False Selection -->
            <div>
-                <label class="block text-sm font-medium text-gray-700 mb-2">Richtige Antwort</label>
+                <label class="block text-sm font-medium text-gray-700 mb-2  dark:text-white">Richtige Antwort</label>
                <div class="flex space-x-4">
                    <label class="inline-flex items-center">
                        <input type="radio" name="correct_answer" value="true"
                               class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300"
                               {% if question.data.correct_answer %}checked{% endif %}>
-                        <span class="ml-2 text-sm text-gray-600">Wahr</span>
+                        <span class="ml-2 text-sm text-gray-600  dark:text-white">Wahr</span>
                    </label>
                    <label class="inline-flex items-center">
                        <input type="radio" name="correct_answer" value="false"
                               class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300"
                               {% if not question.data.correct_answer %}checked{% endif %}>
-                        <span class="ml-2 text-sm text-gray-600">Falsch</span>
+                        <span class="ml-2 text-sm text-gray-600  dark:text-white">Falsch</span>
                    </label>
                </div>
            </div>

            <div class="p-4">
                <label class="font-bold" for="time_per_question">Zeit pro Frage:</label>
-                <select name="time_per_question" id="time_per_question">
+                <select name="time_per_question" id="time_per_question" class="dark:text-white dark:bg-[#2a2f3a] focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    <option value="10" {% if standard_time_per_question == "10" or time_per_question == "10" %}selected{% endif %}>10 Sekunden</option>
                    <option value="20" {% if standard_time_per_question == "20" or time_per_question == "20" %}selected{% endif %}>20 Sekunden</option>
                    <option value="30" {% if standard_time_per_question == "30" or time_per_question == "30" %}selected{% endif %}>30 Sekunden</option>
@@ -67,10 +67,10 @@
                    <option value="300" {% if standard_time_per_question == "300" or time_per_question == "300" %}selected{% endif %}>5 Minuten</option>
                </select>
            </div>
-                                                   <label for="credits" class="block text-sm font-medium text-gray-700">Credits</label>
+                                                   <label for="credits" class="block text-sm font-medium text-gray-700  dark:text-white">Credits</label>
                <div class="mt-1">
                    <textarea name="credits" rows="4"
-                           class="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
+                           class="dark:bg-[#2a2f3a] shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
                           >{{ credits }}</textarea>
                            </div>

--- a/django/templates/partials/_footer.html
+++ b/django/templates/partials/_footer.html
@@ -1,7 +1,7 @@
 <div class="grid place-content-center gap-2 w-full mt-4">
    <div class="flex space-x-2 pb-4">
-        <p class="text-sm font-extralight"><a href="/impress">Impressum</a></p>
-        <p class="text-sm font-extralight"><a href="/privacy">Datenschutz</a></p>
-        <p class="text-sm font-extralight"><a href="https://edugit.org/enrichment-2024/qivip">Repository</a></p>
+        <p class="text-sm font-extralight dark:text-white"><a href="/impress">Impressum</a></p>
+        <p class="text-sm font-extralight dark:text-white"><a href="/privacy">Datenschutz</a></p>
+        <p class="text-sm font-extralight dark:text-white"><a href="https://edugit.org/enrichment-2024/qivip">Repository</a></p>
    </div>
 </div>
--- a/django/templates/partials/_nav.html
+++ b/django/templates/partials/_nav.html
@@ -9,10 +9,10 @@
        </div>

        <!-- Desktop Search (centered on screen) - Hidden on mobile -->
-        <div class="hidden md:flex justify-center items-center absolute left-1/2 transform -translate-x-1/2 min-w-40">
-            <form method="get" action="{% url link|default:'library:overview_quiz' %}" class="mr-2 ml-2 flex items-center justify-center w-screen max-w-sm bg-white rounded-full px-4 py-1 shadow-md">
+        <div class="hidden md:flex justify-center items-center absolute left-1/2 transform -translate-x-1/2 min-w-40 ">
+            <form method="get" action="{% url link|default:'library:overview_quiz' %}" class="mr-2 ml-2 flex items-center justify-center w-screen max-w-sm bg-white rounded-full px-4 py-1 shadow-md dark:bg-gray-900">
                <input id="quiz-search-desktop" list="quiz-names-desktop" type="text" name="search" placeholder="Suche ..." value="{{ request.GET.search }}"
-                       class="text-sm w-full px-3 py-1 text-black bg-transparent focus:outline-none lg:text-base">
+                       class="text-sm w-full px-3 py-1 text-black bg-transparent focus:outline-none lg:text-base dark:text-white">
                <button class="py-1 text-blue-600">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5 md:size-6">
                        <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
@@ -48,13 +48,13 @@
    </div>

    <!-- Mobile Navigation Menu - Hidden by default - FULLWIDTH DROPDOWN -->
-    <div id="mobile-menu" class="hidden absolute w-full z-50 md:hidden opacity-0 transform -translate-y-2 transition-all duration-300">
+    <div id="mobile-menu" class="hidden absolute w-full z-50 md:hidden opacity-0 transform -translate-y-2 transition-all duration-300 ">
        <div class="bg-blue-500 pt-3 pb-4 rounded-b-lg shadow-inner">
            <!-- Search in mobile menu -->
-            <form method="get" action="{% url link|default:'library:overview_quiz' %}" class="px-4 mb-4">
-                <div class="flex items-center justify-center bg-white rounded-full px-4 py-2 shadow-md">
+            <form method="get" action="{% url link|default:'library:overview_quiz' %}" class="px-4 mb-4 ">
+                <div class="flex items-center justify-center bg-white rounded-full px-4 py-2 shadow-md dark:bg-gray-900">
                    <input id="quiz-search-mobile" list="quiz-names-mobile" type="text" name="search" placeholder="Suche ..." value="{{ request.GET.search }}"
-                            class="w-full text-sm px-2 text-black bg-transparent focus:outline-none">
+                            class="w-full text-sm px-2 text-black bg-transparent focus:outline-none dark:text-white">
                    <button class="text-blue-600">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" 
                                stroke="currentColor" class="size-5">
--- a/django/templates/play/game/finished.html
+++ b/django/templates/play/game/finished.html
@@ -4,16 +4,16 @@
 {% block content %}
 <div class="container mx-auto px-4">
    <div class="max-w-2xl mx-auto">
-        <div class="bg-white rounded-lg shadow-md p-8 mb-6">
+        <div class="bg-white rounded-lg shadow-md p-8 mb-6 dark:bg-transparent dark:text-white">
            <div class="text-center mb-8">
                <h1 class="text-4xl font-bold text-blue-600 mb-4">Quiz beendet!</h1>
-                <p class="text-xl text-gray-600">Vielen Dank fürs Spielen!</p>
+                <p class="text-xl text-gray-600 dark:text-white">Vielen Dank fürs Spielen!</p>
            </div>
                    
            {% if not is_host %}
            {% if rating_enabled %}
-            <div class="bg-blue-50 rounded-lg p-6 mb-8">
-                <h2 class="text-2xl font-bold text-blue-800 mb-4 text-center">Wie hat dir das Quiz gefallen?</h2>
+            <div class="bg-blue-50 rounded-lg p-6 mb-8 dark:bg-transparent ">
+                <h2 class="text-2xl font-bold text-blue-800 mb-4 text-center dark:text-white">Wie hat dir das Quiz gefallen?</h2>
                <div class="stars flex justify-center space-x-4 mb-4">
                    <i class="fas fa-star text-3xl transition-all duration-200 hover:scale-110" data-rating="1"></i>
                    <i class="fas fa-star text-3xl transition-all duration-200 hover:scale-110" data-rating="2"></i>
--- a/django/templates/play/game/question_host.html
+++ b/django/templates/play/game/question_host.html
@@ -11,17 +11,17 @@
        </button>
        {% endif %}
        <button onclick="this.onclick=null; advanceToScores();" class="mx-2 bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded">
-            weiter
+            überspringen
        </button>
    </div>
-    <div id="form_host" class="bg-white rounded-lg shadow-md p-4 mb-6">
+    <div id="form_host" class="bg-white rounded-lg shadow-md p-4 mb-6 dark:bg-transparent dark:text-white">
        <div class="flex justify-between mb-2">
            <div class="flex gap-1 text-sm"><p class="text-sm">Frage</p>
-                <p class="text-gray-700 font-bold text-sm">{{ question_index|add:1 }}</p>
+                <p class="text-gray-700 font-bold text-sm dark:text-white">{{ question_index|add:1 }}</p>
                <p class="text-sm">von</p>
-                <p class="text-gray-700 font-bold text-sm">{{ total_questions }}</p>
+                <p class="text-gray-700 font-bold text-sm dark:text-white">{{ total_questions }}</p>
            </div>
-        <div class="flex gap-1 mb-2"><p class="text-sm">Antworten:</p> <p id="answer-count" class="text-gray-700 font-bold text-sm"></p></div>
+        <div class="flex gap-1 mb-2"><p class="text-sm">Antworten:</p> <p id="answer-count" class="text-gray-700 font-bold text-sm dark:text-white"></p></div>
        </div>

        
@@ -87,11 +87,11 @@
        {% if request.session.mode == "learn" %}
        <form action="">
        <input id="textanswer" type="text" placeholder="DEINE ANTWORT" 
-        class="answer-option text-center p-2 bg-gray-100 hover:bg-blue-100 rounded-lg transition-colors duration-200 answer-option lg:w-80 ">
+        class="answer-option text-center p-2 bg-gray-100 hover:bg-blue-100 rounded-lg transition-colors duration-200 answer-option lg:w-80 dark:bg-transparent dark:text-white dark:hover:bg-[#2a2f3a] ">
   
 <button {% if request.session.mode == "learn" %}
 onclick="submitAnswer( -1 );" {% endif %}
-         class="mt-2 text-center p-2 bg-gray-100 hover:bg-blue-100 rounded-lg transition-colors duration-200 answer-option">
+         class="mt-2 text-center p-2 bg-gray-100 hover:bg-blue-100 rounded-lg transition-colors duration-200 answer-option dark:bg-transparent dark:text-white dark:hover:bg-[#2a2f3a] ">
     abschicken
 </button>
 </form>
--- a/django/templates/play/game/question_participant.html
+++ b/django/templates/play/game/question_participant.html
@@ -7,13 +7,13 @@
            Spiel verlassen
        </button>
    </div>
-    <div class="bg-white rounded-lg shadow-md p-6 mb-6">
+    <div class="bg-white rounded-lg shadow-md p-6 mb-6 dark:bg-transparent dark:text-white">
            
        <div class="flex justify-between mb-2">
            <div class="flex gap-1 text-sm"><p class="text-sm">Frage</p>
-                <p class="text-gray-700 font-bold text-sm">{{ question_index|add:1 }}</p>
+                <p class="text-gray-700 font-bold text-sm dark:text-white">{{ question_index|add:1 }}</p>
                <p class="text-sm">von</p>
-                <p class="text-gray-700 font-bold text-sm">{{ total_questions }}</p>
+                <p class="text-gray-700 font-bold text-sm dark:text-white">{{ total_questions }}</p>
            </div>
        </div>
        <h1 class="text-xl font-black mb-2 border-blue-500 border-4 p-4 text-center rounded-lg md:text-2xl lg:text-4xl">{{ question_data.question}}</h1>
@@ -59,10 +59,10 @@
        {% else %}
        <form action="">
        <input id="textanswer" type="text" placeholder="DEINE ANTWORT" 
-        class="answer-option text-center p-2 bg-gray-100 hover:bg-blue-100 rounded-lg transition-colors duration-200 answer-option lg:w-80">
+        class="answer-option text-center p-2 bg-gray-100 hover:bg-blue-100 rounded-lg transition-colors duration-200 answer-option lg:w-80 dark:bg-transparent dark:text-white dark:hover:bg-[#2a2f3a]">
 <button
 onclick="submitAnswer( -1 );"
-         class="mt-2 text-center p-2 bg-gray-100 hover:bg-blue-100 rounded-lg transition-colors duration-200 answer-option">
+         class="mt-2 text-center p-2 bg-gray-100 hover:bg-blue-100 rounded-lg transition-colors duration-200 answer-option dark:bg-transparent dark:text-white dark:hover:bg-[#2a2f3a]">
     abschicken
 </button>
 </form>
--- a/django/templates/play/game/score_overview.html
+++ b/django/templates/play/game/score_overview.html
@@ -2,7 +2,7 @@

 {% block content %}
 <div class="container mx-auto px-4">
-    <div class="bg-white rounded-lg shadow-md p-6 mb-6">
+    <div class="bg-white rounded-lg shadow-md p-6 mb-6 dark:bg-transparent dark:text-white">
        <h1 class="text-3xl font-bold mb-6">Ergebnisse</h1>
        
        <div class="mb-6">
@@ -11,12 +11,12 @@
            <div class="grid grid-cols-2 gap-4">
                {% for option in question_data.options %}
                
-            <div id="option-box-{{ forloop.counter0 }}" class="bg-gray-100 relative p-4 rounded-lg overflow-auto break-words hyphens-auto  {% if option.is_correct %} border-2 border-green-500{% else %}border-2 border-red-500{% endif %}">
+            <div id="option-box-{{ forloop.counter0 }}" class=" dark:bg-transparent relative p-4 rounded-lg overflow-auto break-words hyphens-auto  {% if option.is_correct %} border-2 border-green-500{% else %}border-2 border-red-500{% endif %}">
            
            <div id="option-fill-{{ forloop.counter0 }}" class="absolute left-0 top-0 h-full {% if option.is_correct %}bg-green-300 {% else %}bg-red-300 {% endif %} opacity-50 z-0 transition-all duration-1500 " style="width: 0%;"></div>
            <div class="relative z-10">
-            <p class="text-lg">{{ option.value }}</p>
-            <p class="text-gray-600" id="option-count-{{ forloop.counter0 }}">0 Antworten</p>
+            <p class="text-lg ">{{ option.value }}</p>
+            <p class="text-gray-600 dark:text-gray-400" id="option-count-{{ forloop.counter0 }}">0 Antworten</p>
             
            </div>
        </div>
@@ -30,7 +30,7 @@
            <div id="scoreboard" class="leading-relaxed">
                {% for participant in participants %}
                    {% if participant == my_participant or is_host %}
-                        <div class="mt-2 shadow-sm p-4 bg-gray-100 rounded-lg border-2 border {% if forloop.counter <= 3 %}border-yellow-500{% else %}border-transparent{% endif %}">
+                        <div class="dark:bg-transparent mt-2 shadow-sm p-4 bg-gray-100 rounded-lg border-2 border {% if forloop.counter <= 3 %}border-yellow-500{% else %}border-transparent{% endif %}">
                            <div class="flex flex-col items-start gap-1">  
                                <div class="text-lg font-bold flex items-center gap-2">
                                    {% if forloop.counter == 1 %}
@@ -42,10 +42,10 @@
                                        {% else %}
                                        {{ forloop.counter }}.
                                    {% endif %}
-                                    <span class="display_name text-gray-600 font-black text-2xl " id="display_name-{{ forloop.counter0 }}">{{ participant.display_name }}</span>
+                                    <span class="display_name text-gray-600 font-black text-2xl dark:text-white " id="display_name-{{ forloop.counter0 }}">{{ participant.display_name }}</span>
                                </div class="flex flex-col items-start">
                                
-                                <p data-score="{{ participant.score }}" data-last-score="{{ participant.last_score }}" class="text-gray-600 font-bold show-score" id="score-{{ forloop.counter0 }}">{{ participant.score }} Punkte</p> 
+                                <p data-score="{{ participant.score }}" data-last-score="{{ participant.last_score }}" class="dark:text-white text-gray-600 font-bold show-score" id="score-{{ forloop.counter0 }}">{{ participant.score }} Punkte</p> 
                                {% if participant == my_participant or request.session.mode == "learn"%}
                                <p class="text-blue-600 font-bold text-sm">+{{ participant.last_score }} Punkte</p>
                               {% endif %}
@@ -115,7 +115,7 @@
                                </svg>

                                 
-                            <div class=" pt-3  text-center text-gray-600  font-bold" id="antwort-richtig">
+                            <div class="dark:text-white pt-3  text-center text-gray-600  font-bold" id="antwort-richtig">
                            Hier erscheint gleich dein Feedback... 
                            </div>
                           
@@ -129,7 +129,7 @@
                                    </svg>


-                            <div class=" pt-3  text-center text-gray-600  font-bold" id="antwort-falsch">
+                            <div class="dark:text-white pt-3  text-center text-gray-600  font-bold" id="antwort-falsch">
                            Hier erscheint gleich dein Feedback... 
                            </div>
                            <div class="flex justify-center border-t-2 border-gray-500 gap-1">
--- a/django/templates/play/initialize_participant.html
+++ b/django/templates/play/initialize_participant.html
@@ -3,7 +3,7 @@

 {% block content %}
 <div class="container mx-auto px-4 py-8">
-    <div class="max-w-md mx-auto bg-white rounded-lg shadow-lg p-6">
+    <div class="max-w-md mx-auto bg-white rounded-lg shadow-lg p-6 dark:bg-transparent dark:border-2 dark:text-white">
        <h1 class="text-2xl font-bold mb-6 text-center text-blue-600">Spieler einrichten</h1>
        
        <div class="text-center mb-6">
@@ -17,20 +17,20 @@
            {% csrf_token %}
            <input type="hidden" name="join_code" value="{{join_code}}">
            
-            <div class="bg-gray-50 p-4 rounded-lg mb-4">
-                <p class="text-sm text-gray-600 mb-2">Wähle einen Anzeigenamen für das Spiel:</p>
+            <div class="bg-gray-50 p-4 rounded-lg mb-4 dark:bg-transparent">
+                <p class="text-sm text-gray-600 mb-2 dark:text-white">Wähle einen Anzeigenamen für das Spiel:</p>
                <input type="text" 
                       name="display_name" 
                       required
                       maxlength="20"
                       class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                       placeholder="Dein Spielername">
-                <p class="text-xs text-gray-500 mt-2">Maximal 20 Zeichen</p>
+                <p class="text-xs text-gray-500 mt-2 dark:text-white">Maximal 20 Zeichen</p>
            </div>

            <div class="flex justify-center space-x-4">
                <a href="/" 
-                   class="px-6 py-2 bg-gray-200 hover:bg-gray-300 rounded-lg transition-colors duration-200">
+                   class="px-6 py-2 bg-gray-200 hover:bg-gray-300 rounded-lg transition-colors duration-200 dark:bg-transparent dark:hover:bg-[#2a2f3a]">
                    Abbrechen
                </a>
                <button type="submit"
--- a/django/templates/play/join_game.html
+++ b/django/templates/play/join_game.html
@@ -2,12 +2,12 @@

 {% block content %}
 <div class="sm:grid sm:place-items-center sm:min-h-[calc(100vh-5rem)] flex justify-center py-6 m-2">
-    <div class="max-w-md w-full p-8 rounded-2xl border-2 border-blue-400 bg-white">
-        <h1 class="text-2xl text-center font-bold mb-4">Spiel beitreten</h1>
+    <div class="max-w-md w-full p-8 rounded-2xl border-2 border-blue-400 bg-white dark:bg-transparent dark:text-white">
+        <h1 class="text-2xl text-center font-bold mb-4 ">Spiel beitreten</h1>
        <form action="{% url 'play:join_game' %}" method="post" class="flex flex-col gap-4">
            {% csrf_token %}
            <div class="flex gap-3 items-center justify-center">
-                <input type="number" name="game_code" placeholder="123456" maxlength="6" class="w-32 p-3 rounded-full bg-gray-200 focus:scale-105 transition duration-200 font-black focus:outline-none focus:ring-2 focus:ring-blue-400 focus:bg-blue-100 text-center tracking-wider"  autofocus>
+                <input type="number" name="game_code" placeholder="123456" maxlength="6" class="w-32 p-3 rounded-full bg-gray-200 focus:scale-105 transition duration-200 font-black focus:outline-none focus:ring-2 focus:ring-blue-400 focus:bg-blue-100 text-center tracking-wider text-black"  autofocus>
                <button type="submit" class="h-12 px-6 rounded-full bg-blue-600 text-white font-black hover:scale-105 transition duration-200 flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed hover:bg-blue-700 active:scale-95 group" disabled>
                    <span class="hidden sm:block">Beitreten</span>
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5 transition-transform group-hover:translate-x-1">
--- a/django/templates/play/lobby.html
+++ b/django/templates/play/lobby.html
@@ -3,18 +3,18 @@
 {% block content %}
 <div class="container mx-auto px-4 py-8">

-    <div class="max-w-2xl mx-auto bg-white rounded-lg shadow-lg p-6">
+    <div class="max-w-2xl mx-auto bg-white rounded-lg shadow-lg p-6 dark:bg-transparent dark:text-white">
        <!-- Quiz Info -->
        <div class="text-center mb-8">
-            <h3 class="text-xl text-gray-600 mb-2">{{ quiz.name }}</h3>
+            <h3 class="text-xl text-gray-600 mb-2 dark:text-white">{{ quiz.name }}</h3>
            {% if request.session.mode != "learn" %}
            {% if host_id %}
-            <div class="bg-blue-100 rounded-lg p-4 mb-4">
-                <h1 class="text-4xl font-bold text-blue-800">{{ quiz_game.join_code }}</h1>
+            <div class="bg-blue-100 rounded-lg p-4 mb-4 dark:bg-transparent">
+                <h1 class="text-4xl font-bold text-blue-800 dark:text-white">{{ quiz_game.join_code }}</h1>
                <div class="w-full flex justify-center my-2">
                <img src="data:image/png;base64,{{ qr_code_base64 }}" class="h-1/2 w-1/2" alt="QR-Code">
                </div>
-                <p class="text-sm text-blue-600 mt-1">Spiel-Code</p>
+                <p class="text-sm text-blue-600 mt-1 dark:text-white">Spiel-Code</p>
            </div>
        </div>
        {% endif %}
@@ -23,23 +23,23 @@
        <!-- Participant Info -->
        {% if participant %}
        <div class="mb-6 text-center">
-            <div class="inline-flex items-center bg-green-100 px-4 py-2 rounded-full">
-                <span class="w-2 h-2 bg-green-500 rounded-full mr-2"></span>
+            <div class="inline-flex items-center bg-green-100 px-4 py-2 rounded-full dark:text-black">
+                <span class="w-2 h-2 bg-green-500 rounded-full mr-2  "></span>
                <span>Angemeldet als <b>{{ participant.display_name }}</b></span>
            </div>
        </div>
        {% endif %}

        <!-- Participants List -->
-        <div class="mb-6 overflow-y-scroll max-h-96">
+        <div class="mb-6 overflow-y-scroll max-h-96 overflow-x-hidden">
            <h3 class="font-bold text-lg mb-3 flex items-center">
                <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
                </svg>
                Teilnehmer
            </h3>
-            <ul id="participants-list" class="space-y-2 max-h-60">
-                <li class="text-gray-500 p-3 bg-gray-50 rounded-lg text-center">Warte auf Teilnehmer...</li>
+            <ul id="participants-list" class="space-y-2 max-h-60 ">
+                <li class=" p-3 bg-gray-50 rounded-lg text-center dark:bg-transparent">Warte auf Teilnehmer...</li>
            </ul>
        </div>

@@ -248,7 +248,7 @@
        }

        if (!participants || participants.length === 0) {
-            list.innerHTML = '<li class="text-gray-500 p-3 bg-gray-50 rounded-lg text-center">Noch keine Teilnehmer...</li>';
+            list.innerHTML = '<li class="text-gray-500 p-3 bg-gray-50 rounded-lg text-center dark:bg-transparent">Noch keine Teilnehmer...</li>';
            return;
        }

@@ -298,13 +298,13 @@
                                    '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" ' +
                                    'd="M6 18L18 6M6 6l12 12"/>' +
                                    '</svg>' +
-                                    '<span class="absolute -top-8 left-1/2 transform -translate-x-1/2 px-2 py-1 ' +
+                                    '<span class="absolute pr-8 -top-8  left-1/2 transform -translate-x-1/2 px-2 py-1 ' +
                                    'bg-gray-800 text-white text-xs rounded opacity-0 group-hover:opacity-100 ' +
                                    'transition-opacity duration-200 whitespace-nowrap">Spieler kicken</span>' +
                                    '</button>';
                    }

-                    return '<li class="p-3 bg-white border border-gray-200 rounded-lg shadow-sm hover:shadow-md transition duration-200 flex items-center justify-between animate-fade-in">' +
+                    return '<li class="dark:bg-transparent p-3 bg-white border border-gray-200 rounded-lg shadow-sm hover:shadow-md transition duration-200 flex items-center justify-between animate-fade-in">' +
                           '<div class="flex items-center">' +
                           '<div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center mr-3">' +
                           '<span class="text-blue-600 font-bold">' + initial.toUpperCase() + '</span>' +
--- a/django/templates/play/select_mode.html
+++ b/django/templates/play/select_mode.html
@@ -4,7 +4,7 @@

 <div class="grid place-content-center md:h-screen h-150 w-full -z-50 top-0 p-8 ">
    <div class="rounded-md rounded-xl shadow-lg border-3 border-blue-100 p-10">
-       <span class="flex justify-center font-bold p-4 text-center text-1xl lg:text-2xl">Bitte wählen Sie einen Spielmodus aus:</span> 
+       <span class="flex justify-center font-bold p-4 text-center text-1xl lg:text-2xl dark:text-white">Bitte wählen Sie einen Spielmodus aus:</span> 

        <div class="grid sm:grid-cols-2 place-items-stretch text-center gap-4 p-4">
            
--- a/django/templates/registration/delete_account_confirm.html
+++ b/django/templates/registration/delete_account_confirm.html
@@ -3,15 +3,15 @@
 {% block content %}
 <div class="container mx-auto px-4">
    <div class="max-w-lg mx-auto mt-10">
-        <div class="bg-white rounded-lg shadow-md p-6 border-blue-600 border-2 rounded-xl shadow-md">
+        <div class="bg-white rounded-lg shadow-md p-6 border-blue-600 border-2 rounded-xl shadow-md dark:text-white dark:bg-transparent">
            <div class="text-center">
                <svg class="mx-auto h-12 w-12 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
                </svg>
                
-                <h2 class="mt-4 text-xl font-bold text-gray-900">Löschen bestätigen</h2>
+                <h2 class="mt-4 text-xl font-bold text-gray-900 dark:text-white">Löschen bestätigen</h2>
                
-                <p class="mt-2 text-sm text-gray-600">
+                <p class="mt-2 text-sm text-gray-600 dark:text-white">
                        Möchten Sie ihren Account wirklich löschen? Diese Aktion kann nicht rückgängig gemacht werden.
                </p>
            </div>
--- a/django/templates/registration/password_change_form.html
+++ b/django/templates/registration/password_change_form.html
@@ -3,7 +3,7 @@
 {% block title %}Passwort ändern{% endblock %}
 {% block content %}
    <div class="grid place-content-center h-120 mt-12 mb-12 ">
-    <div class="w-80 p-4 m-2 border-blue-600 border-2 rounded-xl shadow-md lg:w-90">
+    <div class="w-80 p-4 m-2 border-blue-600 border-2 rounded-xl shadow-md lg:w-90 dark:text-white!">
        <h2 class="text-2xl text-center p-4 font-black">Passwort ändern</h2>
        <form class="space-y-4" method="post">
            {% if form.errors %}
@@ -21,17 +21,17 @@
            <div  class="register">
                
            {{ form.old_password.label_tag }} 
-            <input type="password" name="old_password" placeholder="ALTES PASSWORT" />
+            <input type="password" name="old_password" placeholder="ALTES PASSWORT" class="dark:text-black" />
            
        </div>
            
        <div class="register">
            {{ form.new_password1.label_tag }} 
-            <input type="password" name="new_password1" placeholder="NEUES PASSWORT" /> 
+            <input type="password" name="new_password1" placeholder="NEUES PASSWORT"  class="dark:text-black" /> 
        </div>
            <div class="register">
            {{ form.new_password2.label_tag }}  
-            <input type="password" name="new_password2" placeholder="NEUES PASSWORT WIEDERHOLEN" /> 
+            <input type="password" name="new_password2" placeholder="NEUES PASSWORT WIEDERHOLEN"  class="dark:text-black" /> 
        </div>
            <button class="w-full p-3 rounded-full bg-blue-600 text-white font-black hover:scale-105 transition duration-200" type="submit">Bestätigen</button>
            <button class="text-center text-sm w-full mt-2 font-light text-blue-600"><a href="{% url 'accounts:home' %}" class="register_link">Doch nicht ändern?</a></button>
--- a/django/templates/registration/password_reset_complete.html
+++ b/django/templates/registration/password_reset_complete.html
@@ -3,7 +3,7 @@
 {% block title %}Passwort zurückgesetzt{% endblock %}
 {% block content %}
    <div class="grid place-content-center h-120 mt-12 mb-12 ">
-    <div class="w-80 p-4 m-2 border-blue-600 border-2 rounded-xl shadow-md lg:w-90">
+    <div class="w-80 p-4 m-2 border-blue-600 border-2 rounded-xl shadow-md lg:w-90 dark:text-white">
        <h2 class="text-2xl text-center p-4 font-black">Passwort zurückgesetzt</h2>
        <div class="space-y-4">
            Das Passwort wurde erfolgreich zurückgesetzt! Sie können sich nun mit dem neuen Passwort anmelden!
--- a/django/templates/registration/password_reset_confirm.html
+++ b/django/templates/registration/password_reset_confirm.html
@@ -4,7 +4,7 @@
 {% block content %}
    <div class="grid place-content-center h-120 mt-12 mb-12 ">
    <div class="w-80 p-4 m-2 border-blue-600 border-2 rounded-xl shadow-md lg:w-90">
-        <h2 class="text-2xl text-center p-4 font-black">Passwort zurücksetzen</h2>
+        <h2 class="text-2xl text-center p-4 font-black dark:text-white">Passwort zurücksetzen</h2>
        {% if validlink %} 
        <form class="space-y-4" method="post">
            {% if form.errors %}
@@ -21,11 +21,12 @@
            {% csrf_token %}
            
        <div class="register">
-            {{ form.new_password1.label_tag }}  
+            
+            <span class="dark:text-white">{{ form.new_password1.label_tag }}   </span> 
            <input type="password" name="new_password1" placeholder="NEUES PASSWORT" /> 
        </div>
-            <div class="register">
-            {{ form.new_password2.label_tag }}  
+            <div class="register ">
+            <span class="dark:text-white">{{ form.new_password2.label_tag }}  </span>
            <input type="password" name="new_password2" placeholder="NEUES PASSWORT WIEDERHOLEN" /> 

        </div>
--- a/django/templates/registration/password_reset_done.html
+++ b/django/templates/registration/password_reset_done.html
@@ -4,12 +4,12 @@

 {% block content %}
 <div class="grid place-content-center h-120 mt-12 mb-12">
-    <div class="w-80 p-6 m-2 border-blue-600 border-2 rounded-xl shadow-md lg:w-90 text-center">
-        <h2 class="text-2xl font-black mb-4">E-Mail wurde gesendet</h2>
-        <p class="text-gray-700 mb-6">
+    <div class="w-80 p-6 m-2 border-blue-600 border-2 rounded-xl shadow-md lg:w-90 text-center dark:text-white">
+        <h2 class="text-2xl font-black mb-4 dark:text-white">E-Mail wurde gesendet</h2>
+        <p class="text-gray-700 mb-6 dark:text-white">
            Wenn ein Konto mit dieser E-Mail-Adresse existiert, haben wir dir eine Nachricht mit einem Link zum Zurücksetzen des Passworts gesendet.
       
-        </p><p class="text-gray-700 mb-6 font-bold">&nbsp; Tipp: Gegebenenfalls Spam überprüfen.</p>
+        </p><p class="text-gray-700 mb-6 font-bold dark:text-white">&nbsp; Tipp: Gegebenenfalls Spam überprüfen.</p>
        
        
        <a href="{% url 'accounts:login' %}" class="block w-full p-3 rounded-full bg-blue-600 text-white font-black hover:scale-105 transition duration-200">Zur Anmeldung</a>
--- a/django/templates/registration/password_reset_form.html
+++ b/django/templates/registration/password_reset_form.html
@@ -3,7 +3,7 @@
 {% block title %}Passwort ändern{% endblock %}
 {% block content %}
    <div class="grid place-content-center h-120 mt-12 mb-12 ">
-    <div class="w-80 p-4 m-2 border-blue-600 border-2 rounded-xl shadow-md lg:w-90">
+    <div class="w-80 p-4 m-2 border-blue-600 border-2 rounded-xl shadow-md lg:w-90 dark:text-white">
        <h2 class="text-2xl text-center p-4 font-black">Passwort zurücksetzen</h2>
        <form class="space-y-4" method="post">
            Gib hier deine E-Mail an und erhalte eine E-Mail, um das Passwort zurückzusetzen.
@@ -23,7 +23,7 @@
            
        <div class="register">
            {{ form.email.label_tag }}
-            <input type="email" name="email" placeholder="E-MAIL" /> 
+            <input type="email" name="email" placeholder="E-MAIL" class="dark:text-black" /> 
        </div>
Author	SHA1	Message	Date
ben8	4ac5dd794b	Merge branch '145-dark-mode' into 'master' Resolve "Dark mode" Closes #145 See merge request enrichment-2024/qivip!101	2025-07-11 14:57:56 +00:00
ben8	d17d41e07a	dark_mode	2025-07-11 16:54:00 +02:00
ben8	7f845b8f36	Merge branch '24-rahmen-um-die-quiz-in-der-bibliothek-farbe-and-die-kategorie' into 'master' Resolve "Rahmen um die Quiz in der Bibliothek Farbe and die Kategorie." Closes #24 See merge request enrichment-2024/qivip!100	2025-07-04 11:57:25 +00:00
ben8	37f4a7b868	Kategorie_mit_Farbpunkt	2025-07-04 13:56:32 +02:00
ben8	d929e6b5dd	weiter Button in überspringen umbenannt	2025-06-29 17:45:42 +02:00
ben8	6e63e0876a	optisches Update - Schrift	2025-06-29 17:43:28 +02:00
ben8	d907390652	credits_verbessert	2025-06-29 17:11:04 +02:00
ben8	31e9618e1c	credits_darstellung_verbessert	2025-06-29 17:10:25 +02:00