tailwind布局支持亮色与暗色主题切换的ai聊天助手pc端ui代码-html代码-BFW代码库

tailwind布局支持亮色与暗色主题切换的ai聊天助手pc端ui代码

代码语言：html

代码描述：tailwind布局支持亮色与暗色主题切换的ai聊天助手pc端ui代码

代码标签： tailwind 布局支持亮色暗色主题切换 ai 聊天助手 pc 端 ui 代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI聊天助手</title>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tailwindcss.3.4.16.js"></script>
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.6.4.0.css">
    <script>
        // 配置Tailwind主题，支持亮色/暗色模式
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    colors: {
                        primary: '#7c3aed', // 主紫色
                        secondary: '#ec4899', // 辅助粉色
                        dark: {
                            bg: '#121212',
                            surface: '#1e1e1e',
                            border: '#2d2d2d'
                        },
                        light: {
                            bg: '#f8fafc',
                            surface: '#ffffff',
                            border: '#e2e8f0'
                        }
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                    animation: {
                        'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
                    }
                },
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .scrollbar-hide {
                -ms-overflow-style: none;
                scrollbar-width: none;
            }
            .scrollbar-hide::-webkit-scrollbar {
                display: none;
            }
            .text-gradient {
                background-clip: text;
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
            }
        }
    </style>
</head>

<body class="bg-light-bg dark:bg-dark-bg text-gray-800 dark:text-gray-200 transition-colors duration-300 font-sans">
    <div class="flex h-screen overflow-hidden">
        <!-- 侧边栏 -->
        <div class="w-64 bg-light-surface dark:bg-dark-surface border-r border-light-border dark:border-dark-border flex flex-col transition.........完整代码请登录后点击上方下载按钮下载查看