- add bootswatch theme css file

- add jquery script - add ToggleTheme script function
kkomzi7179 · Aug 16, 2022 · 8a0d510 · 8a0d510
1 parent 23b4e32
commit 8a0d510
Show file tree

Hide file tree

Showing 8 changed files with 72 additions and 2 deletions.
diff --git a/BlazorBootswatchTheme/BlazorApp/wwwroot/css/bootstrap/bootstrap.Cerulean.min.css b/BlazorBootswatchTheme/BlazorApp/wwwroot/css/bootstrap/bootstrap.Cerulean.min.css
diff --git a/BlazorBootswatchTheme/BlazorApp/wwwroot/css/bootstrap/bootstrap.Cosmo.min.css b/BlazorBootswatchTheme/BlazorApp/wwwroot/css/bootstrap/bootstrap.Cosmo.min.css
diff --git a/BlazorBootswatchTheme/BlazorApp/wwwroot/css/bootstrap/bootstrap.Cyborg.min.css b/BlazorBootswatchTheme/BlazorApp/wwwroot/css/bootstrap/bootstrap.Cyborg.min.css
diff --git a/BlazorBootswatchTheme/BlazorApp/wwwroot/css/bootstrap/bootstrap.Darkly.min.css b/BlazorBootswatchTheme/BlazorApp/wwwroot/css/bootstrap/bootstrap.Darkly.min.css
diff --git a/...p/wwwroot/css/bootstrap/bootstrap.min.css → ...t/css/bootstrap/bootstrap.Default.min.css b/...p/wwwroot/css/bootstrap/bootstrap.min.css → ...t/css/bootstrap/bootstrap.Default.min.css
diff --git a/BlazorBootswatchTheme/BlazorApp/wwwroot/css/bootstrap/bootstrap.Flatly.min.css b/BlazorBootswatchTheme/BlazorApp/wwwroot/css/bootstrap/bootstrap.Flatly.min.css
diff --git a/BlazorBootswatchTheme/BlazorApp/wwwroot/css/bootstrap/bootstrap.min.css.map b/BlazorBootswatchTheme/BlazorApp/wwwroot/css/bootstrap/bootstrap.min.css.map
diff --git a/BlazorBootswatchTheme/BlazorApp/wwwroot/index.html b/BlazorBootswatchTheme/BlazorApp/wwwroot/index.html
@@ -6,9 +6,15 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
     <title>BlazorApp</title>
     <base href="/" />
-    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
+    <link id="themeLink" href="css/bootstrap/bootstrap.Default.min.css" rel="stylesheet" />
     <link href="css/app.css" rel="stylesheet" />
     <link href="BlazorApp.styles.css" rel="stylesheet" />
+
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"
+            integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
+            crossorigin="anonymous"></script>
+    <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js" integrity="sha256-eTyxS0rkjpLEo16uXTS0uVCS4815lc40K2iVpWDvdSY=" crossorigin="anonymous"></script>
+
 </head>
 
 <body>
@@ -20,6 +26,11 @@
         <a class="dismiss">🗙</a>
     </div>
     <script src="_framework/blazor.webassembly.js"></script>
+    <script>
+        function ToggleTheme(themeName) {
+            $('#themeLink').attr('href', `css/bootstrap/bootstrap.${themeName}.min.css`);
+        }
+    </script>
 </body>
 
 </html>