feat: implement dark mode image support in markdown (#129)

Author: Seol-JY

.vitepress/theme/custom.css

@@ -0,0 +1,7 @@
+html.dark .light-only {
+  display: none !important;
+}
+
+html:not(.dark) .dark-only {
+  display: none !important;
+}

.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 });
     }
   }
-};
+};

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}
 
 ## ✏️ 개선해보기
 

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
 

images/examples/submit-button-dark.png

@@ -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}
 
 ## ✏️ リファクタリングしてみる