diff --git a/main/migrations/0030_mainarticlepage_is_black.py b/main/migrations/0030_mainarticlepage_is_black.py
new file mode 100644
index 0000000000000000000000000000000000000000..473f1c365366e657b48708afbd13a2c80d39d66e
--- /dev/null
+++ b/main/migrations/0030_mainarticlepage_is_black.py
@@ -0,0 +1,18 @@
+# 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í?"),
+        ),
+    ]
diff --git a/main/models.py b/main/models.py
index 5a4d1708da4a24fe1f2a2c871bbe569d10ee6e62..4391ac3f89c30208d70b99326993dd4bd29115b4 100644
--- a/main/models.py
+++ b/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"),
     ]
diff --git a/main/styleguide/source/_patterns/molecules/how-we-work/work-article-preview.mustache b/main/styleguide/source/_patterns/molecules/how-we-work/work-article-preview.mustache
index 76bbdf35e9c5de9b5adc7d217d42512397b99bf1..23bc6dea81d34a342ddffafbae0fd5d9aeb761a3 100644
--- a/main/styleguide/source/_patterns/molecules/how-we-work/work-article-preview.mustache
+++ b/main/styleguide/source/_patterns/molecules/how-we-work/work-article-preview.mustache
@@ -1,4 +1,4 @@
-<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">
diff --git a/main/styleguide/source/_patterns/organisms/main-articles-timeline.mustache b/main/styleguide/source/_patterns/organisms/main-articles-timeline.mustache
index 97425639055c8f5cb0a91038d8c17e0616e9a158..f108d6953e7c5a6a6dfd94e376bfcf8bd3a98c56 100644
--- a/main/styleguide/source/_patterns/organisms/main-articles-timeline.mustache
+++ b/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>
diff --git a/main/styleguide/source/css/atoms/heading.pcss b/main/styleguide/source/css/atoms/heading.pcss
index cee180872f5030a9838d3ca6d0b9d1d1197d8af3..7e5a98d1c068b2ee3a42a476cac7dcccee3aec29 100644
--- a/main/styleguide/source/css/atoms/heading.pcss
+++ b/main/styleguide/source/css/atoms/heading.pcss
@@ -200,6 +200,6 @@ p {
     letter-spacing: -0.01em;
   }
   a {
-    @apply font-semibold;
+    @apply font-bold;
   }
 }
diff --git a/main/styleguide/source/css/molecules/articles.pcss b/main/styleguide/source/css/molecules/articles.pcss
new file mode 100644
index 0000000000000000000000000000000000000000..d4aa9578b3f0aeabd19c9153c9702f7048556056
--- /dev/null
+++ b/main/styleguide/source/css/molecules/articles.pcss
@@ -0,0 +1,6 @@
+.article-box {
+  &.dark-theme {
+    background-color: #4C4C4C;
+    color: white;
+  }
+}
diff --git a/main/styleguide/source/css/style.pcss b/main/styleguide/source/css/style.pcss
index 27af71045a6fb2e82a6f1382df265d36c8d0cb9c..f2c0a1b3e7bff064b4de6daf55675e01f5de78d5 100644
--- a/main/styleguide/source/css/style.pcss
+++ b/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";
diff --git a/main/templates/main/includes/work_article_preview.html b/main/templates/main/includes/work_article_preview.html
index 84aa4959ce3fc82da4a2ff9e09833b643acd12ed..a63c4e513b813a43227e023c23b17a79cdf7e6dc 100644
--- a/main/templates/main/includes/work_article_preview.html
+++ b/main/templates/main/includes/work_article_preview.html
@@ -1,6 +1,6 @@
 {% 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