diff --git a/src/components/MiniToc/MiniToc.scss b/src/components/MiniToc/MiniToc.scss
index d3228559..7a239b8e 100644
--- a/src/components/MiniToc/MiniToc.scss
+++ b/src/components/MiniToc/MiniToc.scss
@@ -30,7 +30,7 @@
         display: block;
 
         & > #{$class}__section-link {
-            border-left-color: var(--g-color-line-generic);
+            border-left-color: var(--dc-color-mini-toc-border);
 
             @include mixins.focusable(-2px);
         }
@@ -41,12 +41,12 @@
             padding: 6px 6px 6px 12px;
             min-height: 28px;
 
-            color: var(--g-color-text-secondary);
+            color: var(--dc-color-mini-toc);
             border-left: 2px solid transparent;
             text-decoration: none;
 
             &:hover {
-                color: var(--g-color-text-complementary);
+                color: var(--dc-color-mini-toc-hover);
             }
         }
 
@@ -57,8 +57,8 @@
         }
 
         &_active > #{$class}__section-link {
-            color: var(--g-color-text-primary);
-            border-left-color: var(--g-color-text-primary);
+            color: var(--dc-color-mini-toc-active);
+            border-left-color: var(--dc-color-mini-toc-active-border);
         }
     }
 
diff --git a/src/styles/yfm.scss b/src/styles/yfm.scss
index 5ab42137..2b6ec7b5 100644
--- a/src/styles/yfm.scss
+++ b/src/styles/yfm.scss
@@ -4,12 +4,29 @@
 .dc-doc-page .yfm {
     color: var(--g-color-text-primary);
 
-    --yfm-color-hljs-background: var(--g-color-base-background);
-    --yfm-color-hljs-subst: var(--g-color-text-complementary);
+    --yfm-color-code: var(--g-color-text-complementary);
+    --yfm-color-code-background: var(--g-color-base-misc-light);
+    --yfm-color-inline-code-background: var(--g-color-base-misc-light);
+    --yfm-color-inline-code: var(--g-color-text-misc);
+
+    --yfm-color-hljs-background: var(--yfm-color-code-background);
+    --yfm-color-hljs-subst: var(--yfm-color-code);
     --yfm-color-hljs-comment: var(--g-color-text-secondary);
     --yfm-color-hljs-deletion: var(--g-color-line-danger);
     --yfm-color-hljs-section: var(--g-color-line-danger);
 
+    --yfm-color-table: var(--g-color-text-primary);
+    --yfm-color-table-background: var(--g-color-base-background);
+    --yfm-color-table-row-background: var(--g-color-base-generic);
+    --yfm-color-table-outer-border: var(--g-color-line-generic);
+    --yfm-color-table-inner-border: var(--g-color-border);
+
+    --yfm-color-quote: var(--g-color-base-brand);
+    --yfm-color-tab: var(--g-color-base-brand);
+    --yfm-color-tab-hover: var(--g-color-text-link-hover);
+    --ymf-color-popup-border: var(--g-color-line-generic-solid);
+    --yfm-color-popup-background: var(--g-color-base-float);
+
     &::-webkit-scrollbar,
     *::-webkit-scrollbar {
         height: var(--g-scrollbar-width);
@@ -59,36 +76,32 @@
         font-size: var(--dc-code-short-font-size);
         line-height: var(--dc-code-short-line-height);
         padding: var(--dc-code-short-padding);
-        background: var(--g-color-base-misc-light);
-        color: var(--g-color-text-misc);
     }
 
     pre > code {
         font-size: var(--dc-code-font-size);
         line-height: var(--dc-code-line-height);
         padding: 16px;
-        background: var(--g-color-base-misc-light);
-        color: var(--g-color-text-complementary);
     }
 
     dfn {
-        background: var(--g-color-base-float);
+        background: var(--yfm-color-popup-background);
         box-shadow: 0 8px 20px var(--g-color-sfx-shadow);
     }
 
     dfn:before {
-        box-shadow: 0 0 0 1px var(--g-color-line-generic-solid);
+        box-shadow: 0 0 0 1px var(--yfm-color-popup-border);
     }
 
     table {
-        color: var(--g-color-text-primary);
-        border-color: var(--g-color-line-generic);
-        background: var(--g-color-base-background);
+        color: var(--yfm-color-table);
+        border-color: var(--yfm-color-table-outer-border);
+        background: var(--yfm-color-table-background);
     }
 
     table thead,
     table tr:nth-child(2n) {
-        background: var(--g-color-base-generic);
+        background: var(--yfm-color-table-row-background);
     }
 
     hr {
@@ -96,7 +109,7 @@
     }
 
     blockquote {
-        border-left-color: var(--g-color-base-brand);
+        border-left-color: var(--yfm-color-quote);
     }
 
     .yfm-tab-list {
@@ -108,13 +121,13 @@
 
         &:hover,
         &:active {
-            color: var(--g-color-text-link-hover);
+            color: var(--yfm-color-tab-hover);
         }
         @include mixins.focusable();
     }
 
     .yfm-tab.active {
-        border-bottom-color: var(--g-color-base-brand);
+        border-bottom-color: var(--yfm-color-tab);
     }
 
     /* TODO: move yfm-cut styles to yfm-transform */
diff --git a/src/themes/common/index.scss b/src/themes/common/index.scss
index 5ebafb22..31f893de 100644
--- a/src/themes/common/index.scss
+++ b/src/themes/common/index.scss
@@ -18,6 +18,11 @@
     --dc-header-height: 0px;
     --dc-subnavigation-height: 52px;
     --dc-subheader-height: 40px;
+    --dc-color-mini-toc-border: var(--g-color-line-generic);
+    --dc-color-mini-toc: var(--g-color-text-secondary);
+    --dc-color-mini-toc-hover: var(--g-color-text-complementary);
+    --dc-color-mini-toc-active: var(--g-color-text-primary);
+    --dc-color-mini-toc-active-border: var(--g-color-text-primary);
 
     --dc-error-image-403: url('data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=');
     --dc-error-image-404: url('data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=');