Skip to content

Feat: Implement dark mode image support in markdown #129

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jan 22, 2025
Merged

Feat: Implement dark mode image support in markdown #129

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions .vitepress/theme/custom.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
html.dark .light-only {
display: none !important;
}

html:not(.dark) .dark-only {
display: none !important;
}
5 changes: 3 additions & 2 deletions .vitepress/theme/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 });
}
}
};
};
3 changes: 2 additions & 1 deletion code/examples/submit-button.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}

## ✏️ 개선해보기

Expand Down
3 changes: 2 additions & 1 deletion en/code/examples/submit-button.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
Binary file added images/examples/submit-button-dark.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified images/examples/submit-button.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions ja/code/examples/submit-button.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}

## ✏️ リファクタリングしてみる

Expand Down