update: waline layout and style

.vscode/settings.json

@@ -81,6 +81,7 @@
     "msvalidate",
     "noopener",
     "noreferrer",
+    "oklch",
     "overlayscrollbars",
     "pagefind",
     "partytown",

src/components/Comments/Waline.astro

@@ -19,7 +19,12 @@ const walineConfigJson = JSON.stringify({
   emoji,
   search,
   imageUploader,
-});
+})
+
+const {
+  light: { primary: lightPrimary, secondary: lightSecondary, background: lightBackground },
+  dark: { primary: darkPrimary, secondary: darkSecondary, background: darkBackground },
+} = themeConfig.color
 ---
 <div id="waline" data-config={walineConfigJson}></div>
 
@@ -34,7 +39,7 @@ function initWaline() {
   init({
     el: '#waline',
     path: window.location.pathname.replace(/^\/([a-z]{2}(-[a-z]{2})?)\//, '/'),
-    dark: 'auto',
+    dark: 'html.dark',
     requiredMeta: ['nick', 'mail'],
     highlighter: false,
     texRenderer: false,
@@ -46,3 +51,114 @@ function initWaline() {
 initWaline()
 document.addEventListener('astro:after-swap', initWaline)
 </script>
+
+<style is:global>
+#waline .wl-panel {
+  --at-apply: 'm-0 rounded-2';
+}
+#waline .wl-editor::placeholder {
+  color: var(--waline-light-grey);
+}
+</style>
+
+<style
+  define:vars={{
+  lightPrimary,
+  lightSecondary,
+  lightBackground,
+  darkPrimary,
+  darkSecondary,
+  darkBackground,
+}}
+>
+#waline {
+  /* 字体大小 */
+  --waline-font-size: 16px;
+
+  /* 常规颜色 */
+  --waline-white: var(--lightBackground);
+  --waline-light-grey: color-mix(in oklch, var(--lightPrimary), transparent 75%);
+  --waline-dark-grey: var(--lightSecondary);
+
+  /* 主题色 */
+  --waline-theme-color: var(--lightPrimary);
+  --waline-active-color: var(--lightPrimary);
+
+  /* 布局颜色 */
+  --waline-color: var(--lightSecondary);
+  --waline-bg-color: var(--lightBackground);
+  --waline-bg-color-light: var(--lightBackground);
+  --waline-bg-color-hover: var(--lightBackground);
+  --waline-border-color: color-mix(in oklch, var(--lightPrimary), transparent 75%);
+  --waline-disable-bg-color: var(--lightBackground);
+  --waline-disable-color: #bbb;
+  --waline-code-bg-color: #282c34;
+
+  /* 特殊颜色 */
+  --waline-bq-color: #f0f0f0;
+
+  /* 头像 */
+  --waline-avatar-size: 3.25rem;
+  --waline-m-avatar-size: calc(var(--waline-avatar-size) * 9 / 13);
+
+  /* 徽章 */
+  --waline-badge-color: #3498db;
+  --waline-badge-font-size: 0.775em;
+
+  /* 信息 */
+  --waline-info-bg-color: var(--lightBackground);
+  --waline-info-color: color-mix(in oklch, var(--lightPrimary), transparent 75%);
+  --waline-info-font-size: 0.625em;
+
+  /* 渲染选择 */
+  --waline-border: 1px solid var(--waline-border-color);
+  --waline-avatar-radius: 50%;
+  --waline-box-shadow: none;
+}
+
+/* 暗色模式 */
+html.dark #waline {
+  /* 字体大小 */
+  --waline-font-size: 16px;
+
+  /* 常规颜色 */
+  --waline-white: var(--darkBackground);
+  --waline-light-grey: color-mix(in oklch, var(--darkPrimary), transparent 75%);
+  --waline-dark-grey: var(--darkSecondary);
+
+  /* 主题色 */
+  --waline-theme-color: var(--darkPrimary);
+  --waline-active-color: var(--darkPrimary);
+
+  /* 布局颜色 */
+  --waline-color: var(--darkSecondary);
+  --waline-bg-color: var(--darkBackground);
+  --waline-bg-color-light: var(--darkBackground);
+  --waline-bg-color-hover: var(--darkBackground);
+  --waline-border-color: color-mix(in oklch, var(--darkPrimary), transparent 75%);
+  --waline-disable-bg-color: var(--darkBackground);
+  --waline-disable-color: #bbb;
+  --waline-code-bg-color: #282c34;
+
+  /* 特殊颜色 */
+  --waline-bq-color: #f0f0f0;
+
+  /* 头像 */
+  --waline-avatar-size: 3.25rem;
+  --waline-m-avatar-size: calc(var(--waline-avatar-size) * 9 / 13);
+
+  /* 徽章 */
+  --waline-badge-color: #3498db;
+  --waline-badge-font-size: 0.775em;
+
+  /* 信息 */
+  --waline-info-bg-color: var(--darkBackground);
+  --waline-info-color: color-mix(in oklch, var(--darkPrimary), transparent 75%);
+  --waline-info-font-size: 0.625em;
+
+  /* 渲染选择 */
+  --waline-border: 1px solid var(--waline-border-color);
+  --waline-avatar-radius: 50%;
+  --waline-box-shadow: none;
+}
+</style>

src/components/PhotoSwipe.astro

@@ -49,3 +49,27 @@
   document.addEventListener('astro:page-load', createPhotoSwipe)
   document.addEventListener('astro:before-swap', cleanup)
 </script>
+
+<style is:global>
+  .pswp__button {
+    --at-apply: 'flex items-center justify-center transition';
+  }
+
+  .pswp__button--zoom,
+  .pswp__button--close {
+    --at-apply: 'mt-2 lg:mt-4 active:scale-90';
+  }
+
+  .pswp__button--zoom svg:hover,
+  .pswp__button--close svg:hover {
+    fill: #BEBEBE;
+  }
+
+  .pswp__button--close {
+    --at-apply: 'mr-4 lg:mr-8';
+  }
+
+  .pswp__button--zoom {
+    --at-apply: 'mr--6 lg:mr-0';
+  }
+</style>

src/config.ts

@@ -16,16 +16,24 @@ export const themeConfig: ThemeConfig = {
   color: {
     mode: 'light', // light, dark
     light: {
-      primary: '#17191A', // accent color for title
+      // title color
-      secondary: '#505050', // secondary color for text
+      primary: 'oklch(20% 0 0)',
-      background: '#FAEDE4', // background color
+      // text color
-      codeTheme: 'github-light', // code block theme. See more at https://shiki.style/themes and https://vscodethemes.com/
+      secondary: 'oklch(40% 0 0)',
+      // background color
+      background: 'oklch(95% 0.018 57)',
+      // code block theme
+      codeTheme: 'github-light',
     },
     dark: {
-      primary: '#BEBEBE', // accent color for title
+      // title color
-      secondary: '#A0A09F', // secondary color for text
+      primary: 'oklch(80% 0 0)',
-      background: '#161616', // background color
+      // text color
-      codeTheme: 'github-dark', // code block theme. See more at https://shiki.style/themes and https://vscodethemes.com/
+      secondary: 'oklch(70% 0 0)',
+      // background color
+      background: 'oklch(20% 0 0)',
+      // code block theme
+      codeTheme: 'github-dark',
     },
   },
   // COLOR SETTINGS >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> END

src/layouts/Layout.astro

@@ -14,7 +14,6 @@ import { getPagePath } from '@/utils/path'
 import '@/styles/font.css'
 import '@/styles/global.css'
 import '@/styles/heti.css'
-import '@/styles/photoswipe.css'
 
 interface Props {
   postTitle?: string

src/pages/posts/[slug].astro

@@ -25,7 +25,7 @@ const { Content, remarkPluginFrontmatter } = await post.render()
   postDescription={post.data.description}
   postImage={post.data.image}
 >
-  <article class="heti">
+  <article class="heti mb-16">
     <h1 class="post-title">
       <span
         transition:name={`post-${post.data.slug || post.slug}`}

src/styles/photoswipe.css

@@ -1,21 +0,0 @@
-.pswp__button {
-  --at-apply: 'flex items-center justify-center transition';
-}
-
-.pswp__button--zoom,
-.pswp__button--close {
-  --at-apply: 'mt-2 lg:mt-4 active:scale-90';
-}
-
-.pswp__button--zoom svg:hover,
-.pswp__button--close svg:hover {
-    fill: #BEBEBE;
-}
-
-.pswp__button--close {
-  --at-apply: 'mr-4 lg:mr-8';
-}
-
-.pswp__button--zoom {
-  --at-apply: 'mr--6 lg:mr-0';
-}