From 85c020638601ba3eb5a5c5714769b181e8d126c6 Mon Sep 17 00:00:00 2001
From: loki <gunlinux@ya.ru>
Date: Tue, 24 Jun 2025 02:25:57 +1000
Subject: [PATCH 1/2] recolors

---
 blog/static/src/components/header.css   | 15 +++++-----
 blog/static/src/components/minipost.css | 16 +++++------
 blog/static/src/components/nav.css      |  6 ++--
 blog/static/src/components/post.css     | 24 ++++++++--------
 blog/static/src/components/refs.css     | 37 +++++++------------------
 blog/static/src/global/vars.css         |  6 ++++
 6 files changed, 46 insertions(+), 58 deletions(-)

diff --git a/blog/static/src/components/header.css b/blog/static/src/components/header.css
index e4790c9..ee9b058 100644
--- a/blog/static/src/components/header.css
+++ b/blog/static/src/components/header.css
@@ -1,28 +1,27 @@
 .header {
     text-align: center;
-    font-size: 1.55rem;
+    font-size: calc(var(--fontSizeBase) * 1.55);
     padding: 1rem 0 5rem 0;
 }
 
 .header__logo {
-        font-weight: bold;
-        text-decoration: none;
-        color: #333;
-        float: left;
+    font-weight: bold;
+    text-decoration: none;
+    color: var(--color-text-light);
+    float: left;
 }
 
 .header__logo:hover {
-    color: #000;
+    color: var(--color-text);
 }
 
 .header__nav {
     float: right;
 }
 
-@media (max-width:767px) {
+@media (max-width: 767px) {
     .header {
         padding-left: 1rem;
         padding-right: 1rem;
     }
 }
- 
\ No newline at end of file
diff --git a/blog/static/src/components/minipost.css b/blog/static/src/components/minipost.css
index 9e18124..6492014 100644
--- a/blog/static/src/components/minipost.css
+++ b/blog/static/src/components/minipost.css
@@ -2,7 +2,7 @@
     padding: 0.5rem 0;
 }
 
-@media (max-width:767px) { 
+@media (max-width: 767px) { 
     .minipost__date { 
         display: block;
         float: none;
@@ -15,27 +15,27 @@
 
 .minipost__title {
     transition: all 0.2s ease-in-out;
-    color: #333;
+    color: var(--color-text-light);
     text-align: center;
     text-decoration: none;
-    border-bottom: 1px solid #ccc;
+    border-bottom: 1px solid var(--color-text-lighter);
 }
 
 .minipost__title:hover {
-    border-color: #000;
-    color: #000;
+    border-color: var(--color-text);
+    color: var(--color-text);
 }
 
 .minipost__date {
-    color: #ccc;
+    color: var(--color-text-lighter);
     float: right;
 }
 
 .minipost__position {
-    color: #ccc;
+    color: var(--color-text-lighter);
     float: right;
 }
 
 .minipost__content {
-  margin-top: 1em;
+    margin-top: 1em;
 }
diff --git a/blog/static/src/components/nav.css b/blog/static/src/components/nav.css
index 3cb6720..50e1bec 100644
--- a/blog/static/src/components/nav.css
+++ b/blog/static/src/components/nav.css
@@ -1,5 +1,5 @@
 .nav__link {
-    color: #444;
+    color: var(--color-text-light);
     transition: all 0.2s ease-in-out;
     text-decoration: none;
     margin-left: 1rem;
@@ -8,7 +8,7 @@
 }
 
 .nav__link:hover {
-    color: #000;
+    color: var(--color-text);
     text-decoration: none; 
 }
 
@@ -26,7 +26,7 @@
     left: 0;
     width: 1px;
     height: 1px;
-    background: #000;
+    background: var(--color-text);
     content: '';
     filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
     opacity: 0;
diff --git a/blog/static/src/components/post.css b/blog/static/src/components/post.css
index e4861a5..82dec80 100644
--- a/blog/static/src/components/post.css
+++ b/blog/static/src/components/post.css
@@ -2,21 +2,21 @@
     text-align: center;
     line-height: 1.1;
     letter-spacing: 0.15rem;
-    color: #000;
-    font-size: 3rem;
+    color: var(--color-text);
+    font-size: calc(var(--fontSizeBase) * 3);
     font-weight: 700;
     margin: 0.5rem 0;
 }
 
 .post__date {
-    color: #ccc;
+    color: var(--color-text-lighter);
     font-weight: 300;
     text-align: center;
 }
 
 .post__body {
     padding: 2rem 1rem;
-    color: #444;
+    color: var(--color-text-light);
     line-height: 1.4;
 }
 
@@ -25,7 +25,7 @@
     display: block;
     height: 0;
     padding: 0;
-    overflow: hidden
+    overflow: hidden;
 }
 
 .embed-responsive .embed-responsive-item, 
@@ -61,32 +61,32 @@
 }
 
 .post__body h1 {
-    font-size: 2rem;
+    font-size: calc(var(--fontSizeBase) * 2);
 }
 
 .post__body h2 {
-    font-size: 1.7rem;
+    font-size: calc(var(--fontSizeBase) * 1.7);
 }
 
 .post__body h3 {
-    font-size: 1.4rem;
+    font-size: calc(var(--fontSizeBase) * 1.4);
 }
 
 .post__body h4 {
-    font-size: 1.1rem;
+    font-size: calc(var(--fontSizeBase) * 1.1);
 }
 
 .post__body h5 {
-    font-size: 1rem;
+    font-size: var(--fontSizeBase);
     text-transform: uppercase;
 }
 
 .post__body a {
-    color: #474747;
+    color: var(--color-text-link);
     transition: color 0.3s ease;
 }
 
 .post__body a:hover {
-    color: #000;
+    color: var(--color-text-link-hover);
     text-decoration: none;
 }
diff --git a/blog/static/src/components/refs.css b/blog/static/src/components/refs.css
index f62c8f5..9c0501b 100644
--- a/blog/static/src/components/refs.css
+++ b/blog/static/src/components/refs.css
@@ -1,34 +1,17 @@
-.refs {
+ .refs {
     padding: 0.5rem 0;
 }
 
-.refs__links {
-
-}
-
-.refs__links_desc {
-
-}
-
 .refs__link_itemlink {
-  transition: all 0.2s ease-in-out;
-  color: #333;
-  text-align: center;
-  text-decoration: none;
-  border-bottom: 1px solid #ccc;
-  font-size: 1.3em;
+    transition: all 0.2s ease-in-out;
+    color: var(--color-text-light);
+    text-align: center;
+    text-decoration: none;
+    border-bottom: 1px solid var(--color-text-lighter);
+    font-size: calc(var(--fontSizeBase) * 1.3);
 }
 
 .refs__link_itemlink:hover {
-  border-color: #000;
-  color: #000;
-}
-
-
-
-}
-
-.refs__link_itemlink {
-  
-}
-
+    border-color: var(--color-text);
+    color: var(--color-text);
+} 
diff --git a/blog/static/src/global/vars.css b/blog/static/src/global/vars.css
index e20e024..c0d1f99 100644
--- a/blog/static/src/global/vars.css
+++ b/blog/static/src/global/vars.css
@@ -2,4 +2,10 @@
   font-family: 'Open Sans', 'Helvetica', 'Arial', sans-serif;
   --fontSizeBase: 1rem;
   --widthMain: 1180px;
+  /* Base Colors */
+  --color-text: #000;
+  --color-text-light: #444;
+  --color-text-lighter: #ccc;
+  --color-text-link: #474747;
+  --color-text-link-hover: #000;
 }

From c6b403c9618dda1604d693996133236ee00b8725 Mon Sep 17 00:00:00 2001
From: loki <gunlinux@ya.ru>
Date: Tue, 24 Jun 2025 03:11:05 +1000
Subject: [PATCH 2/2] dark theme

---
 blog/static/css/admin.css                | 60 +++++++++++++++++-
 blog/static/src/components/header.css    | 26 ++++----
 blog/static/src/components/minipost.css  | 42 ++++++-------
 blog/static/src/components/nav.css       | 49 +++++++--------
 blog/static/src/components/page.css      |  2 +-
 blog/static/src/components/post.css      | 78 ++++++++++++------------
 blog/static/src/components/postGroup.css | 10 +--
 blog/static/src/components/refs.css      | 20 +++---
 blog/static/src/components/tags.css      | 24 ++++----
 blog/static/src/global/reboot.css        |  2 +-
 blog/static/src/global/vars.css          | 28 ++++++++-
 blog/templates/about.html                |  7 +--
 blog/templates/admin/index.html          |  4 +-
 blog/templates/layout.html               |  2 +-
 14 files changed, 217 insertions(+), 137 deletions(-)

diff --git a/blog/static/css/admin.css b/blog/static/css/admin.css
index 21e0cf9..2eddc7d 100644
--- a/blog/static/css/admin.css
+++ b/blog/static/css/admin.css
@@ -1,4 +1,58 @@
 #content {
-	width: 100%;
-	height: 500px;
-}
\ No newline at end of file
+  width: 100%;
+  height: 500px;
+}
+
+/* Force navbar to use dark theme */
+.navbar,
+.navbar-default,
+.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.open>a {
+  background-color: #2c3e50 !important;
+  border-color: #2c3e50 !important;
+  background-image: none !important;
+}
+
+.form-control,
+.select2-container .select2-choices,
+.select2-search input,
+.select2-drop-mask,
+.select2-container .select2-choice,
+.select2-container .select2-choices,
+.select2-container .select2-choices .select2-search-field input,
+.md-editor>.md-header,
+.select2-drop {
+  color: rgb(188, 182, 174) !important;
+  background-image: none !important;
+  background: #3a3e41 !important;
+}
+
+.navbar-brand {
+  color: #fff !important;
+}
+
+.navbar-nav .nav-link {
+  color: rgba(255, 255, 255, 0.8) !important;
+}
+
+.navbar-nav .nav-link:hover {
+  color: #fff !important;
+}
+
+/* Fix dropdown menus */
+.dropdown-menu {
+  background-color: #2c3e50 !important;
+  border-color: #444 !important;
+}
+
+.dropdown-item {
+  color: #fff !important;
+}
+
+.dropdown-item:hover {
+  background-color: #34495e !important;
+}
+
+/* Fix the hamburger menu icon */
+.navbar-toggler-icon {
+  filter: invert(1);
+}
diff --git a/blog/static/src/components/header.css b/blog/static/src/components/header.css
index ee9b058..8984409 100644
--- a/blog/static/src/components/header.css
+++ b/blog/static/src/components/header.css
@@ -1,27 +1,27 @@
 .header {
-    text-align: center;
-    font-size: calc(var(--fontSizeBase) * 1.55);
-    padding: 1rem 0 5rem 0;
+  text-align: center;
+  font-size: calc(var(--fontSizeBase) * 1.55);
+  padding: 1rem 0 5rem 0;
 }
 
 .header__logo {
-    font-weight: bold;
-    text-decoration: none;
-    color: var(--color-text-light);
-    float: left;
+  font-weight: bold;
+  text-decoration: none;
+  color: var(--color-text-light);
+  float: left;
 }
 
 .header__logo:hover {
-    color: var(--color-text);
+  color: var(--color-text);
 }
 
 .header__nav {
-    float: right;
+  float: right;
 }
 
 @media (max-width: 767px) {
-    .header {
-        padding-left: 1rem;
-        padding-right: 1rem;
-    }
+  .header {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
 }
diff --git a/blog/static/src/components/minipost.css b/blog/static/src/components/minipost.css
index 6492014..fd59d96 100644
--- a/blog/static/src/components/minipost.css
+++ b/blog/static/src/components/minipost.css
@@ -1,41 +1,41 @@
 .minipost {
-    padding: 0.5rem 0;
+  padding: 0.5rem 0;
 }
 
 @media (max-width: 767px) { 
-    .minipost__date { 
-        display: block;
-        float: none;
-    }
-    .minipost__title {
-        clear: both;
-        text-align: left;
-    }
+  .minipost__date { 
+    display: block;
+    float: none;
+  }
+  .minipost__title {
+    clear: both;
+    text-align: left;
+  }
 }
 
 .minipost__title {
-    transition: all 0.2s ease-in-out;
-    color: var(--color-text-light);
-    text-align: center;
-    text-decoration: none;
-    border-bottom: 1px solid var(--color-text-lighter);
+  transition: all 0.2s ease-in-out;
+  color: var(--color-text-light);
+  text-align: center;
+  text-decoration: none;
+  border-bottom: 1px solid var(--color-text-lighter);
 }
 
 .minipost__title:hover {
-    border-color: var(--color-text);
-    color: var(--color-text);
+  border-color: var(--color-text);
+  color: var(--color-text);
 }
 
 .minipost__date {
-    color: var(--color-text-lighter);
-    float: right;
+  color: var(--color-text-lighter);
+  float: right;
 }
 
 .minipost__position {
-    color: var(--color-text-lighter);
-    float: right;
+  color: var(--color-text-lighter);
+  float: right;
 }
 
 .minipost__content {
-    margin-top: 1em;
+  margin-top: 1em;
 }
diff --git a/blog/static/src/components/nav.css b/blog/static/src/components/nav.css
index 50e1bec..7c6723d 100644
--- a/blog/static/src/components/nav.css
+++ b/blog/static/src/components/nav.css
@@ -1,35 +1,36 @@
 .nav__link {
-    color: var(--color-text-light);
-    transition: all 0.2s ease-in-out;
-    text-decoration: none;
-    margin-left: 1rem;
-    position: relative;
-    display: inline-block;
+  color: var(--color-text-light);
+  transition: all 0.2s ease-in-out;
+  font-size: 0.8em;
+  text-decoration: none;
+  margin-left: 1rem;
+  position: relative;
+  display: inline-block;
 }
 
 .nav__link:hover {
-    color: var(--color-text);
-    text-decoration: none; 
+  color: var(--color-text);
+  text-decoration: none; 
 }
 
 .nav__link:hover:after {
-    width: 100%;
-    filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false);
-    opacity: 1;
-    transition-delay: 0s;
+  width: 100%;
+  filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false);
+  opacity: 1;
+  transition-delay: 0s;
 }
 
 .nav__link:after {
-    display: block;
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 1px;
-    height: 1px;
-    background: var(--color-text);
-    content: '';
-    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
-    opacity: 0;
-    transition: width 0.3s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.1s linear 0.3s;
-    transition-delay: 0s, 0.3s;
+  display: block;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 1px;
+  height: 1px;
+  background: var(--color-text);
+  content: '';
+  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
+  opacity: 0;
+  transition: width 0.3s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.1s linear 0.3s;
+  transition-delay: 0s, 0.3s;
 }
diff --git a/blog/static/src/components/page.css b/blog/static/src/components/page.css
index 0b8e0d8..94a6e2b 100644
--- a/blog/static/src/components/page.css
+++ b/blog/static/src/components/page.css
@@ -1,6 +1,6 @@
 .page {
   min-width: 768px;
-  max-width: 768px;
+  max-width: 895px;
   margin: auto;
   padding: 0.5rem 0 2rem 0;
 }
diff --git a/blog/static/src/components/post.css b/blog/static/src/components/post.css
index 82dec80..351bdfc 100644
--- a/blog/static/src/components/post.css
+++ b/blog/static/src/components/post.css
@@ -1,31 +1,31 @@
 .post__title {
-    text-align: center;
-    line-height: 1.1;
-    letter-spacing: 0.15rem;
-    color: var(--color-text);
-    font-size: calc(var(--fontSizeBase) * 3);
-    font-weight: 700;
-    margin: 0.5rem 0;
+  text-align: center;
+  line-height: 1.1;
+  letter-spacing: 0.15rem;
+  color: var(--color-text);
+  font-size: calc(var(--fontSizeBase) * 1.8);
+  font-weight: 700;
+  margin: 0.5rem 0;
 }
 
 .post__date {
-    color: var(--color-text-lighter);
-    font-weight: 300;
-    text-align: center;
+  color: var(--color-text-lighter);
+  font-weight: 300;
+  text-align: center;
 }
 
 .post__body {
-    padding: 2rem 1rem;
-    color: var(--color-text-light);
-    line-height: 1.4;
+  padding: 2rem 1rem;
+  color: var(--color-text-light);
+  line-height: 1.4;
 }
 
 .post__body .embed-responsive {
-    position: relative;
-    display: block;
-    height: 0;
-    padding: 0;
-    overflow: hidden;
+  position: relative;
+  display: block;
+  height: 0;
+  padding: 0;
+  overflow: hidden;
 }
 
 .embed-responsive .embed-responsive-item, 
@@ -33,21 +33,21 @@
 .embed-responsive embed, 
 .embed-responsive object,
 .embed-responsive video {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    border: 0;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border: 0;
 }
 
 .embed-responsive-16by9 {
-    padding-bottom: 56.25%;
+  padding-bottom: 56.25%;
 }
 
 .embed-responsive-4by3 {
-    padding-bottom: 75%;
+  padding-bottom: 75%;
 }
 
 .post__body h1,
@@ -56,37 +56,37 @@
 .post__body h4,
 .post__body h5, 
 .post__body h6 {
-    line-height: 1.3;
-    margin: 3rem 0 2rem 0;
+  line-height: 1.3;
+  margin: 3rem 0 2rem 0;
 }
 
 .post__body h1 {
-    font-size: calc(var(--fontSizeBase) * 2);
+  font-size: calc(var(--fontSizeBase) * 1.4);
 }
 
 .post__body h2 {
-    font-size: calc(var(--fontSizeBase) * 1.7);
+  font-size: calc(var(--fontSizeBase) * 1.3);
 }
 
 .post__body h3 {
-    font-size: calc(var(--fontSizeBase) * 1.4);
+  font-size: calc(var(--fontSizeBase) * 1.2);
 }
 
 .post__body h4 {
-    font-size: calc(var(--fontSizeBase) * 1.1);
+  font-size: calc(var(--fontSizeBase) * 1.1);
 }
 
 .post__body h5 {
-    font-size: var(--fontSizeBase);
-    text-transform: uppercase;
+  font-size: var(--fontSizeBase);
+  text-transform: uppercase;
 }
 
 .post__body a {
-    color: var(--color-text-link);
-    transition: color 0.3s ease;
+  color: var(--color-text-link);
+  transition: color 0.3s ease;
 }
 
 .post__body a:hover {
-    color: var(--color-text-link-hover);
-    text-decoration: none;
+  color: var(--color-text-link-hover);
+  text-decoration: none;
 }
diff --git a/blog/static/src/components/postGroup.css b/blog/static/src/components/postGroup.css
index 1097ffd..0598b6a 100644
--- a/blog/static/src/components/postGroup.css
+++ b/blog/static/src/components/postGroup.css
@@ -1,13 +1,13 @@
 .postGroup {
-    margin-bottom: 3rem;
+  margin-bottom: 3rem;
 }
 
 .postGroup__title {
-    font-weight: bold;
+  font-weight: bold;
 }
 
 @media (max-width:767px) { 
-    .postGroup {
-        padding: 0 1rem;
-    }
+  .postGroup {
+    padding: 0 1rem;
+  }
 }
diff --git a/blog/static/src/components/refs.css b/blog/static/src/components/refs.css
index 9c0501b..b0a51a0 100644
--- a/blog/static/src/components/refs.css
+++ b/blog/static/src/components/refs.css
@@ -1,17 +1,17 @@
- .refs {
-    padding: 0.5rem 0;
+.refs {
+  padding: 0.5rem 0;
 }
 
 .refs__link_itemlink {
-    transition: all 0.2s ease-in-out;
-    color: var(--color-text-light);
-    text-align: center;
-    text-decoration: none;
-    border-bottom: 1px solid var(--color-text-lighter);
-    font-size: calc(var(--fontSizeBase) * 1.3);
+  transition: all 0.2s ease-in-out;
+  color: var(--color-text-light);
+  text-align: center;
+  text-decoration: none;
+  border-bottom: 1px solid var(--color-text-lighter);
+  font-size: calc(var(--fontSizeBase) * 1.3);
 }
 
 .refs__link_itemlink:hover {
-    border-color: var(--color-text);
-    color: var(--color-text);
+  border-color: var(--color-text);
+  color: var(--color-text);
 } 
diff --git a/blog/static/src/components/tags.css b/blog/static/src/components/tags.css
index 58eddf5..d5af4fe 100644
--- a/blog/static/src/components/tags.css
+++ b/blog/static/src/components/tags.css
@@ -1,21 +1,21 @@
 .tags {
-    text-align: center;
-    line-height: 1.1;
-    letter-spacing: 0.15rem;
-    color: #000;
-    font-size: 3rem;
-    font-weight: 700;
-    margin: 0.5rem 0;
-    display: flex;
-    justify-content: center;
+  text-align: center;
+  line-height: 1.1;
+  letter-spacing: 0.15rem;
+  color: #000;
+  font-size: 3rem;
+  font-weight: 700;
+  margin: 0.5rem 0;
+  display: flex;
+  justify-content: center;
 }
 
 .tags__item {
-    margin: 0.5em;
-    font-size: 1.5rem;
+  margin: 0.5em;
+  font-size: 1.5rem;
 }
 
 .tags__item:visited {
-    color: #ccc;
+  color: #ccc;
 }
 
diff --git a/blog/static/src/global/reboot.css b/blog/static/src/global/reboot.css
index a278d7d..fcb1e8d 100644
--- a/blog/static/src/global/reboot.css
+++ b/blog/static/src/global/reboot.css
@@ -10,7 +10,7 @@ html {
 }
 
 ol, ul {
-	list-style: none;
+  list-style: none;
   padding:0;
   margin: 0;
 }
diff --git a/blog/static/src/global/vars.css b/blog/static/src/global/vars.css
index c0d1f99..2e43d28 100644
--- a/blog/static/src/global/vars.css
+++ b/blog/static/src/global/vars.css
@@ -1,7 +1,7 @@
 :root {
   font-family: 'Open Sans', 'Helvetica', 'Arial', sans-serif;
   --fontSizeBase: 1rem;
-  --widthMain: 1180px;
+  --widthMain: 1380px;
   /* Base Colors */
   --color-text: #000;
   --color-text-light: #444;
@@ -9,3 +9,29 @@
   --color-text-link: #474747;
   --color-text-link-hover: #000;
 }
+
+[data-theme="dark"] {
+  /* Dark theme color overrides */
+  --color-text: #f0f0f0;
+  --color-text-light: #b0b0b0;
+  --color-text-lighter: #606060;
+  --color-text-link: #a0a0a0;
+  --color-text-link-hover: #ffffff;
+
+  /* Optional dark theme additions */
+  background-color: #121212;
+  color-scheme: dark;
+}
+
+/* System preference fallback */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    --color-text: #f0f0f0;
+    --color-text-light: #b0b0b0;
+    --color-text-lighter: #606060;
+    --color-text-link: #a0a0a0;
+    --color-text-link-hover: #ffffff;
+    background-color: #121212;
+    color-scheme: dark;
+  }
+}
diff --git a/blog/templates/about.html b/blog/templates/about.html
index 479b8b2..df938cf 100644
--- a/blog/templates/about.html
+++ b/blog/templates/about.html
@@ -125,8 +125,8 @@ <h3 class="postGroup__title">2011–2014</h3>
               <h3 class="postGroup__title">2006–2011</h3>
               <div class="postGroup__content">
                   <div class="minipost">
-                      <a class="minipost__title" href="/brand_new_day">
-                        Веб-студия Baikal-Web
+                      <a class="minipost__title" href="#">
+                        Восточно-Сибирский государственный университет технологий и управления
                       </a>
                       <span class="minipost__position">
                         математик-программист
@@ -137,9 +137,6 @@ <h3 class="postGroup__title">2006–2011</h3>
                   </div>
               </div>
             </div>
-
-
-
        </div>
 
     </article>
diff --git a/blog/templates/admin/index.html b/blog/templates/admin/index.html
index b39793d..c20e04c 100644
--- a/blog/templates/admin/index.html
+++ b/blog/templates/admin/index.html
@@ -1,7 +1,9 @@
 {% extends 'admin/base.html' %}
 {% block head_css %}
     {{super()}}
-	<link rel="stylesheet" href="/static/css/admin.css?v=bad00c159a8471ae2b789d75ed81e2da">
+
+    <link rel="stylesheet" href="https://bootswatch.com/3/darkly/bootstrap.css">
+    <link rel="stylesheet" href="/static/css/admin.css?v=bad00c159a8471ae2b789d75ed81e2a">
 {% endblock %}
 
 {% block page_body %}
diff --git a/blog/templates/layout.html b/blog/templates/layout.html
index 2d2309d..1a022d6 100644
--- a/blog/templates/layout.html
+++ b/blog/templates/layout.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html data-theme="dark">
     <head>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta charset="utf-8">