Golang实现夜间模式/黑色背景的方案讨论

Golang实现夜间模式/黑色背景的方案讨论 我通常在夜间访问这个论坛。同时访问的大多数网站（Twitter、GitHub）都有很棒的夜间模式，但这个网站却没有。😦

不过我正在使用Stylus扩展来解决这个问题。

如果这个网站能默认支持这个功能就更好了。

1 回复

更多关于Golang实现夜间模式/黑色背景的方案讨论的实战系列教程也可以访问 https://www.itying.com/category-94-b0.html


在Go语言中，实现夜间模式或黑色背景通常涉及前端和后端的协作。由于Go主要用于后端开发，我将重点放在如何通过Go后端提供配置或API支持，并结合前端实现夜间模式切换。以下是一个完整的示例，包括Go后端API和前端JavaScript代码。

后端Go代码：提供夜间模式配置API

假设我们使用Gin框架构建一个简单的Web服务器，提供一个API端点来获取或设置夜间模式配置。这里，我们使用内存存储来模拟配置。

首先，安装Gin框架（如果尚未安装）：

go mod init example
go get -u github.com/gin-gonic/gin

然后，创建Go文件（例如main.go）：

package main

import (
	"github.com/gin-gonic/gin"
	"net/http"
)

// 全局变量存储夜间模式状态（true表示启用夜间模式）
var nightModeEnabled = false

func main() {
	r := gin.Default()

	// API端点：获取当前夜间模式状态
	r.GET("/api/night-mode", func(c *gin.Context) {
		c.JSON(http.StatusOK, gin.H{
			"nightMode": nightModeEnabled,
		})
	})

	// API端点：切换夜间模式状态
	r.POST("/api/night-mode/toggle", func(c *gin.Context) {
		nightModeEnabled = !nightModeEnabled
		c.JSON(http.StatusOK, gin.H{
			"nightMode": nightModeEnabled,
			"message":   "夜间模式状态已切换",
		})
	})

	// 静态文件服务，用于提供HTML页面（可选，用于演示）
	r.Static("/static", "./static")

	r.Run(":8080") // 在8080端口启动服务器
}

前端实现：使用JavaScript切换夜间模式

创建一个HTML文件（例如static/index.html）来演示如何通过API切换夜间模式，并应用CSS样式。这里，我们使用JavaScript从后端获取状态并动态修改页面样式。

HTML文件内容：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>夜间模式演示</title>
    <style>
        body {
            background-color: white;
            color: black;
            transition: background-color 0.3s, color 0.3s;
        }
        body.night-mode {
            background-color: #121212;
            color: #e0e0e0;
        }
        button {
            padding: 10px 20px;
            margin: 20px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>欢迎访问论坛</h1>
    <p>这是一个演示页面，展示如何通过Go后端实现夜间模式。</p>
    <button onclick="toggleNightMode()">切换夜间模式</button>

    <script>
        // 页面加载时，从后端获取当前夜间模式状态并应用
        window.onload = function() {
            fetch('/api/night-mode')
                .then(response => response.json())
                .then(data => {
                    if (data.nightMode) {
                        document.body.classList.add('night-mode');
                    } else {
                        document.body.classList.remove('night-mode');
                    }
                })
                .catch(error => console.error('获取夜间模式状态失败:', error));
        };

        // 切换夜间模式函数
        function toggleNightMode() {
            fetch('/api/night-mode/toggle', { method: 'POST' })
                .then(response => response.json())
                .then(data => {
                    // 根据响应更新页面样式
                    if (data.nightMode) {
                        document.body.classList.add('night-mode');
                    } else {
                        document.body.classList.remove('night-mode');
                    }
                    console.log(data.message); // 可选：在控制台输出消息
                })
                .catch(error => console.error('切换夜间模式失败:', error));
        }
    </script>
</body>
</html>

运行和测试

  1. 启动Go服务器：运行go run main.go。
  2. 在浏览器中访问http://localhost:8080/static/index.html。
  3. 点击“切换夜间模式”按钮，页面背景和文字颜色会动态切换，同时后端状态会更新。

扩展说明

  • 持久化存储：在实际应用中，应将夜间模式状态存储在数据库或文件中，而不是内存变量。可以使用Go的数据库库（如database/sql）来实现。
  • 用户个性化：可以为每个用户保存偏好设置，通过用户认证（如JWT）来关联状态。
  • CSS优化：夜间模式的CSS应覆盖所有页面元素，确保可读性和一致性。

通过这种方式，Go后端提供了灵活的API支持，前端可以轻松集成夜间模式功能。如果论坛基于Go构建，可以类似地扩展现有代码。

回到顶部