diff --git a/.vitepress/theme/custom.css b/.vitepress/theme/custom.css
new file mode 100644
index 00000000..9b9c728f
--- /dev/null
+++ b/.vitepress/theme/custom.css
@@ -0,0 +1,7 @@
+html.dark .light-only {
+  display: none !important;
+}
+
+html:not(.dark) .dark-only {
+  display: none !important;
+}
diff --git a/.vitepress/theme/index.ts b/.vitepress/theme/index.ts
index 560f3515..8dabc0aa 100644
--- a/.vitepress/theme/index.ts
+++ b/.vitepress/theme/index.ts
@@ -1,12 +1,13 @@
 import Layout from "./Layout.vue";
 import * as amplitude from "@amplitude/analytics-browser";
+import "./custom.css";
 
 export default {
   Layout,
   async enhanceApp() {
-    if (typeof window !== 'undefined') {
+    if (typeof window !== "undefined") {
       const amplitudeApiKey = (import.meta as any).env.VITE_AMPLITUDE_API_KEY;
       amplitude.init(amplitudeApiKey, { autocapture: true });
     }
   }
-};
\ No newline at end of file
+};
diff --git a/code/examples/submit-button.md b/code/examples/submit-button.md
index 4903e181..9860d559 100644
--- a/code/examples/submit-button.md
+++ b/code/examples/submit-button.md
@@ -43,7 +43,8 @@ function SubmitButton() {
 예를 들어, 다음 코드에서 파란색은 사용자가 보기 전용 권한(`'viewer'`)을 가지고 있을 때, 빨간색은 일반 사용자일 때 실행되는 코드예요.
 동시에 실행되지 않는 코드가 교차되어서 나타나서 코드를 이해할 때 부담을 줘요.
 
-![](../../images/examples/submit-button.png)
+![](../../images/examples/submit-button.png){.light-only}
+![](../../images/examples/submit-button-dark.png){.dark-only}
 
 ## ✏️ 개선해보기
 
diff --git a/en/code/examples/submit-button.md b/en/code/examples/submit-button.md
index c70d89b3..82e0fc02 100644
--- a/en/code/examples/submit-button.md
+++ b/en/code/examples/submit-button.md
@@ -43,7 +43,8 @@ As a result, there are too many contexts for the reader to consider at once.
 For example, in the following code, the blue parts are executed when the user has read-only permissions (`'viewer'`), while the red parts are executed for regular users.
 Intermixed code that doesn't execute simultaneously creates confusion and makes it harder to understand the logic.
 
-![](../../../images/examples/submit-button.png)
+![](../../../images/examples/submit-button.png){.light-only}
+![](../../../images/examples/submit-button-dark.png){.dark-only}
 
 ## ✏️ Work on Improving
 
diff --git a/images/examples/submit-button-dark.png b/images/examples/submit-button-dark.png
new file mode 100644
index 00000000..621c9529
Binary files /dev/null and b/images/examples/submit-button-dark.png differ
diff --git a/images/examples/submit-button.png b/images/examples/submit-button.png
index 5d2eebe3..9d024155 100644
Binary files a/images/examples/submit-button.png and b/images/examples/submit-button.png differ
diff --git a/ja/code/examples/submit-button.md b/ja/code/examples/submit-button.md
index b085d3c5..9eb02fb9 100644
--- a/ja/code/examples/submit-button.md
+++ b/ja/code/examples/submit-button.md
@@ -41,8 +41,8 @@ function SubmitButton() {
 
 例えば、次のコードで青色の部分はユーザーが閲覧専用権限（`'viewer'`）を持っているときに実行されるコードで、赤色の部分は一般ユーザーの場合に実行されるコードです。同時に実行されないコードが交差して現れるため、コードを理解するのが難しくなってしまっています。
 
-![](../../../images/examples/submit-button.png)
-
+![](../../../images/examples/submit-button.png){.light-only}
+![](../../../images/examples/submit-button-dark.png){.dark-only}
 
 ## ✏️ リファクタリングしてみる