Feature/85 side panel (#104)

* Add shortcuts list to the side panel

* Night mode style

package-lock.json

@@ -13,6 +13,7 @@
         "@aws-sdk/client-s3": "3.303.0",
         "@aws-sdk/lib-storage": "3.303.0",
         "@hocuspocus/provider": "2.0.6",
+        "@solid-primitives/media": "2.2.3",
         "form-data": "4.0.0",
         "formidable": "2.1.1",
         "i18next": "22.4.15",
@@ -5634,6 +5635,47 @@
         "@sinonjs/commons": "^2.0.0"
       }
     },
+    "node_modules/@solid-primitives/event-listener": {
+      "version": "2.2.13",
+      "resolved": "https://registry.npmjs.org/@solid-primitives/event-listener/-/event-listener-2.2.13.tgz",
+      "integrity": "sha512-8GtVEq0ECZoa5Klo1jjfGPfwg0zVJ8TNnNkWu8FqRkh0CkhbhCVJAKwjleem9K/qL6zUDfJihLjhqGBTBbb+8w==",
+      "dependencies": {
+        "@solid-primitives/utils": "^6.2.0"
+      },
+      "peerDependencies": {
+        "solid-js": "^1.6.12"
+      }
+    },
+    "node_modules/@solid-primitives/event-listener/node_modules/@solid-primitives/utils": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/@solid-primitives/utils/-/utils-6.2.0.tgz",
+      "integrity": "sha512-T62WlLwKkbmicsw/xpwMQyv9MmZRSaVyutXfS5icc9v0cb8qGMUxRxr5LVvZHYQCZ9DEFboZB0r711xsbVBbeA==",
+      "peerDependencies": {
+        "solid-js": "^1.6.12"
+      }
+    },
+    "node_modules/@solid-primitives/media": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/@solid-primitives/media/-/media-2.2.3.tgz",
+      "integrity": "sha512-xhKaTJjH6e65OL706/hA38WWitafbJCm/Zpv7qAn4cy/cgxZ39Cl0bPdYzZhUlkJvTt8YVT0IBcOBLKlJVaPRg==",
+      "dependencies": {
+        "@solid-primitives/event-listener": "^2.2.13",
+        "@solid-primitives/rootless": "^1.4.1",
+        "@solid-primitives/static-store": "^0.0.4",
+        "@solid-primitives/utils": "^6.2.0"
+      },
+      "peerDependencies": {
+        "solid-js": "^1.6.12"
+      }
+    },
+    "node_modules/@solid-primitives/media/node_modules/@solid-primitives/utils": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/@solid-primitives/utils/-/utils-6.2.0.tgz",
+      "integrity": "sha512-T62WlLwKkbmicsw/xpwMQyv9MmZRSaVyutXfS5icc9v0cb8qGMUxRxr5LVvZHYQCZ9DEFboZB0r711xsbVBbeA==",
+      "peerDependencies": {
+        "solid-js": "^1.6.12"
+      }
+    },
     "node_modules/@solid-primitives/memo": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/@solid-primitives/memo/-/memo-1.2.4.tgz",
@@ -5668,6 +5710,25 @@
         "solid-js": "^1.6.12"
       }
     },
+    "node_modules/@solid-primitives/rootless": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/@solid-primitives/rootless/-/rootless-1.4.1.tgz",
+      "integrity": "sha512-h7VBUk8usD76Eh1a4wT17PcGtIRxGPlLuJ4Mf7roCNu46W5cc9DAoz8M6XebuZWVKeUkML/JuPMZQSV0mLo2Fw==",
+      "dependencies": {
+        "@solid-primitives/utils": "^6.2.0"
+      },
+      "peerDependencies": {
+        "solid-js": "^1.6.12"
+      }
+    },
+    "node_modules/@solid-primitives/rootless/node_modules/@solid-primitives/utils": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/@solid-primitives/utils/-/utils-6.2.0.tgz",
+      "integrity": "sha512-T62WlLwKkbmicsw/xpwMQyv9MmZRSaVyutXfS5icc9v0cb8qGMUxRxr5LVvZHYQCZ9DEFboZB0r711xsbVBbeA==",
+      "peerDependencies": {
+        "solid-js": "^1.6.12"
+      }
+    },
     "node_modules/@solid-primitives/scheduled": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/@solid-primitives/scheduled/-/scheduled-1.3.2.tgz",
@@ -5686,6 +5747,25 @@
         "solid-js": "^1.6.12"
       }
     },
+    "node_modules/@solid-primitives/static-store": {
+      "version": "0.0.4",
+      "resolved": "https://registry.npmjs.org/@solid-primitives/static-store/-/static-store-0.0.4.tgz",
+      "integrity": "sha512-NcLtDNA6H+Z9LmqaUe4SKfMx0YbszIMXEqfV15cB34t5XyEeOM5TihYwsVJ/dpkmpHYzflm0SwAL+P9uwyzvWQ==",
+      "dependencies": {
+        "@solid-primitives/utils": "^6.2.0"
+      },
+      "peerDependencies": {
+        "solid-js": "^1.6.12"
+      }
+    },
+    "node_modules/@solid-primitives/static-store/node_modules/@solid-primitives/utils": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/@solid-primitives/utils/-/utils-6.2.0.tgz",
+      "integrity": "sha512-T62WlLwKkbmicsw/xpwMQyv9MmZRSaVyutXfS5icc9v0cb8qGMUxRxr5LVvZHYQCZ9DEFboZB0r711xsbVBbeA==",
+      "peerDependencies": {
+        "solid-js": "^1.6.12"
+      }
+    },
     "node_modules/@solid-primitives/storage": {
       "version": "1.3.9",
       "resolved": "https://registry.npmjs.org/@solid-primitives/storage/-/storage-1.3.9.tgz",
@@ -24755,6 +24835,41 @@
         "@sinonjs/commons": "^2.0.0"
       }
     },
+    "@solid-primitives/event-listener": {
+      "version": "2.2.13",
+      "resolved": "https://registry.npmjs.org/@solid-primitives/event-listener/-/event-listener-2.2.13.tgz",
+      "integrity": "sha512-8GtVEq0ECZoa5Klo1jjfGPfwg0zVJ8TNnNkWu8FqRkh0CkhbhCVJAKwjleem9K/qL6zUDfJihLjhqGBTBbb+8w==",
+      "requires": {
+        "@solid-primitives/utils": "^6.2.0"
+      },
+      "dependencies": {
+        "@solid-primitives/utils": {
+          "version": "6.2.0",
+          "resolved": "https://registry.npmjs.org/@solid-primitives/utils/-/utils-6.2.0.tgz",
+          "integrity": "sha512-T62WlLwKkbmicsw/xpwMQyv9MmZRSaVyutXfS5icc9v0cb8qGMUxRxr5LVvZHYQCZ9DEFboZB0r711xsbVBbeA==",
+          "requires": {}
+        }
+      }
+    },
+    "@solid-primitives/media": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/@solid-primitives/media/-/media-2.2.3.tgz",
+      "integrity": "sha512-xhKaTJjH6e65OL706/hA38WWitafbJCm/Zpv7qAn4cy/cgxZ39Cl0bPdYzZhUlkJvTt8YVT0IBcOBLKlJVaPRg==",
+      "requires": {
+        "@solid-primitives/event-listener": "^2.2.13",
+        "@solid-primitives/rootless": "^1.4.1",
+        "@solid-primitives/static-store": "^0.0.4",
+        "@solid-primitives/utils": "^6.2.0"
+      },
+      "dependencies": {
+        "@solid-primitives/utils": {
+          "version": "6.2.0",
+          "resolved": "https://registry.npmjs.org/@solid-primitives/utils/-/utils-6.2.0.tgz",
+          "integrity": "sha512-T62WlLwKkbmicsw/xpwMQyv9MmZRSaVyutXfS5icc9v0cb8qGMUxRxr5LVvZHYQCZ9DEFboZB0r711xsbVBbeA==",
+          "requires": {}
+        }
+      }
+    },
     "@solid-primitives/memo": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/@solid-primitives/memo/-/memo-1.2.4.tgz",
@@ -24783,6 +24898,22 @@
         "@solid-primitives/utils": "^5.5.1"
       }
     },
+    "@solid-primitives/rootless": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/@solid-primitives/rootless/-/rootless-1.4.1.tgz",
+      "integrity": "sha512-h7VBUk8usD76Eh1a4wT17PcGtIRxGPlLuJ4Mf7roCNu46W5cc9DAoz8M6XebuZWVKeUkML/JuPMZQSV0mLo2Fw==",
+      "requires": {
+        "@solid-primitives/utils": "^6.2.0"
+      },
+      "dependencies": {
+        "@solid-primitives/utils": {
+          "version": "6.2.0",
+          "resolved": "https://registry.npmjs.org/@solid-primitives/utils/-/utils-6.2.0.tgz",
+          "integrity": "sha512-T62WlLwKkbmicsw/xpwMQyv9MmZRSaVyutXfS5icc9v0cb8qGMUxRxr5LVvZHYQCZ9DEFboZB0r711xsbVBbeA==",
+          "requires": {}
+        }
+      }
+    },
     "@solid-primitives/scheduled": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/@solid-primitives/scheduled/-/scheduled-1.3.2.tgz",
@@ -24797,6 +24928,22 @@
       "dev": true,
       "requires": {}
     },
+    "@solid-primitives/static-store": {
+      "version": "0.0.4",
+      "resolved": "https://registry.npmjs.org/@solid-primitives/static-store/-/static-store-0.0.4.tgz",
+      "integrity": "sha512-NcLtDNA6H+Z9LmqaUe4SKfMx0YbszIMXEqfV15cB34t5XyEeOM5TihYwsVJ/dpkmpHYzflm0SwAL+P9uwyzvWQ==",
+      "requires": {
+        "@solid-primitives/utils": "^6.2.0"
+      },
+      "dependencies": {
+        "@solid-primitives/utils": {
+          "version": "6.2.0",
+          "resolved": "https://registry.npmjs.org/@solid-primitives/utils/-/utils-6.2.0.tgz",
+          "integrity": "sha512-T62WlLwKkbmicsw/xpwMQyv9MmZRSaVyutXfS5icc9v0cb8qGMUxRxr5LVvZHYQCZ9DEFboZB0r711xsbVBbeA==",
+          "requires": {}
+        }
+      }
+    },
     "@solid-primitives/storage": {
       "version": "1.3.9",
       "resolved": "https://registry.npmjs.org/@solid-primitives/storage/-/storage-1.3.9.tgz",

package.json

@@ -33,6 +33,7 @@
     "@aws-sdk/client-s3": "3.303.0",
     "@aws-sdk/lib-storage": "3.303.0",
     "@hocuspocus/provider": "2.0.6",
+    "@solid-primitives/media": "2.2.3",
     "form-data": "4.0.0",
     "formidable": "2.1.1",
     "i18next": "22.4.15",

public/icons/night-theme.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path
+  d="M6.20869 7.73227C5.22953 7.36499 4.38795 6.70402 3.79906 5.83976C3.2103 4.97565 2.90318 3.95064 2.91979 2.90512C2.93639 1.8597 3.27597 0.844915 3.8919 0C2.82862 0.254038 1.87585 0.844877 1.17594 1.68438C0.475894 2.52388 0.0660276 3.5671 0.00731938 4.6585C-0.0513888 5.74989 0.244296 6.83095 0.850296 7.74073C1.45631 8.65037 2.34006 9.33992 3.36994 9.70637C4.39987 10.073 5.52063 10.0969 6.56523 9.77466C7.60985 9.45247 8.52223 8.80134 9.16667 7.91837C8.1842 8.15404 7.15363 8.08912 6.20869 7.73205V7.73227Z" fill="#fff"/>
+</svg>

public/locales/en/translation.json

@@ -15,6 +15,7 @@
   "Audio": "Audio",
   "Author": "Author",
   "Authors": "Authors",
+  "Autotypograph": "Autotypograph",
   "Back to main page": "Back to main page",
   "Become an author": "Become an author",
   "Bookmarked": "Saved",
@@ -73,7 +74,7 @@
   "Feed settings": "Feed settings",
   "Feedback": "Feedback",
   "Fill email": "Fill email",
-  "Fix typography": "Fix typography",
+  "Fixed": "Fixed",
   "Follow": "Follow",
   "Follow the topic": "Follow the topic",
   "Followers": "Followers",
@@ -132,6 +133,7 @@
   "New only": "New only",
   "New password": "New password",
   "New stories every day and even more!": "New stories and more are waiting for you every day!",
+  "Night mode": "Night mode",
   "No such account, please try to register": "No such account found, please try to register",
   "Nothing here yet": "There's nothing here yet",
   "Nothing is here": "There is nothing here",
@@ -204,6 +206,7 @@
   "Suggest an idea": "Suggest an idea",
   "Support us": "Help the magazine",
   "Terms of use": "Site rules",
+  "Text checking": "Text checking",
   "Thank you": "Thank you",
   "This comment has not yet been rated": "This comment has not yet been rated",
   "This email is already taken. If it's you": "This email is already taken. If it's you",
@@ -280,5 +283,17 @@
   "topics": "topics",
   "user already exist": "user already exists",
   "view": "view",
-  "zine": "zine"
+  "zine": "zine",
+  "back to menu": "back to menu",
+  "bold": "bold",
+  "italic": "italic",
+  "add link": "add link",
+  "header 1": "header 1",
+  "header 2": "header 2",
+  "header 3": "header 3",
+  "marker list": "marker list",
+  "number list": "number list",
+  "delimiter": "delimiter",
+  "cancel_low_caps": "cancel",
+  "repeat": "repeat"
 }

public/locales/ru/translation.json

@@ -17,6 +17,7 @@
   "Audio": "Аудио",
   "Author": "Автор",
   "Authors": "Авторы",
+  "Autotypograph": "Автотипограф",
   "Back to main page": "Вернуться на главную",
   "Become an author": "Стать автором",
   "Bookmarked": "Сохранено",
@@ -76,7 +77,7 @@
   "Feed settings": "Настройки ленты",
   "Feedback": "Обратная связь",
   "Fill email": "Введите почту",
-  "Fix typography": "Исправить типографику",
+  "Fixed": "Все поправлено",
   "Follow": "Подписаться",
   "Follow the topic": "Подписаться на тему",
   "Followers": "Подписчики",
@@ -139,6 +140,7 @@
   "New only": "Только новые",
   "New password": "Новый пароль",
   "New stories every day and even more!": "Каждый день вас ждут новые истории и ещё много всего интересного!",
+  "Night mode": "Ночная тема",
   "No such account, please try to register": "Такой адрес не найден, попробуйте зарегистрироваться",
   "Nothing here yet": "Здесь пока ничего нет",
   "Nothing is here": "Здесь ничего нет",
@@ -217,6 +219,7 @@
   "Suggest an idea": "Предложить идею",
   "Support us": "Помочь журналу",
   "Terms of use": "Правила сайта",
+  "Text checking": "Проверка текста",
   "Thank you": "Благодарности",
   "This comment has not yet been rated": "Этот комментарий еще пока никто не оценил",
   "This email is already taken. If it's you": "Такой email уже зарегистрирован. Если это вы",
@@ -301,5 +304,17 @@
   "topics": "темы",
   "user already exist": "пользователь уже существует",
   "view": "просмотр",
-  "zine": "журнал"
+  "zine": "журнал",
+  "back to menu": "назад в меню",
+  "bold": "жирный",
+  "italic": "курсив",
+  "add link": "добавить ссылку",
+  "header 1": "заголовок 1",
+  "header 2": "заголовок 2",
+  "header 3": "заголовок 3",
+  "marker list": "маркир. список",
+  "number list": "нумер. список",
+  "delimiter": "разделитель",
+  "cancel_low_caps": "отменить",
+  "repeat": "повторить"
 }

public/logo.svg

@@ -1,3 +1,4 @@
 <svg width="175" height="32" viewBox="0 0 175 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M24.51 28.16H19.78V23H5.074V28.16H0.344V18.055H2.881C3.11033 17.7397 3.397 17.2093 3.741 16.464C4.11367 15.69 4.472 14.6437 4.816 13.325C5.18867 12.0063 5.504 10.3723 5.762 8.423C6.02 6.47367 6.149 4.166 6.149 1.5H21.113V18.055H24.51V28.16ZM15.523 18.313V6.23H11.008C10.9507 7.262 10.8503 8.36567 10.707 9.541C10.5637 10.6877 10.3773 11.8057 10.148 12.895C9.94733 13.9843 9.70367 15.002 9.417 15.948C9.13033 16.894 8.815 17.6823 8.471 18.313H15.523ZM42.3382 13.196L42.5532 10.143H42.4242L32.0612 23H27.6752V1.5H33.2652V11.734L33.0072 14.658H33.1792L43.5422 1.5H47.9282V23H42.3382V13.196ZM73.3244 20.936C72.1491 21.8247 70.7731 22.4983 69.1964 22.957C67.6197 23.387 65.9714 23.602 64.2514 23.602C62.3881 23.602 60.7254 23.3297 59.2634 22.785C57.8301 22.2403 56.6117 21.4807 55.6084 20.506C54.6337 19.5027 53.8884 18.2987 53.3724 16.894C52.8564 15.4893 52.5984 13.9413 52.5984 12.25C52.5984 10.444 52.8994 8.83867 53.5014 7.434C54.1034 6.02933 54.9347 4.83967 55.9954 3.865C57.0847 2.89033 58.3604 2.15933 59.8224 1.672C61.2844 1.156 62.8754 0.898 64.5954 0.898C66.2007 0.898 67.7057 1.08433 69.1104 1.457C70.5151 1.82966 71.5901 2.188 72.3354 2.532V10.1H67.6054V6.144C66.7167 5.94333 65.8281 5.843 64.9394 5.843C64.1367 5.843 63.3341 5.972 62.5314 6.23C61.7574 6.45933 61.0551 6.84633 60.4244 7.391C59.8224 7.907 59.3207 8.56633 58.9194 9.369C58.5467 10.1717 58.3604 11.132 58.3604 12.25C58.3604 13.1673 58.5181 14.013 58.8334 14.787C59.1487 15.561 59.5931 16.2347 60.1664 16.808C60.7397 17.3813 61.4421 17.84 62.2734 18.184C63.1334 18.4993 64.0794 18.657 65.1114 18.657C66.7454 18.657 68.0784 18.4277 69.1104 17.969C70.1711 17.5103 70.9594 17.109 71.4754 16.765L73.3244 20.936ZM86.4226 14.529H83.6276V23H78.0376V1.5H83.6276V10.229H85.9066L93.0016 1.5H99.3226L90.7656 11.519L96.0546 18.27H99.8386V23H93.3886L86.4226 14.529ZM112.636 16.937H114.27L118.441 1.5H124.203L118.097 20.893C117.552 22.4983 117.022 23.9603 116.506 25.279C115.99 26.6263 115.388 27.7873 114.7 28.762C114.012 29.7367 113.195 30.482 112.249 30.998C111.331 31.5427 110.199 31.815 108.852 31.815C108.192 31.815 107.562 31.729 106.96 31.557C106.386 31.385 105.856 31.17 105.369 30.912C104.881 30.6827 104.451 30.4247 104.079 30.138C103.706 29.88 103.405 29.6363 103.176 29.407L106.057 25.58C106.429 25.8953 106.874 26.182 107.39 26.44C107.906 26.7267 108.393 26.87 108.852 26.87C109.712 26.87 110.385 26.569 110.873 25.967C111.389 25.365 111.876 24.376 112.335 23H109.282L100.338 1.5H106.401L112.636 16.937ZM126.444 1.5H133.754L134.399 4.08H134.571C136.061 1.95867 138.469 0.898 141.795 0.898C143.113 0.898 144.317 1.113 145.407 1.543C146.525 1.94433 147.471 2.58933 148.245 3.478C149.047 4.36667 149.664 5.48467 150.094 6.832C150.524 8.17933 150.739 9.799 150.739 11.691C150.739 13.5257 150.495 15.1883 150.008 16.679C149.52 18.141 148.818 19.388 147.901 20.42C146.983 21.452 145.865 22.2403 144.547 22.785C143.228 23.3297 141.723 23.602 140.032 23.602C139.143 23.602 138.269 23.5303 137.409 23.387C136.549 23.2723 135.832 23.0717 135.259 22.785V31.6H129.669V6.23H126.444V1.5ZM140.118 5.628C139.028 5.628 138.025 5.90033 137.108 6.445C136.219 6.98967 135.603 7.80667 135.259 8.896V17.84C135.66 18.1553 136.233 18.4133 136.979 18.614C137.753 18.786 138.527 18.872 139.301 18.872C140.103 18.872 140.849 18.743 141.537 18.485C142.225 18.1983 142.827 17.754 143.343 17.152C143.859 16.55 144.26 15.7903 144.547 14.873C144.833 13.9557 144.977 12.852 144.977 11.562C144.977 9.67 144.518 8.208 143.601 7.176C142.683 6.144 141.522 5.628 140.118 5.628ZM174.845 20.936C173.669 21.8247 172.293 22.4983 170.717 22.957C169.14 23.387 167.492 23.602 165.772 23.602C163.908 23.602 162.246 23.3297 160.784 22.785C159.35 22.2403 158.132 21.4807 157.129 20.506C156.154 19.5027 155.409 18.2987 154.893 16.894C154.377 15.4893 154.119 13.9413 154.119 12.25C154.119 10.444 154.42 8.83867 155.022 7.434C155.624 6.02933 156.455 4.83967 157.516 3.865C158.605 2.89033 159.881 2.15933 161.343 1.672C162.805 1.156 164.396 0.898 166.116 0.898C167.721 0.898 169.226 1.08433 170.631 1.457C172.035 1.82966 173.11 2.188 173.856 2.532V10.1H169.126V6.144C168.237 5.94333 167.348 5.843 166.46 5.843C165.657 5.843 164.854 5.972 164.052 6.23C163.278 6.45933 162.575 6.84633 161.945 7.391C161.343 7.907 160.841 8.56633 160.44 9.369C160.067 10.1717 159.881 11.132 159.881 12.25C159.881 13.1673 160.038 14.013 160.354 14.787C160.669 15.561 161.113 16.2347 161.687 16.808C162.26 17.3813 162.962 17.84 163.794 18.184C164.654 18.4993 165.6 18.657 166.632 18.657C168.266 18.657 169.599 18.4277 170.631 17.969C171.691 17.5103 172.48 17.109 172.996 16.765L174.845 20.936Z" fill="black"/>
+<path
+  d="M24.51 28.16H19.78V23H5.074V28.16H0.344V18.055H2.881C3.11033 17.7397 3.397 17.2093 3.741 16.464C4.11367 15.69 4.472 14.6437 4.816 13.325C5.18867 12.0063 5.504 10.3723 5.762 8.423C6.02 6.47367 6.149 4.166 6.149 1.5H21.113V18.055H24.51V28.16ZM15.523 18.313V6.23H11.008C10.9507 7.262 10.8503 8.36567 10.707 9.541C10.5637 10.6877 10.3773 11.8057 10.148 12.895C9.94733 13.9843 9.70367 15.002 9.417 15.948C9.13033 16.894 8.815 17.6823 8.471 18.313H15.523ZM42.3382 13.196L42.5532 10.143H42.4242L32.0612 23H27.6752V1.5H33.2652V11.734L33.0072 14.658H33.1792L43.5422 1.5H47.9282V23H42.3382V13.196ZM73.3244 20.936C72.1491 21.8247 70.7731 22.4983 69.1964 22.957C67.6197 23.387 65.9714 23.602 64.2514 23.602C62.3881 23.602 60.7254 23.3297 59.2634 22.785C57.8301 22.2403 56.6117 21.4807 55.6084 20.506C54.6337 19.5027 53.8884 18.2987 53.3724 16.894C52.8564 15.4893 52.5984 13.9413 52.5984 12.25C52.5984 10.444 52.8994 8.83867 53.5014 7.434C54.1034 6.02933 54.9347 4.83967 55.9954 3.865C57.0847 2.89033 58.3604 2.15933 59.8224 1.672C61.2844 1.156 62.8754 0.898 64.5954 0.898C66.2007 0.898 67.7057 1.08433 69.1104 1.457C70.5151 1.82966 71.5901 2.188 72.3354 2.532V10.1H67.6054V6.144C66.7167 5.94333 65.8281 5.843 64.9394 5.843C64.1367 5.843 63.3341 5.972 62.5314 6.23C61.7574 6.45933 61.0551 6.84633 60.4244 7.391C59.8224 7.907 59.3207 8.56633 58.9194 9.369C58.5467 10.1717 58.3604 11.132 58.3604 12.25C58.3604 13.1673 58.5181 14.013 58.8334 14.787C59.1487 15.561 59.5931 16.2347 60.1664 16.808C60.7397 17.3813 61.4421 17.84 62.2734 18.184C63.1334 18.4993 64.0794 18.657 65.1114 18.657C66.7454 18.657 68.0784 18.4277 69.1104 17.969C70.1711 17.5103 70.9594 17.109 71.4754 16.765L73.3244 20.936ZM86.4226 14.529H83.6276V23H78.0376V1.5H83.6276V10.229H85.9066L93.0016 1.5H99.3226L90.7656 11.519L96.0546 18.27H99.8386V23H93.3886L86.4226 14.529ZM112.636 16.937H114.27L118.441 1.5H124.203L118.097 20.893C117.552 22.4983 117.022 23.9603 116.506 25.279C115.99 26.6263 115.388 27.7873 114.7 28.762C114.012 29.7367 113.195 30.482 112.249 30.998C111.331 31.5427 110.199 31.815 108.852 31.815C108.192 31.815 107.562 31.729 106.96 31.557C106.386 31.385 105.856 31.17 105.369 30.912C104.881 30.6827 104.451 30.4247 104.079 30.138C103.706 29.88 103.405 29.6363 103.176 29.407L106.057 25.58C106.429 25.8953 106.874 26.182 107.39 26.44C107.906 26.7267 108.393 26.87 108.852 26.87C109.712 26.87 110.385 26.569 110.873 25.967C111.389 25.365 111.876 24.376 112.335 23H109.282L100.338 1.5H106.401L112.636 16.937ZM126.444 1.5H133.754L134.399 4.08H134.571C136.061 1.95867 138.469 0.898 141.795 0.898C143.113 0.898 144.317 1.113 145.407 1.543C146.525 1.94433 147.471 2.58933 148.245 3.478C149.047 4.36667 149.664 5.48467 150.094 6.832C150.524 8.17933 150.739 9.799 150.739 11.691C150.739 13.5257 150.495 15.1883 150.008 16.679C149.52 18.141 148.818 19.388 147.901 20.42C146.983 21.452 145.865 22.2403 144.547 22.785C143.228 23.3297 141.723 23.602 140.032 23.602C139.143 23.602 138.269 23.5303 137.409 23.387C136.549 23.2723 135.832 23.0717 135.259 22.785V31.6H129.669V6.23H126.444V1.5ZM140.118 5.628C139.028 5.628 138.025 5.90033 137.108 6.445C136.219 6.98967 135.603 7.80667 135.259 8.896V17.84C135.66 18.1553 136.233 18.4133 136.979 18.614C137.753 18.786 138.527 18.872 139.301 18.872C140.103 18.872 140.849 18.743 141.537 18.485C142.225 18.1983 142.827 17.754 143.343 17.152C143.859 16.55 144.26 15.7903 144.547 14.873C144.833 13.9557 144.977 12.852 144.977 11.562C144.977 9.67 144.518 8.208 143.601 7.176C142.683 6.144 141.522 5.628 140.118 5.628ZM174.845 20.936C173.669 21.8247 172.293 22.4983 170.717 22.957C169.14 23.387 167.492 23.602 165.772 23.602C163.908 23.602 162.246 23.3297 160.784 22.785C159.35 22.2403 158.132 21.4807 157.129 20.506C156.154 19.5027 155.409 18.2987 154.893 16.894C154.377 15.4893 154.119 13.9413 154.119 12.25C154.119 10.444 154.42 8.83867 155.022 7.434C155.624 6.02933 156.455 4.83967 157.516 3.865C158.605 2.89033 159.881 2.15933 161.343 1.672C162.805 1.156 164.396 0.898 166.116 0.898C167.721 0.898 169.226 1.08433 170.631 1.457C172.035 1.82966 173.11 2.188 173.856 2.532V10.1H169.126V6.144C168.237 5.94333 167.348 5.843 166.46 5.843C165.657 5.843 164.854 5.972 164.052 6.23C163.278 6.45933 162.575 6.84633 161.945 7.391C161.343 7.907 160.841 8.56633 160.44 9.369C160.067 10.1717 159.881 11.132 159.881 12.25C159.881 13.1673 160.038 14.013 160.354 14.787C160.669 15.561 161.113 16.2347 161.687 16.808C162.26 17.3813 162.962 17.84 163.794 18.184C164.654 18.4993 165.6 18.657 166.632 18.657C168.266 18.657 169.599 18.4277 170.631 17.969C171.691 17.5103 172.48 17.109 172.996 16.765L174.845 20.936Z" fill="currentColor"/>
 </svg>

src/components/Article/FullArticle.tsx

@@ -1,17 +1,7 @@
 import { capitalize, formatDate } from '../../utils'
 import { Icon } from '../_shared/Icon'
 import { AuthorCard } from '../Author/AuthorCard'
-import {
+import { createEffect, createMemo, createSignal, For, Match, onMount, Show, Switch } from 'solid-js'
-  createEffect,
-  createMemo,
-  createSignal,
-  For,
-  Match,
-  onCleanup,
-  onMount,
-  Show,
-  Switch
-} from 'solid-js'
 import type { Author, Shout } from '../../graphql/types.gen'
 import MD from './MD'
 import { SharePopup } from './SharePopup'

src/components/Discours/Footer.module.scss

@@ -1,6 +1,5 @@
 .discoursFooter {
   @include font-size(1.7rem);
-
   background: #000;
   color: rgb(255 255 255 / 64%);
   padding: 2.4rem 0 4.2rem;
@@ -22,10 +21,11 @@
 
     a {
       color: rgb(255 255 255 / 64%);
-      transition: color 0.3s;
+      transition: color 0.3s, background-color 0.3s;
 
       &:hover {
-        color: #fff;
+        background: #fff;
+        color: #000;
       }
     }
   }
@@ -58,7 +58,8 @@
     color: rgb(255 255 255 / 70%);
 
     &:hover {
-      color: #fff;
+      background: #fff;
+      color: #000;
     }
   }
 }

src/components/Editor/Panel/Panel.module.scss

@@ -1,10 +1,7 @@
 .Panel {
   background: #1f1f1f;
   color: rgb(255 255 255 / 35%);
-  display: flex;
-  flex-direction: column;
   font-size: 1.7rem;
-  justify-content: flex-start;
   height: 100%;
   line-height: 1.4;
   padding: $grid-gutter-width calc($grid-gutter-width / 2);
@@ -20,7 +17,9 @@
   }
 
   .actionsHolder {
-    padding: 0 calc($grid-gutter-width / 2);
+    height: 100%;
+    display: flex;
+    flex-direction: column;
 
     &.scrolled {
       overflow-y: auto;
@@ -61,6 +60,7 @@
     text-decoration: none;
     border-bottom: none;
     color: rgb(255 255 255 / 35%);
+    font-size: inherit;
     font-weight: normal !important;
 
     &:hover {
@@ -95,4 +95,41 @@
       vertical-align: bottom;
     }
   }
+
+  .typograph {
+    align-items: baseline;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+  }
+
+  .typographStatus {
+    @include font-size(1.2rem);
+  }
+
+  .typographStatusSuccess {
+    color: #28d353;
+  }
+
+  .backToMenuControl {
+    color: rgb(255 255 255 / 0.7);
+  }
+
+  .shortcutList {
+    color: #fff;
+  }
+
+  .shortcut {
+    margin-left: 1em;
+  }
+
+  .shortcutButton {
+    border: 1px solid;
+    border-bottom-width: 2px;
+    border-radius: 2px;
+    display: inline-block;
+    font-style: italic;
+    margin-right: 0.5em;
+    padding: 0.1em 0.4em;
+  }
 }

src/components/Editor/Panel/Panel.tsx

@@ -10,6 +10,8 @@ import { getPagePath } from '@nanostores/router'
 import { router } from '../../../stores/router'
 import { useEditorHTML } from 'solid-tiptap'
 import Typograf from 'typograf'
+import { createSignal, Show } from 'solid-js'
+import { DarkModeToggle } from '../../_shared/DarkModeToggle'
 
 const typograf = new Typograf({ locale: ['ru', 'en-US'] })
 
@@ -30,6 +32,9 @@ export const Panel = (props: Props) => {
     current: null
   }
 
+  const [isShortcutsVisible, setIsShortcutsVisible] = createSignal(false)
+  const [isTypographyFixed, setIsTypographyFixed] = createSignal(false)
+
   useOutsideClickHandler({
     containerRef,
     predicate: () => isEditorPanelVisible(),
@@ -53,6 +58,7 @@ export const Panel = (props: Props) => {
   const handleFixTypographyClick = () => {
     const html = useEditorHTML(() => editorRef.current())
     editorRef.current().commands.setContent(typograf.execute(html()))
+    setIsTypographyFixed(true)
   }
 
   return (
@@ -60,15 +66,13 @@ export const Panel = (props: Props) => {
       ref={(el) => (containerRef.current = el)}
       class={clsx('col-md-6', styles.Panel, { [styles.hidden]: !isEditorPanelVisible() })}
     >
-      <div class={styles.actionsHolder}>
       <Button
         value={<Icon name="close" />}
         variant={'inline'}
         class={styles.close}
         onClick={() => toggleEditorPanel()}
       />
-      </div>
+      <div class={clsx(styles.actionsHolder, styles.scrolled, { hidden: isShortcutsVisible() })}>
-      <div class={clsx(styles.actionsHolder, styles.scrolled)}>
         <section>
           <p>
             <span class={styles.link} onClick={handlePublishClick}>
@@ -82,31 +86,6 @@ export const Panel = (props: Props) => {
           </p>
         </section>
 
-        <section>
-          <p>
-            <a class={clsx(styles.link, styles.linkWithIcon)}>
-              <Icon name="eye" class={styles.icon} />
-              {t('Preview')}
-            </a>
-          </p>
-          <p>
-            <a
-              class={clsx(styles.link, styles.linkWithIcon)}
-              onClick={() => toggleEditorPanel()}
-              href={getPagePath(router, 'edit', { shoutId: props.shoutId.toString() })}
-            >
-              <Icon name="pencil-outline" class={styles.icon} />
-              {t('Editing')}
-            </a>
-          </p>
-          <p>
-            <a class={clsx(styles.link, styles.linkWithIcon)}>
-              <Icon name="feed-discussion" class={styles.icon} />
-              {t('FAQ')}
-            </a>
-          </p>
-        </section>
-
         <section>
           <p>
             <a class={styles.link}>{t('Invite co-authors')}</a>
@@ -121,13 +100,26 @@ export const Panel = (props: Props) => {
             </a>
           </p>
           <p>
+            <span class={styles.link}>{t('Corrections history')}</span>
+          </p>
+        </section>
+
+        <section>
+          <div class={styles.typograph}>
+            <div>
               <span class={styles.link} onClick={handleFixTypographyClick}>
-              {t('Fix typography')}
+                {t('Autotypograph')}
               </span>
-          </p>
+            </div>
-          <p>
+            <Show when={isTypographyFixed()}>
-            <a class={styles.link}>{t('Corrections history')}</a>
+              <div class={clsx(styles.typographStatus, styles.typographStatusSuccess)}>{t('Fixed')}</div>
-          </p>
+            </Show>
+          </div>
+          <p>{t('Text checking')}</p>
+        </section>
+
+        <section>
+          <DarkModeToggle />
         </section>
 
         <section>
@@ -137,9 +129,9 @@ export const Panel = (props: Props) => {
             </a>
           </p>
           <p>
-            <a class={styles.link} href="#">
+            <button class={styles.link} onClick={() => setIsShortcutsVisible(true)}>
               {t('Hotkeys')}
-            </a>
+            </button>
           </p>
           <p>
             <a class={styles.link} href="#">
@@ -160,6 +152,107 @@ export const Panel = (props: Props) => {
           {/*</div>*/}
         </div>
       </div>
+
+      <div class={clsx(styles.actionsHolder, styles.scrolled, { hidden: !isShortcutsVisible() })}>
+        <p>
+          <button class={styles.backToMenuControl} onClick={() => setIsShortcutsVisible(false)}>
+            {t('back to menu"')}
+          </button>
+        </p>
+
+        <section class={styles.shortcutList}>
+          <p>
+            {t('bold')}
+            <span class={styles.shortcut}>
+              <span class={styles.shortcutButton}>Ctrl</span>
+              <span class={styles.shortcutButton}>B</span>
+            </span>
+          </p>
+          <p>
+            {t('italic')}
+            <span class={styles.shortcut}>
+              <span class={styles.shortcutButton}>Ctrl</span>
+              <span class={styles.shortcutButton}>I</span>
+            </span>
+          </p>
+          <p>
+            {t('add link')}
+            <span class={styles.shortcut}>
+              <span class={styles.shortcutButton}>Ctrl</span>
+              <span class={styles.shortcutButton}>K</span>
+            </span>
+          </p>
+        </section>
+
+        <section class={styles.shortcutList}>
+          <p>
+            {t('header 1')}
+            <span class={styles.shortcut}>
+              <span class={styles.shortcutButton}>Ctrl</span>
+              <span class={styles.shortcutButton}>Alt</span>
+              <span class={styles.shortcutButton}>1</span>
+            </span>
+          </p>
+          <p>
+            {t('header 2')}
+            <span class={styles.shortcut}>
+              <span class={styles.shortcutButton}>Ctrl</span>
+              <span class={styles.shortcutButton}>Alt</span>
+              <span class={styles.shortcutButton}>2</span>
+            </span>
+          </p>
+          <p>
+            {t('header 3')}
+            <span class={styles.shortcut}>
+              <span class={styles.shortcutButton}>Ctrl</span>
+              <span class={styles.shortcutButton}>Alt</span>
+              <span class={styles.shortcutButton}>3</span>
+            </span>
+          </p>
+        </section>
+
+        <section class={styles.shortcutList}>
+          <p>
+            {t('marker list')}
+            <span class={styles.shortcut}>
+              <span class={styles.shortcutButton}>*</span>
+              <span class={styles.shortcutButton}>Space</span>
+            </span>
+          </p>
+          <p>
+            {t('number list')}
+            <span class={styles.shortcut}>
+              <span class={styles.shortcutButton}>1</span>
+              <span class={styles.shortcutButton}>Space</span>
+            </span>
+          </p>
+          <p>
+            {t('delimiter')}
+            <span class={styles.shortcut}>
+              <span class={styles.shortcutButton}>***</span>
+              <span class={styles.shortcutButton}>Enter</span>
+            </span>
+          </p>
+        </section>
+
+        <section class={styles.shortcutList}>
+          <p>
+            {t('cancel_low_caps')}
+            <span class={styles.shortcut}>
+              <span class={styles.shortcutButton}>Ctrl</span>
+              <span class={styles.shortcutButton}>Z</span>
+            </span>
+          </p>
+          <p>
+            {t('repeat')}
+            <span class={styles.shortcut}>
+              <span class={styles.shortcutButton}>Ctrl</span>
+              <span class={styles.shortcutButton}>Shift</span>
+              <span class={styles.shortcutButton}>Z</span>
+            </span>
+          </p>
+        </section>
+      </div>
     </aside>
   )
 }

src/components/Editor/TextBubbleMenu/TextBubbleMenu.module.scss

@@ -1,5 +1,5 @@
 .TextBubbleMenu {
-  background: #fff;
+  background: var(--editor-bubble-menu-background);
   box-shadow: 0 4px 10px rgba(#000, 0.25);
 
   .bubbleMenuButton {
@@ -21,6 +21,10 @@
       border-radius: 50%;
       background: #f6e3a1;
     }
+
+    img {
+      filter: var(--icon-filter);
+    }
   }
 
   .bubbleMenuButtonActive {
@@ -50,8 +54,8 @@
       left: 50%;
       transform: translateX(-50%);
       box-shadow: 0 4px 10px rgb(0 0 0 / 25%);
-      background: #fff;
+      background: var(--editor-bubble-menu-background);
-      color: #898c94;
+      color: var(--default-color);
 
       & > header {
         font-size: 10px;

src/components/Nav/Header.module.scss

@@ -1,5 +1,6 @@
 .mainHeader {
-  background: #fff;
+  background: var(--background-color);
+  color: var(--default-color);
   font-size: 1.4rem;
   margin-bottom: 2.2rem;
   position: absolute;
@@ -42,7 +43,8 @@
 
 .headerInner {
   align-items: center;
-  background: #fff;
+  background: var(--background-color);
+  color: var(--default-color);
   flex-wrap: nowrap !important;
   justify-content: flex-start;
   margin: 0;
@@ -63,6 +65,7 @@
 
 .mainLogo {
   align-items: center;
+  color: var(--default-color);
   display: inline-flex;
   height: 56px;
   padding: 0;
@@ -81,20 +84,20 @@
     transition: height 0.2s;
     vertical-align: middle;
     width: 100px;
+
+    [data-editor-dark-mode='true'] & {
+      filter: invert(1);
+    }
   }
 
   a,
   a:link,
   a:visited {
     border-bottom: none;
-    color: #000;
+    color: var(--link-color);
 
     &:hover {
       background: none;
-
-      img {
-        filter: none;
-      }
     }
   }
 }
@@ -142,13 +145,13 @@
   }
 
   @include media-breakpoint-down(md) {
-    background: #fff;
+    background: var(--background-color);
     bottom: 0;
     display: none;
     font-size: 2.6rem;
     font-weight: bold;
     left: 0;
-    padding: $container-padding-x;
+    padding: $container-padding-x !important;
     position: fixed;
     top: 74px;
     width: 100%;
@@ -160,16 +163,19 @@
   }
 
   @include media-breakpoint-down(sm) {
-    padding: divide($container-padding-x, 2);
+    padding: divide($container-padding-x, 2) !important;
   }
 
-  .fixed & {
+  @include media-breakpoint-down(md) {
-    display: inline-flex;
+    :global(.fixed) & {
+      font-size: 2.2rem !important;
 
-    @include media-breakpoint-down(lg) {
+      &,
+      li {
         display: block !important;
       }
     }
+  }
 }
 
 .headerWithTitle.headerScrolledBottom {
@@ -196,7 +202,6 @@
 }
 
 .burger {
-  background: #fff;
   cursor: pointer;
   height: 1.8rem;
   display: inline-block;
@@ -207,7 +212,7 @@
   > div,
   &::after,
   &::before {
-    background: #000;
+    background: var(--link-color);
     content: '';
     display: block;
     height: 2px;
@@ -412,21 +417,21 @@
       background: none;
 
       &::before {
-        background-color: #000;
+        background-color: var(--default-color);
       }
 
       img {
-        filter: invert(1);
+        filter: var(--icon-filter-hover);
       }
     }
 
     img {
-      filter: invert(0);
+      filter: var(--icon-filter);
       transition: filter 0.3s;
     }
 
     &::before {
-      background-color: #fff;
+      background-color: var(--background-color);
       border-radius: 100%;
       content: '';
       height: 100%;
@@ -459,7 +464,7 @@
 }
 
 .userControlItemVerbose {
-  margin-left: 0.5em;
+  margin-left: 1.2em !important;
 
   &:global(.loginbtn) {
     .icon {
@@ -475,6 +480,7 @@
   }
 
   @include media-breakpoint-up(lg) {
+    margin-left: 0.5em !important;
     margin-right: 0;
     width: auto;
 
@@ -483,7 +489,8 @@
     }
 
     .textLabel {
-      padding: 0 1.2rem;
+      color: var(--link-color);
+      padding: 0;
       display: inline;
       position: relative;
       z-index: 1;
@@ -495,9 +502,17 @@
     border-radius: 1.2em !important;
   }
 
+  button:hover,
   a:hover {
+    background-color: var(--link-hover-background);
+    color: var(--link-hover-color);
+
     .icon {
       filter: invert(0);
     }
+
+    .textLabel {
+      color: var(--link-hover-color);
+    }
   }
 }

src/components/Nav/HeaderAuth.tsx

@@ -2,7 +2,7 @@ import styles from './Header.module.scss'
 import { clsx } from 'clsx'
 import { router, useRouter } from '../../stores/router'
 import { Icon } from '../_shared/Icon'
-import { createEffect, createMemo, createSignal, onCleanup, onMount, Show } from 'solid-js'
+import { createMemo, createSignal, onCleanup, onMount, Show } from 'solid-js'
 import Notifications from './Notifications'
 import { ProfilePopup } from './ProfilePopup'
 import Userpic from '../Author/Userpic'

src/components/Nav/Snackbar.module.scss

@@ -1,6 +1,6 @@
 .snackbar {
   min-height: 2px;
-  background-color: #141414;
+  background-color: var(--default-color);
   color: #fff;
   transition: background-color 0.3s;
 

src/components/_shared/Button/Button.module.scss

@@ -61,18 +61,18 @@
 
     &:hover,
     &:active {
-      background: #000;
+      background: var(--link-color);
-      border-color: #000;
+      border-color: var(--link-color);
-      color: #fff;
+      color: var(--link-hover-color);
 
       :global(.icon) {
-        filter: invert(1);
+        filter: var(--icon-filter-hover);
       }
     }
 
     :global(.icon) {
       margin: 0 -0.5em;
-      filter: invert(0);
+      filter: var(--icon-filter);
       transition: filter 0.3s;
     }
   }

src/components/_shared/DarkModeToggle/DarkModeToggle.module.scss

@@ -0,0 +1,57 @@
+.DarkModeToggle {
+  .switcher {
+    background: #000;
+    border-radius: 2em;
+    height: 2.8rem;
+    position: relative;
+    width: 4.6rem;
+
+    &:before {
+      background: #fff;
+      border-radius: 100%;
+      content: '';
+      height: 1.6rem;
+      left: 0.6rem;
+      position: absolute;
+      top: 0.6rem;
+      transition: left 0.3s;
+      width: 1.6rem;
+      z-index: 1;
+    }
+
+    .icon {
+      filter: none;
+      height: 1rem;
+      position: absolute;
+      right: 0.5rem;
+      top: 0.9rem;
+      width: auto;
+    }
+  }
+
+  input {
+    opacity: 0;
+    position: absolute;
+    z-index: -1;
+
+    & + label {
+      cursor: pointer;
+      display: flex;
+      justify-content: space-between;
+      padding: 0;
+      position: relative;
+
+      &:before {
+        display: none;
+      }
+    }
+
+    &:checked + label {
+      .switcher {
+        &:before {
+          left: 2.4rem;
+        }
+      }
+    }
+  }
+}

src/components/_shared/DarkModeToggle/DarkModeToggle.tsx

@@ -0,0 +1,64 @@
+import { clsx } from 'clsx'
+import styles from './DarkModeToggle.module.scss'
+import { Icon } from '../Icon'
+import { useLocalize } from '../../../context/localize'
+import { createEffect, createSignal, onCleanup, onMount } from 'solid-js'
+import { createPrefersDark } from '@solid-primitives/media'
+
+type Props = {
+  class?: string
+}
+
+const editorDarkModeSelected = localStorage.getItem('editorDarkMode')
+const editorDarkModeAttr = document.documentElement.getAttribute('editorDarkMode')
+
+export const DarkModeToggle = (props: Props) => {
+  const { t } = useLocalize()
+  const prefersDark = createPrefersDark()
+  const [editorDarkMode, setEditorDarkMode] = createSignal(false)
+
+  onMount(() => {
+    if (editorDarkModeSelected === 'true') {
+      setEditorDarkMode(true)
+      document.documentElement.dataset.editorDarkMode = 'true'
+    } else if (editorDarkModeSelected === 'false') {
+      setEditorDarkMode(false)
+      document.documentElement.dataset.editorDarkMode = 'false'
+    }
+
+    if (!editorDarkModeAttr && !editorDarkModeSelected) {
+      setEditorDarkMode(prefersDark())
+      localStorage.setItem('editorDarkMode', prefersDark() ? 'true' : 'false')
+      document.documentElement.dataset.editorDarkMode = prefersDark() ? 'true' : 'false'
+    }
+
+    onCleanup(() => {
+      setEditorDarkMode(false)
+      delete document.documentElement.dataset.editorDarkMode
+    })
+  })
+
+  const handleSwitchTheme = () => {
+    setEditorDarkMode(!editorDarkMode())
+    localStorage.setItem('editorDarkMode', editorDarkMode() ? 'true' : 'false')
+    document.documentElement.dataset.editorDarkMode = editorDarkMode() ? 'true' : 'false'
+  }
+
+  return (
+    <div class={clsx(styles.DarkModeToggle, props.class)}>
+      <input
+        type="checkbox"
+        id="theme-switcher"
+        value="1"
+        checked={editorDarkMode()}
+        onClick={handleSwitchTheme}
+      />
+      <label for="theme-switcher">
+        {t('Night mode')}
+        <div class={styles.switcher}>
+          <Icon name="night-theme" class={styles.icon} />
+        </div>
+      </label>
+    </div>
+  )
+}

src/components/_shared/DarkModeToggle/index.ts

@@ -0,0 +1 @@
+export { DarkModeToggle } from './DarkModeToggle'

src/components/_shared/GrowingTextarea/GrowingTextarea.module.scss

@@ -14,8 +14,10 @@
     }
 
     .textInput {
-      margin-bottom: 0;
+      background: var(--background-color);
       border: none;
+      color: var(--default-color);
+      margin-bottom: 0;
       resize: none;
       overflow: hidden;
 
@@ -45,6 +47,7 @@
   }
 
   .maxLength {
+    color: #000;
     opacity: 1;
     position: absolute;
     right: 0.6rem;

src/components/_shared/GrowingTextarea/GrowingTextarea.tsx

@@ -44,7 +44,7 @@ export const GrowingTextarea = (props: Props) => {
           onBlur={() => setIsFocused(false)}
         />
       </div>
-      <Show when={props.maxLength && value()}>
+      <Show when={props.maxLength && value() && isFocused()}>
         <div
           class={clsx(styles.maxLength, {
             [styles.visible]: isFocused(),

src/components/_shared/Popover/Popover.tsx

@@ -1,4 +1,4 @@
-import { createEffect, createSignal, JSX, JSXElement, onMount, Show } from 'solid-js'
+import { createSignal, JSX, onMount, Show } from 'solid-js'
 import usePopper from 'solid-popper'
 import styles from './Popover.module.scss'
 

src/components/_shared/Popup/Popup.module.scss

@@ -7,8 +7,8 @@
 }
 
 .popup {
-  background: #fff;
+  background: var(--background-color);
-  color: #000;
+  color: var(--default-color);
   cursor: default;
   min-width: 144px;
   opacity: 1;

src/styles/app.scss

@@ -10,12 +10,32 @@
 :root {
   --background-color: #fff;
   --default-color: #121416;
-  --link-color: #543fd7;
+  --link-color: #000;
+  --link-hover-color: #fff;
+  --link-hover-background: #000;
   --secondary-color: #85878a;
   --danger-color: #fc6847;
   --lightgray-color: rgb(84 16 17 / 6%);
   --font: -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, oxygen, ubuntu, cantarell, 'Open Sans',
     'Helvetica Neue', sans-serif;
+  --selection-background: #000;
+  --selection-color: #fff;
+  --icon-filter: invert(0);
+  --icon-filter-hover: invert(1);
+  --editor-bubble-menu-background: #fff;
+}
+
+[data-editor-dark-mode='true'] {
+  --background-color: #121416;
+  --default-color: #fff;
+  --link-color: #fff;
+  --link-hover-color: #000;
+  --link-hover-background: #fff;
+  --selection-background: #eee;
+  --selection-color: #000;
+  --icon-filter: invert(1);
+  --icon-filter-hover: invert(0);
+  --editor-bubble-menu-background: #444;
 }
 
 * {
@@ -23,8 +43,8 @@
 }
 
 ::selection {
-  background: #000;
+  background: var(--selection-background);
-  color: #fff;
+  color: var(--selection-color);
 }
 
 html {
@@ -37,6 +57,8 @@ html {
 }
 
 body {
+  background: var(--background-color);
+  color: var(--default-color);
   font-family: Muller, Arial, Helvetica, sans-serif;
   font-size: 2rem;
   line-height: 1.6;
@@ -161,13 +183,13 @@ a:link {
 }
 
 a {
-  color: #000;
+  color: var(--link-color);
   padding-bottom: 0.1em;
   transition: color 0.2s, background-color 0.2s;
 
   &:hover {
-    background: #000;
+    background: var(--link-hover-background);
-    color: #fff;
+    color: var(--link-hover-color);
   }
 }
 
@@ -568,13 +590,13 @@ figure {
   a,
   button {
     border-bottom: 2px solid #fff;
-    color: #000;
+    color: var(--link-color);
     cursor: pointer;
     font-weight: inherit;
 
     &:hover {
-      background: #000;
+      background: var(--link-hover-background);
-      color: #fff;
+      color: var(--link-hover-color);
     }
   }