Medium 右侧深色样式

components/DebugPanel.js

@@ -47,11 +47,12 @@ export function DebugPanel () {
             <i className="fas fa-times">&nbsp;关闭调试</i>
               )
             : (
-            <i className="fas fa-tools">&nbsp;打开调试</i>
+            <i className="fas fa-tools">&nbsp;调试主题</i>
               )}
         </div>
       </div>
 
+      {/* 调试侧拉抽屉 */}
       <div
         className={` ${
           show ? 'shadow-card' : '-right-96'

themes/medium/LayoutBase.js

@@ -42,10 +42,13 @@ const LayoutBase = props => {
                             {slotTop}
                             {children}
                         </div>
+
+                        {/* 底部 */}
+                        <Footer title={siteInfo?.title} />
                     </div>
 
                     {/* 桌面端右侧 */}
-                    <div className='hidden xl:block border-l dark:border-transparent w-96 relative z-10'>
+                    <div className={`hidden xl:block border-l dark:border-transparent w-96 relative z-10 ${CONFIG_MEDIUM.RIGHT_PANEL_DARK ? 'bg-hexo-black-gray dark' : ''}`}>
                         <div className='py-14 px-6 sticky top-0'>
                             <Tabs>
                                 {slotRight}
@@ -64,8 +67,6 @@ const LayoutBase = props => {
 
                 </div>
 
-                {/* 移动端底部 */}
-                <Footer title={siteInfo?.title} />
                 <BottomMenuBar {...props} className='block md:hidden' />
             </div>
         </ThemeGlobalMedium.Provider>

themes/medium/LayoutSlug.js

@@ -31,7 +31,7 @@ export const LayoutSlug = props => {
   const slotRight = post?.toc && post?.toc?.length > 3 && (
         <div key={locale.COMMON.TABLE_OF_CONTENTS} >
             <Catalog toc={post.toc} />
-            <JumpToTopButton className='text-gray-400 hover:text-green-500 hover:bg-gray-100 py-1 duration-200' />
+            {/* <JumpToTopButton className='text-gray-400 hover:text-green-500 hover:bg-gray-100 py-1 duration-200' /> */}
         </div>
   )
 

themes/medium/components/InfoCard.js

@@ -6,7 +6,7 @@ import SocialButton from './SocialButton'
 const InfoCard = (props) => {
   const { siteInfo } = props
   return <div id='info-card' className='py-4'>
-    <div className='items-center justify-center  '>
+    <div className='items-center justify-center'>
         <div className='hover:scale-105 transform duration-200 cursor-pointer flex justify-center' onClick={ () => { Router.push('/about') }}>
             {/* eslint-disable-next-line @next/next/no-img-element */}
             <img src={siteInfo?.icon} className='rounded-full' width={120} alt={BLOG.AUTHOR}/>

themes/medium/components/Progress.js

@@ -28,7 +28,7 @@ const Progress = ({ targetRef, showPercent = true }) => {
   }, [percent])
 
   return (
-    <div className="h-4 w-full shadow-2xl bg-hexo-light-gray dark:bg-hexo-black-gray ">
+    <div className="h-4 w-full shadow-2xl bg-hexo-light-gray dark:bg-black">
       <div
         className="h-4 bg-gray-600 duration-200"
         style={{ width: `${percent}%` }}

themes/medium/config_medium.js

@@ -1,5 +1,8 @@
 const CONFIG_MEDIUM = {
 
+  // Style
+  RIGHT_PANEL_DARK: process.env.NEXT_PUBLIC_MEDIUM_RIGHT_DARK || false, // 右侧面板深色模式
+
   POST_LIST_COVER: true, // 文章列表显示图片封面
   POST_LIST_PREVIEW: true, // 列表显示文章预览
   POST_LIST_CATEGORY: true, // 列表显示文章分类