From ac61b2b69a9e2413ff7e8012131423dce24fb256 Mon Sep 17 00:00:00 2001 From: mst101 Date: Sat, 10 Dec 2022 20:23:20 +0000 Subject: [PATCH] docs(rendering): hide light image in dark mode (#9620) --- docs/content/1.docs/2.guide/1.concepts/3.rendering.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/content/1.docs/2.guide/1.concepts/3.rendering.md b/docs/content/1.docs/2.guide/1.concepts/3.rendering.md index b3e98ba0cc..28f2e9ee04 100644 --- a/docs/content/1.docs/2.guide/1.concepts/3.rendering.md +++ b/docs/content/1.docs/2.guide/1.concepts/3.rendering.md @@ -10,8 +10,8 @@ Both the browser and server can interpret JavaScript code to render Vue.js compo Out of the box, a traditional Vue.js application is rendered in the browser (or **client**). Then, Vue.js generates HTML elements after the browser downloads and parses all the JavaScript code containing the instructions to create the current interface. -![Users have to wait for the browser to download, parse and execute the JavaScript before seeing the page's content](/assets/docs/concepts/rendering/light/csr.svg){.light-img} -![Users have to wait for the browser to download, parse and execute the JavaScript before seeing the page's content](/assets/docs/concepts/rendering/dark/csr.svg){.dark-img} +![Users have to wait for the browser to download, parse and execute the JavaScript before seeing the page's content](/assets/docs/concepts/rendering/light/csr.svg){.light-img.dark:hidden} +![Users have to wait for the browser to download, parse and execute the JavaScript before seeing the page's content](/assets/docs/concepts/rendering/dark/csr.svg){.dark-img.hidden.dark:block} While this technique allows building complex and dynamic UIs with smooth page transitions, it has different pros and cons: @@ -40,8 +40,8 @@ Making a static page interactive in the browser is called "Hydration." Universal rendering allows a Nuxt application to provide quick page load times while preserving the benefits of client-side rendering. Furthermore, as the content is already present in the HTML document, crawlers can index it without overhead. -![Users can access the static content when the HTML document is loaded. Hydration then allows page's interactivity](/assets/docs/concepts/rendering/light/ssr.svg){.light-img} -![Users can access the static content when the HTML document is loaded. Hydration then allows page's interactivity](/assets/docs/concepts/rendering/dark/ssr.svg){.dark-img} +![Users can access the static content when the HTML document is loaded. Hydration then allows page's interactivity](/assets/docs/concepts/rendering/light/ssr.svg){.light-img.dark:hidden} +![Users can access the static content when the HTML document is loaded. Hydration then allows page's interactivity](/assets/docs/concepts/rendering/dark/ssr.svg){.dark-img.hidden.dark:block} ### Pros