diff --git a/source/css/_common/scaffolding/tags/note.styl b/source/css/_common/scaffolding/tags/note.styl
index fcbdfae..4708f59 100644
--- a/source/css/_common/scaffolding/tags/note.styl
+++ b/source/css/_common/scaffolding/tags/note.styl
@@ -85,6 +85,24 @@ if (hexo-config('note.style') != 'disabled') {
               color: $note-modern-hover[$type];
             }
           }
+
+          if (hexo-config('darkmode')) {
+            @media (prefers-color-scheme: dark) {
+              background: $note-modern-bg-dark[$type];
+              border-color: $note-modern-border-dark[$type];
+              color: $note-modern-text-dark[$type];
+
+              a:not(.btn) {
+                border-bottom-color: $note-modern-text-dark[$type];
+                color: $note-modern-text-dark[$type];
+
+                &:hover {
+                  border-bottom-color: $note-modern-hover-dark[$type];
+                  color: $note-modern-hover-dark[$type];
+                }
+              }
+            }
+          }
         }
 
         if ($note-style != 'modern') {
diff --git a/source/css/_variables/base.styl b/source/css/_variables/base.styl
index 4562c09..8a25e2b 100644
--- a/source/css/_variables/base.styl
+++ b/source/css/_variables/base.styl
@@ -374,6 +374,19 @@ $note-modern-hover = {
   danger  : darken(spin($note-modern-text.danger, -10), 22%)
 };
 
+transform-map(map, transform) {
+  new-map = {
+  }
+  for key, val in map {
+    new-map[key] = transform(val);
+  }
+  return new-map;
+}
+
+$note-modern-border-dark = transform-map($note-modern-hover,  @(val) {           lighten(val, 10%)       });
+$note-modern-bg-dark     = transform-map($note-modern-text,   @(val) { desaturate(darken(val, 20%), 20%) });
+$note-modern-text-dark   = transform-map($note-modern-bg,     @(val) {            darken(val, 10%)       });
+$note-modern-hover-dark  = transform-map($note-modern-border, @(val) {           lighten(val, 75%)       });
 
 // Tabs border radius
 // --------------------------------------------------