From bcc5e97fd9f08a1c4caa625ed5515ebfdb3cef10 Mon Sep 17 00:00:00 2001
From: Lyric <5h3ll3x@gmail.com>
Date: Wed, 21 Feb 2024 17:02:43 -0800
Subject: [PATCH] switch img src according to the theme

---
 .../theme/components/ThemedImageSwitch.vue    | 91 +++++++++++++++++++
 1000-hours/.vitepress/theme/index.ts          |  1 +
 1000-hours/.vitepress/theme/layouts/index.vue |  2 +
 .../public/images/speech-tract-l.dark.svg     | 27 ++++++
 .../public/images/speech-tract-l.light.svg    | 27 ++++++
 1000-hours/sounds-of-english/23-l.md          |  2 +
 6 files changed, 150 insertions(+)
 create mode 100644 1000-hours/.vitepress/theme/components/ThemedImageSwitch.vue
 create mode 100644 1000-hours/public/images/speech-tract-l.dark.svg
 create mode 100644 1000-hours/public/images/speech-tract-l.light.svg

diff --git a/1000-hours/.vitepress/theme/components/ThemedImageSwitch.vue b/1000-hours/.vitepress/theme/components/ThemedImageSwitch.vue
new file mode 100644
index 00000000..1e8e9284
--- /dev/null
+++ b/1000-hours/.vitepress/theme/components/ThemedImageSwitch.vue
@@ -0,0 +1,91 @@
+<template>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref } from "vue";
+
+const currentTheme = ref('light');
+
+const props = defineProps({
+  base: {
+    type: String,
+    required: true,
+  },
+  res: {
+    type: String,
+    required: true,
+  },
+  alt: {
+    type: String,
+    default: "",
+  },
+});
+
+const imgUrl = computed(() => {
+  if (isDarkTheme()) {
+    return `${props.base}/${props.res}.dark.svg`;
+  }
+  return `${props.base}/${props.res}.light.svg`;
+});
+
+function isDarkTheme() {
+  // check html element class, if it is dark, return true
+  let ret = document.documentElement.classList.contains('dark');
+  if (currentTheme.value === 'dark') {
+    ret = true
+  }
+  return ret;
+}
+
+function switchImagesTheme(isDark:boolean) {
+  const themedImages = document.querySelectorAll('img.themed');
+  for (let i = 0; i < themedImages.length; i ++) {
+    const img:any = themedImages[i];
+    const originalSrc:any = img.getAttribute('src')
+    const parts = originalSrc.split('.');
+    const prefix = parts.shift();
+    const ext = parts.pop();
+    const mid = isDark ? 'dark' : 'light';
+    if (prefix && ext && (prefix !== ext)) {
+      const newSrc = `${prefix}.${mid}.${ext}`
+      img.onerror = () => {
+        img.setAttribute('src', originalSrc);
+      }
+      img.setAttribute('src', newSrc);
+    }
+  }
+}
+
+onMounted(() => {
+  const htmlEle:any = document.querySelector('html');
+  const observer = new MutationObserver((mutationsList, observer) => {
+    for(const mutation of mutationsList) {
+      if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
+        switchImagesTheme(htmlEle.classList.contains('dark'))
+      }
+    }
+  });
+
+  const config = {
+    attributes: true,
+    attributeFilter: ['class']
+  };
+  observer.observe(htmlEle, config);
+
+  // apply html
+  switchImagesTheme(htmlEle.classList.contains('dark'))
+});
+</script>
+
+
+<style lang="scss" scoped>
+.image-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  img {
+    width: 100%;
+    height: auto;
+  }
+}
+</style>
diff --git a/1000-hours/.vitepress/theme/index.ts b/1000-hours/.vitepress/theme/index.ts
index 7e61e7d3..61a71b0b 100644
--- a/1000-hours/.vitepress/theme/index.ts
+++ b/1000-hours/.vitepress/theme/index.ts
@@ -16,6 +16,7 @@ export default {
   // },
   enhanceApp({ app, router, siteData }) {
     // ...
+    app.component('Image', Image)
     app.component('SpeakWord', SpeakWord)
   }
 } satisfies Theme
diff --git a/1000-hours/.vitepress/theme/layouts/index.vue b/1000-hours/.vitepress/theme/layouts/index.vue
index e4580981..cee94a85 100644
--- a/1000-hours/.vitepress/theme/layouts/index.vue
+++ b/1000-hours/.vitepress/theme/layouts/index.vue
@@ -1,6 +1,7 @@
 <script setup>
 import DefaultTheme from 'vitepress/theme'
 import SpeakWordInlineConverter from '../components/SpeakWordInlineConverter.vue'
+import ThemedImageSwitch from '../components/ThemedImageSwitch.vue'
 
 const { Layout } = DefaultTheme
 
@@ -11,6 +12,7 @@ const { Layout } = DefaultTheme
     <template #doc-after>
       <ClientOnly>
         <SpeakWordInlineConverter />
+        <ThemedImageSwitch />
       </ClientOnly>
     </template>
   </Layout>
diff --git a/1000-hours/public/images/speech-tract-l.dark.svg b/1000-hours/public/images/speech-tract-l.dark.svg
new file mode 100644
index 00000000..ee32f67f
--- /dev/null
+++ b/1000-hours/public/images/speech-tract-l.dark.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="1280px" height="800px" viewBox="0 0 1280 800" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>speech-tract-l</title>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="speech-tract-l">
+            <rect id="Rectangle" x="0" y="0" width="1280" height="800"></rect>
+            <g id="speech-tract-copy-2" transform="translate(353, 30)">
+                <path d="M41.0086634,364.016671 C34.1286634,365.166671 31.0086634,378.016671 31.0086634,378.016671 C31.0086634,378.016671 28.4686634,386.406671 31.0086634,394.016671 C33.4686634,401.406671 37.8486634,405.566671 40.0086634,408.016671 C42.1686634,410.466671 44.6986634,414.656671 51.0086634,423.016671 C55.7886634,429.346671 62.7086634,435.526671 67.0086634,447.016671 C73.3986634,464.096671 75.2286634,485.166671 78.0086634,501.016671 C80.1986634,513.516671 83.4386634,522.786671 85.0086634,525.016671 C86.5786634,527.246671 86.6986634,530.286671 104.008663,534.016671 C118.738663,537.186671 146.268663,536.896671 168.008663,537.016671 C188.348663,537.126671 215.518663,535.016671 234.008663,532.016671 C255.598663,528.506671 260.918663,524.866671 267.008663,524.016671 C273.098663,523.166671 288.588663,518.226671 307.008663,533.016671 C324.028663,546.686671 327.008663,552.016671 327.008663,552.016671 C327.008663,552.016671 330.208663,557.676671 334.008663,568.016671 C341.168663,587.596671 332.248663,592.876671 337.008663,606.016671 C341.678663,618.896671 349.858663,611.696671 361.158663,642.916671 C376.358663,685.126671 391.008663,726.016671 391.008663,726.016671 C391.008663,726.016671 394.068663,737.266671 403.008663,740.016671 C406.358663,741.046671 409.148663,739.266671 413.008663,739.016671 C421.188663,738.486671 430.008663,738.016671 430.008663,738.016671 L467.008663,736.016671 L433.008663,702.016671 L393.008663,613.016671 L373.008663,526.016671 L419.008663,462.016671 L440.008663,430.016671 C440.008663,430.016671 461.778663,402.416671 426.008663,374.016671 C408.128663,360.686671 403.508663,354.936671 386.008663,350.016671 C302.378663,326.506671 256.308663,351.196671 242.008663,353.016671 C213.688663,356.616671 178.008663,356.016671 178.008663,356.016671 C178.008663,356.016671 165.638663,357.676671 164.008663,372.016671 C162.378663,386.356671 169.558663,389.916671 172.008663,392.016671 C174.458663,394.116671 176.268663,396.046671 181.008663,401.016671 C186.118663,406.376671 192.848663,412.946671 196.008663,420.016671 C199.918663,428.756671 195.808663,437.336671 194.008663,439.016671 C189.278663,443.426671 176.068663,432.266671 174.008663,430.016671 C166.548663,421.856671 160.248663,411.046671 155.008663,405.016671 C151.728663,401.236671 149.008663,401.016671 149.008663,401.016671 L129.008663,415.016671 L129.008663,449.016671 L116.008663,452.016671 L106.008663,447.016671 C106.008663,447.016671 103.348663,433.536671 99.0086634,419.016671 C93.4886634,400.526671 88.9786634,384.166671 86.0086634,380.016671 C83.0386634,375.866671 70.9786634,361.686671 41.0086634,364.016671 Z" id="Path" stroke="#FFFFFF" stroke-width="2" fill="#8A8A89"></path>
+                <path d="M478.008663,738.016671 C477.578663,738.406671 462.198663,736.246671 446.008663,731.016671 C434.768663,727.386671 423.298663,720.946671 417.008663,717.016671 C401.648663,707.416671 389.008663,663.016671 389.008663,663.016671 C389.008663,663.016671 373.608663,623.786671 362.008663,591.016671 C354.558663,569.956671 349.008663,550.016671 349.008663,550.016671 C349.008663,550.016671 346.308663,537.876671 335.008663,528.016671 C322.848663,517.406671 309.488663,513.476671 306.008663,512.016671 C302.528663,510.556671 297.718663,507.606671 299.008663,505.016671 C300.208663,502.616671 310.008663,503.016671 310.008663,503.016671 C310.008663,503.016671 318.488663,503.706671 328.008663,499.016671 C333.358663,496.376671 339.048663,489.466671 345.008663,486.016671 C361.118663,476.676671 377.008663,470.016671 377.008663,470.016671 L436.008663,447.016671 C436.008663,447.016671 451.908663,441.286671 464.008663,432.016671 C475.378663,423.306671 481.628663,410.976671 483.008663,411.016574 C484.388663,411.056671 486.818663,414.386671 486.750143,418.136671 C486.658663,423.466671 485.008663,430.016671 485.008663,430.016671 C485.008663,430.016671 481.348663,443.426671 478.008663,449.016671 C469.208663,463.766671 457.008663,475.016671 457.008663,475.016671 C457.008663,475.016671 442.268663,494.396671 428.008663,516.016671 C411.448663,541.126671 396.818663,564.756671 396.008663,566.016671 C395.198663,567.276671 390.938663,574.986671 394.008663,583.016671 C399.298663,596.836671 409.788663,609.036671 413.008663,616.016671 C416.228663,622.996671 416.408663,623.446671 421.298663,634.136671 C427.298663,647.246671 434.068663,665.836671 441.008663,681.016671 C448.538663,697.466671 453.998663,706.926671 456.008663,710.016671 C456.798663,711.226671 460.368663,715.816671 464.408663,720.936671 C467.568663,724.946671 471.368663,727.716671 474.008663,731.016671 C476.568663,734.216671 478.438663,737.626671 478.008663,738.016671 Z" id="Path" stroke="#FFFFFF" stroke-width="2" fill="#BFC0BF"></path>
+                <path d="M87.0086634,517.016671 C87.0086634,517.016671 93.9486634,507.896671 98.0086634,484.016671 C102.428663,457.986671 103.008663,424.016671 103.008663,424.016671 C103.008663,424.016671 106.548663,397.556671 119.008663,398.016671 C123.728663,398.186671 139.468663,384.976671 145.008663,389.016671 C149.158663,392.046671 149.228663,397.936671 151.008663,404.016671 C154.108663,414.586671 158.008663,426.016671 158.008663,426.016671 C158.008663,426.016671 161.508663,437.276671 165.008663,448.016671 C168.508663,458.776671 171.008663,469.016671 171.008663,469.016671 C171.008663,469.016671 174.928663,487.626671 164.008663,499.016671 C151.528663,512.026671 128.598663,516.066671 125.008663,518.016671 C121.418663,519.966671 108.438663,527.506671 107.008663,528.016671 C105.578663,528.526671 94.1486634,529.846671 89.0086634,527.016671 C84.1486634,524.346671 87.0086634,517.016671 87.0086634,517.016671 Z" id="Path" stroke="#FFFFFF" stroke-width="2" fill="#BFC0BF"></path>
+                <path d="M114.008663,356.016671 C114.008663,356.016671 111.778663,366.456671 112.008663,376.016671 C112.278663,387.306671 115.008663,398.016671 115.008663,398.016671 C115.008663,398.016671 115.838663,400.336671 118.008663,402.016671 C121.438663,404.686671 125.908663,406.016671 132.008663,406.016671 C135.738663,406.016671 146.608663,406.016671 149.008663,398.016671 C150.518663,392.996671 147.008663,385.016671 147.008663,385.016671 L123.008663,354.016671 C123.008663,354.016671 120.178663,350.536671 118.008663,351.016671 C115.678663,351.536671 114.008663,356.016671 114.008663,356.016671 Z" id="Path" stroke="#FFFFFF" stroke-width="2" fill="#F2F1F0"></path>
+                <path d="M542.008663,715.016671 C542.008663,715.016671 534.938663,691.276671 528.008663,663.016671 C524.038663,646.836671 521.198663,630.376671 517.008663,613.016671 C514.578663,602.956671 513.218663,592.876671 511.008663,584.016671 C505.158663,560.606671 499.008663,545.016671 499.008663,545.016671 C499.008663,545.016671 495.458663,530.166671 498.008663,520.016671 C499.778663,512.986671 506.958663,507.726671 510.008663,507.016671 C513.418663,506.226671 519.418663,506.376671 523.008663,513.016671 C527.368663,521.086671 528.428663,533.286671 530.008663,539.016671 C531.588663,544.746671 535.668663,556.496671 542.008663,582.016671 C547.118663,602.556671 545.948663,626.386671 551.008663,648.016671 C558.288663,679.096671 569.178663,699.396671 571.008663,705.016671 C572.838663,710.636671 567.028663,729.286671 557.008663,730.016671 C546.988663,730.746671 542.008663,715.016671 542.008663,715.016671 Z" id="Path" stroke="#FFFFFF" stroke-width="2" fill="#BFC0BF"></path>
+                <path d="M114.008663,191.016671 L108.008663,287.016671 L133.008663,289.016671 C133.008663,289.016671 151.188663,291.316671 167.008663,285.016671 C183.168663,278.576671 202.858663,254.866671 220.008663,246.016671 C232.738663,237.326671 251.028663,238.246671 261.008663,238.016671 C270.988663,237.786671 285.188663,234.676671 310.008663,239.016671 C318.928663,240.576671 325.458663,246.346671 335.008663,248.016671 C348.558663,250.386671 358.768663,254.516671 370.008663,257.016671 C388.128663,261.036671 404.008663,263.016671 404.008663,263.016671 C404.008663,263.016671 418.598663,260.446671 421.008663,253.016671 C423.418663,245.586671 421.008663,240.016671 421.008663,240.016671 C421.008663,240.016671 408.498663,236.266671 397.008663,234.016671 C385.498663,231.766671 375.008663,231.016671 375.008663,231.016671 C375.008663,231.016671 359.118663,227.176671 337.008663,222.016671 C328.398663,220.006671 320.498663,216.976671 312.008663,215.016671 C297.928663,211.766671 294.818663,210.906671 285.008663,210.016671 C275.198663,209.126671 275.498663,210.206671 246.008663,208.016671 C227.248663,206.626671 192.068663,203.696671 173.008663,201.016671 C157.488663,198.836671 144.678663,189.206671 134.008663,188.016671 C122.518663,186.736671 114.008663,191.016671 114.008663,191.016671 Z" id="Path" stroke="#FFFFFF" stroke-width="2" fill="#BFC0BF"></path>
+                <path d="M491.008663,344.016671 C490.288663,343.836671 478.958663,318.916671 476.008663,313.016671 C473.058663,307.116671 469.268663,301.826671 462.008663,293.016671 C455.288663,284.846671 450.678663,281.046671 448.008663,279.016671 C445.338663,276.986671 443.038663,273.796671 436.008663,271.016671 C423.308663,265.996671 405.008663,262.016671 405.008663,262.016671 C405.008663,262.016671 400.978663,261.736671 399.008663,260.016671 C396.978663,258.236671 397.008639,256.836671 397.008639,255.016671 C397.008639,253.196671 399.528663,247.196671 405.008663,243.016671 C409.998663,239.206671 415.578663,238.756671 418.008663,239.016671 C420.438663,239.276671 432.458663,246.376671 446.008663,258.016671 C466.488663,275.606671 486.028663,296.216671 489.008663,300.016671 C491.988663,303.816671 495.148663,308.486671 497.008663,318.016671 C497.308663,319.566671 496.938663,322.536671 497.008663,324.016671 C497.518663,335.376671 491.728663,344.196671 491.008663,344.016671 Z" id="Path" stroke="#FFFFFF" stroke-width="2" fill="#8A8A89"></path>
+                <path d="M84.0086634,203.016671 C81.1386634,205.366671 71.5086634,218.016671 62.0086634,237.016671 C49.8386634,261.346671 41.6486634,284.806671 41.0086634,288.016671 C40.3686634,291.226671 39.9686634,299.026671 42.0086634,304.016671 C44.4386634,309.946671 49.0086634,312.016671 49.0086634,312.016671 C49.0086634,312.016671 55.6186634,316.056671 63.0086634,319.016671 C70.6086634,322.056671 75.7486634,323.716671 79.0086634,324.016671 C82.2686634,324.316671 84.7686634,324.086671 89.0086634,322.016671 C93.2486634,319.946671 97.5386634,311.886671 104.008663,301.016671 C110.028663,290.906671 110.378663,284.546671 111.008663,282.016671 C111.638663,279.486671 110.378663,272.586671 111.008663,269.016671 C111.638663,265.446671 119.728663,256.646671 125.008663,243.016671 C129.058663,232.576671 130.138663,227.266671 130.008663,222.016671 C129.878663,216.766671 128.568663,213.826671 125.008663,206.016671 C121.898663,199.206671 116.748663,192.686671 115.008663,192.016671 C111.268663,190.576671 106.618663,192.566671 99.0086634,195.016671 C91.1186634,197.556671 86.8786634,200.666671 84.0086634,203.016671 Z" id="Path" stroke="#FFFFFF" stroke-width="2" fill="#8A8A89"></path>
+                <path d="M101.008663,329.016671 C100.368663,327.896671 96.8986634,304.746671 102.008663,291.016671 C106.328663,279.426671 116.108663,279.276671 117.008663,279.016671 C117.908663,278.756671 122.598663,276.716671 124.008663,277.016671 C125.418663,277.316671 128.478663,279.386671 130.008663,287.016671 C131.478663,294.376671 131.968663,303.896671 131.008663,307.016671 C130.528663,308.566671 122.848663,316.406671 117.008663,323.016671 C111.078663,329.726671 106.048663,334.176671 105.008663,334.016671 C102.928663,333.696671 101.648663,330.136671 101.008663,329.016671 Z" id="Path" stroke="#FFFFFF" stroke-width="2" fill="#F2F1F0"></path>
+                <path d="M9.00866338,137.016671 C9.00866338,137.016671 47.7586634,102.376671 76.0086634,71.0166709 C87.6986634,58.0466709 96.9386634,44.7166709 104.008663,35.0166709 C112.778663,22.9966709 118.008663,16.0166709 118.008663,16.0166709 C118.008663,16.0166709 124.568663,9.04667089 131.008663,5.01667089 C136.488663,1.58667089 138.688663,-0.193329112 145.008663,0.0166708883 C151.328663,0.226670888 154.578663,4.57667089 174.008663,7.01667089 C187.998663,8.77667089 208.378663,8.83667089 227.008663,11.0166709 C256.998663,14.5266709 289.148663,16.5566709 315.008663,20.0166709 C343.998663,23.8966709 365.008663,29.0166709 365.008663,29.0166709 C365.008663,29.0166709 422.648663,46.3766709 461.008663,64.0166709 C497.608663,80.8566709 515.008663,98.0166709 515.008663,98.0166709 C515.008663,98.0166709 535.628663,109.906671 550.008663,156.016671 C553.578663,167.466671 557.888663,181.946671 562.008663,196.016671 C565.638663,208.436671 569.188663,220.376671 571.008663,232.016671 C575.558663,261.176671 574.008663,280.016671 574.008663,280.016671 C574.008663,280.016671 573.258663,284.276671 572.008663,287.016671 C570.758663,289.776671 569.658663,291.756671 567.008663,290.016671 C564.358663,288.276671 544.588663,262.636671 523.008663,248.016671 C496.048663,229.746671 460.998663,213.726671 427.008663,180.016671 C404.938663,158.126671 386.788663,133.736671 371.008663,113.016671 C343.658663,77.1166709 326.008663,50.0166709 326.008663,50.0166709 C326.008663,50.0166709 320.818663,43.8066709 315.008663,40.0166709 C309.328663,36.3066709 305.498663,35.5866709 303.008663,35.0166709 C300.518663,34.4466709 242.178663,35.4766709 199.008663,40.0166709 C168.378663,43.2366709 158.358663,48.1366709 151.008663,51.0166709 C143.658663,53.8966709 131.688663,66.5266709 110.008663,86.0166709 C78.9186634,113.966671 43.4986634,147.646671 42.0086634,149.016671 C40.5186634,150.386671 39.7886634,152.636671 39.0086634,156.016671 C38.2886634,159.126671 39.0086634,162.016671 39.0086634,162.016671 C39.0086634,162.016671 42.9486634,170.346671 43.0086634,173.016671 C43.0686634,175.686671 42.8786634,178.606671 40.0086634,183.016671 C36.4486634,188.486671 33.1486634,191.806671 31.0086634,193.016671 C28.8686634,194.226671 19.4386634,195.956671 13.0086634,190.016671 C5.94866338,183.496671 2.97866338,171.146671 2.00866338,168.016671 C1.03866338,164.886671 -0.11133662,156.326671 0.00866337995,152.016671 C0.12866338,147.706671 1.69866338,143.746671 3.00866338,142.016671 C4.31866338,140.286671 9.00866338,137.016671 9.00866338,137.016671 Z" id="Path" stroke="#FFFFFF" stroke-width="2" fill="#BFC0BF"></path>
+                <path d="M409.008663,76.0166709 C408.828663,77.4166709 411.968663,102.826671 420.008663,129.016671 C427.448663,153.256671 434.388663,168.946671 435.008663,170.016671 C435.628663,171.086671 437.348663,173.926671 441.008663,176.016671 C444.338663,177.916671 447.178663,177.946671 449.008663,178.016671 C450.838663,178.086671 456.028663,178.706671 465.008663,176.016671 C478.158663,172.066671 495.208663,164.686671 498.458663,163.256671 C493.418663,165.466671 502.778663,162.146671 505.008663,158.016671 C506.738663,154.806671 506.008663,150.016671 506.008663,150.016671 C506.008663,150.016671 505.538663,143.616671 504.008663,138.016671 C502.538663,132.616671 500.008663,128.016671 500.008663,128.016671 C500.008663,128.016671 496.188663,122.606671 488.008663,117.016671 C481.548663,112.606671 471.268663,108.666671 463.008663,103.016671 C452.428663,95.7866709 443.098663,88.5466709 435.008663,83.0166709 C427.288663,77.7366709 421.008663,74.0166709 421.008663,74.0166709 C421.008663,74.0166709 417.638663,71.7866709 415.008663,72.0166709 C412.378663,72.2466709 409.188663,74.6166709 409.008663,76.0166709 Z" id="Path" stroke="#FFFFFF" stroke-width="2" fill="#FFFFFF"></path>
+                <path d="M457.008663,587.016671 C457.008663,587.016671 431.008663,588.756671 415.008663,592.016671 C406.898663,593.666671 403.008663,598.016671 403.008663,598.016671 C403.008663,598.016671 419.958663,594.786671 425.008663,595.016671 C430.058663,595.246671 450.188663,599.786671 455.008663,600.016671 C459.828663,600.246671 466.218663,599.466671 477.008663,598.016671 C491.628663,596.046671 507.008663,593.016671 507.008663,593.016671 C507.008663,593.016671 501.808663,591.806671 494.008663,590.016671 C490.678663,589.256671 480.788663,587.146671 474.408663,586.586671 C461.318663,585.436671 457.008663,587.016671 457.008663,587.016671 Z" id="Path" stroke="#FFFFFF" stroke-width="2"></path>
+                <text id="l" font-family="CourierNewPSMT, Courier New" font-size="36" font-weight="normal" fill="#FFFFFF">
+                    <tspan x="261" y="304">l</tspan>
+                </text>
+                <path d="M146,291.125421 C150.440278,288.310025 156.535045,290.776954 164.284299,298.526209 C172.033554,306.275464 178.12832,315.998067 182.568598,327.69402" id="Line-6-Copy-2" stroke="#7D4417" stroke-width="5" stroke-linecap="square"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/1000-hours/public/images/speech-tract-l.light.svg b/1000-hours/public/images/speech-tract-l.light.svg
new file mode 100644
index 00000000..278b90c7
--- /dev/null
+++ b/1000-hours/public/images/speech-tract-l.light.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="1280px" height="800px" viewBox="0 0 1280 800" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>speech-tract-l</title>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="speech-tract-l">
+            <rect id="Rectangle" x="0" y="0" width="1280" height="800"></rect>
+            <g id="speech-tract-copy-2" transform="translate(353, 30)">
+                <path d="M41.0086634,364.016671 C34.1286634,365.166671 31.0086634,378.016671 31.0086634,378.016671 C31.0086634,378.016671 28.4686634,386.406671 31.0086634,394.016671 C33.4686634,401.406671 37.8486634,405.566671 40.0086634,408.016671 C42.1686634,410.466671 44.6986634,414.656671 51.0086634,423.016671 C55.7886634,429.346671 62.7086634,435.526671 67.0086634,447.016671 C73.3986634,464.096671 75.2286634,485.166671 78.0086634,501.016671 C80.1986634,513.516671 83.4386634,522.786671 85.0086634,525.016671 C86.5786634,527.246671 86.6986634,530.286671 104.008663,534.016671 C118.738663,537.186671 146.268663,536.896671 168.008663,537.016671 C188.348663,537.126671 215.518663,535.016671 234.008663,532.016671 C255.598663,528.506671 260.918663,524.866671 267.008663,524.016671 C273.098663,523.166671 288.588663,518.226671 307.008663,533.016671 C324.028663,546.686671 327.008663,552.016671 327.008663,552.016671 C327.008663,552.016671 330.208663,557.676671 334.008663,568.016671 C341.168663,587.596671 332.248663,592.876671 337.008663,606.016671 C341.678663,618.896671 349.858663,611.696671 361.158663,642.916671 C376.358663,685.126671 391.008663,726.016671 391.008663,726.016671 C391.008663,726.016671 394.068663,737.266671 403.008663,740.016671 C406.358663,741.046671 409.148663,739.266671 413.008663,739.016671 C421.188663,738.486671 430.008663,738.016671 430.008663,738.016671 L467.008663,736.016671 L433.008663,702.016671 L393.008663,613.016671 L373.008663,526.016671 L419.008663,462.016671 L440.008663,430.016671 C440.008663,430.016671 461.778663,402.416671 426.008663,374.016671 C408.128663,360.686671 403.508663,354.936671 386.008663,350.016671 C302.378663,326.506671 256.308663,351.196671 242.008663,353.016671 C213.688663,356.616671 178.008663,356.016671 178.008663,356.016671 C178.008663,356.016671 165.638663,357.676671 164.008663,372.016671 C162.378663,386.356671 169.558663,389.916671 172.008663,392.016671 C174.458663,394.116671 176.268663,396.046671 181.008663,401.016671 C186.118663,406.376671 192.848663,412.946671 196.008663,420.016671 C199.918663,428.756671 195.808663,437.336671 194.008663,439.016671 C189.278663,443.426671 176.068663,432.266671 174.008663,430.016671 C166.548663,421.856671 160.248663,411.046671 155.008663,405.016671 C151.728663,401.236671 149.008663,401.016671 149.008663,401.016671 L129.008663,415.016671 L129.008663,449.016671 L116.008663,452.016671 L106.008663,447.016671 C106.008663,447.016671 103.348663,433.536671 99.0086634,419.016671 C93.4886634,400.526671 88.9786634,384.166671 86.0086634,380.016671 C83.0386634,375.866671 70.9786634,361.686671 41.0086634,364.016671 Z" id="Path" stroke="#000000" stroke-width="2" fill="#8A8A89"></path>
+                <path d="M478.008663,738.016671 C477.578663,738.406671 462.198663,736.246671 446.008663,731.016671 C434.768663,727.386671 423.298663,720.946671 417.008663,717.016671 C401.648663,707.416671 389.008663,663.016671 389.008663,663.016671 C389.008663,663.016671 373.608663,623.786671 362.008663,591.016671 C354.558663,569.956671 349.008663,550.016671 349.008663,550.016671 C349.008663,550.016671 346.308663,537.876671 335.008663,528.016671 C322.848663,517.406671 309.488663,513.476671 306.008663,512.016671 C302.528663,510.556671 297.718663,507.606671 299.008663,505.016671 C300.208663,502.616671 310.008663,503.016671 310.008663,503.016671 C310.008663,503.016671 318.488663,503.706671 328.008663,499.016671 C333.358663,496.376671 339.048663,489.466671 345.008663,486.016671 C361.118663,476.676671 377.008663,470.016671 377.008663,470.016671 L436.008663,447.016671 C436.008663,447.016671 451.908663,441.286671 464.008663,432.016671 C475.378663,423.306671 481.628663,410.976671 483.008663,411.016574 C484.388663,411.056671 486.818663,414.386671 486.750143,418.136671 C486.658663,423.466671 485.008663,430.016671 485.008663,430.016671 C485.008663,430.016671 481.348663,443.426671 478.008663,449.016671 C469.208663,463.766671 457.008663,475.016671 457.008663,475.016671 C457.008663,475.016671 442.268663,494.396671 428.008663,516.016671 C411.448663,541.126671 396.818663,564.756671 396.008663,566.016671 C395.198663,567.276671 390.938663,574.986671 394.008663,583.016671 C399.298663,596.836671 409.788663,609.036671 413.008663,616.016671 C416.228663,622.996671 416.408663,623.446671 421.298663,634.136671 C427.298663,647.246671 434.068663,665.836671 441.008663,681.016671 C448.538663,697.466671 453.998663,706.926671 456.008663,710.016671 C456.798663,711.226671 460.368663,715.816671 464.408663,720.936671 C467.568663,724.946671 471.368663,727.716671 474.008663,731.016671 C476.568663,734.216671 478.438663,737.626671 478.008663,738.016671 Z" id="Path" stroke="#000000" stroke-width="2" fill="#BFC0BF"></path>
+                <path d="M87.0086634,517.016671 C87.0086634,517.016671 93.9486634,507.896671 98.0086634,484.016671 C102.428663,457.986671 103.008663,424.016671 103.008663,424.016671 C103.008663,424.016671 106.548663,397.556671 119.008663,398.016671 C123.728663,398.186671 139.468663,384.976671 145.008663,389.016671 C149.158663,392.046671 149.228663,397.936671 151.008663,404.016671 C154.108663,414.586671 158.008663,426.016671 158.008663,426.016671 C158.008663,426.016671 161.508663,437.276671 165.008663,448.016671 C168.508663,458.776671 171.008663,469.016671 171.008663,469.016671 C171.008663,469.016671 174.928663,487.626671 164.008663,499.016671 C151.528663,512.026671 128.598663,516.066671 125.008663,518.016671 C121.418663,519.966671 108.438663,527.506671 107.008663,528.016671 C105.578663,528.526671 94.1486634,529.846671 89.0086634,527.016671 C84.1486634,524.346671 87.0086634,517.016671 87.0086634,517.016671 Z" id="Path" stroke="#000000" stroke-width="2" fill="#BFC0BF"></path>
+                <path d="M114.008663,356.016671 C114.008663,356.016671 111.778663,366.456671 112.008663,376.016671 C112.278663,387.306671 115.008663,398.016671 115.008663,398.016671 C115.008663,398.016671 115.838663,400.336671 118.008663,402.016671 C121.438663,404.686671 125.908663,406.016671 132.008663,406.016671 C135.738663,406.016671 146.608663,406.016671 149.008663,398.016671 C150.518663,392.996671 147.008663,385.016671 147.008663,385.016671 L123.008663,354.016671 C123.008663,354.016671 120.178663,350.536671 118.008663,351.016671 C115.678663,351.536671 114.008663,356.016671 114.008663,356.016671 Z" id="Path" stroke="#000000" stroke-width="2" fill="#F2F1F0"></path>
+                <path d="M542.008663,715.016671 C542.008663,715.016671 534.938663,691.276671 528.008663,663.016671 C524.038663,646.836671 521.198663,630.376671 517.008663,613.016671 C514.578663,602.956671 513.218663,592.876671 511.008663,584.016671 C505.158663,560.606671 499.008663,545.016671 499.008663,545.016671 C499.008663,545.016671 495.458663,530.166671 498.008663,520.016671 C499.778663,512.986671 506.958663,507.726671 510.008663,507.016671 C513.418663,506.226671 519.418663,506.376671 523.008663,513.016671 C527.368663,521.086671 528.428663,533.286671 530.008663,539.016671 C531.588663,544.746671 535.668663,556.496671 542.008663,582.016671 C547.118663,602.556671 545.948663,626.386671 551.008663,648.016671 C558.288663,679.096671 569.178663,699.396671 571.008663,705.016671 C572.838663,710.636671 567.028663,729.286671 557.008663,730.016671 C546.988663,730.746671 542.008663,715.016671 542.008663,715.016671 Z" id="Path" stroke="#000000" stroke-width="2" fill="#BFC0BF"></path>
+                <path d="M114.008663,191.016671 L108.008663,287.016671 L133.008663,289.016671 C133.008663,289.016671 151.188663,291.316671 167.008663,285.016671 C183.168663,278.576671 202.858663,254.866671 220.008663,246.016671 C232.738663,237.326671 251.028663,238.246671 261.008663,238.016671 C270.988663,237.786671 285.188663,234.676671 310.008663,239.016671 C318.928663,240.576671 325.458663,246.346671 335.008663,248.016671 C348.558663,250.386671 358.768663,254.516671 370.008663,257.016671 C388.128663,261.036671 404.008663,263.016671 404.008663,263.016671 C404.008663,263.016671 418.598663,260.446671 421.008663,253.016671 C423.418663,245.586671 421.008663,240.016671 421.008663,240.016671 C421.008663,240.016671 408.498663,236.266671 397.008663,234.016671 C385.498663,231.766671 375.008663,231.016671 375.008663,231.016671 C375.008663,231.016671 359.118663,227.176671 337.008663,222.016671 C328.398663,220.006671 320.498663,216.976671 312.008663,215.016671 C297.928663,211.766671 294.818663,210.906671 285.008663,210.016671 C275.198663,209.126671 275.498663,210.206671 246.008663,208.016671 C227.248663,206.626671 192.068663,203.696671 173.008663,201.016671 C157.488663,198.836671 144.678663,189.206671 134.008663,188.016671 C122.518663,186.736671 114.008663,191.016671 114.008663,191.016671 Z" id="Path" stroke="#000000" stroke-width="2" fill="#BFC0BF"></path>
+                <path d="M491.008663,344.016671 C490.288663,343.836671 478.958663,318.916671 476.008663,313.016671 C473.058663,307.116671 469.268663,301.826671 462.008663,293.016671 C455.288663,284.846671 450.678663,281.046671 448.008663,279.016671 C445.338663,276.986671 443.038663,273.796671 436.008663,271.016671 C423.308663,265.996671 405.008663,262.016671 405.008663,262.016671 C405.008663,262.016671 400.978663,261.736671 399.008663,260.016671 C396.978663,258.236671 397.008639,256.836671 397.008639,255.016671 C397.008639,253.196671 399.528663,247.196671 405.008663,243.016671 C409.998663,239.206671 415.578663,238.756671 418.008663,239.016671 C420.438663,239.276671 432.458663,246.376671 446.008663,258.016671 C466.488663,275.606671 486.028663,296.216671 489.008663,300.016671 C491.988663,303.816671 495.148663,308.486671 497.008663,318.016671 C497.308663,319.566671 496.938663,322.536671 497.008663,324.016671 C497.518663,335.376671 491.728663,344.196671 491.008663,344.016671 Z" id="Path" stroke="#000000" stroke-width="2" fill="#8A8A89"></path>
+                <path d="M84.0086634,203.016671 C81.1386634,205.366671 71.5086634,218.016671 62.0086634,237.016671 C49.8386634,261.346671 41.6486634,284.806671 41.0086634,288.016671 C40.3686634,291.226671 39.9686634,299.026671 42.0086634,304.016671 C44.4386634,309.946671 49.0086634,312.016671 49.0086634,312.016671 C49.0086634,312.016671 55.6186634,316.056671 63.0086634,319.016671 C70.6086634,322.056671 75.7486634,323.716671 79.0086634,324.016671 C82.2686634,324.316671 84.7686634,324.086671 89.0086634,322.016671 C93.2486634,319.946671 97.5386634,311.886671 104.008663,301.016671 C110.028663,290.906671 110.378663,284.546671 111.008663,282.016671 C111.638663,279.486671 110.378663,272.586671 111.008663,269.016671 C111.638663,265.446671 119.728663,256.646671 125.008663,243.016671 C129.058663,232.576671 130.138663,227.266671 130.008663,222.016671 C129.878663,216.766671 128.568663,213.826671 125.008663,206.016671 C121.898663,199.206671 116.748663,192.686671 115.008663,192.016671 C111.268663,190.576671 106.618663,192.566671 99.0086634,195.016671 C91.1186634,197.556671 86.8786634,200.666671 84.0086634,203.016671 Z" id="Path" stroke="#000000" stroke-width="2" fill="#8A8A89"></path>
+                <path d="M101.008663,329.016671 C100.368663,327.896671 96.8986634,304.746671 102.008663,291.016671 C106.328663,279.426671 116.108663,279.276671 117.008663,279.016671 C117.908663,278.756671 122.598663,276.716671 124.008663,277.016671 C125.418663,277.316671 128.478663,279.386671 130.008663,287.016671 C131.478663,294.376671 131.968663,303.896671 131.008663,307.016671 C130.528663,308.566671 122.848663,316.406671 117.008663,323.016671 C111.078663,329.726671 106.048663,334.176671 105.008663,334.016671 C102.928663,333.696671 101.648663,330.136671 101.008663,329.016671 Z" id="Path" stroke="#000000" stroke-width="2" fill="#F2F1F0"></path>
+                <path d="M9.00866338,137.016671 C9.00866338,137.016671 47.7586634,102.376671 76.0086634,71.0166709 C87.6986634,58.0466709 96.9386634,44.7166709 104.008663,35.0166709 C112.778663,22.9966709 118.008663,16.0166709 118.008663,16.0166709 C118.008663,16.0166709 124.568663,9.04667089 131.008663,5.01667089 C136.488663,1.58667089 138.688663,-0.193329112 145.008663,0.0166708883 C151.328663,0.226670888 154.578663,4.57667089 174.008663,7.01667089 C187.998663,8.77667089 208.378663,8.83667089 227.008663,11.0166709 C256.998663,14.5266709 289.148663,16.5566709 315.008663,20.0166709 C343.998663,23.8966709 365.008663,29.0166709 365.008663,29.0166709 C365.008663,29.0166709 422.648663,46.3766709 461.008663,64.0166709 C497.608663,80.8566709 515.008663,98.0166709 515.008663,98.0166709 C515.008663,98.0166709 535.628663,109.906671 550.008663,156.016671 C553.578663,167.466671 557.888663,181.946671 562.008663,196.016671 C565.638663,208.436671 569.188663,220.376671 571.008663,232.016671 C575.558663,261.176671 574.008663,280.016671 574.008663,280.016671 C574.008663,280.016671 573.258663,284.276671 572.008663,287.016671 C570.758663,289.776671 569.658663,291.756671 567.008663,290.016671 C564.358663,288.276671 544.588663,262.636671 523.008663,248.016671 C496.048663,229.746671 460.998663,213.726671 427.008663,180.016671 C404.938663,158.126671 386.788663,133.736671 371.008663,113.016671 C343.658663,77.1166709 326.008663,50.0166709 326.008663,50.0166709 C326.008663,50.0166709 320.818663,43.8066709 315.008663,40.0166709 C309.328663,36.3066709 305.498663,35.5866709 303.008663,35.0166709 C300.518663,34.4466709 242.178663,35.4766709 199.008663,40.0166709 C168.378663,43.2366709 158.358663,48.1366709 151.008663,51.0166709 C143.658663,53.8966709 131.688663,66.5266709 110.008663,86.0166709 C78.9186634,113.966671 43.4986634,147.646671 42.0086634,149.016671 C40.5186634,150.386671 39.7886634,152.636671 39.0086634,156.016671 C38.2886634,159.126671 39.0086634,162.016671 39.0086634,162.016671 C39.0086634,162.016671 42.9486634,170.346671 43.0086634,173.016671 C43.0686634,175.686671 42.8786634,178.606671 40.0086634,183.016671 C36.4486634,188.486671 33.1486634,191.806671 31.0086634,193.016671 C28.8686634,194.226671 19.4386634,195.956671 13.0086634,190.016671 C5.94866338,183.496671 2.97866338,171.146671 2.00866338,168.016671 C1.03866338,164.886671 -0.11133662,156.326671 0.00866337995,152.016671 C0.12866338,147.706671 1.69866338,143.746671 3.00866338,142.016671 C4.31866338,140.286671 9.00866338,137.016671 9.00866338,137.016671 Z" id="Path" stroke="#000000" stroke-width="2" fill="#BFC0BF"></path>
+                <path d="M409.008663,76.0166709 C408.828663,77.4166709 411.968663,102.826671 420.008663,129.016671 C427.448663,153.256671 434.388663,168.946671 435.008663,170.016671 C435.628663,171.086671 437.348663,173.926671 441.008663,176.016671 C444.338663,177.916671 447.178663,177.946671 449.008663,178.016671 C450.838663,178.086671 456.028663,178.706671 465.008663,176.016671 C478.158663,172.066671 495.208663,164.686671 498.458663,163.256671 C493.418663,165.466671 502.778663,162.146671 505.008663,158.016671 C506.738663,154.806671 506.008663,150.016671 506.008663,150.016671 C506.008663,150.016671 505.538663,143.616671 504.008663,138.016671 C502.538663,132.616671 500.008663,128.016671 500.008663,128.016671 C500.008663,128.016671 496.188663,122.606671 488.008663,117.016671 C481.548663,112.606671 471.268663,108.666671 463.008663,103.016671 C452.428663,95.7866709 443.098663,88.5466709 435.008663,83.0166709 C427.288663,77.7366709 421.008663,74.0166709 421.008663,74.0166709 C421.008663,74.0166709 417.638663,71.7866709 415.008663,72.0166709 C412.378663,72.2466709 409.188663,74.6166709 409.008663,76.0166709 Z" id="Path" stroke="#000000" stroke-width="2" fill="#FFFFFF"></path>
+                <path d="M457.008663,587.016671 C457.008663,587.016671 431.008663,588.756671 415.008663,592.016671 C406.898663,593.666671 403.008663,598.016671 403.008663,598.016671 C403.008663,598.016671 419.958663,594.786671 425.008663,595.016671 C430.058663,595.246671 450.188663,599.786671 455.008663,600.016671 C459.828663,600.246671 466.218663,599.466671 477.008663,598.016671 C491.628663,596.046671 507.008663,593.016671 507.008663,593.016671 C507.008663,593.016671 501.808663,591.806671 494.008663,590.016671 C490.678663,589.256671 480.788663,587.146671 474.408663,586.586671 C461.318663,585.436671 457.008663,587.016671 457.008663,587.016671 Z" id="Path" stroke="#000000" stroke-width="2"></path>
+                <text id="l" font-family="CourierNewPSMT, Courier New" font-size="36" font-weight="normal" fill="#000000">
+                    <tspan x="261" y="304">l</tspan>
+                </text>
+                <path d="M146,291.125421 C150.440278,288.310025 156.535045,290.776954 164.284299,298.526209 C172.033554,306.275464 178.12832,315.998067 182.568598,327.69402" id="Line-6-Copy-2" stroke="#7D4417" stroke-width="5" stroke-linecap="square"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/1000-hours/sounds-of-english/23-l.md b/1000-hours/sounds-of-english/23-l.md
index 9bc2f957..6c4a909c 100644
--- a/1000-hours/sounds-of-english/23-l.md
+++ b/1000-hours/sounds-of-english/23-l.md
@@ -11,3 +11,5 @@
 所以，要格外注意 `l` 在元音之后的情况，注意舌尖位置正确，动作完整，不能有嘴唇动作 —— 否则就会出现 `ʊ` 音。
 
 ![](/images/speech-tract-l.svg)
+
+<img src="/images/speech-tract-l.svg" class="themed"/>