docs: update nextjs and angular guide (#4633)

* docs: nextjs angular guide

* colormode

docs/docusaurus.config.js

@@ -20,13 +20,13 @@ module.exports = {
   ],
   themeConfig: {
     zoom: {
-      selector: '.markdown :not(em) > img',
+      selector: ".markdown :not(em) > img",
       background: {
-        light: 'rgb(243, 244, 246)',
-        dark: 'rgb(55, 59, 82)'
+        light: "rgb(243, 244, 246)",
+        dark: "rgb(55, 59, 82)",
       },
       // options you can specify via https://github.com/francoischalifour/medium-zoom#usage
-      config: {}
+      config: {},
     },
     navbar: {
       // title: 'ZITADEL',
@@ -119,7 +119,6 @@ module.exports = {
         {
           title: "Legal",
           items: [
-
             {
               label: "Terms and Conditions",
               href: "/docs/legal/terms-of-service",
@@ -152,22 +151,26 @@ module.exports = {
             {
               label: "Docs v1 (deprecated)",
               href: "https://docs-v1.zitadel.com/",
-            }
+            },
           ],
         },
-
       ],
       copyright: `Copyright © ${new Date().getFullYear()} ZITADEL Docs - Built with Docusaurus.`,
     },
     algolia: {
       appId: "8H6ZKXENLO",
       apiKey: "124fe1c102a184bc6fc70c75dc84f96f",
-      indexName: 'zitadel',
-      selector: 'div#'
-  },
+      indexName: "zitadel",
+      selector: "div#",
+    },
     prism: {
       additionalLanguages: ["csharp", "dart", "groovy", "regex"],
     },
+    colorMode: {
+      defaultMode: "dark",
+      disableSwitch: false,
+      respectPrefersColorScheme: true,
+    },
   },
   presets: [
     [
@@ -187,4 +190,5 @@ module.exports = {
     ],
   ],
   plugins: [require.resolve("docusaurus-plugin-image-zoom")],
+  themes: ["@saucelabs/theme-github-codeblock"],
 };