diff --git a/assets/css/style-dark.css b/assets/css/style-dark.css
index 8502818..685e021 100644
--- a/assets/css/style-dark.css
+++ b/assets/css/style-dark.css
@@ -46,3 +46,7 @@ a:active {
 #contentsList hr.separator {
   border: solid 1px #363636;
 }
+
+img.avatar-border {
+  filter: invert(100%);
+}
\ No newline at end of file
diff --git a/layouts/index.html b/layouts/index.html
index 1bc104a..9956da5 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -8,7 +8,7 @@
           <!-- avator -->
           <div class="avatar">
             <img class="avatarMask" src="/img/{{ .Site.Params.avatar }}" alt="avatar">
-            <img src="/img/avatar-border.svg" alt="avatar-border">
+            <img src="/img/avatar-border.svg" class="avatar-border" alt="avatar-border">
           </div>
           <!-- author -->
           <h1 class="author">{{ .Site.Params.Author }}</h1>
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 9c1d7e7..cf8a7ba 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -2,7 +2,7 @@
   <!-- avator -->
   <div class="avatar">
     <img class="avatarMask" src="{{ .Site.BaseURL }}/img/{{ .Site.Params.avatar }}">
-    <a href="{{ .Site.BaseURL }}"><img src="{{ .Site.BaseURL }}/img/avatar-border.svg"></a>
+    <a href="{{ .Site.BaseURL }}"><img class="avatar-border" src="{{ .Site.BaseURL }}/img/avatar-border.svg"></a>
   </div>
   <!-- author -->
   <h2><a class="author" href="{{ .Site.BaseURL }}">{{ .Site.Params.Author }}</a></h2>