Add alt text to Overview.stories.mdx

This commit is contained in:
Koen Vlaswinkel
2023-12-14 10:50:16 +01:00
parent 9a77748a59
commit 8d1c8bc725

View File

@@ -45,18 +45,18 @@ select the **Dark+** theme. You can use **Preferences: Color Theme** in the *Com
4. Select **Developer: Open WebView Developer Tools**
5. Now, you will need to find the `<html>` element in the lowest-level `<iframe>`. See the image below:
<img src={iframeImage} />
<img src={iframeImage} alt="The iframe element showing in the VS Code webview developer tools element inspector" />
6. Once you have selected the `<html>` element as in the image above, click on **Show All Properties (... more)** (see image below). This will
expand all CSS variables.
<img src={stylesImage} />
<img src={stylesImage} alt="The styles tab of the VS Code webview developer tools element inspector" />
7. Copy all variables to the `src/stories/vscode-theme-dark.css` file.
8. Now, select the `<body>` element which is a direct child of the `<html>` element.
9. This time, you do not need to copy the variables. Instead, copy the styles on the `<body>` element to the `src/stories/vscode-theme-dark.css` file.
See the image below for which styles need to be copied.
<img src={bodyImage} />
<img src={bodyImage} alt="The styles on the body element showing in the VS Code webview developer tools element inspector" />
The same process can also be followed for updating the `src/stories/vscode-theme-light.css` file, but make sure to select the **Light+** theme.