diff --git a/frontend/.stylelintrc.js b/frontend/.stylelintrc.js
index 3ca09a25cd..279d95e31c 100644
--- a/frontend/.stylelintrc.js
+++ b/frontend/.stylelintrc.js
@@ -1,5 +1,7 @@
+const path = require('path');
 module.exports = {
   extends: ['stylelint-config-standard', 'stylelint-config-prettier'],
+  plugins: ['stylelint-value-no-unknown-custom-properties', '@mavrin/stylelint-declaration-use-css-custom-properties'],
   rules: {
     'max-empty-lines': 1,
     'rule-empty-line-before': [
@@ -9,5 +11,16 @@ module.exports = {
         ignore: ['after-comment'],
       },
     ],
+    'mavrin/stylelint-declaration-use-css-custom-properties': {
+      cssDefinitions: ['color'],
+      ignoreProperties: ['/^\\$/'],
+      ignoreValues: ['/\\$/', 'transparent', '-webkit-focus-ring-color', 'currentColor'],
+    },
+    'csstools/value-no-unknown-custom-properties': [
+      true,
+      {
+        importFrom: path.resolve(__dirname, './app/custom-properties.css'),
+      },
+    ],
   },
 };
diff --git a/frontend/app/components/auth-panel/__email-login-form/auth-panel__email-login-form.scss b/frontend/app/components/auth-panel/__email-login-form/auth-panel__email-login-form.scss
index eff516cf13..1ed6fa6290 100644
--- a/frontend/app/components/auth-panel/__email-login-form/auth-panel__email-login-form.scss
+++ b/frontend/app/components/auth-panel/__email-login-form/auth-panel__email-login-form.scss
@@ -13,7 +13,7 @@
 
 .auth-panel-email-login-form__token-input {
   resize: vertical;
-  border: 1px solid #c4c4c4;
+  border: 1px solid var(--color31);
   padding: 4px;
   font-family: inherit;
   font-size: 0.8em;
@@ -21,8 +21,8 @@
   line-height: 1.5;
 
   &:focus {
-    box-shadow: 0 0 0 2px rgba(37, 156, 154, 0.4);
-    border-color: #259c9a;
+    box-shadow: 0 0 0 2px var(--color47);
+    border-color: var(--color15);
     outline: none;
   }
 }
@@ -51,11 +51,11 @@
 }
 
 .auth-panel-email-login-form_theme_dark .auth-panel-email-login-form__error {
-  background: #672323;
-  color: #f98989;
+  background: var(--color28);
+  color: var(--color27);
 }
 
 .auth-panel-email-login-form_theme_light .auth-panel-email-login-form__error {
-  background: #ffd7d7;
-  color: #9a0000;
+  background: var(--color26);
+  color: var(--color25);
 }
diff --git a/frontend/app/components/auth-panel/_theme/_dark/auth-panel_theme_dark.scss b/frontend/app/components/auth-panel/_theme/_dark/auth-panel_theme_dark.scss
index 69f97941c5..54f008f12a 100644
--- a/frontend/app/components/auth-panel/_theme/_dark/auth-panel_theme_dark.scss
+++ b/frontend/app/components/auth-panel/_theme/_dark/auth-panel_theme_dark.scss
@@ -1,5 +1,5 @@
 .auth-panel_theme_dark {
   .auth-panel__user-id {
-    color: #eee;
+    color: var(--color5);
   }
 }
diff --git a/frontend/app/components/auth-panel/_theme/_light/auth-panel_theme_light.scss b/frontend/app/components/auth-panel/_theme/_light/auth-panel_theme_light.scss
index d73c59b852..5258740bbf 100644
--- a/frontend/app/components/auth-panel/_theme/_light/auth-panel_theme_light.scss
+++ b/frontend/app/components/auth-panel/_theme/_light/auth-panel_theme_light.scss
@@ -1,5 +1,5 @@
 .auth-panel_theme_light {
   .auth-panel__user-id {
-    color: #888;
+    color: var(--color13);
   }
 }
diff --git a/frontend/app/components/avatar-icon/_default/avatar-icon_default.scss b/frontend/app/components/avatar-icon/_default/avatar-icon_default.scss
index a781240e45..8f6525eadd 100644
--- a/frontend/app/components/avatar-icon/_default/avatar-icon_default.scss
+++ b/frontend/app/components/avatar-icon/_default/avatar-icon_default.scss
@@ -1,3 +1,3 @@
 .avatar-icon_default {
-  border: 1px solid #9cdddb;
+  border: 1px solid var(--color40);
 }
diff --git a/frontend/app/components/button/_kind/_link/button_kind_link.scss b/frontend/app/components/button/_kind/_link/button_kind_link.scss
index 829729f8e0..efc59116d5 100644
--- a/frontend/app/components/button/_kind/_link/button_kind_link.scss
+++ b/frontend/app/components/button/_kind/_link/button_kind_link.scss
@@ -1,14 +1,14 @@
 .button_kind_link {
   background: transparent;
   font-weight: bold;
-  color: #0aa;
+  color: var(--color9);
 
   &:hover {
-    color: #06c5c5;
+    color: var(--color33);
   }
 
   &:disabled,
   &:hover:disabled {
-    color: #0aa;
+    color: var(--color9);
   }
 }
diff --git a/frontend/app/components/button/_kind/_primary/button_kind_primary.scss b/frontend/app/components/button/_kind/_primary/button_kind_primary.scss
index 87c539f512..d8e4efbffc 100644
--- a/frontend/app/components/button/_kind/_primary/button_kind_primary.scss
+++ b/frontend/app/components/button/_kind/_primary/button_kind_primary.scss
@@ -1,12 +1,12 @@
 .button_kind_primary {
-  background: #259c9a;
-  color: #fff;
+  background: var(--color15);
+  color: var(--color6);
 
   &:hover {
-    background: #06c5c5;
+    background: var(--color33);
   }
 
   &:hover:disabled {
-    background: #259c9a;
+    background: var(--color15);
   }
 }
diff --git a/frontend/app/components/button/_kind/_secondary/button_kind_secondary.scss b/frontend/app/components/button/_kind/_secondary/button_kind_secondary.scss
index b46c2c4ddd..902122a701 100644
--- a/frontend/app/components/button/_kind/_secondary/button_kind_secondary.scss
+++ b/frontend/app/components/button/_kind/_secondary/button_kind_secondary.scss
@@ -1,8 +1,8 @@
 .button_kind_secondary {
-  background: #fff;
+  background: var(--color6);
   color: inherit;
 
   &:hover {
-    box-shadow: inset 0 0 0 2px #06c5c5;
+    box-shadow: inset 0 0 0 2px var(--color33);
   }
 }
diff --git a/frontend/app/components/button/_theme/_dark/button_theme_dark.scss b/frontend/app/components/button/_theme/_dark/button_theme_dark.scss
index 063a12831f..798c2fddda 100644
--- a/frontend/app/components/button/_theme/_dark/button_theme_dark.scss
+++ b/frontend/app/components/button/_theme/_dark/button_theme_dark.scss
@@ -1,11 +1,11 @@
 .button_theme_dark.button_kind_secondary {
-  background: #22201c;
-  color: #ddd;
+  background: var(--color8);
+  color: var(--color20);
 }
 
 .button_theme_dark.button_kind_link {
   &:disabled,
   &:hover:disabled {
-    color: #fff;
+    color: var(--color6);
   }
 }
diff --git a/frontend/app/components/button/button.scss b/frontend/app/components/button/button.scss
index eb5f7275bd..e4dba6a631 100644
--- a/frontend/app/components/button/button.scss
+++ b/frontend/app/components/button/button.scss
@@ -10,7 +10,7 @@
   white-space: nowrap;
 
   &:focus {
-    box-shadow: 0 0 0 2px rgba(37, 156, 154, 0.4);
+    box-shadow: 0 0 0 2px var(--color47);
     outline: none;
   }
 
diff --git a/frontend/app/components/comment-form/__button/_type/_preview/comment-form__button_type_preview.scss b/frontend/app/components/comment-form/__button/_type/_preview/comment-form__button_type_preview.scss
index 8c7e54251a..38c2c5dbe5 100644
--- a/frontend/app/components/comment-form/__button/_type/_preview/comment-form__button_type_preview.scss
+++ b/frontend/app/components/comment-form/__button/_type/_preview/comment-form__button_type_preview.scss
@@ -1,7 +1,7 @@
 .comment-form__button_type_preview {
   &:hover,
   &:focus {
-    box-shadow: inset 0 0 0 2px #0aa;
-    color: #099;
+    box-shadow: inset 0 0 0 2px var(--color9);
+    color: var(--color17);
   }
 }
diff --git a/frontend/app/components/comment-form/__button/_type/_send/comment-form__button_type_send.scss b/frontend/app/components/comment-form/__button/_type/_send/comment-form__button_type_send.scss
index 32727828f5..3aa2881074 100644
--- a/frontend/app/components/comment-form/__button/_type/_send/comment-form__button_type_send.scss
+++ b/frontend/app/components/comment-form/__button/_type/_send/comment-form__button_type_send.scss
@@ -1,9 +1,9 @@
 .comment-form__button_type_send {
-  background: #259c9a;
-  color: #fff;
+  background: var(--color15);
+  color: var(--color6);
 
   &:hover,
   &:focus {
-    background: #0aa;
+    background: var(--color9);
   }
 }
diff --git a/frontend/app/components/comment-form/__control-panel/comment-form__control-panel.scss b/frontend/app/components/comment-form/__control-panel/comment-form__control-panel.scss
index 194f7bde40..90eaf41e84 100644
--- a/frontend/app/components/comment-form/__control-panel/comment-form__control-panel.scss
+++ b/frontend/app/components/comment-form/__control-panel/comment-form__control-panel.scss
@@ -1,4 +1,4 @@
 .comment-form__control-panel {
   height: 30px;
-  background-color: #eee;
+  background-color: var(--color5);
 }
diff --git a/frontend/app/components/comment-form/__counter/comment-form__counter.scss b/frontend/app/components/comment-form/__counter/comment-form__counter.scss
index 23f5eb21af..eb4f98cb0b 100644
--- a/frontend/app/components/comment-form/__counter/comment-form__counter.scss
+++ b/frontend/app/components/comment-form/__counter/comment-form__counter.scss
@@ -4,5 +4,5 @@
   bottom: 4px;
   font-size: 10px;
   font-weight: 700;
-  color: #ef0000;
+  color: var(--color38);
 }
diff --git a/frontend/app/components/comment-form/__field/comment-form__field.scss b/frontend/app/components/comment-form/__field/comment-form__field.pcss
similarity index 86%
rename from frontend/app/components/comment-form/__field/comment-form__field.scss
rename to frontend/app/components/comment-form/__field/comment-form__field.pcss
index 37a216476f..255123db2d 100644
--- a/frontend/app/components/comment-form/__field/comment-form__field.scss
+++ b/frontend/app/components/comment-form/__field/comment-form__field.pcss
@@ -20,12 +20,12 @@
   transform: translateZ(0); /* let's try to fix blinking in Safari, again */
 
   &:focus {
-    box-shadow: 0 0 0 2px rgba(37, 156, 154, 0.4);
-    border-color: #259c9a;
+    box-shadow: 0 0 0 2px var(--color47);
+    border-color: var(--color15);
     outline: none;
   }
 
   &:disabled {
-    color: #777;
+    color: var(--color10);
   }
 }
diff --git a/frontend/app/components/comment-form/__markdown-link/comment-form__markdown-link.scss b/frontend/app/components/comment-form/__markdown-link/comment-form__markdown-link.scss
index 268e85c0d3..4b8ce24768 100644
--- a/frontend/app/components/comment-form/__markdown-link/comment-form__markdown-link.scss
+++ b/frontend/app/components/comment-form/__markdown-link/comment-form__markdown-link.scss
@@ -3,9 +3,9 @@
   white-space: nowrap;
   text-decoration: none;
   cursor: pointer;
-  color: #0aa;
+  color: var(--color9);
 
   &:hover {
-    color: #06c5c5;
+    color: var(--color33);
   }
 }
diff --git a/frontend/app/components/comment-form/__markdown-toolbar/comment-form__markdown-toolbar.scss b/frontend/app/components/comment-form/__markdown-toolbar/comment-form__markdown-toolbar.scss
index 729aa27fd0..32a0477299 100644
--- a/frontend/app/components/comment-form/__markdown-toolbar/comment-form__markdown-toolbar.scss
+++ b/frontend/app/components/comment-form/__markdown-toolbar/comment-form__markdown-toolbar.scss
@@ -14,13 +14,13 @@
 .comment-form__toolbar-item {
   background: none;
   border: 0;
-  color: #586069;
+  color: var(--color37);
   display: block;
   float: left;
   padding: 4px 5px;
 
   &:hover {
-    color: #0aa;
+    color: var(--color9);
   }
 }
 
diff --git a/frontend/app/components/comment-form/__rss-link/comment-form__rss-link.scss b/frontend/app/components/comment-form/__rss-link/comment-form__rss-link.scss
index 39ddb646e9..0c906976eb 100644
--- a/frontend/app/components/comment-form/__rss-link/comment-form__rss-link.scss
+++ b/frontend/app/components/comment-form/__rss-link/comment-form__rss-link.scss
@@ -3,9 +3,9 @@
   white-space: nowrap;
   text-decoration: none;
   cursor: pointer;
-  color: #0aa;
+  color: var(--color9);
 
   &:hover {
-    color: #06c5c5;
+    color: var(--color33);
   }
 }
diff --git a/frontend/app/components/comment-form/__subscribe-by-email/comment-form__subscribe-by-email.scss b/frontend/app/components/comment-form/__subscribe-by-email/comment-form__subscribe-by-email.scss
index 5184dc1542..3a997e89d1 100644
--- a/frontend/app/components/comment-form/__subscribe-by-email/comment-form__subscribe-by-email.scss
+++ b/frontend/app/components/comment-form/__subscribe-by-email/comment-form__subscribe-by-email.scss
@@ -35,7 +35,7 @@
 
 .comment-form__subscribe-by-email__token-input {
   resize: vertical;
-  border: 1px solid #c4c4c4;
+  border: 1px solid var(--color31);
   padding: 4px;
   font-family: inherit;
   font-size: 0.8em;
@@ -43,8 +43,8 @@
   line-height: 1.5;
 
   &:focus {
-    box-shadow: 0 0 0 2px rgba(37, 156, 154, 0.4);
-    border-color: #259c9a;
+    box-shadow: 0 0 0 2px var(--color47);
+    border-color: var(--color15);
     outline: none;
   }
 }
@@ -56,11 +56,11 @@
 }
 
 .comment-form__subscribe-by-email_theme_dark .comment-form__subscribe-by-email__error {
-  background: #672323;
-  color: #f98989;
+  background: var(--color28);
+  color: var(--color27);
 }
 
 .comment-form__subscribe-by-email_theme_light .comment-form__subscribe-by-email__error {
-  background: #ffd7d7;
-  color: #9a0000;
+  background: var(--color26);
+  color: var(--color25);
 }
diff --git a/frontend/app/components/comment-form/__subscribe-by-rss/comment-form__subscribe-by-rss.scss b/frontend/app/components/comment-form/__subscribe-by-rss/comment-form__subscribe-by-rss.scss
index f2df87cbf2..979102d702 100644
--- a/frontend/app/components/comment-form/__subscribe-by-rss/comment-form__subscribe-by-rss.scss
+++ b/frontend/app/components/comment-form/__subscribe-by-rss/comment-form__subscribe-by-rss.scss
@@ -7,9 +7,9 @@
   white-space: nowrap;
   text-decoration: none;
   cursor: pointer;
-  color: #0aa;
+  color: var(--color9);
 
   &:hover {
-    color: #06c5c5;
+    color: var(--color33);
   }
 }
diff --git a/frontend/app/components/comment-form/_theme/_dark/comment-form_theme_dark.scss b/frontend/app/components/comment-form/_theme/_dark/comment-form_theme_dark.scss
index a47aac22c8..317bf788d6 100644
--- a/frontend/app/components/comment-form/_theme/_dark/comment-form_theme_dark.scss
+++ b/frontend/app/components/comment-form/_theme/_dark/comment-form_theme_dark.scss
@@ -1,50 +1,50 @@
 .comment-form_theme_dark {
-  border-color: #333;
-  background: #22201c; /* try to fix textarea blinking in Safari */
+  border-color: var(--color7);
+  background: var(--color8); /* try to fix textarea blinking in Safari */
 
   .comment-form__actions {
-    background: #333;
+    background: var(--color7);
   }
 
   .comment-form__button_type_preview {
-    background: #22201c;
-    color: #ddd;
+    background: var(--color8);
+    color: var(--color20);
   }
 
   .comment-form__button_type_send {
-    color: #ddd;
+    color: var(--color20);
   }
 
   .comment-form__error {
-    border-top: 8px solid #333;
-    background: #672323;
-    color: #f98989;
+    border-top: 8px solid var(--color7);
+    background: var(--color28);
+    color: var(--color27);
   }
 
   .comment-form__field {
-    background: #22201c;
-    color: #eee;
+    background: var(--color8);
+    color: var(--color5);
   }
 
   .comment-form__preview {
-    border-color: #22201c;
-    background: #22201c;
-    color: #ddd;
+    border-color: var(--color8);
+    background: var(--color8);
+    color: var(--color20);
   }
 
   .comment-form__preview-wrapper {
-    background: #333;
+    background: var(--color7);
   }
 
   .comment-form__toolbar-item {
-    color: #ddd;
+    color: var(--color20);
 
     &:hover {
-      color: #0aa;
+      color: var(--color9);
     }
   }
 
   .comment-form__control-panel {
-    background-color: #333;
+    background-color: var(--color7);
   }
 }
diff --git a/frontend/app/components/comment-form/_theme/_light/comment-form_theme_light.scss b/frontend/app/components/comment-form/_theme/_light/comment-form_theme_light.scss
index f3104b5fb2..e5b896f5af 100644
--- a/frontend/app/components/comment-form/_theme/_light/comment-form_theme_light.scss
+++ b/frontend/app/components/comment-form/_theme/_light/comment-form_theme_light.scss
@@ -1,38 +1,38 @@
 .comment-form_theme_light {
-  border-color: #eee;
-  background: #fff; /* try to fix textarea blinking in Safari */
+  border-color: var(--color5);
+  background: var(--color6); /* try to fix textarea blinking in Safari */
 
   .comment-form__actions {
-    background: #eee;
+    background: var(--color5);
   }
 
   .comment-form__button_type_preview {
-    background: #fff;
-    color: #000;
+    background: var(--color6);
+    color: var(--color0);
   }
 
   .comment-form__button_type_send {
-    color: #fff;
+    color: var(--color6);
   }
 
   .comment-form__error {
-    border-top: 8px solid #eee;
-    background: #ffd7d7;
-    color: #9a0000;
+    border-top: 8px solid var(--color5);
+    background: var(--color26);
+    color: var(--color25);
   }
 
   .comment-form__field {
-    background: #fff;
-    color: #000;
+    background: var(--color6);
+    color: var(--color0);
   }
 
   .comment-form__preview {
-    border-color: #eee;
-    background: #fff;
-    color: #333;
+    border-color: var(--color5);
+    background: var(--color6);
+    color: var(--color7);
   }
 
   .comment-form__preview-wrapper {
-    background: #eee;
+    background: var(--color5);
   }
 }
diff --git a/frontend/app/components/comment-form/index.ts b/frontend/app/components/comment-form/index.ts
index 112a9a664e..112de9b218 100644
--- a/frontend/app/components/comment-form/index.ts
+++ b/frontend/app/components/comment-form/index.ts
@@ -13,7 +13,7 @@ import './__button/_type/_send/comment-form__button_type_send.scss';
 import './__control-panel/comment-form__control-panel.scss';
 import './__counter/comment-form__counter.scss';
 import './__error/comment-form__error.scss';
-import './__field/comment-form__field.scss';
+import './__field/comment-form__field.pcss';
 import './__field-wrapper/comment-form__field-wrapper.scss';
 import './__preview/comment-form__preview.scss';
 import './__preview-wrapper/comment-form__preview-wrapper.scss';
diff --git a/frontend/app/components/comment-form/text-expander.module.pcss b/frontend/app/components/comment-form/text-expander.module.pcss
index 12d258b668..ef64448fa2 100644
--- a/frontend/app/components/comment-form/text-expander.module.pcss
+++ b/frontend/app/components/comment-form/text-expander.module.pcss
@@ -8,16 +8,16 @@
   margin: 24px 0 0;
   list-style: none;
   cursor: pointer;
-  background: #fff;
-  border: 1px solid #dfe2e5;
+  background: var(--color6);
+  border: 1px solid var(--color16);
   border-radius: 3px;
-  box-shadow: 0 1px 5px rgba(27, 31, 35, 0.15);
+  box-shadow: 0 1px 5px var(--color46);
 }
 
 .suggesterDark {
-  background: #22201c;
-  color: #ddd;
-  border: 1px solid #333;
+  background: var(--color8);
+  color: var(--color20);
+  border: 1px solid var(--color7);
 }
 
 .suggesterItem {
@@ -25,18 +25,18 @@
   padding: 4px 8px;
   font-size: 14px;
   font-weight: 600;
-  border-bottom: 1px solid #dfe2e5;
+  border-bottom: 1px solid var(--color16);
 }
 
 .suggesterItemDark {
-  border-bottom: 1px solid #333;
+  border-bottom: 1px solid var(--color7);
 }
 
 .suggesterItem:hover,
 .suggesterItem[aria-selected='true'] {
-  color: #fff;
+  color: var(--color6);
   text-decoration: none;
-  background-color: rgba(37, 156, 154, 0.6);
+  background-color: var(--color48);
 }
 
 .suggesterItem:first-child {
diff --git a/frontend/app/components/comment/__action/_type/_collapse/comment__action_type_collapse.scss b/frontend/app/components/comment/__action/_type/_collapse/comment__action_type_collapse.scss
index 0a1e80f46f..f35968a2f9 100644
--- a/frontend/app/components/comment/__action/_type/_collapse/comment__action_type_collapse.scss
+++ b/frontend/app/components/comment/__action/_type/_collapse/comment__action_type_collapse.scss
@@ -14,13 +14,13 @@
   cursor: pointer;
 
   &:hover {
-    border-color: #0aa;
-    color: #0aa;
+    border-color: var(--color9);
+    color: var(--color9);
   }
 
   &.comment__action_selected {
     &:hover {
-      background: #0aa;
+      background: var(--color9);
     }
   }
 }
diff --git a/frontend/app/components/comment/__control/comment__control.scss b/frontend/app/components/comment/__control/comment__control.scss
index 3996951c7a..117446b42c 100644
--- a/frontend/app/components/comment/__control/comment__control.scss
+++ b/frontend/app/components/comment/__control/comment__control.scss
@@ -1,6 +1,6 @@
 .comment__control {
   margin-right: 8px;
-  color: #8cd4d4;
+  color: var(--color39);
 
   &:last-child {
     margin-right: 0;
diff --git a/frontend/app/components/comment/__vote/comment__vote.scss b/frontend/app/components/comment/__vote/comment__vote.scss
index 813609c67d..c03f84974d 100644
--- a/frontend/app/components/comment/__vote/comment__vote.scss
+++ b/frontend/app/components/comment/__vote/comment__vote.scss
@@ -11,7 +11,7 @@
 }
 
 .voting__error {
-  color: #9a0000;
+  color: var(--color25);
   text-align: right;
   font-size: 14px;
   line-height: 1;
diff --git a/frontend/app/components/comment/_theme/_dark/comment_theme_dark.scss b/frontend/app/components/comment/_theme/_dark/comment_theme_dark.scss
index 0f523f692c..fa0dafd1f6 100644
--- a/frontend/app/components/comment/_theme/_dark/comment_theme_dark.scss
+++ b/frontend/app/components/comment/_theme/_dark/comment_theme_dark.scss
@@ -1,23 +1,23 @@
 .comment_theme_dark {
   .comment__action_type_collapse {
-    border-color: #555;
-    color: #555;
+    border-color: var(--color34);
+    color: var(--color34);
 
     &.comment__action_selected {
-      background: #555;
-      color: #22201c;
+      background: var(--color34);
+      color: var(--color8);
     }
   }
 
   .comment__action_type_delete,
   .comment__action_type_edit {
-    color: #6a6a6a;
+    color: var(--color14);
   }
 
   .comment__action {
     + .comment__controls {
       &::before {
-        color: #eee;
+        color: var(--color5);
       }
     }
   }
@@ -26,72 +26,72 @@
     &,
     &:hover,
     &:focus {
-      color: #999;
+      color: var(--color11);
     }
   }
 
   .comment__edit-timer {
-    color: #a6a6a6;
+    color: var(--color32);
 
     + .comment__controls {
       &::before {
-        color: #eee;
+        color: var(--color5);
       }
     }
   }
 
   .comment__score {
-    color: #c4c4c4;
+    color: var(--color31);
   }
 
   .comment__score_view_negative {
-    color: #cc0606;
+    color: var(--color30);
   }
 
   .comment__score_view_positive {
-    color: #259e06;
+    color: var(--color12);
   }
 
   .comment__status {
-    color: #999;
+    color: var(--color11);
   }
 
   .comment__time {
-    color: #999;
+    color: var(--color11);
   }
 
   .comment__user-id {
-    color: #888;
+    color: var(--color13);
   }
 
   .comment__username {
-    color: #777;
+    color: var(--color10);
   }
 
   &.comment_editing {
     .comment__input {
-      border-color: #333;
+      border-color: var(--color7);
     }
 
     @media (-moz-touch-enabled: 1) and (max-width: 768px), (pointer: coarse) and (max-width: 768px) {
-      border-color: #333;
+      border-color: var(--color7);
     }
   }
 
   &.comment_replying {
     .comment__input {
-      border-color: #333;
+      border-color: var(--color7);
     }
 
     @media (-moz-touch-enabled: 1) and (max-width: 768px), (pointer: coarse) and (max-width: 768px) {
-      border-color: #333;
+      border-color: var(--color7);
     }
   }
 
   &.comment_view_preview {
     .comment__info {
       &::after {
-        color: #777;
+        color: var(--color10);
       }
     }
   }
diff --git a/frontend/app/components/comment/_theme/_light/comment_theme_light.scss b/frontend/app/components/comment/_theme/_light/comment_theme_light.scss
index 7bb6456b7d..3fe6489b97 100644
--- a/frontend/app/components/comment/_theme/_light/comment_theme_light.scss
+++ b/frontend/app/components/comment/_theme/_light/comment_theme_light.scss
@@ -1,23 +1,23 @@
 .comment_theme_light {
   .comment__action_type_collapse {
-    border-color: #ddd;
-    color: #ddd;
+    border-color: var(--color20);
+    color: var(--color20);
 
     &.comment__action_selected {
-      background: #ddd;
-      color: #fff;
+      background: var(--color20);
+      color: var(--color6);
     }
   }
 
   .comment__action_type_delete,
   .comment__action_type_edit {
-    color: #a6a6a6;
+    color: var(--color32);
   }
 
   .comment__action {
     + .comment__controls {
       &::before {
-        color: #777;
+        color: var(--color10);
       }
     }
   }
@@ -26,72 +26,72 @@
     &,
     &:hover,
     &:focus {
-      color: #999;
+      color: var(--color11);
     }
   }
 
   .comment__edit-timer {
-    color: #a6a6a6;
+    color: var(--color32);
 
     + .comment__controls {
       &::before {
-        color: #777;
+        color: var(--color10);
       }
     }
   }
 
   .comment__score {
-    color: #c4c4c4;
+    color: var(--color31);
   }
 
   .comment__score_view_negative {
-    color: #cc0606;
+    color: var(--color30);
   }
 
   .comment__score_view_positive {
-    color: #259e06;
+    color: var(--color12);
   }
 
   .comment__status {
-    color: #999;
+    color: var(--color11);
   }
 
   .comment__time {
-    color: #999;
+    color: var(--color11);
   }
 
   .comment__user-id {
-    color: #888;
+    color: var(--color13);
   }
 
   .comment__username {
-    color: #777;
+    color: var(--color10);
   }
 
   &.comment_editing {
     .comment__input {
-      border-color: #eee;
+      border-color: var(--color5);
     }
 
     @media (-moz-touch-enabled: 1) and (max-width: 768px), (pointer: coarse) and (max-width: 768px) {
-      border-color: #eee;
+      border-color: var(--color5);
     }
   }
 
   &.comment_replying {
     .comment__input {
-      border-color: #eee;
+      border-color: var(--color5);
     }
 
     @media (-moz-touch-enabled: 1) and (max-width: 768px), (pointer: coarse) and (max-width: 768px) {
-      border-color: #eee;
+      border-color: var(--color5);
     }
   }
 
   &.comment_view_preview {
     .comment__info {
       &::after {
-        color: #777;
+        color: var(--color10);
       }
     }
   }
diff --git a/frontend/app/components/comment/_view/_admin/comment_view_admin.scss b/frontend/app/components/comment/_view/_admin/comment_view_admin.scss
index f9c15152da..96fb14e817 100644
--- a/frontend/app/components/comment/_view/_admin/comment_view_admin.scss
+++ b/frontend/app/components/comment/_view/_admin/comment_view_admin.scss
@@ -3,7 +3,7 @@
   &.comment_theme_light,
   &.comment_theme_dark {
     .comment__username {
-      color: #0e7e9d;
+      color: var(--color29);
     }
   }
 }
diff --git a/frontend/app/components/comment/_view/_preview/comment_view_preview.scss b/frontend/app/components/comment/_view/_preview/comment_view_preview.scss
index 7d1e0419ad..2864f7a78e 100644
--- a/frontend/app/components/comment/_view/_preview/comment_view_preview.scss
+++ b/frontend/app/components/comment/_view/_preview/comment_view_preview.scss
@@ -9,11 +9,11 @@
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
-      color: #0aa;
+      color: var(--color9);
     }
 
     .comment__title-link {
-      color: #0aa;
+      color: var(--color9);
       text-decoration: none;
 
       &:hover {
@@ -25,7 +25,7 @@
       display: inline;
       padding-right: 0;
       font-weight: 700;
-      color: #777;
+      color: var(--color10);
 
       &::after {
         content: ' ';
@@ -33,7 +33,7 @@
     }
 
     .comment__username {
-      color: #0aa;
+      color: var(--color9);
     }
 
     .comment__text {
diff --git a/frontend/app/components/comment/_view/_user/comment_view_user.scss b/frontend/app/components/comment/_view/_user/comment_view_user.scss
index 74c2acf4dd..264575a8d5 100644
--- a/frontend/app/components/comment/_view/_user/comment_view_user.scss
+++ b/frontend/app/components/comment/_view/_user/comment_view_user.scss
@@ -15,7 +15,7 @@
   }
 
   .comment__title-link {
-    color: #0e7e9d;
+    color: var(--color29);
     font-weight: bold;
     text-decoration: none;
     text-overflow: ellipsis;
diff --git a/frontend/app/components/dropdown/__content/dropdown__content.scss b/frontend/app/components/dropdown/__content/dropdown__content.scss
index b920969d7c..61a0046168 100644
--- a/frontend/app/components/dropdown/__content/dropdown__content.scss
+++ b/frontend/app/components/dropdown/__content/dropdown__content.scss
@@ -8,7 +8,7 @@
   transform: translate(-0.5em, 5px);
   min-width: 120px;
   max-width: 260px;
-  border: 2px solid #259c9a;
+  border: 2px solid var(--color15);
   border-radius: 3px;
   padding: 0 0 5px;
 }
diff --git a/frontend/app/components/dropdown/__item/dropdown__item.scss b/frontend/app/components/dropdown/__item/dropdown__item.scss
index 486850f6f0..01b73758bf 100644
--- a/frontend/app/components/dropdown/__item/dropdown__item.scss
+++ b/frontend/app/components/dropdown/__item/dropdown__item.scss
@@ -8,7 +8,7 @@
   }
 
   &_separator {
-    border-bottom: 1px solid #259c9a;
+    border-bottom: 1px solid var(--color15);
     margin-bottom: 5px;
   }
 }
diff --git a/frontend/app/components/dropdown/_theme/_dark/dropdown_theme_dark.scss b/frontend/app/components/dropdown/_theme/_dark/dropdown_theme_dark.scss
index b24b8fa1e8..ee84e194da 100644
--- a/frontend/app/components/dropdown/_theme/_dark/dropdown_theme_dark.scss
+++ b/frontend/app/components/dropdown/_theme/_dark/dropdown_theme_dark.scss
@@ -1,5 +1,5 @@
 .dropdown_theme_dark {
   .dropdown__content {
-    background-color: #22201c;
+    background-color: var(--color8);
   }
 }
diff --git a/frontend/app/components/dropdown/_theme/_light/dropdown_theme_light.scss b/frontend/app/components/dropdown/_theme/_light/dropdown_theme_light.scss
index 0a1474e329..1c57c9aacd 100644
--- a/frontend/app/components/dropdown/_theme/_light/dropdown_theme_light.scss
+++ b/frontend/app/components/dropdown/_theme/_light/dropdown_theme_light.scss
@@ -1,5 +1,5 @@
 .dropdown_theme_light {
   .dropdown__content {
-    background-color: #fff;
+    background-color: var(--color6);
   }
 }
diff --git a/frontend/app/components/input/input.scss b/frontend/app/components/input/input.scss
index 78ea6a3749..2e798f5592 100644
--- a/frontend/app/components/input/input.scss
+++ b/frontend/app/components/input/input.scss
@@ -2,12 +2,12 @@
   font-size: 16px;
   font-family: inherit;
   padding: 4px 8px;
-  border: 1px solid #c4c4c4;
+  border: 1px solid var(--color31);
   margin: 0;
 
   &:focus {
-    box-shadow: 0 0 0 2px rgba(37, 156, 154, 0.4);
-    border-color: #259c9a;
+    box-shadow: 0 0 0 2px var(--color47);
+    border-color: var(--color15);
     outline: none;
   }
 }
diff --git a/frontend/app/components/raw-content/_theme/_dark/raw-content_theme_dark.scss b/frontend/app/components/raw-content/_theme/_dark/raw-content_theme_dark.scss
index 82ae2e89c9..50acc7e27b 100644
--- a/frontend/app/components/raw-content/_theme/_dark/raw-content_theme_dark.scss
+++ b/frontend/app/components/raw-content/_theme/_dark/raw-content_theme_dark.scss
@@ -1,24 +1,24 @@
 .raw-content_theme_dark {
   blockquote {
-    border-left-color: rgba(255, 255, 255, 0.3);
+    border-left-color: var(--color44);
   }
 
   table {
     th,
     td {
-      border: 1px solid #313133;
+      border: 1px solid var(--color24);
     }
 
     tr {
-      background-color: #22201c;
+      background-color: var(--color8);
 
       &:nth-child(2n) {
-        background-color: #393734;
+        background-color: var(--color23);
       }
     }
   }
 
   hr {
-    border-color: #2d2d2c;
+    border-color: var(--color22);
   }
 }
diff --git a/frontend/app/components/raw-content/_theme/_light/raw-content_theme_light.scss b/frontend/app/components/raw-content/_theme/_light/raw-content_theme_light.scss
index dc651f7d5c..33a897a667 100644
--- a/frontend/app/components/raw-content/_theme/_light/raw-content_theme_light.scss
+++ b/frontend/app/components/raw-content/_theme/_light/raw-content_theme_light.scss
@@ -1,24 +1,24 @@
 .raw-content_theme_light {
   blockquote {
-    border-left-color: rgba(0, 0, 0, 0.1);
+    border-left-color: var(--color45);
   }
 
   table {
     th,
     td {
-      border: 1px solid #dfe2e5;
+      border: 1px solid var(--color16);
     }
 
     tr {
-      background-color: #fff;
+      background-color: var(--color6);
 
       &:nth-child(2n) {
-        background-color: #f6f8fa;
+        background-color: var(--color21);
       }
     }
   }
 
   hr {
-    border-color: #f6f8fa;
+    border-color: var(--color21);
   }
 }
diff --git a/frontend/app/components/raw-content/raw-content.scss b/frontend/app/components/raw-content/raw-content.scss
index 4f7afe0811..73a1c69fc7 100644
--- a/frontend/app/components/raw-content/raw-content.scss
+++ b/frontend/app/components/raw-content/raw-content.scss
@@ -1,15 +1,4 @@
 .raw-content {
-  --chroma-bg: rgba(0, 0, 0, 0.05);
-  --chroma-base: #586e75;
-  --chroma-c: #7d7d7d;
-  --chroma-01: #589000;
-  --chroma-02: #cb4b16;
-  --chroma-03: #268bd2;
-  --chroma-04: #2aa198;
-  --chroma-05: #859900;
-  --chroma-06: #d33682;
-  --chroma-07: #00aee2;
-
   .root_theme_dark & {
     --chroma-bg: rgba(255, 255, 255, 0.1);
     --chroma-base: #93a1a1;
@@ -44,10 +33,10 @@
   }
 
   a {
-    color: #0aa;
+    color: var(--color9);
 
     &:hover {
-      color: #06c5c5;
+      color: var(--color33);
       text-decoration: none;
     }
   }
@@ -90,7 +79,7 @@
     }
 
     tr {
-      border-top: 1px solid #b7dddd;
+      border-top: 1px solid var(--color43);
     }
   }
 
diff --git a/frontend/app/components/root/_theme/_dark/root_theme_dark.scss b/frontend/app/components/root/_theme/_dark/root_theme_dark.scss
index dcb8bfd63d..daf785e332 100644
--- a/frontend/app/components/root/_theme/_dark/root_theme_dark.scss
+++ b/frontend/app/components/root/_theme/_dark/root_theme_dark.scss
@@ -1,19 +1,19 @@
 .root_theme_dark {
-  color: #ddd;
+  color: var(--color20);
 
   .root__copyright {
-    color: #aaa;
+    color: var(--color1);
   }
 
   .root__copyright-link {
-    color: #aaa;
+    color: var(--color1);
   }
 
   .root__pinned-comment {
-    border-bottom-color: #383838;
+    border-bottom-color: var(--color18);
   }
 
   .root__pinned-comments {
-    background: #404040;
+    background: var(--color19);
   }
 }
diff --git a/frontend/app/components/root/_theme/_light/root_theme_light.scss b/frontend/app/components/root/_theme/_light/root_theme_light.scss
index f5eb56b281..e691a898d3 100644
--- a/frontend/app/components/root/_theme/_light/root_theme_light.scss
+++ b/frontend/app/components/root/_theme/_light/root_theme_light.scss
@@ -1,19 +1,19 @@
 .root_theme_light {
-  color: #000;
+  color: var(--color0);
 
   .root__copyright {
-    color: #aaa;
+    color: var(--color1);
   }
 
   .root__copyright-link {
-    color: #aaa;
+    color: var(--color1);
   }
 
   .root__pinned-comment {
-    border-bottom-color: #e2efef;
+    border-bottom-color: var(--color3);
   }
 
   .root__pinned-comments {
-    background: #edf6f7;
+    background: var(--color4);
   }
 }
diff --git a/frontend/app/components/root/root.scss b/frontend/app/components/root/root.scss
index 635b3e687d..a7ed3dd73e 100644
--- a/frontend/app/components/root/root.scss
+++ b/frontend/app/components/root/root.scss
@@ -3,7 +3,7 @@
   font-family: 'PT Sans', Helvetica, Arial, sans-serif;
 
   ::selection {
-    background: #c6efef;
+    background: var(--color42);
   }
 
   &_user-info {
diff --git a/frontend/app/components/settings/__action/settings__action.scss b/frontend/app/components/settings/__action/settings__action.scss
index 2e256e1432..b4e3f917a7 100644
--- a/frontend/app/components/settings/__action/settings__action.scss
+++ b/frontend/app/components/settings/__action/settings__action.scss
@@ -1,11 +1,11 @@
 .settings__action {
   margin-left: 8px;
   font-weight: 700;
-  color: #0aa;
+  color: var(--color9);
   cursor: pointer;
 
   &:hover {
-    color: #06c5c5;
+    color: var(--color33);
   }
 
   &::before {
diff --git a/frontend/app/components/settings/_theme/_dark/settings_theme_dark.scss b/frontend/app/components/settings/_theme/_dark/settings_theme_dark.scss
index f818ffeb19..4e533e76a9 100644
--- a/frontend/app/components/settings/_theme/_dark/settings_theme_dark.scss
+++ b/frontend/app/components/settings/_theme/_dark/settings_theme_dark.scss
@@ -1,11 +1,11 @@
 .settings_theme_dark {
   .settings__action {
     &::before {
-      color: #ddd;
+      color: var(--color20);
     }
   }
 
   .settings__blocked-users-username {
-    color: #eee;
+    color: var(--color5);
   }
 }
diff --git a/frontend/app/components/settings/_theme/_light/settings_theme_light.scss b/frontend/app/components/settings/_theme/_light/settings_theme_light.scss
index f9540ebda3..15ca7eaba5 100644
--- a/frontend/app/components/settings/_theme/_light/settings_theme_light.scss
+++ b/frontend/app/components/settings/_theme/_light/settings_theme_light.scss
@@ -1,11 +1,11 @@
 .settings_theme_light {
   .settings__action {
     &::before {
-      color: #777;
+      color: var(--color10);
     }
   }
 
   .settings__blocked-users-username {
-    color: #888;
+    color: var(--color13);
   }
 }
diff --git a/frontend/app/components/thread/__collapse/thread__collapse.scss b/frontend/app/components/thread/__collapse/thread__collapse.scss
index 0e7eb28b8f..4e3cbd8bc9 100644
--- a/frontend/app/components/thread/__collapse/thread__collapse.scss
+++ b/frontend/app/components/thread/__collapse/thread__collapse.scss
@@ -12,13 +12,13 @@
     position: absolute;
     left: 5px;
     top: 0;
-    border-left: 1px dotted #d9d9d9;
+    border-left: 1px dotted var(--color35);
     height: 100%;
   }
 
   &:hover::after {
     transform: translateX(-1px);
-    border-left: 3px solid #777;
+    border-left: 3px solid var(--color10);
     z-index: 10;
   }
 }
diff --git a/frontend/app/components/thread/_theme_dark/thread_theme_dark.scss b/frontend/app/components/thread/_theme_dark/thread_theme_dark.scss
index 6b04340f7d..0a1a85da49 100644
--- a/frontend/app/components/thread/_theme_dark/thread_theme_dark.scss
+++ b/frontend/app/components/thread/_theme_dark/thread_theme_dark.scss
@@ -1,11 +1,11 @@
 .thread_theme_dark {
   .thread__collapse {
     &::after {
-      border-color: #505050;
+      border-color: var(--color36);
     }
 
     &:hover::after {
-      border-color: #fff;
+      border-color: var(--color6);
     }
   }
 }
diff --git a/frontend/app/components/user-info/__id/user-info__id.scss b/frontend/app/components/user-info/__id/user-info__id.scss
index 346f72523b..ce057b95cc 100644
--- a/frontend/app/components/user-info/__id/user-info__id.scss
+++ b/frontend/app/components/user-info/__id/user-info__id.scss
@@ -4,5 +4,5 @@
   font-size: 14px;
   font-weight: 400;
   line-height: 18px;
-  color: #888;
+  color: var(--color13);
 }
diff --git a/frontend/app/components/user-info/__preloader/user-info__preloader.scss b/frontend/app/components/user-info/__preloader/user-info__preloader.scss
index 3dae5aed24..f1b7ccb1c8 100644
--- a/frontend/app/components/user-info/__preloader/user-info__preloader.scss
+++ b/frontend/app/components/user-info/__preloader/user-info__preloader.scss
@@ -1,4 +1,4 @@
 .user-info__preloader {
   margin: 0 auto 18px;
-  color: #888;
+  color: var(--color13);
 }
diff --git a/frontend/app/components/user-info/user-info.scss b/frontend/app/components/user-info/user-info.scss
index 09cbf4f7a3..eabb8b0f9b 100644
--- a/frontend/app/components/user-info/user-info.scss
+++ b/frontend/app/components/user-info/user-info.scss
@@ -9,7 +9,7 @@
   box-sizing: border-box;
   width: 100%;
   padding: 10px;
-  border: 1px solid #efefef;
+  border: 1px solid var(--color41);
   border-radius: 2px;
-  background: #fff;
+  background: var(--color6);
 }
diff --git a/frontend/app/custom-properties.css b/frontend/app/custom-properties.css
new file mode 100644
index 0000000000..c23000b9de
--- /dev/null
+++ b/frontend/app/custom-properties.css
@@ -0,0 +1,62 @@
+:root {
+  --color0: #000;
+  --color1: #aaa;
+  --color3: #e2efef;
+  --color4: #edf6f7;
+  --color5: #eee;
+  --color6: #fff;
+  --color7: #333;
+  --color8: #22201c;
+  --color9: #0aa;
+  --color10: #777;
+  --color11: #999;
+  --color12: #259e06;
+  --color13: #888;
+  --color14: #6a6a6a;
+  --color15: #259c9a;
+  --color16: #dfe2e5;
+  --color17: #099;
+  --color18: #383838;
+  --color19: #404040;
+  --color20: #ddd;
+  --color21: #f6f8fa;
+  --color22: #2d2d2c;
+  --color23: #393734;
+  --color24: #313133;
+  --color25: #9a0000;
+  --color26: #ffd7d7;
+  --color27: #f98989;
+  --color28: #672323;
+  --color29: #0e7e9d;
+  --color30: #cc0606;
+  --color31: #c4c4c4;
+  --color32: #a6a6a6;
+  --color33: #06c5c5;
+  --color34: #555;
+  --color35: #d9d9d9;
+  --color36: #505050;
+  --color37: #586069;
+  --color38: #ef0000;
+  --color39: #8cd4d4;
+  --color40: #9cdddb;
+  --color41: #efefef;
+  --color42: #c6efef;
+  --color43: #b7dddd;
+  --color44: rgba(255, 255, 255, 0.3);
+  --color45: rgba(0, 0, 0, 0.1);
+  --color46: rgba(27, 31, 35, 0.15);
+  --color47: rgba(37, 156, 154, 0.4);
+  --color48: rgba(37, 156, 154, 0.6);
+
+  /* code-highlight */
+  --chroma-bg: rgba(0, 0, 0, 0.05);
+  --chroma-base: #586e75;
+  --chroma-c: #7d7d7d;
+  --chroma-01: #589000;
+  --chroma-02: #cb4b16;
+  --chroma-03: #268bd2;
+  --chroma-04: #2aa198;
+  --chroma-05: #859900;
+  --chroma-06: #d33682;
+  --chroma-07: #00aee2;
+}
diff --git a/frontend/jest.config.js b/frontend/jest.config.js
index bff8bd35ab..c1e3eacade 100644
--- a/frontend/jest.config.js
+++ b/frontend/jest.config.js
@@ -9,6 +9,7 @@ module.exports = {
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
   moduleNameMapper: {
     '\\.module.pcss': `identity-obj-proxy`,
+    '\\.pcss': `identity-obj-proxy`,
     '\\.scss$': '<rootDir>/app/testUtils/mockStyles.js',
     '@app/(.*)': '<rootDir>/app/$1',
     '^react$': 'preact/compat',
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 172afffbab..b657ac49f4 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -2032,6 +2032,15 @@
         "@types/yargs": "^12.0.9"
       }
     },
+    "@mavrin/stylelint-declaration-use-css-custom-properties": {
+      "version": "1.0.0-alpha.1",
+      "resolved": "https://registry.npmjs.org/@mavrin/stylelint-declaration-use-css-custom-properties/-/stylelint-declaration-use-css-custom-properties-1.0.0-alpha.1.tgz",
+      "integrity": "sha512-4XKKr5dMm0SuHPZyKoMBxhun1B2TTOBV712M/XEgeI4GT8gGy1oVLeu3vqRes761K8a4aMJb1c/b0gIGrV9BYA==",
+      "dev": true,
+      "requires": {
+        "css-tree": "^1.0.0-alpha.39"
+      }
+    },
     "@nodelib/fs.scandir": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.3.tgz",
@@ -4593,6 +4602,16 @@
         "object-visit": "^1.0.0"
       }
     },
+    "color": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/color/-/color-3.1.2.tgz",
+      "integrity": "sha512-vXTJhHebByxZn3lDvDJYw4lR5+uB3vuoHsuYA5AKuxRVn5wzzIfQKGLBmgdVRHKTJYeK5rvJcHnrd0Li49CFpg==",
+      "dev": true,
+      "requires": {
+        "color-convert": "^1.9.1",
+        "color-string": "^1.5.2"
+      }
+    },
     "color-convert": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@@ -4608,6 +4627,16 @@
       "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
       "dev": true
     },
+    "color-string": {
+      "version": "1.5.3",
+      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.5.3.tgz",
+      "integrity": "sha512-dC2C5qeWoYkxki5UAXapdjqO672AM4vZuPGRQfO8b5HKuKGBbKWpITyDYN7TOFKvRW7kOgAn3746clDBMDJyQw==",
+      "dev": true,
+      "requires": {
+        "color-name": "^1.0.0",
+        "simple-swizzle": "^0.2.2"
+      }
+    },
     "colorette": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.1.0.tgz",
@@ -5069,13 +5098,27 @@
       }
     },
     "css-tree": {
-      "version": "1.0.0-alpha25",
-      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha25.tgz",
-      "integrity": "sha512-XC6xLW/JqIGirnZuUWHXCHRaAjje2b3OIB0Vj5RIJo6mIi/AdJo30quQl5LxUl0gkXDIrTrFGbMlcZjyFplz1A==",
+      "version": "1.0.0-alpha.39",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.39.tgz",
+      "integrity": "sha512-7UvkEYgBAHRG9Nt980lYxjsTrCyHFN53ky3wVsDkiMdVqylqRt+Zc+jm5qw7/qyOvN2dHSYtX0e4MbCCExSvnA==",
       "dev": true,
       "requires": {
-        "mdn-data": "^1.0.0",
-        "source-map": "^0.5.3"
+        "mdn-data": "2.0.6",
+        "source-map": "^0.6.1"
+      },
+      "dependencies": {
+        "mdn-data": {
+          "version": "2.0.6",
+          "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.6.tgz",
+          "integrity": "sha512-rQvjv71olwNHgiTbfPZFkJtjNMciWgswYeciZhtvWLO8bmX3TnhyA62I6sTWOyZssWHJJjY6/KiWwqQsWWsqOA==",
+          "dev": true
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        }
       }
     },
     "css-unit-converter": {
@@ -5097,12 +5140,36 @@
       "dev": true
     },
     "csso": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/csso/-/csso-3.3.1.tgz",
-      "integrity": "sha512-OjETffCFB/OzwxVL3eF0+5tXOXCMukVO6rEUxlkIhscE1KRObyg+zMrLUbkPn9kxgBrFWicc37Gv5/22dOh5EA==",
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/csso/-/csso-4.0.2.tgz",
+      "integrity": "sha512-kS7/oeNVXkHWxby5tHVxlhjizRCSv8QdU7hB2FpdAibDU8FjTAolhNjKNTiLzXtUrKT6HwClE81yXwEk1309wg==",
       "dev": true,
       "requires": {
-        "css-tree": "1.0.0-alpha25"
+        "css-tree": "1.0.0-alpha.37"
+      },
+      "dependencies": {
+        "css-tree": {
+          "version": "1.0.0-alpha.37",
+          "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz",
+          "integrity": "sha512-DMxWJg0rnz7UgxKT0Q1HU/L9BeJI0M6ksor0OgqOnF+aRCDWg/N2641HmVyU9KVIu0OVVWOb2IpC9A+BJRnejg==",
+          "dev": true,
+          "requires": {
+            "mdn-data": "2.0.4",
+            "source-map": "^0.6.1"
+          }
+        },
+        "mdn-data": {
+          "version": "2.0.4",
+          "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.4.tgz",
+          "integrity": "sha512-iV3XNKw06j5Q7mi6h+9vbx23Tv7JkjEVgKHW4pimwyDGWm0OIQntJJ+u1C6mg6mK1EaTv42XQ7w76yuzH7M2cA==",
+          "dev": true
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        }
       }
     },
     "cssom": {
@@ -6762,6 +6829,12 @@
       "integrity": "sha512-a1hQMktqW9Nmqr5aktAux3JMNqaucxGcjtjWnZLHX7yyPCmlSV3M54nGYbqT8K+0GhF3NBgmJCc3ma+WOgX8Jg==",
       "dev": true
     },
+    "flatten": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/flatten/-/flatten-1.0.3.tgz",
+      "integrity": "sha512-dVsPA/UwQ8+2uoFe5GHtiBMu48dWLTdsuEd7CKGlZlD78r1TTWBvDuFaFGKCo/ZfEr95Uk56vZoX86OsHkUeIg==",
+      "dev": true
+    },
     "flush-write-stream": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/flush-write-stream/-/flush-write-stream-1.1.1.tgz",
@@ -8887,6 +8960,15 @@
       "integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=",
       "dev": true
     },
+    "is-url-superb": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-url-superb/-/is-url-superb-3.0.0.tgz",
+      "integrity": "sha512-3faQP+wHCGDQT1qReM5zCPx2mxoal6DzbzquFlCYJLWyy4WPTved33ea2xFbX37z4NoriEwZGIYhFtx8RUB5wQ==",
+      "dev": true,
+      "requires": {
+        "url-regex": "^5.0.0"
+      }
+    },
     "is-whitespace-character": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/is-whitespace-character/-/is-whitespace-character-1.0.4.tgz",
@@ -11577,12 +11659,6 @@
         "unist-util-visit": "^1.1.0"
       }
     },
-    "mdn-data": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-1.2.0.tgz",
-      "integrity": "sha512-esDqNvsJB2q5V28+u7NdtdMg6Rmg4khQmAVSjUiX7BY/7haIv0K2yWM43hYp0or+3nvG7+UaTF1JHz31hgU1TA==",
-      "dev": true
-    },
     "media-typer": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
@@ -12946,24 +13022,33 @@
       }
     },
     "postcss-csso": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-csso/-/postcss-csso-3.0.0.tgz",
-      "integrity": "sha512-5yvI9IMIJOofYqmYfn65ZTxxlYZ86jXzDMXwYqltx/kqGsSvHRw4gYkn5e/tCPPIgUeFP5MIhIkA02uoUEZsXA==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-csso/-/postcss-csso-4.0.0.tgz",
+      "integrity": "sha512-Yh9Ug0w3+T/LZIh1vGJQY8+hE13yFRHpINoAmgOhvu9lBmG1jyHkAprGHEHlGjWODJzB4DCNBVBb6Cs0QEoglQ==",
+      "dev": true,
+      "requires": {
+        "csso": "^4.0.2"
+      }
+    },
+    "postcss-custom-properties": {
+      "version": "9.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-custom-properties/-/postcss-custom-properties-9.0.2.tgz",
+      "integrity": "sha512-WHaQrEp3gJ6mgxBA4mGJKW6DSVfy2IFnKPFAb2IEulgxGUW8nWp1NkOD/rWR6e2uIuAdnTa0LXSupST7daniAw==",
       "dev": true,
       "requires": {
-        "csso": "~3.3.0",
-        "postcss": "^6.0.0"
+        "postcss": "^7.0.17",
+        "postcss-values-parser": "^3.0.5"
       },
       "dependencies": {
         "postcss": {
-          "version": "6.0.23",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz",
-          "integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==",
+          "version": "7.0.26",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.26.tgz",
+          "integrity": "sha512-IY4oRjpXWYshuTDFxMVkJDtWIk2LhsTlu8bZnbEJA4+bYT16Lvpo8Qv6EvDumhYRgzjZl489pmsY3qVgJQ08nA==",
           "dev": true,
           "requires": {
-            "chalk": "^2.4.1",
+            "chalk": "^2.4.2",
             "source-map": "^0.6.1",
-            "supports-color": "^5.4.0"
+            "supports-color": "^6.1.0"
           }
         },
         "source-map": {
@@ -12971,6 +13056,15 @@
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
           "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
           "dev": true
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
         }
       }
     },
@@ -13273,6 +13367,12 @@
         "postcss-selector-parser": "^5.0.0"
       }
     },
+    "postcss-prefixwrap": {
+      "version": "1.13.0",
+      "resolved": "https://registry.npmjs.org/postcss-prefixwrap/-/postcss-prefixwrap-1.13.0.tgz",
+      "integrity": "sha512-OMG0zwKCPUyQqxojOYu65P0XvEkioamvO4IW4XX15NPMFr/Z2T98ld7W43bk9Itjg23xHf++xeZ7G4Z0qFUUcA==",
+      "dev": true
+    },
     "postcss-reporter": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/postcss-reporter/-/postcss-reporter-6.0.1.tgz",
@@ -13439,6 +13539,33 @@
       "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
       "dev": true
     },
+    "postcss-values-parser": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/postcss-values-parser/-/postcss-values-parser-3.1.1.tgz",
+      "integrity": "sha512-p56/Cu9wb8+lck/iOTeuFeSHKEUH1bbWQ03T6N3jDkw+15pV65rMY5pK+OWhVpRn5TIrByS6UVpO3mSqvlhZYA==",
+      "dev": true,
+      "requires": {
+        "color-name": "^1.1.4",
+        "is-number": "^7.0.0",
+        "is-url-superb": "^3.0.0",
+        "postcss": "^7.0.5",
+        "url-regex": "^5.0.0"
+      },
+      "dependencies": {
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "is-number": {
+          "version": "7.0.0",
+          "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+          "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+          "dev": true
+        }
+      }
+    },
     "postcss-wrap": {
       "version": "0.0.4",
       "resolved": "https://registry.npmjs.org/postcss-wrap/-/postcss-wrap-0.0.4.tgz",
@@ -14714,6 +14841,23 @@
       "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=",
       "dev": true
     },
+    "simple-swizzle": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
+      "integrity": "sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo=",
+      "dev": true,
+      "requires": {
+        "is-arrayish": "^0.3.1"
+      },
+      "dependencies": {
+        "is-arrayish": {
+          "version": "0.3.2",
+          "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
+          "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==",
+          "dev": true
+        }
+      }
+    },
     "sisteransi": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.3.tgz",
@@ -16151,6 +16295,28 @@
         "stylelint-config-recommended": "^3.0.0"
       }
     },
+    "stylelint-value-no-unknown-custom-properties": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/stylelint-value-no-unknown-custom-properties/-/stylelint-value-no-unknown-custom-properties-2.0.0.tgz",
+      "integrity": "sha512-iA7pLNBRCrRi35rUpF3bS4zpPWQtk1YxqKC0MhgOvhI1XDciE/FaAQoFgn65vGMEyQ0Q3PPGfWawn7sVd/thXQ==",
+      "dev": true,
+      "requires": {
+        "postcss-values-parser": "^2.0.0"
+      },
+      "dependencies": {
+        "postcss-values-parser": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/postcss-values-parser/-/postcss-values-parser-2.0.1.tgz",
+          "integrity": "sha512-2tLuBsA6P4rYTNKCXYG/71C7j1pU6pK503suYOmn4xYrQIzW+opD+7FAFNuGSdZC/3Qfy334QbeMu7MEb8gOxg==",
+          "dev": true,
+          "requires": {
+            "flatten": "^1.0.2",
+            "indexes-of": "^1.0.1",
+            "uniq": "^1.0.1"
+          }
+        }
+      }
+    },
     "sugarss": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/sugarss/-/sugarss-2.0.0.tgz",
@@ -16510,6 +16676,12 @@
         "setimmediate": "^1.0.4"
       }
     },
+    "tlds": {
+      "version": "1.207.0",
+      "resolved": "https://registry.npmjs.org/tlds/-/tlds-1.207.0.tgz",
+      "integrity": "sha512-k7d7Q1LqjtAvhtEOs3yN14EabsNO8ZCoY6RESSJDB9lst3bTx3as/m1UuAeCKzYxiyhR1qq72ZPhpSf+qlqiwg==",
+      "dev": true
+    },
     "tmp": {
       "version": "0.0.33",
       "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
@@ -17099,6 +17271,24 @@
         "requires-port": "^1.0.0"
       }
     },
+    "url-regex": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/url-regex/-/url-regex-5.0.0.tgz",
+      "integrity": "sha512-O08GjTiAFNsSlrUWfqF1jH0H1W3m35ZyadHrGv5krdnmPPoxP27oDTqux/579PtaroiSGm5yma6KT1mHFH6Y/g==",
+      "dev": true,
+      "requires": {
+        "ip-regex": "^4.1.0",
+        "tlds": "^1.203.0"
+      },
+      "dependencies": {
+        "ip-regex": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/ip-regex/-/ip-regex-4.1.0.tgz",
+          "integrity": "sha512-pKnZpbgCTfH/1NLIlOduP/V+WRXzC2MOz3Qo8xmxk8C5GudJLgK5QyLVXOSWy3ParAH7Eemurl3xjv/WXYFvMA==",
+          "dev": true
+        }
+      }
+    },
     "use": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 5791e56432..a9c0b2de68 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -28,6 +28,7 @@
     "@babel/preset-env": "^7.6.3",
     "@babel/preset-react": "^7.6.3",
     "@formatjs/cli": "^1.1.20",
+    "@mavrin/stylelint-declaration-use-css-custom-properties": "1.0.0-alpha.1",
     "@size-limit/file": "^4.0.1",
     "@types/cheerio": "^0.22.13",
     "@types/core-js": "^2.5.2",
@@ -46,6 +47,7 @@
     "babel-jest": "^24.9.0",
     "babel-loader": "^8.0.6",
     "clean-webpack-plugin": "^3.0.0",
+    "color": "^3.1.2",
     "copy-webpack-plugin": "^5.1.1",
     "css-loader": "^3.2.0",
     "document-register-element": "^1.14.3",
@@ -72,10 +74,12 @@
     "node-fetch": "^2.6.0",
     "npm-run-all": "^4.1.5",
     "postcss-calc": "^7.0.1",
-    "postcss-csso": "^3.0.0",
+    "postcss-csso": "^4.0.0",
+    "postcss-custom-properties": "^9.0.2",
     "postcss-for": "^2.1.1",
     "postcss-loader": "^3.0.0",
     "postcss-nested": "^4.1.2",
+    "postcss-prefixwrap": "^1.13.0",
     "postcss-simple-vars": "^5.0.2",
     "postcss-url": "^8.0.0",
     "postcss-wrap": "0.0.4",
@@ -86,6 +90,7 @@
     "stylelint": "^13.1.0",
     "stylelint-config-prettier": "^8.0.1",
     "stylelint-config-standard": "^20.0.0",
+    "stylelint-value-no-unknown-custom-properties": "^2.0.0",
     "ts-jest": "^24.1.0",
     "ts-loader": "^6.2.1",
     "typescript": "^3.6.4",
diff --git a/frontend/webpack.config.js b/frontend/webpack.config.js
index 3736d11ebe..f330462760 100644
--- a/frontend/webpack.config.js
+++ b/frontend/webpack.config.js
@@ -14,6 +14,7 @@ const publicFolder = path.resolve(__dirname, 'public');
 const env = process.env.NODE_ENV || 'development';
 const remarkUrl = process.env.REMARK_URL || 'https://demo.remark42.com';
 const NODE_ID = 'remark42';
+const pathToCustomCssProperties = './app/custom-properties.css';
 
 // let's log some env variables because we can
 console.log(`NODE_ENV = ${env}`);
@@ -49,13 +50,16 @@ const postCssLoader = wrap => ({
   loader: 'postcss-loader',
   options: {
     plugins: [
+      require('postcss-custom-properties')({
+        importFrom: path.resolve(__dirname, pathToCustomCssProperties),
+      }),
       require('postcss-for'),
       require('postcss-simple-vars'),
       require('postcss-nested'),
       require('postcss-calc'),
       require('autoprefixer')({ overrideBrowserslist: ['> 1%'] }),
       require('postcss-url')({ url: 'inline', maxSize: 5 }),
-      wrap ? require('postcss-wrap')({ selector: `#${NODE_ID}` }) : false,
+      wrap ? require('postcss-prefixwrap')(`#${NODE_ID}`, { ignoredSelectors: [':root'] }) : false,
       require('postcss-csso'),
     ].filter(plugin => plugin),
   },
@@ -71,8 +75,8 @@ module.exports = () => ({
   entry: {
     embed: './app/embed.ts',
     counter: './app/counter.ts',
-    'last-comments': './app/last-comments.tsx',
-    remark: './app/remark.tsx',
+    'last-comments': [pathToCustomCssProperties, './app/last-comments.tsx'],
+    remark: [pathToCustomCssProperties, './app/remark.tsx'],
     deleteme: './app/deleteme.ts',
   },
   output: {
@@ -117,7 +121,8 @@ module.exports = () => ({
             ...getExcluded(),
           },
           {
-            test: /\.s?css$/,
+            test: /\.(s?css|pcss)$/,
+            exclude: /\.module\.pcss$/,
             use: [
               {
                 loader: MiniCssExtractPlugin.loader,