theme-style

themes/simple/index.js

@@ -25,6 +25,7 @@ import { Footer } from './components/Footer'
 import { useGlobal } from '@/lib/global'
 import SearchInput from './components/SearchInput'
 import { Transition } from '@headlessui/react'
+import { Style } from './style'
 
 /**
  * 基础布局
@@ -42,6 +43,7 @@ const LayoutBase = props => {
   return (
         <div id='theme-simple' className='min-h-screen flex flex-col dark:text-gray-300  bg-white dark:bg-black'>
             <CommonHead meta={meta} />
+            <Style/>
 
             {CONFIG.TOP_BAR && <TopBar {...props} />}
 

themes/simple/style.js

@@ -0,0 +1,49 @@
+/* eslint-disable react/no-unknown-property */
+/**
+ * 此处样式只对当前主题生效
+ * 此处不支持tailwindCSS的 @apply 语法
+ * @returns
+ */
+const Style = () => {
+  return <style jsx global>{`
+    
+  #theme-simple #announcement-content {
+    /* background-color: #f6f6f6; */
+  }
+  
+  #theme-simple .blog-item-title {
+    color: #276077;
+  }
+  
+  .dark #theme-simple .blog-item-title {
+    color: #d1d5db;
+  }
+  
+  .notion {
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
+  }
+  
+  
+  /*  菜单下划线动画 */
+  #theme-simple .menu-link {
+      text-decoration: none;
+      background-image: linear-gradient(#dd3333, #dd3333);
+      background-repeat: no-repeat;
+      background-position: bottom center;
+      background-size: 0 2px;
+      transition: background-size 100ms ease-in-out;
+  }
+   
+  #theme-simple .menu-link:hover {
+      background-size: 100% 2px;
+      color: #dd3333;
+      cursor: pointer;
+  }
+  
+  
+
+  `}</style>
+}
+
+export { Style }