fix(deps): update dependency shiki to v4

Dockerfile

@@ -22,7 +22,7 @@ WORKDIR /app
 COPY --from=prod-deps /app/node_modules /app/node_modules
 COPY --from=build /app/dist /app/dist
 
-LABEL version="2.18.1"
+LABEL version="2.17.1"
 LABEL description="Astro based personal website"
 
 ENV HOST=0.0.0.0

package.json

@@ -1,7 +1,7 @@
 {
   "name": "site-profile",
   "type": "module",
-  "version": "2.18.1",
+  "version": "2.17.1",
   "homepage": "https://www.alexlebens.dev",
   "bugs": {
     "url": "https://gitea.alexlebens.dev/alexlebens/site-profile/issues",
@@ -37,7 +37,7 @@
     "@giscus/react": "^3.1.0",
     "@iconify-json/mdi": "^1.2.3",
     "@iconify-json/pajamas": "^1.2.15",
-    "@iconify-json/simple-icons": "^1.2.72",
+    "@iconify-json/simple-icons": "^1.2.71",
     "@playform/compress": "^0.2.1",
     "@swup/astro": "^1.8.0",
     "@tailwindcss/postcss": "^4.2.1",
@@ -49,13 +49,13 @@
     "marked": "^17.0.3",
     "marked-shiki": "^1.2.1",
     "mdast-util-to-string": "^4.0.0",
-    "preline": "^4.1.2",
+    "preline": "^4.1.1",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "reading-time": "^1.5.0",
     "sharp": "^0.34.5",
     "sharp-ico": "^0.1.5",
-    "shiki": "^4.0.1",
+    "shiki": "^4.0.0",
     "tailwindcss": "^4.2.1",
     "ultrahtml": "^1.6.0"
   },

src/components/images/ImageTheme.astro

@@ -4,11 +4,12 @@ import { Image } from 'astro:assets';
 const { srcLight, srcDark, alt, style, width, height } = Astro.props;
 ---
 
-<div class="grid grid-cols-1 grid-rows-1">
+<div class="themed-image-container">
   <Image
     src={srcLight}
     alt={alt}
-    class:list={['col-start-1 row-start-1 transition-all duration-400 ease-in-out opacity-100 scale-100 dark:opacity-0 dark:scale-65', style]}
+    class={`light-logo ${style}`}
+    inferSize={true}
     width={width}
     height={height}
     inferSize={true}
@@ -17,9 +18,29 @@ const { srcLight, srcDark, alt, style, width, height } = Astro.props;
   <Image
     src={srcDark}
     alt={alt}
-    class:list={['col-start-1 row-start-1 transition-all duration-400 ease-in-out opacity-0 scale-65 dark:opacity-100 dark:scale-100', style]}
+    class={`dark-logo ${style}`}
+    inferSize={true}
     width={width}
     height={height}
     inferSize={true}
   />
 </div>
+
+<style>
+  .themed-image-container {
+    display: grid;
+    grid-template-areas: "stack";
+  }
+
+  .themed-image-container :global(img) {
+    grid-area: stack;
+  }
+
+  :global(.dark) .light-logo {
+    display: none !important;
+  }
+
+  :global(.dark) .dark-logo {
+    display: block !important;
+  }
+</style>

src/styles/global.css

@@ -39,10 +39,10 @@
 
   /* Object colors */
   --color-background: light-dark(var(--color-neutral-200), var(--color-stone-700));
-  --color-background-accent: light-dark(color-mix(in srgb, var(--color-slate-300) 40%, transparent), color-mix(in srgb, var(--color-stone-800) 20%, transparent));
+  --color-background-accent: light-dark(color-mix(in srgb, var(--color-neutral-300) 40%, transparent), color-mix(in srgb, var(--color-stone-800) 20%, transparent));
   --color-background-card: light-dark(color-mix(in srgb, var(--color-neutral-100) 80%, transparent), color-mix(in srgb, var(--color-neutral-800) 60%, transparent));
 
-  --color-divider: light-dark(color-mix(in srgb, var(--color-slate-400) 40%, transparent), color-mix(in srgb, var(--color-neutral-500) 50%, transparent));
+  --color-divider: light-dark(color-mix(in srgb, var(--color-neutral-400) 50%, transparent), color-mix(in srgb, var(--color-neutral-500) 50%, transparent));
 }
 
 @layer base {