Implement dark mode for images

Author: illright

i18n/en/docusaurus-plugin-content-docs/current/get-started/tutorial.mdx

@@ -3,14 +3,14 @@ sidebar_position: 2
 ---
 
 import { ReactCompareSlider, ReactCompareSliderImage, ReactCompareSliderHandle } from "react-compare-slider";
+import { ThemedCompareSliderImage } from "@site/src/shared/ui";
 
 # Tutorial
 
 Let's look at the principles of Feature-Sliced Design by building a simple web notes app. We will start theoretical, so don't worry if you don't know the stack. Here's how the app looks like, nice and simple, only for mobile:
 
-{/* TODO: dark mode */}
-
-![Notes application screens](/img/tutorial/overview.jpg)
+![Notes application screens](/img/tutorial/overview-light.jpg#light-mode-only)
+![Notes application screens](/img/tutorial/overview-dark.jpg#dark-mode-only)
 
 ## Decomposing the user interface
 
@@ -55,8 +55,8 @@ Useful questions to ask yourself when determining whether an element is an entit
 
 <ReactCompareSlider 
   handle={<ReactCompareSliderHandle buttonStyle={{WebkitBackdropFilter: undefined, backdropFilter: undefined, backgroundColor: 'white', boxShadow: undefined, color: '#444'}} linesStyle={{opacity: 0.5}}/>}
-  itemOne={<ReactCompareSliderImage src="/img/tutorial/overview.jpg" alt="Screens, unannotated" />}
-  itemTwo={<ReactCompareSliderImage src="/img/tutorial/annotated-entities-features.jpg" alt="Screens, annotated with entities and features" />}
+  itemOne={<ThemedCompareSliderImage srcLight="/img/tutorial/overview-light.jpg" srcDark="/img/tutorial/overview-dark.jpg" alt="Screens, unannotated" />}
+  itemTwo={<ThemedCompareSliderImage srcLight="/img/tutorial/annotated-entities-features-light.jpg" srcDark="/img/tutorial/annotated-entities-features-dark.jpg" alt="Screens, annotated with entities and features" />}
   position={100}
 />
 

package.json

@@ -30,6 +30,7 @@
         "@docusaurus/plugin-content-docs": "2.1.0",
         "@docusaurus/plugin-ideal-image": "2.1.0",
         "@docusaurus/preset-classic": "2.1.0",
+        "@docusaurus/theme-common": "2.1.0",
         "@fontsource/overpass": "^4.5.4",
         "@fontsource/ubuntu": "^4.5.4",
         "@mdx-js/react": "^1.6.22",

pnpm-lock.yaml

@@ -28,6 +28,26 @@ html {
     }
 }
 
+:root[data-theme=dark] [src$="#light-mode-only"] {
+    display: none
+}
+
+:root[data-theme=light] [src$="#dark-mode-only"] {
+    display: none
+}
+
+@media(prefers-color-scheme: dark) {
+    :root[data-theme=auto] [src$="#light-mode-only"] {
+        display:none
+    }
+}
+
+@media(prefers-color-scheme: light) {
+    :root[data-theme=auto] [src$="#dark-mode-only"] {
+        display:none
+    }
+}
+
 iframe {
     width: 100%;
     height: 700px;

src/app/doc-item.scss

@@ -2,3 +2,4 @@
 export * from "./card";
 export * from "./section";
 export * from "./table";
+export { ThemedCompareSliderImage } from "./themed-compare-slider-image";

src/shared/ui/index.js

@@ -0,0 +1,20 @@
+import React from "react";
+import { ReactCompareSliderImage, ReactCompareSliderImageProps } from "react-compare-slider";
+import { useColorMode } from "@docusaurus/theme-common";
+
+interface ThemedCompareSliderImageProps extends Omit<ReactCompareSliderImageProps, "src"> {
+    srcLight: string;
+    srcDark: string;
+}
+
+export const ThemedCompareSliderImage = ({
+    srcDark,
+    srcLight,
+    ...restProps
+}: ThemedCompareSliderImageProps) => {
+    const { colorMode } = useColorMode();
+
+    return (
+        <ReactCompareSliderImage src={colorMode === "dark" ? srcDark : srcLight} {...restProps} />
+    );
+};