apps/moemail
1
0
Fork 0
mirror of https://github.com/beilunyang/moemail.git synced 2025-12-24 11:30:51 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: integrate theme support in message view for improved styling

Browse Source
This commit is contained in:
ty
2025-03-16 15:43:04 +08:00
parent 6ddd5bdf4e
commit f5d49790a7
1 changed files with 15 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
app/components/emails/message-view.tsx
View File

@@ -4,6 +4,7 @@ import { useState, useEffect, useRef } from "react"
import { Loader2 } from "lucide-react"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { Label } from "@/components/ui/label"
import { useTheme } from "next-themes"
interface Message {
id: string
@@ -27,6 +28,7 @@ export function MessageView({ emailId, messageId }: MessageViewProps) {
const [loading, setLoading] = useState(true)
const [viewMode, setViewMode] = useState<ViewMode>("html")
const iframeRef = useRef<HTMLIFrameElement>(null)
const { theme } = useTheme()
useEffect(() => {
const fetchMessage = async () => {
@@ -47,8 +49,7 @@ export function MessageView({ emailId, messageId }: MessageViewProps) {
fetchMessage()
}, [emailId, messageId])
// 处理 iframe 内容
useEffect(() => {
const updateIframeContent = () => {
if (viewMode === "html" && message?.html && iframeRef.current) {
const iframe = iframeRef.current
const doc = iframe.contentDocument || iframe.contentWindow?.document
@@ -66,8 +67,8 @@ export function MessageView({ emailId, messageId }: MessageViewProps) {
padding: 0;
min-height: 100%;
font-family: system-ui, -apple-system, sans-serif;
color: ${document.documentElement.classList.contains('dark') ? '#fff' : '#000'};
background: transparent;
color: ${theme === 'dark' ? '#fff' : '#000'};
background: ${theme === 'dark' ? '#1a1a1a' : '#fff'};
}
body {
padding: 20px;
@@ -88,21 +89,21 @@ export function MessageView({ emailId, messageId }: MessageViewProps) {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: ${document.documentElement.classList.contains('dark')
? 'rgba(130, 109, 217, 0.3)'
background: ${theme === 'dark'
? 'rgba(130, 109, 217, 0.3)'
: 'rgba(130, 109, 217, 0.2)'};
border-radius: 9999px;
transition: background-color 0.2s;
}
::-webkit-scrollbar-thumb:hover {
background: ${document.documentElement.classList.contains('dark')
background: ${theme === 'dark'
? 'rgba(130, 109, 217, 0.5)'
: 'rgba(130, 109, 217, 0.4)'};
}
/* Firefox 滚动条 */
* {
scrollbar-width: thin;
scrollbar-color: ${document.documentElement.classList.contains('dark')
scrollbar-color: ${theme === 'dark'
? 'rgba(130, 109, 217, 0.3) transparent'
: 'rgba(130, 109, 217, 0.2) transparent'};
}
@@ -139,7 +140,12 @@ export function MessageView({ emailId, messageId }: MessageViewProps) {
}
}
}
}, [message?.html, viewMode])
}
// 监听主题变化和内容变化
useEffect(() => {
updateIframeContent()
}, [message?.html, viewMode, theme])
if (loading) {
return (