[ADD] dark theme for article preview

main/migrations/0030_mainarticlepage_is_black.py

+# Generated by Django 4.0.7 on 2022-09-06 11:11
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("main", "0029_mainhomepage_gdpr_and_cookies_page"),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name="mainarticlepage",
+            name="is_black",
+            field=models.BooleanField(default=False, verbose_name="Má tmavé pozadí?"),
+        ),
+    ]

main/models.py

@@ -451,6 +451,7 @@ class MainArticlePage(
     article_type = models.PositiveSmallIntegerField(
         "Typ článku", choices=ARTICLE_TYPES.choices, default=ARTICLE_TYPES.PRESS_RELEASE
     )
+    is_black = models.BooleanField("Má tmavé pozadí?", default=False)
 
     content = StreamField(
         [
@@ -485,6 +486,7 @@ class MainArticlePage(
     content_panels = ArticleMixin.content_panels + [
         FieldPanel("article_type"),
         FieldPanel("author_page"),
+        FieldPanel("is_black"),
         FieldPanel("region"),
         FieldPanel("tags"),
     ]

main/styleguide/source/_patterns/molecules/how-we-work/work-article-preview.mustache

-<div class="p-7 flex flex-col max-w-xl border border-grey-150 mb-8">
+<div class="article-box p-7 flex flex-col max-w-xl border border-grey-150 mb-8 {{ classes }}">
   <a href="#">
     <img src="https://i.picsum.photos/id/689/576/281.jpg?hmac=yIwOFV185zFy4fwVE3lF1UDqLDAm_bpLr9LZprQ26eo" alt=""
          class="mb-7 w-full">

main/styleguide/source/_patterns/organisms/main-articles-timeline.mustache

@@ -14,7 +14,7 @@
           </div>
         </div>
         <div class="article-timeline-grid__right-article xl:pt-14">
-          {{> molecules-work-article-preview }}
+          {{> molecules-work-article-preview(classes: "dark-theme") }}
         </div>
       </div>
     </div>

main/styleguide/source/css/atoms/heading.pcss

@@ -200,6 +200,6 @@ p {
     letter-spacing: -0.01em;
   }
   a {
-    @apply font-semibold;
+    @apply font-bold;
   }
 }

main/styleguide/source/css/molecules/articles.pcss

+.article-box {
+  &.dark-theme {
+    background-color: #4C4C4C;
+    color: white;
+  }
+}

main/styleguide/source/css/style.pcss

@@ -25,6 +25,7 @@
 @import "./atoms/heading.pcss";
 @import "./atoms/icons.pcss";
 
+@import "./molecules/articles.pcss";
 @import "./molecules/block-quote.pcss";
 @import "./molecules/carousels.pcss";
 @import "./molecules/contact_box.pcss";

main/templates/main/includes/work_article_preview.html

 {% load wagtailimages_tags %}
 
-<div class="p-7 flex flex-col max-w-xl border border-grey-150 mb-8">
+<div class="article-box {% if article.is_black %}dark-theme {% endif %}p-7 flex flex-col max-w-xl border border-grey-150 mb-8">
   {% image article_page.image max-500x500 as image %}
   <a href="{{ article_page.url }}">
     <img