Prism darkmode design update (#1767)

* Update prism darkmode design

* Update snippets scrollbar for chrome

* Prism - update darkmode design

site/content/docs/standard/integrations/next/index.html

@@ -166,7 +166,7 @@ <h2 class="text-lg font-bold">Step 4</h2>
   <div class="pb-4">
     <!--prettier-ignore-->
     {{< twsnippet/wrapper "_app.js" "" "mobile" >}}
-        {{< twsnippet/code active=true lang="JavaScript" >}}
+        {{< twsnippet/code active=true lang="jsx" >}}
         import "@/styles/globals.css";
         import { Roboto } from "next/font/google";
 
@@ -222,7 +222,7 @@ <h2 class="text-lg font-bold">Step 7</h2>
   <div class="pb-4">
     <!--prettier-ignore-->
     {{< twsnippet/wrapper "MyDatepicker.js" "" "mobile" >}}
-        {{< twsnippet/code active=true lang="JavaScript" >}}
+        {{< twsnippet/code active=true lang="jsx" >}}
         import { Datepicker, Input, initTE } from "tw-elements";
         import { useEffect } from "react";
 
@@ -265,7 +265,7 @@ <h2 class="text-lg font-bold">Step 8</h2>
   <div class="pb-4">
     <!--prettier-ignore-->
     {{< twsnippet/wrapper "index.js" "" "mobile" >}}
-      {{< twsnippet/code active=true lang="JavaScript" >}}
+      {{< twsnippet/code active=true lang="jsx" >}}
       import dynamic from "next/dynamic";
 
       const DynamicDatepicker = dynamic(() => import("./MyDatepicker"), { ssr: false });
@@ -310,7 +310,7 @@ <h2 class="text-lg font-bold">Step 1</h2>
   <div class="pb-4">
     <!--prettier-ignore-->
     {{< twsnippet/wrapper "MyDatepicker.js" "" "mobile" >}}
-      {{< twsnippet/code active=true lang="JavaScript" >}}
+      {{< twsnippet/code active=true lang="jsx" >}}
       import { Datepicker, Input } from "tw-elements";
       import { useEffect } from "react";
 

site/content/docs/standard/integrations/react/index.html

@@ -557,7 +557,7 @@ <h2 class="text-lg font-bold">Step 6</h2>
   <div class="pb-4">
     <!--prettier-ignore-->
     {{< twsnippet/wrapper "App.jsx" "" "mobile">}}
-      {{< twsnippet/code active=true lang="JavaScript" >}}
+      {{< twsnippet/code active=true lang="jsx" >}}
         import React, { useEffect } from "react";
         import { Datepicker, Input, initTE } from "tw-elements";
 
@@ -614,7 +614,7 @@ <h2 class="text-lg font-bold">Step 1</h2>
   <div class="pb-4">
     <!--prettier-ignore-->
     {{< twsnippet/wrapper "App.jsx" "" "mobile">}}
-      {{< twsnippet/code active=true lang="JavaScript" >}}
+    {{< twsnippet/code active=true lang="jsx" >}}
         import { useEffect } from "react";
         import { Datepicker, Input } from "tw-elements";
 

site/content/docs/standard/integrations/remix/index.html

@@ -217,7 +217,7 @@ <h2 class="text-lg font-bold">Step 6</h2>
   <div class="pb-4">
     <!--prettier-ignore-->
     {{< twsnippet/wrapper "MyDatepicker.client.jsx" "" "mobile" >}}
-        {{< twsnippet/code active=true lang="JavaScript" >}}
+        {{< twsnippet/code active=true lang="jsx" >}}
         import { useEffect } from "react";
         import { Datepicker, Input, initTE } from "tw-elements";
 
@@ -267,7 +267,7 @@ <h2 class="text-lg font-bold">Step 8</h2>
   <div class="pb-4">
     <!--prettier-ignore-->
     {{< twsnippet/wrapper "root.jsx" "" "mobile" >}}
-      {{< twsnippet/code active=true lang="JavaScript" >}}
+      {{< twsnippet/code active=true lang="jsx" >}}
       import { ClientOnly } from "remix-utils";
       import MyDatepicker from "./components/MyDatepicker.client";
 
@@ -309,7 +309,7 @@ <h2 class="text-lg font-bold">Step 1</h2>
   <div class="pb-4">
     <!--prettier-ignore-->
     {{< twsnippet/wrapper "MyDatepicker.client.jsx" "" "mobile" >}}
-    {{< twsnippet/code active=true lang="JavaScript" >}}
+    {{< twsnippet/code active=true lang="jsx" >}}
     import { useEffect } from "react";
     import { Datepicker, Input } from "tw-elements";
 

site/content/docs/standard/integrations/solid/index.html

@@ -197,7 +197,7 @@ <h2 class="text-lg font-bold">Step 6</h2>
   <div class="pb-4">
     <!--prettier-ignore-->
     {{< twsnippet/wrapper "App.jsx" "" "mobile" >}}
-        {{< twsnippet/code active=true lang="JavaScript" >}}
+        {{< twsnippet/code active=true lang="jsx" >}}
         import { onMount } from "solid-js";
         import { Datepicker, Input, initTE } from "tw-elements";
 
@@ -259,7 +259,7 @@ <h2 class="text-lg font-bold">Step 1</h2>
   <div class="pb-4">
     <!--prettier-ignore-->
     {{< twsnippet/wrapper "App.jsx" "" "mobile" >}}
-      {{< twsnippet/code active=true lang="JavaScript" >}}
+      {{< twsnippet/code active=true lang="jsx" >}}
       import { onMount } from "solid-js";
       import { Datepicker, Input } from "tw-elements";
 

site/content/docs/standard/integrations/svelte/index.html

@@ -249,7 +249,7 @@ <h2 class="text-lg font-bold">Step 8</h2>
   <div class="pb-4">
     <!--prettier-ignore-->
     {{< twsnippet/wrapper "+page.svelte" "" "mobile" >}}
-        {{< twsnippet/code active=true lang="JavaScript" >}}
+        {{< twsnippet/code active=true lang="html" >}}
     <script>
       import { onMount } from "svelte";
       import { Datepicker, Input, initTE } from "tw-elements";
@@ -306,7 +306,7 @@ <h2 class="text-lg font-bold">Step 1</h2>
   <div class="pb-4">
     <!--prettier-ignore-->
     {{< twsnippet/wrapper "+page.svelte" "" "mobile" >}}
-      {{< twsnippet/code active=true lang="JavaScript" >}}
+      {{< twsnippet/code active=true lang="html" >}}
     <script>
       import { onMount } from "svelte";
       import { Datepicker, Input } from "tw-elements";

site/layouts/shortcodes/twsnippet/code.html

@@ -10,7 +10,7 @@
   id="mdb_{{ $hash }}"
   role="tabpanel">
   <pre
-    class="grey text-[14px] lighten-3 line-numbers language-{{ .Get `lang` }} mb-0 dark:bg-neutral-600">
+    class="grey text-[14px] lighten-3 line-numbers language-{{ .Get `lang` }} mb-0">
         <code class="{{if ne (.Get `type`) ``}}type-{{.Get `type`}}{{end}}">
             {{ .Inner | htmlEscape | htmlUnescape }}
         </code>

site/static/css/new-prism.css

@@ -562,41 +562,48 @@ pre[class*='language-'] {
 .dark code[class*='language-'],
 .dark pre[class*='language-'] {
   color: white;
-  text-shadow: 0 1px black;
+  text-shadow: none;
+  background: #202022;
 }
 .dark .docs-pills pre[class*='language-'] {
   border: 1px solid #525252;
 }
 .dark .token.operator, .dark .token.entity, .dark .token.url, .language-css .dark .token.string, .dark .style .token.string {
-  color: #eecea7;
-  background: rgb(82 82 91);
+  color: #c6e0e0;
+  background: transparent
+}
+ .dark .token.attr-name, .dark .token.char, .dark .token.builtin, .dark .token.inserted {
+  color: rgb(220, 220, 220) ;
 }
-.dark .token.selector, .dark .token.attr-name, .dark .token.string, .dark .token.char, .dark .token.builtin, .dark .token.inserted {
-  color: #a3c956;
+
+.dark .token.selector, .dark .token.string {
+  color: #73a3e6
 }
+
 .dark .token.function, .dark .token.class-name {
-  color: #e490a1;
+  color: #b06edc;
 }
 .dark .token.property, .dark .token.tag, .dark .token.boolean, .dark .token.number, .dark .token.constant, .dark .token.symbol, .dark .token.deleted {
-  color: #ea7fba;
+  color: #dc6eaf;
 }
 .dark .token.atrule, .dark .token.attr-value, .dark .token.keyword {
-  color: #84ccec;
+  color: #73c8e6;
 }
 .dark .token.comment {
-  color: #bdb6b6;
+  color: #999;
 }
 
 .dark .code-toolbar pre::-webkit-scrollbar {
-  width: 10px;
+  width: 15px;
 }
 .dark .code-toolbar pre::-webkit-scrollbar-track {
-  background-color: #3f4b5d !important;
+  background-color: #272626 !important;
 }
 .dark .code-toolbar pre::-webkit-scrollbar-thumb {
-  background-color: #79808a !important;
+  background-color: #444242 !important;
+  border-radius: 2px;
 }
 .dark .code-toolbar pre::-webkit-scrollbar-corner {
-  background-color: #3f4b5d !important;
+  background-color: #272626 !important;
 }
 /* stylelint-enable */