首页 > 其他分享 >实现网站颜色主题切换方案

实现网站颜色主题切换方案

时间:2024-10-11 11:00:09浏览次数:7  
标签:global 颜色 less 网站 主题 dark theme 切换 data

1.html上面挂载属性data-theme

切换主题事件:

  toggleTheme(dark: boolean) {
   if (dark) {
    this.theme = 'dark';
    window.document.documentElement.setAttribute('data-theme', 'dark');
   } else {
    this.theme = 'light';
    window.document.documentElement.setAttribute('data-theme', 'light');
   }
  },

 2.处理样式 less

global.css 样式在main.js 导入

import '@/assets/style/global.less';

global.css文件-导入主题文件:

@import url("./theme-light.less");
@import url("./theme-dark.less");

主题文件 theme-dark.less:

 

[data-theme=dark] {
  在此处写主题样式

}

 

标签:global,颜色,less,网站,主题,dark,theme,切换,data
From: https://www.cnblogs.com/zhulongxu/p/18457993

相关文章

  • 通过命令行检查网站端口是否开通
    安装安装入口1WIN+R快捷键,输入OptionalFeatures  安装入口2打开控制面板    点击确定即可  如何确认安装成功WIN+R,输入cmd,打开命令行终端,输入telnet,出现下图说明安装成功 使用1.开始例:telnet192.168.31.1008080显示如下信息,证明端口已开启: ......
  • 帝国cms网站首页错误代码
    如果帝国CMS网站首页出现了错误代码,你可以根据不同的错误类型来处理:HTTP状态码例如404NotFound表示页面未找到,可能是首页文件丢失或链接错误。500InternalServerError表示服务器内部错误,通常与程序代码或服务器配置有关。PHP错误如果页面显示了具体的PHP错误信息......
  • 网站链接数据库失败,重启网站好了
    遇到网站链接数据库失败的问题,通常有以下几个可能的原因及解决步骤:数据库服务未启动:检查数据库服务器是否正常运行。通过命令行工具或管理界面确认数据库服务状态。网络问题:确认网站服务器与数据库服务器之间的网络连接是否正常。检查防火墙设置,确保没有阻止数据库......
  • 网站iis怎么修改网站内容
    在IIS(InternetInformationServices)中修改网站内容通常涉及以下几个步骤:访问IIS管理器:打开“服务器管理器”。点击“工具”>“InternetInformationServices(IIS)管理器”。定位网站:在“IIS管理器”窗口左侧的连接窗格中,展开服务器名称,然后找到并点击你想要修......
  • 怎么替换公司网站图片信息
    替换公司网站上的图片信息通常涉及以下几个步骤:1.准备新图片编辑和优化:确保新图片已经按照网站的要求进行了适当的编辑和优化。图片应符合网站的设计风格,并且尺寸、分辨率等属性符合需求。2.登录网站后台CMS系统:如果您的网站使用CMS(如WordPress、Drupal或Joomla),登......
  • 怎么修改自己公司网站内容
    1.登录CMS打开公司的网站后台管理系统。输入用户名和密码登录。2.找到需要修改的内容在CMS中找到需要修改的页面或模块。例如,如果需要修改“关于我们”的页面,找到相应的编辑界面。3.修改内容直接在编辑器中修改文本内容。替换图片或上传新文件。4.预览点......
  • 忘记网站管理员密码怎么找回
    忘记网站管理员密码时,可以尝试以下几种方法来找回或重置密码:邮箱找回:大多数网站都提供了通过注册邮箱找回密码的功能。访问网站登录页面,寻找“忘记密码”链接并点击进入。输入您的注册邮箱地址,系统会发送一封包含重置密码链接的邮件到该邮箱。手机验证:如果您在注册时......
  • 网站开通后如何修改域名
    要修改已开通网站的域名,通常需要按照以下步骤操作:购买新域名:首先确保你已经拥有想要更换的新域名。如果没有,需要先到域名注册商处购买。更新DNS设置:登录到新域名的管理后台,更新DNS记录,指向你的网站服务器IP地址或提供的名称服务器(NameServers)。配置服务器:在你的网站服务......
  • 网站连接数据库配置错误
    当遇到网站连接数据库配置错误的问题时,可以按照以下步骤进行检查和解决:检查数据库连接字符串:确认数据库服务器地址、端口、用户名和密码是否正确。检查数据库名称是否正确。确认数据库服务状态:确保数据库服务正在运行。检查防火墙设置,确保应用服务器可以访问数据库服......
  • 如何替换公司网站的图片和视频
    要替换公司网站上的图片和视频,你可以按照以下步骤操作:备份现有资源:在替换任何内容之前,确保先备份当前网站上的图片和视频文件。这有助于防止意外丢失重要数据。准备新资源:确保新的图片和视频已经准备好,并且符合网站的设计要求和尺寸规范。对于图片,检查分辨率是否足够......