GithubBackup/moemail
1
0
Fork 0
mirror of https://github.com/beilunyang/moemail.git synced 2026-09-06 15:56:36 +08:00
Code Issues 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
app/components/emails/message-view.tsx
+15 -9
View File
@@ -4,6 +4,7 @@ import { useState, useEffect, useRef } from "react"
import { Loader2 } from "lucide-react" import { Loader2 } from "lucide-react"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { Label } from "@/components/ui/label" import { Label } from "@/components/ui/label"
import { useTheme } from "next-themes"
interface Message { interface Message {
id: string id: string
@@ -27,6 +28,7 @@ export function MessageView({ emailId, messageId }: MessageViewProps) {
const [loading, setLoading] = useState(true) const [loading, setLoading] = useState(true)
const [viewMode, setViewMode] = useState<ViewMode>("html") const [viewMode, setViewMode] = useState<ViewMode>("html")
const iframeRef = useRef<HTMLIFrameElement>(null) const iframeRef = useRef<HTMLIFrameElement>(null)
const { theme } = useTheme()
useEffect(() => { useEffect(() => {
const fetchMessage = async () => { const fetchMessage = async () => {
@@ -47,8 +49,7 @@ export function MessageView({ emailId, messageId }: MessageViewProps) {
fetchMessage() fetchMessage()
}, [emailId, messageId]) }, [emailId, messageId])
// 处理 iframe 内容 const updateIframeContent = () => {
useEffect(() => {
if (viewMode === "html" && message?.html && iframeRef.current) { if (viewMode === "html" && message?.html && iframeRef.current) {
const iframe = iframeRef.current const iframe = iframeRef.current
const doc = iframe.contentDocument || iframe.contentWindow?.document const doc = iframe.contentDocument || iframe.contentWindow?.document
@@ -66,8 +67,8 @@ export function MessageView({ emailId, messageId }: MessageViewProps) {
padding: 0; padding: 0;
min-height: 100%; min-height: 100%;
font-family: system-ui, -apple-system, sans-serif; font-family: system-ui, -apple-system, sans-serif;
color: ${document.documentElement.classList.contains('dark') ? '#fff' : '#000'}; color: ${theme === 'dark' ? '#fff' : '#000'};
background: transparent; background: ${theme === 'dark' ? '#1a1a1a' : '#fff'};
} }
body { body {
padding: 20px; padding: 20px;
@@ -88,21 +89,21 @@ export function MessageView({ emailId, messageId }: MessageViewProps) {
background: transparent; background: transparent;
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background: ${document.documentElement.classList.contains('dark') background: ${theme === 'dark'
? 'rgba(130, 109, 217, 0.3)' ? 'rgba(130, 109, 217, 0.3)'
: 'rgba(130, 109, 217, 0.2)'}; : 'rgba(130, 109, 217, 0.2)'};
border-radius: 9999px; border-radius: 9999px;
transition: background-color 0.2s; transition: background-color 0.2s;
} }
::-webkit-scrollbar-thumb:hover { ::-webkit-scrollbar-thumb:hover {
background: ${document.documentElement.classList.contains('dark') background: ${theme === 'dark'
? 'rgba(130, 109, 217, 0.5)' ? 'rgba(130, 109, 217, 0.5)'
: 'rgba(130, 109, 217, 0.4)'}; : 'rgba(130, 109, 217, 0.4)'};
} }
/* Firefox 滚动条 */ /* Firefox 滚动条 */
* { * {
scrollbar-width: thin; 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.3) transparent'
: 'rgba(130, 109, 217, 0.2) 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) { if (loading) {
return ( return (