DEV: Improved dark theme support

2022-01-31 20:15:38 +03:00 · 2022-01-31 20:15:38 +03:00 · e3c4c57a71
parent 6e2ca32e2e
commit e3c4c57a71
19 changed files with 65 additions and 565 deletions
--- a/app/Controllers/Answer/EditAnswerController.php
+++ b/app/Controllers/Answer/EditAnswerController.php
@ -30,7 +30,6 @@ class EditAnswerController extends MainController
        pageError404($post);

        Request::getResources()->addBottomStyles('/assets/js/editor/toastui-editor.min.css');
-        Request::getResources()->addBottomStyles('/assets/js/editor/dark.css');
        Request::getResources()->addBottomScript('/assets/js/editor/toastui-editor-all.min.js');

        return Tpl::agRender(
--- a/app/Controllers/Post/AddPostController.php
+++ b/app/Controllers/Post/AddPostController.php
@ -34,7 +34,6 @@ class AddPostController extends MainController
        Request::getResources()->addBottomStyles('/assets/js/tag/tagify.css');
        Request::getResources()->addBottomScript('/assets/js/tag/tagify.min.js');
        Request::getResources()->addBottomStyles('/assets/js/editor/toastui-editor.min.css');
-        Request::getResources()->addBottomStyles('/assets/js/editor/dark.css');
        Request::getResources()->addBottomScript('/assets/js/editor/toastui-editor-all.min.js');

        // Adding from page topic 
--- a/app/Controllers/Post/EditPostController.php
+++ b/app/Controllers/Post/EditPostController.php
@ -32,7 +32,6 @@ class EditPostController extends MainController
        }

        Request::getResources()->addBottomStyles('/assets/js/editor/toastui-editor.min.css');
-        Request::getResources()->addBottomStyles('/assets/js/editor/dark.css');
        Request::getResources()->addBottomScript('/assets/js/editor/toastui-editor-all.min.js');
        Request::getResources()->addBottomStyles('/assets/js/tag/tagify.css');
        Request::getResources()->addBottomScript('/assets/js/tag/tagify.min.js');
--- a/app/Controllers/Post/PostController.php
+++ b/app/Controllers/Post/PostController.php
@ -116,7 +116,6 @@ class PostController extends MainController

        if ($this->user['id'] > 0 && $post['post_closed'] == 0) {
            Request::getResources()->addBottomStyles('/assets/js/editor/toastui-editor.min.css');
-            Request::getResources()->addBottomStyles('/assets/js/editor/dark.css');
            Request::getResources()->addBottomScript('/assets/js/editor/toastui-editor-all.min.js');
        }

--- a/modules/admin/view/default/footer.php
+++ b/modules/admin/view/default/footer.php
@ -1,5 +1,5 @@
 </div>
-<footer class="w-100 mt15 p15 bg-zinc-800 clear">
+<footer class="box-shadow-top mt20">
  <div class="text-sm lowercase">
    <?= Config::get('meta.name'); ?> &copy; <?= date('Y'); ?> — <?= Translate::get('admin'); ?>
  </div>
--- a/modules/admin/view/default/header.php
+++ b/modules/admin/view/default/header.php
@ -20,16 +20,16 @@ $dark     = Request::getCookie('dayNight') == 'dark' ? 'dark' : '';

 <body class="bg-fons<?php if ($dark == 'dark') { ?> dark<?php } ?>">

-  <header class="bg-blue-steel-700 sticky top0 mt0">
+  <header class="bg-white br-bottom mt0 mb15">
    <div class="flex justify-between items-center max-width mr-auto h40">
      <div class="flex items-center">
-        <div class="w200 white">
+        <div class="w200 black">
          <a class="ml20" href="/">
-            <i class="bi bi-house white"></i>
+            <i class="bi bi-house black"></i>
          </a>
          <span class="mr5 ml5">/</span>
          <a href="<?= getUrlByName('admin'); ?>">
-            <span class="white"><?= Translate::get('admin'); ?><span>
+            <span class="black"><?= Translate::get('admin'); ?><span>
          </a>
        </div>
        <div class="w400 items-center">
@ -40,7 +40,7 @@ $dark     = Request::getCookie('dayNight') == 'dark' ? 'dark' : '';
          </form>
        </div>
      </div>
-      <div class="white mr15">
+      <div class="black mr15">
        <?= Request::getRemoteAddress(); ?>
      </div>
    </div>
--- a/modules/catalog/view/default/footer.php
+++ b/modules/catalog/view/default/footer.php
@ -1,4 +1,4 @@
-<footer>
+<footer class="box-shadow-top">
  <?= Config::get('meta.name'); ?> &copy; <?= date('Y'); ?> — <span class="lowercase"><?= Translate::get('site.directory'); ?></span>
 </footer>

--- a/modules/search/view/default/footer.php
+++ b/modules/search/view/default/footer.php
@ -1,5 +1,5 @@
 </div>
-<footer>
+<footer class="box-shadow-top">
  <?= Config::get('meta.name'); ?> &copy; <?= date('Y'); ?> — <span class="lowercase"><?= Translate::get('search'); ?></span>
 </footer>

--- a/public/assets/css/style.css
+++ b/public/assets/css/style.css
--- a/public/assets/js/editor/dark.css
+++ b/public/assets/js/editor/dark.css
@ -1,474 +0,0 @@
-@charset "utf-8";
-.toastui-editor-dark.toastui-editor-defaultUI {
-  border-color: #494c56;
-  color: #eee;
-}
-
-.toastui-editor-dark .toastui-editor-md-container,
-.toastui-editor-dark .toastui-editor-ww-container {
-  background-color: #121212;
-}
-
-.toastui-editor-dark .toastui-editor-defaultUI-toolbar {
-  background-color: #232428;
-  border-bottom-color: #303238;
-}
-
-.toastui-editor-dark .toastui-editor-toolbar-icons {
-  background-position-y: -49px;
-  border-color: #232428;
-}
-
-.toastui-editor-dark .toastui-editor-toolbar-icons:not(:disabled):hover {
-  background-color: #36383f;
-  border-color: #36383f;
-}
-
-.toastui-editor-dark .toastui-editor-toolbar-divider {
-  background-color: #303238;
-}
-
-.toastui-editor-dark .toastui-editor-tooltip {
-  background-color: #535662;
-}
-
-.toastui-editor-dark .toastui-editor-tooltip .arrow {
-  background-color: #535662;
-}
-
-.toastui-editor-dark .toastui-editor-defaultUI-toolbar .scroll-sync::before {
-  color: #8f939f;
-}
-
-.toastui-editor-dark .toastui-editor-defaultUI-toolbar .scroll-sync.active::before {
-  color: #67ccff;
-}
-
-.toastui-editor-dark .toastui-editor-defaultUI-toolbar .switch {
-  background-color: #2b4455;
-}
-
-.toastui-editor-dark .toastui-editor-defaultUI-toolbar input:checked + .switch {
-  background-color: #2b4455;
-}
-
-.toastui-editor-dark .toastui-editor-defaultUI-toolbar .switch::before {
-  background-color: #8f939f;
-}
-
-.toastui-editor-dark .toastui-editor-defaultUI-toolbar input:checked + .switch::before {
-  background-color: #67ccff;
-}
-
-.toastui-editor-dark .toastui-editor-main .toastui-editor-md-splitter {
-  background-color: #303238;
-}
-
-.toastui-editor-dark .toastui-editor-mode-switch {
-  border-top-color: #393b42;
-  background-color: #121212;
-}
-
-.toastui-editor-dark .toastui-editor-mode-switch .tab-item {
-  border-color: #393b42;
-  background-color: #232428;
-  color: #757a86;
-}
-
-.toastui-editor-dark .toastui-editor-mode-switch .tab-item.active {
-  border-top-color: #121212;
-  background-color: #121212;
-  color: #eee;
-}
-
-.toastui-editor-dark .toastui-editor-popup,
-.toastui-editor-dark .toastui-editor-context-menu {
-  background-color: #121212;
-  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
-  border-color: #494c56;
-}
-
-.toastui-editor-dark .toastui-editor-popup-add-heading ul li:hover {
-  background-color: #36383f;
-}
-
-.toastui-editor-dark .toastui-editor-popup-body label {
-  color: #9a9da3;
-}
-
-.toastui-editor-dark .toastui-editor-popup-body input[type='text'] {
-  background-color: transparent;
-  color: #eee;
-  border-color: #303238;
-}
-
-.toastui-editor-dark .toastui-editor-popup-body input[type='text']:focus {
-  outline-color: #67ccff;
-}
-
-.toastui-editor-dark .toastui-editor-popup-body input[type='text'].disabled {
-  color: #969aa5;
-  border-color: #303238;
-  background-color: rgba(48, 50, 56, 0.4);
-}
-
-.toastui-editor-dark .toastui-editor-popup-add-image .toastui-editor-tabs .tab-item {
-  border-bottom-color: #292e37;
-  color: #eee;
-}
-
-.toastui-editor-dark .toastui-editor-popup-add-image .toastui-editor-tabs .tab-item:hover {
-  border-bottom-color: #3c424d;
-}
-
-.toastui-editor-dark .toastui-editor-popup-add-image .toastui-editor-tabs .tab-item.active {
-  color: #67ccff;
-  border-bottom-color: #67ccff;
-}
-
-.toastui-editor-dark .toastui-editor-popup-body .toastui-editor-file-name {
-  border-color: #303238;
-  color: #eee;
-}
-
-.toastui-editor-dark .toastui-editor-popup-body .toastui-editor-file-select-button {
-  border-color: #303238;
-  background-color: #232428;
-  color: #eee;
-}
-
-.toastui-editor-dark .toastui-editor-popup-body .toastui-editor-file-select-button:hover {
-  border-color: #494c56;
-}
-
-.toastui-editor-dark.toastui-editor-defaultUI .toastui-editor-close-button {
-  color: #eee;
-  border-color: #303238;
-  background-color: #232428;
-}
-
-.toastui-editor-dark.toastui-editor-defaultUI .toastui-editor-close-button:hover {
-  border-color: #494c56;
-}
-
-.toastui-editor-dark.toastui-editor-defaultUI .toastui-editor-ok-button {
-  color: #121212;
-  background-color: #67ccff;
-}
-
-.toastui-editor-dark.toastui-editor-defaultUI .toastui-editor-ok-button:hover {
-  color: #121212;
-  background-color: #32baff;
-}
-
-.toastui-editor-dark .toastui-editor-popup-add-table .toastui-editor-table-cell {
-  border-color: #303238;
-  background-color: #121212;
-}
-
-.toastui-editor-dark .toastui-editor-popup-add-table .toastui-editor-table-cell.header {
-  border-color: #303238;
-  background-color: #232428;
-}
-
-.toastui-editor-dark .toastui-editor-popup-add-table .toastui-editor-table-selection-layer {
-  border-color: rgba(103, 204, 255, 0.4);
-  background-color: rgba(103, 204, 255, 0.1);
-}
-
-.toastui-editor-dark .toastui-editor-popup-add-table .toastui-editor-table-description {
-  color: #eee
-}
-
-.toastui-editor-dark .toastui-editor-md-tab-container {
-  background-color: #232428;
-  border-bottom-color: #303238;
-}
-
-.toastui-editor-dark .toastui-editor-md-tab-container .tab-item {
-  border-color: #393b42;
-  background-color: #2d2f34;
-  color: #757a86;
-}
-
-.toastui-editor-dark .toastui-editor-md-tab-container .tab-item.active {
-  border-bottom-color: #121212;
-  background-color: #121212;
-  color: #eee;
-}
-
-
-.toastui-editor-dark .toastui-editor-context-menu .menu-group {
-  border-bottom-color: #303238;
-  color: #eee;
-}
-
-.toastui-editor-dark .toastui-editor-context-menu .menu-item span::before {
-  background-position-y: -126px;
-}
-
-.toastui-editor-dark .toastui-editor-context-menu li:not(.disabled):hover {
-  background-color: #36383f;
-}
-
-.toastui-editor-dark .toastui-editor-context-menu li.disabled {
-  color: #969aa5;
-}
-
-.toastui-editor-dark .toastui-editor-dropdown-toolbar {
-  border-color: #494c56;
-  background-color: #232428;
-}
-
-.toastui-editor-dark .ProseMirror,
-.toastui-editor-dark .toastui-editor-contents p,
-.toastui-editor-dark .toastui-editor-contents h1,
-.toastui-editor-dark .toastui-editor-contents h2,
-.toastui-editor-dark .toastui-editor-contents h3,
-.toastui-editor-dark .toastui-editor-contents h4,
-.toastui-editor-dark .toastui-editor-contents h5,
-.toastui-editor-dark .toastui-editor-contents h6 {
-  color: #fff;
-}
-
-.toastui-editor-dark .toastui-editor-contents h1,
-.toastui-editor-dark .toastui-editor-contents h2 {
-  border-color: #fff;
-}
-
-.toastui-editor-dark .toastui-editor-contents del {
-  color: #777980;
-}
-
-.toastui-editor-dark .toastui-editor-contents blockquote {
-  border-color: #303135;
-}
-
-.toastui-editor-dark .toastui-editor-contents blockquote p,
-.toastui-editor-dark .toastui-editor-contents blockquote ul,
-.toastui-editor-dark .toastui-editor-contents blockquote ol {
-  color: #777980;
-}
-
-.toastui-editor-dark .toastui-editor-contents pre {
-  background-color: #232428;
-}
-
-.toastui-editor-dark .toastui-editor-contents pre code {
-  background-color: transparent;
-  color: #fff;
-}
-
-.toastui-editor-dark .toastui-editor-contents code {
-  color: #c1798b;
-  background-color: #35262a;
-}
-
-.toastui-editor-dark .toastui-editor-contents div {
-  color: #fff;
-}
-
-.toastui-editor-dark .toastui-editor-ww-code-block-language {
-  border-color: #303238;
-  background-color: #121212;
-}
-
-.toastui-editor-dark .toastui-editor-ww-code-block-language input {
-  color: #fff;
-}
-
-.toastui-editor-dark .toastui-editor-contents .toastui-editor-ww-code-block:after {
-  background-color: #232428;
-  border: 1px solid #393b42;
-  color: #eee;
-  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI1LjIuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IuugiOydtOyWtF8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiCgkgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMzAgMzAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDMwIDMwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+Cgkuc3Qwe2ZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO2ZpbGw6I2ZmZjt9Cjwvc3R5bGU+CjxnPgoJPGc+CgkJPGc+CgkJCTxnPgoJCQkJPGc+CgkJCQkJPHBhdGggY2xhc3M9InN0MCIgZD0iTTE1LjUsMTIuNWwyLDJMMTIsMjBoLTJ2LTJMMTUuNSwxMi41eiBNMTgsMTBsMiwybC0xLjUsMS41bC0yLTJMMTgsMTB6Ii8+CgkJCQk8L2c+CgkJCTwvZz4KCQk8L2c+Cgk8L2c+CjwvZz4KPC9zdmc+Cg==');
-}
-
-.toastui-editor-dark .toastui-editor-contents .toastui-editor-custom-block-editor {
-  background: #392d31;
-  color: #fff;
-  border-color: #327491;
-}
-
-.toastui-editor-dark .toastui-editor-custom-block.ProseMirror-selectednode .toastui-editor-custom-block-view {
-  color: #fff;
-  border-color: #327491;
-}
-
-.toastui-editor-dark .toastui-editor-custom-block-view button {
-  background-color: #232428;
-  border-color: #393b42;
-  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI1LjIuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IuugiOydtOyWtF8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiCgkgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMzAgMzAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDMwIDMwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+Cgkuc3Qwe2ZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO2ZpbGw6I2ZmZjt9Cjwvc3R5bGU+CjxnPgoJPGc+CgkJPGc+CgkJCTxnPgoJCQkJPGc+CgkJCQkJPHBhdGggY2xhc3M9InN0MCIgZD0iTTE1LjUsMTIuNWwyLDJMMTIsMjBoLTJ2LTJMMTUuNSwxMi41eiBNMTgsMTBsMiwybC0xLjUsMS41bC0yLTJMMTgsMTB6Ii8+CgkJCQk8L2c+CgkJCTwvZz4KCQk8L2c+Cgk8L2c+CjwvZz4KPC9zdmc+Cg==');
-}
-
-.toastui-editor-dark .toastui-editor-custom-block-view button:hover {
-  background-color: #232428;
-  border-color: #595c68;
-}
-
-.toastui-editor-dark .toastui-editor-custom-block-view .info {
-  color: #65acca;
-}
-
-.toastui-editor-dark .toastui-editor-contents table {
-  border-color: #303238;
-}
-
-.toastui-editor-dark .toastui-editor-contents table th,
-.toastui-editor-dark .toastui-editor-contents table td {
-  border-color: #303238;
-}
-
-.toastui-editor-dark .toastui-editor-contents table th {
-  background-color: #3a3c42;
-}
-
-.toastui-editor-dark .toastui-editor-contents table td,
-.toastui-editor-dark .toastui-editor-contents table td p {
-  color: #fff;
-}
-
-.toastui-editor-dark .toastui-editor-contents td.toastui-editor-cell-selected {
-  background-color: rgba(103, 204, 255, 0.5);
-}
-
-.toastui-editor-dark .toastui-editor-contents th.toastui-editor-cell-selected {
-  background-color: rgba(103, 204, 255, 0.3);
-}
-
-.toastui-editor-dark table.ProseMirror-selectednode {
-  outline-color: #67ccff;
-}
-
-.toastui-editor-dark .html-block.ProseMirror-selectednode {
-  outline-color: #67ccff;
-}
-
-.toastui-editor-dark .toastui-editor-contents ul,
-.toastui-editor-dark .toastui-editor-contents menu,
-.toastui-editor-dark .toastui-editor-contents ol,
-.toastui-editor-dark .toastui-editor-contents dir {
-  color: #55575f;
-}
-
-.toastui-editor-dark .toastui-editor-contents ul > li::before {
-  background-color: #55575f;
-}
-
-.toastui-editor-dark .toastui-editor-contents hr {
-  border-color: #55575f;
-}
-
-.toastui-editor-dark .toastui-editor-contents a {
-  color: #4b96e6;
-}
-
-.toastui-editor-dark .toastui-editor-contents a:hover {
-  color: #1f70de;
-}
-
-.toastui-editor-dark .toastui-editor-contents .image-link:hover::before {
-  border-color: #393b42;
-  background-color: #232428;
-  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj4KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIj4KICAgICAgICA8ZyBzdHJva2U9IiNFRUUiIHN0cm9rZS13aWR0aD0iMS41Ij4KICAgICAgICAgICAgPGc+CiAgICAgICAgICAgICAgICA8Zz4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNNy42NjUgMTUuMDdsLTEuODE5LS4wMDJjLTEuNDg2IDAtMi42OTItMS4yMjgtMi42OTItMi43NDR2LS4xOTJjMC0xLjUxNSAxLjIwNi0yLjc0NCAyLjY5Mi0yLjc0NGgzLjg0NmMxLjQ4NyAwIDIuNjkyIDEuMjI5IDIuNjkyIDIuNzQ0di4xOTIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMDQ1IC0xNzQzKSB0cmFuc2xhdGUoMTA0MCAxNzM4KSB0cmFuc2xhdGUoNSA1KSBzY2FsZSgxIC0xKSByb3RhdGUoNDUgMzcuMjkzIDApIi8+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTEyLjMyNiA0LjkzNGwxLjgyMi4wMDJjMS40ODcgMCAyLjY5MyAxLjIyOCAyLjY5MyAyLjc0NHYuMTkyYzAgMS41MTUtMS4yMDYgMi43NDQtMi42OTMgMi43NDRoLTMuODQ1Yy0xLjQ4NyAwLTIuNjkyLTEuMjI5LTIuNjkyLTIuNzQ0VjcuNjgiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMDQ1IC0xNzQzKSB0cmFuc2xhdGUoMTA0MCAxNzM4KSB0cmFuc2xhdGUoNSA1KSBzY2FsZSgxIC0xKSByb3RhdGUoNDUgMzAuOTk2IDApIi8+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPgo=');
-  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
-}
-
-.toastui-editor-dark .toastui-editor-contents .task-list-item::before {
-  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgdmlld0JveD0iMCAwIDE4IDE4Ij4KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgc3Ryb2tlPSIjNTU1NzVGIj4KICAgICAgICAgICAgPGc+CiAgICAgICAgICAgICAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTAzMCAtMzE2KSB0cmFuc2xhdGUoNzg4IDE5MikgdHJhbnNsYXRlKDI0MiAxMjQpIj4KICAgICAgICAgICAgICAgICAgICA8cmVjdCB3aWR0aD0iMTciIGhlaWdodD0iMTciIHg9Ii41IiB5PSIuNSIgcng9IjIiLz4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+Cg==');
-  background-color: transparent;
-}
-
-.toastui-editor-dark .toastui-editor-contents .task-list-item.checked::before {
-  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgdmlld0JveD0iMCAwIDE4IDE4Ij4KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgZmlsbD0iIzRCOTZFNiI+CiAgICAgICAgICAgIDxnPgogICAgICAgICAgICAgICAgPGc+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTE2IDBjMS4xMDUgMCAyIC44OTUgMiAydjE0YzAgMS4xMDUtLjg5NSAyLTIgMkgyYy0xLjEwNSAwLTItLjg5NS0yLTJWMkMwIC44OTUuODk1IDAgMiAwaDE0em0tMS43OTMgNS4yOTNjLS4zOS0uMzktMS4wMjQtLjM5LTEuNDE0IDBMNy41IDEwLjU4NSA1LjIwNyA4LjI5M2wtLjA5NC0uMDgzYy0uMzkyLS4zMDUtLjk2LS4yNzgtMS4zMi4wODMtLjM5LjM5LS4zOSAxLjAyNCAwIDEuNDE0bDMgMyAuMDk0LjA4M2MuMzkyLjMwNS45Ni4yNzggMS4zMi0uMDgzbDYtNiAuMDgzLS4wOTRjLjMwNS0uMzkyLjI3OC0uOTYtLjA4My0xLjMyeiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTEwNTAgLTI5NikgdHJhbnNsYXRlKDc4OCAxOTIpIHRyYW5zbGF0ZSgyNjIgMTA0KSIvPgogICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4K');
-}
-
-.toastui-editor-dark .toastui-editor-md-delimiter,
-.toastui-editor-dark .toastui-editor-md-code.toastui-editor-md-delimiter,
-.toastui-editor-dark .toastui-editor-md-thematic-break,
-.toastui-editor-dark .toastui-editor-md-link,
-.toastui-editor-dark .toastui-editor-md-table,
-.toastui-editor-dark .toastui-editor-md-block-quote {
-  color: #55575f;
-}
-
-.toastui-editor-dark .toastui-editor-md-meta,
-.toastui-editor-dark .toastui-editor-md-html {
-  color: #55575f;
-}
-
-.toastui-editor-dark .toastui-editor-md-link.toastui-editor-md-link-url.toastui-editor-md-marked-text {
-  color: #777980;
-}
-
-.toastui-editor-dark .toastui-editor-md-block-quote .toastui-editor-md-marked-text,
-.toastui-editor-dark .toastui-editor-md-list-item .toastui-editor-md-meta {
-  color: #b3b5bc;
-}
-
-.toastui-editor-dark .toastui-editor-md-link.toastui-editor-md-link-desc.toastui-editor-md-marked-text,
-.toastui-editor-dark .toastui-editor-md-list-item-style.toastui-editor-md-list-item-odd {
-  color: #4b96e6;
-}
-
-.toastui-editor-dark .toastui-editor-md-list-item-style.toastui-editor-md-list-item-even {
-  color: #ef6767;
-}
-
-.toastui-editor-dark .toastui-editor-md-table .toastui-editor-md-table-cell {
-  color: #fff;
-}
-
-.toastui-editor-dark .toastui-editor-md-code.toastui-editor-md-marked-text {
-  color: #c1798b;
-}
-
-.toastui-editor-dark .toastui-editor-md-code {
-  background-color: #35262a;
-}
-
-.toastui-editor-dark .toastui-editor-md-code-block-line-background {
-  background-color: #232428;
-}
-
-.toastui-editor-dark .toastui-editor-md-code-block .toastui-editor-md-meta {
-  color: #aaa;
-}
-
-.toastui-editor-dark .toastui-editor-md-custom-block {
-  color: #fff;
-}
-
-.toastui-editor-dark .toastui-editor-md-custom-block-line-background {
-  background-color: #392d31;
-}
-
-.toastui-editor-dark .toastui-editor-md-custom-block .toastui-editor-md-delimiter {
-  color: #327491;
-}
-
-.toastui-editor-dark .toastui-editor-md-custom-block .toastui-editor-md-meta {
-  color: #65acca;
-}
-
-.toastui-editor-dark .toastui-editor-contents .toastui-editor-md-preview-highlight::after {
-  background-color: rgba(255, 250, 193, 0.5);
-}
-
-.toastui-editor-dark .toastui-editor-contents th.toastui-editor-md-preview-highlight,
-.toastui-editor-dark .toastui-editor-contents td.toastui-editor-md-preview-highlight {
-  background-color: rgba(255, 250, 193, 0.5);
-}
-
-.toastui-editor-dark .toastui-editor-contents th.toastui-editor-md-preview-highlight {
-  color: #fff;
-}
-
-.toastui-editor-dark .toastui-editor-contents th.toastui-editor-md-preview-highlight,
-.toastui-editor-dark .toastui-editor-contents td.toastui-editor-md-preview-highlight {
-  background-color: rgba(255, 250, 193, 0.25);
-}
-
-.toastui-editor-dark .toastui-editor-contents .toastui-editor-md-preview-highlight::after {
-  background-color: rgba(255, 250, 193, 0.25);
-}
--- a/resources/views/default/content/home.php
+++ b/resources/views/default/content/home.php
@ -139,7 +139,5 @@
        <?php } ?>
      </div>
    <?php } ?>
-
-    <?= Tpl::import('/_block/sidebar/lang', ['lang' => []]); ?>
  </div>
 </aside>
--- a/resources/views/default/css/scss/basic-color-variables.scss
+++ b/resources/views/default/css/scss/basic-color-variables.scss
@ -250,6 +250,4 @@ $rose-600: #e11d48;
 $rose-700: #be123c;
 $rose-800: #9f1239;
 $rose-900: #881337;
-
-$blue-steel-700: #3c8dbc;
 
--- a/resources/views/default/css/scss/basic.scss
+++ b/resources/views/default/css/scss/basic.scss
@ -24,9 +24,7 @@ html {

 :root {
  --body-bg-color: #f3f4f6;
-  --body-color: #222;
-  --bg-box: #fff;
-  --black: #222;
+  --black: #030303;
  --white: #fff;
  --br-box-gray: #ededed;
  --gray-400: #9ca3af;
@ -34,24 +32,7 @@ html {
  --blue-100: #dbeafe;
  --slate-100: #f1f5f9;
  --slate-300: #cbd5e1;
-}
-
-body.dark {
-  --body-bg-color: #030303;
-  --body-color: #d1d5db;
-  --black: #fff;
-  --white: #222;
-  --br-box-gray: #111;
-  --gray-400: #ccc;
-  --gray-600: #ddd;
-  --blue-100: #111;
-  --slate-100: #333;
-  --slate-300: #111;
-}
-
-.bg-fons {  
-  background-color: var(--body-bg-color); 
-  color: var(--body-color);
+  --yellow-100: #fef9c3;
 }

 body {
@ -61,6 +42,15 @@ body {
  margin: 0;
 }

+.body-bg-fon { background-color: #f3f4f6; }
+
+body.dark {
+  filter: invert(100%);
+  background-color: #222;
+}
+
+body.dark .bg-white { background-color: var(--br-box-gray); }
+
 a {
  color: #4183c4;
  cursor: pointer;
@ -183,14 +173,13 @@ img {
 .bg-green-600 { background-color: $green-600; }
 .bg-gray-100 { background-color: $gray-100; }
 .bg-yellow-50 { background-color: $yellow-50; } 
-.bg-yellow-100 { background-color: $yellow-100; }
+.bg-yellow-100 { background-color: var(--yellow-100); }
 .bg-purple-100 { background-color: $purple-100; }
 .bg-blue-100 { background-color: var(--blue-100); }
 .bg-blue-500 { background-color: $blue-500; }
 .bg-sky-50 { background-color: $sky-50; }
 .bg-red-200 { background-color: $red-200; }
 .bg-pink-800 { background-color: $pink-800; }
-.bg-blue-steel-700 { background-color: $blue-steel-700; }

 /*
 * Other
@ -199,6 +188,7 @@ img {
 */

 .box-shadow { box-shadow: 0 2px 4px -1px rgba(0,0,0,0.15) }
+.box-shadow-top { box-shadow:  0 -5px 5px -5px rgba(0,0,0,0.15) }
 .box-shadow-all { box-shadow: 0 4px 14px rgba(0,0,0,0.15); }
 .br-box-gray { border: 1px solid var(--br-box-gray); }
 .br-top-dotted { border: 1px dotted #ddd; }
--- a/resources/views/default/css/scss/components.scss
+++ b/resources/views/default/css/scss/components.scss
@ -14,47 +14,18 @@
  margin: 0 auto;
 }

-.box {
-  border-radius: 5px;
-  padding: 15px;
-  margin-bottom: 15px;
-  overflow: hidden;
-  display: block;
-}
-
-.box-flex {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  border-radius: 5px;
-  margin-bottom: 15px;
-}
-
-.logo {
-  text-transform: uppercase;
-  font-size: 21px;
-}
-
 h1,
 h2,
 h3,
 h4,
 h5 {
-  font-weight: 400;
+  font-weight: 500;
  margin: 0 0 10px 0;
 }

-h3.uppercase-box {
-  color: #6b7280;
-  font-size: 0.875rem;
-  text-transform: uppercase;
-  line-height: 1;
-}
-
 footer {
-  background-color: #27272a;
-  color: var(--gray-400);
+  background-color: var(--white);
+  color: var(--gray-600);
  padding: 15px;
  overflow: hidden;
 }
@ -73,10 +44,13 @@ footer ul {

 footer ul li a {
  font-size: 14px;
-  color: #fff;
+  color: var(--gray-600);
  margin-bottom: 5px;
 }

+footer ul li a:hover,
+footer .icon:hover { color: #111; }
+
 code {
  color: #9b4f5e;
  background-color: #f5f2f0;
@ -121,6 +95,36 @@ details[open] > summary {
  color: #666;
 }

+.logo {
+  text-transform: uppercase;
+  font-size: 21px;
+}
+
+.box {
+  border-radius: 5px;
+  padding: 15px;
+  margin-bottom: 15px;
+  overflow: hidden;
+  display: block;
+}
+
+.box-flex {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  border-radius: 5px;
+  margin-bottom: 15px;
+}
+
+.uppercase-box {
+  color: var(--gray-600);
+  font-size: 0.875rem;
+  text-transform: uppercase;
+  line-height: 1;
+  font-weight: 400;
+}
+
 .page {
  margin-left: auto;
  margin-right: auto;
@ -213,13 +217,4 @@ a:hover > img { opacity: 0.8; }
 }

 /* Tippy.js - theme: light, */
-.dark .tippy-box[data-theme~="light"] {
-  background-color: $black;
-  color: $neutral-900;
-}
-
-.dark .tippy-box[data-theme~="light"][data-placement^="top"] > .tippy-arrow::before  { border-top-color: $black; }
-.dark .tippy-box[data-theme~="light"][data-placement^="bottom"] > .tippy-arrow::before,
-.dark .tippy-box[data-theme~="light"][data-placement^="top"] > .tippy-arrow::before { border-bottom-color: $black; }
-
 .tippy-box[data-theme~=light]{color:#26323d;box-shadow:0 0 20px 4px rgba(154,161,177,.15),0 4px 80px -8px rgba(36,40,47,.25),0 4px 4px -2px rgba(91,94,105,.15);background-color:#fff}.tippy-box[data-theme~=light][data-placement^=top]>.tippy-arrow:before{border-top-color:#fff}.tippy-box[data-theme~=light][data-placement^=bottom]>.tippy-arrow:before{border-bottom-color:#fff}.tippy-box[data-theme~=light][data-placement^=left]>.tippy-arrow:before{border-left-color:#fff}.tippy-box[data-theme~=light][data-placement^=right]>.tippy-arrow:before{border-right-color:#fff}.tippy-box[data-theme~=light]>.tippy-backdrop{background-color:#fff}
--- a/resources/views/default/footer.php
+++ b/resources/views/default/footer.php
@ -1,5 +1,5 @@
 </div>
-<footer>
+<footer class="box-shadow-top">
  <div class="left">
    <div class="mb5">
      <?= Config::get('meta.name'); ?>
--- a/resources/views/default/header.php
+++ b/resources/views/default/header.php
@ -1,7 +1,7 @@
 <?php
  Translate::setLang($user['lang']);
  $dark     = Request::getCookie('dayNight') == 'dark' ? 'dark' : '';
-  $css      = $data['type'] == 'web' || $data['type'] == 'page'  ? '' : 'bg-fons';
+  $css      = $data['type'] == 'web' || $data['type'] == 'page'  ? '' : 'body-bg-fon';
  $type     = $data['type'] ?? false;
  $facet    = $data['facet'] ?? false; 
 ?>
@ -15,7 +15,7 @@
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <?= $meta; ?>
  <?php getRequestHead()->output(); ?>
-  <link rel="stylesheet" href="/assets/css/style.css?26">
+  <link rel="stylesheet" href="/assets/css/style.css?29">
  <link rel="icon" sizes="16x16" href="/favicon.ico" type="image/x-icon">
  <link rel="icon" sizes="120x120" href="/favicon-120.ico" type="image/x-icon">
 </head>
--- a/resources/views/qa/content/facets/blog.php
+++ b/resources/views/qa/content/facets/blog.php
@ -41,7 +41,7 @@ if ($blog['facet_is_deleted'] == 0) { ?>
      <aside class="col-span-3 relative mb-none">
        <?php if ($blog['facet_is_deleted'] == 0) { ?>
          <div class="br-box-gray p15 mb15 br-rd5 bg-white text-sm">
-            <div class="uppercase gray mb5"> <?= Translate::get('created by'); ?></div>
+            <h3 class="uppercase-box"><?= Translate::get('created by'); ?></h3>
            <a class="flex relative pt5 pb5 items-center hidden gray-600" href="/@<?= $data['user']['login']; ?>">
              <?= user_avatar_img($data['user']['avatar'], 'max', $data['user']['login'], 'w30 mr5 br-rd-50'); ?>
              <span class="ml5"><?= $data['user']['login']; ?></span>
--- a/resources/views/qa/content/home.php
+++ b/resources/views/qa/content/home.php
@ -52,9 +52,7 @@

  <?php if ($user['id'] > 0 && !empty($data['topics_user'])) { ?>
    <div class="box br-box-gray box-shadow-all bg-white text-sm">
-      <div class="uppercase gray mb5">
-        <?= Translate::get('reading'); ?>
-      </div>
+      <h3 class="uppercase-box"><?= Translate::get('reading'); ?></h3>

      <?php
      $my = [];
--- a/resources/views/qa/header.php
+++ b/resources/views/qa/header.php
@ -1,5 +1,4 @@
 <?php
-$dark   = Request::getCookie('dayNight') == 'dark' ? 'dark' : '';
 $type   = $data['type'] ?? false;
 $facet  = $data['facet'] ?? false; ?>

@ -17,7 +16,7 @@ $facet  = $data['facet'] ?? false; ?>
  <link rel="icon" sizes="120x120" href="/favicon-120.ico" type="image/x-icon">
 </head>

-<body class="p0 m0 black<?php if ($dark == 'dark') { ?> dark<?php } ?>">
+<body<?php if (Request::getCookie('dayNight') == 'dark') { ?> class="dark"<?php } ?>>

  <header class="bg-white mt0 mb15">
    <div class="br-bottom mr-auto max-w1240 w-100 pr10 pl15 mb10 mb-none items-center flex">