Themes.

JessePeden · Mar 27, 2022 · 491548a · 491548a
1 parent 2fb675b
commit 491548a
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 2 deletions.
diff --git a/media/css/theme.css b/media/css/theme.css
@@ -0,0 +1,4 @@
+body {
+    background-color: #cacecb;
+    color: #2d2d2d;
+}
diff --git a/media/css/theme.dark.css b/media/css/theme.dark.css
@@ -0,0 +1,4 @@
+body {
+    background-color: #262626;
+    color: #cacecb;
+}
diff --git a/src/webviews/welcome.html b/src/webviews/welcome.html
@@ -4,6 +4,7 @@
     <link href="{0}" rel="stylesheet">
     <script src="{1}/bootstrap.bundle.min.js"></script>
     <script src="{1}/fontawesome.js"></script>
+    <link href="{3}" rel="stylesheet">
 
     <script>
         function walkthrough() {

diff --git a/src/webviews/welcome.ts b/src/webviews/welcome.ts
@@ -79,7 +79,12 @@ export default class WelcomePanel {
             undefined
         );
 
-        panel.webview.html = format(content, [bootstrapCss.toString(), js.toString(), images.toString()]);
+        let theme = panel.webview.asWebviewUri(vscode.Uri.joinPath(this._extensionUri, 'media', 'css', 'theme.css'));
+        if (vscode.window.activeColorTheme.kind == vscode.ColorThemeKind.Dark) {
+            theme = panel.webview.asWebviewUri(vscode.Uri.joinPath(this._extensionUri, 'media', 'css', 'theme.dark.css'));
+        }
+
+        panel.webview.html = format(content, [bootstrapCss.toString(), js.toString(), images.toString(), theme.toString()]);
 
         // Listen for when the panel is disposed
         // This happens when the user closes the panel or when the panel is closed programmatically

diff --git a/walkthroughs/getting-started/3-connect.md b/walkthroughs/getting-started/3-connect.md
@@ -1,6 +1,6 @@
 ## Connect Visual Studio Code
 
-The PowerShell Unviersal Visual Studio Code extension requires connection information to login to your PowerShell Universal instance. Once logged into PowerShell Universal, click Settings \ Configurations and then Edit with VS Code. You'll be prompted and VS Code will be configured automatically.
+The PowerShell Universal Visual Studio Code extension requires connection information to login to your PowerShell Universal instance. Once logged into PowerShell Universal, click Settings \ Configurations and then Edit with VS Code. You'll be prompted and VS Code will be configured automatically.
 
 <p align="center">
   <img src="../../images/connect.png" alt="PowerShell Universal" />