Site code block color adjustment (#5009)

Author: origami-z

site/src/components/mdx/code/Code.module.css

@@ -1,6 +1,6 @@
 .code {
   --code-padding-vertical: 0.1rem;
-  --code-padding-horizontal: 0.1rem;
+  --code-padding-horizontal: 0.25rem;
 }
 
 .code {
@@ -9,4 +9,8 @@
   vertical-align: text-bottom;
   white-space: pre-wrap;
   padding: var(--code-padding-vertical) var(--code-padding-horizontal);
+  background-color: var(--salt-container-secondary-background);
+  border-radius: var(--salt-palette-corner-weaker, 0);
+  vertical-align: baseline;
+  border: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-container-secondary-borderColor);
 }

site/src/components/mdx/pre/Pre.module.css

@@ -11,10 +11,16 @@
   margin: 0;
 }
 
+:global([data-mode="light"]) .pre pre,
+:global([data-mode="light"]) .pre pre span {
+  background-color: var(--salt-container-secondary-background, var(--shiki-light-bg));
+  color: var(--shiki-light);
+}
+
 :global([data-mode="dark"]) .pre pre,
 :global([data-mode="dark"]) .pre pre span {
-  background-color: var(--shiki-dark-bg) !important;
-  color: var(--shiki-dark) !important;
+  background-color: var(--shiki-dark-bg);
+  color: var(--shiki-dark);
 }
 
 .copyButton {

site/src/components/mdx/pre/Pre.tsx

@@ -51,7 +51,7 @@ export const Pre = forwardRef<HTMLDivElement, PreProps>(function Pre(
           light: "github-light",
           dark: "github-dark",
         },
-        defaultColor: "light",
+        defaultColor: false,
       });
 
       setHtml(html);