网页交互与主题切换：HTML、CSS及JavaScript实现指南

<div class="god-card">
    <img src="path/to/image_osiris.jpg" alt="Osiris" class="god-image">
    <p class="god-description hidden">
        奥西里斯（Osiris）是古埃及神话中的冥界之神、丰饶之神和死者之王。他象征着生命的复苏与永恒。
    </p>
    <button class="toggle-description-btn" data-god="osiris">显示/隐藏奥西里斯描述</button>
</div>

<div class="god-card">
    <img src="path/to/image_isis.jpg" alt="Isis" class="god-image">
    <p class="god-description hidden">
        伊西斯（Isis）是古埃及神话中的生命、魔法、婚姻和生育女神。她是奥西里斯的妻子，以其强大的魔法和对家庭的忠诚而闻名。
    </p>
    <button class="toggle-description-btn" data-god="isis">显示/隐藏伊西斯描述</button>
</div>
<!-- 更多神祇卡片 -->

.god-description {
    display: none; /* 默认隐藏描述 */
    margin-top: 10px;
    padding: 10px;
    background-color: #f0f0f0;
    border-left: 3px solid #3498db;
    color: #333;
    font-size: 0.9em;
    line-height: 1.6;
}

.god-description.visible {
    display: block; /* 当添加visible类时显示描述 */
}

/* 其他样式，例如图片和按钮的布局 */
.god-card {
    border: 1px solid #ddd;
    padding: 15px;
    margin: 15px;
    text-align: center;
    max-width: 300px;
    display: inline-block;
    vertical-align: top;
    box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
}

.god-image {
    max-width: 100%;
    height: auto;
    border-radius: 5px;
}

.toggle-description-btn {
    background-color: #4CAF50;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 15px;
    font-size: 1em;
}

.toggle-description-btn:hover {
    background-color: #45a049;
}

document.addEventListener('DOMContentLoaded', () => {
    const toggleButtons = document.querySelectorAll('.toggle-description-btn');

    toggleButtons.forEach(button => {
        button.addEventListener('click', () => {
            // 获取当前按钮所在的父元素（.god-card）
            const parentCard = button.closest('.god-card');
            // 在父元素中查找描述元素
            const description = parentCard.querySelector('.god-description');

            if (description) {
                // 切换 'visible' 类
                description.classList.toggle('visible');
                // 也可以根据需要改变按钮文本
                if (description.classList.contains('visible')) {
                    button.textContent = '隐藏描述';
                } else {
                    button.textContent = '显示描述';
                }
            }
        });
    });
});

<button id="theme-toggle-btn">切换主题</button>

<!-- 网站的其他内容 -->
<header>
    <h1>我的埃及神祇网站</h1>
</header>
<main>
    <!-- ... 上述神祇卡片内容 ... -->
</main>
<footer>
    <p>&copy; 2023 埃及神祇探索</p>
</footer>

/* 默认亮色主题 */
body {
    font-family: Arial, sans-serif;
    background-color: #f9f9f9; /* 亮色背景 */
    color: #333; /* 亮色字体颜色 */
    transition: background-color 0.3s ease, color 0.3s ease; /* 平滑过渡 */
}

header {
    background-color: #e0e0e0;
    padding: 20px;
    text-align: center;
    border-bottom: 1px solid #ccc;
}

footer {
    background-color: #e0e0e0;
    padding: 15px;
    text-align: center;
    margin-top: 30px;
    border-top: 1px solid #ccc;
}

/* 暗色主题 */
body.dark-theme {
    background-color: #222; /* 暗色背景 */
    color: #eee; /* 暗色字体颜色 */
}

body.dark-theme header,
body.dark-theme footer {
    background-color: #333;
    border-color: #555;
}

body.dark-theme .god-card {
    background-color: #3a3a3a;
    border-color: #555;
    box-shadow: 2px 2px 8px rgba(0,0,0,0.3);
}

body.dark-theme .god-description {
    background-color: #4a4a4a;
    border-left-color: #66bb6a; /* 调整描述边框颜色 */
    color: #ddd;
}

body.dark-theme .toggle-description-btn {
    background-color: #66bb6a; /* 调整按钮颜色 */
}

body.dark-theme .toggle-description-btn:hover {
    background-color: #5cb85c;
}

#theme-toggle-btn {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 10px 15px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    z-index: 1000;
}

#theme-toggle-btn:hover {
    background-color: #0056b3;
}

document.addEventListener('DOMContentLoaded', () => {
    const themeToggleButton = document.getElementById('theme-toggle-btn');
    const body = document.body;

    // 尝试从 localStorage 加载用户偏好
    const currentTheme = localStorage.getItem('theme');
    if (currentTheme === 'dark') {
        body.classList.add('dark-theme');
    }

    themeToggleButton.addEventListener('click', () => {
        body.classList.toggle('dark-theme');

        // 保存用户偏好到 localStorage
        if (body.classList.contains('dark-theme')) {
            localStorage.setItem('theme', 'dark');
        } else {
            localStorage.setItem('theme', 'light');
        }
    });
});