css vue 利用css变量动态切换主题

2024-08-03

Vue项目使用CSS变量实现主题化

主题化管理经常能在网站上看到,一般的思路都是将主题相关的CSS样式独立出来,在用户选择主题的时候加载相应的CSS样式文件.现在大部分浏览器都能很好的兼容CSS变量,主题化样式更容易管理了.最近,使用CSS变量在Vue项目中做了一个主题化实践,下面来看看整个过程. Github项目地址演示地址可行性测试为了检验方法的可行性,在public文件夹下新建一个themes文件夹,并在themes文件夹新建一个default.css文件: :root { --color: red; } 在publi

ionic动态切换主题皮肤

本来想通过css自定义属性值: :root{ --red:red; } p{ color:var(--red); } div{ background:var(--red); } 在ionic2设置动态切换主题,结果在网页chrome调试下可以实现,不过在模拟器和真机下就失效了...... 原因:有可能是sass编译的影响. 后来换了一个思路,既然自定义属性值不行,就采用传统办法了(不太喜欢)--通过js更换css配置,可以写多个skin.css,进行切换.

laravel4通过控制视图模板路劲来动态切换主题

通过控制视图模板路劲来动态切换主题 App::before(function($request) { $paths = Terminal::isMobile() ? array(__dir__.'/views/mobile') : array(__dir__.'/views/pc'); View::setFinder( new Illuminate\View\FileViewFinder(App::make('files'),$paths)); }); 首先说说为什么直接通过修改配置不行 pub

ExtJS动态切换主题

ExtJS动态切换主题在Sencha Cmd构建的Ext程序中怎么去动态切换主题,目前看好像只能单一切换,但是在官网文档找到了答案 Resource Management在上一节通过Sencha Theme工具定制了三套主题,接下来配置如何动态切换这三套主题(当然自带的主题也可以). 首先把这三套自定义主题放在当前程序ext\classic目录中去在app.json中,配置builds对象,然后在output中配置resources和manifest. 在index.html

Thinkphp动态切换主题

'DEFAULT_THEME' => '2014', 'TMPL_DETECT_THEME' => true, // 自动侦测模板主题 'THEME_LIST' => '2012,2014', // 支持的模板主题项 2012和2014的目录结构 app/tpl/2012 app/tpl/2014 切换主题时,在url上加上 http://www.xxx.com/?t=2012 就切换到2012的主题了,且以后所有的url后面无需再跟上?t=2012

vue使用 video.js动态切换视频源视频源不刷新问题

网上的垃圾代码太多,最后翻了video.js的官方文档,就这么简单,浪费了我这么久,注:我这里使用的vue //html <video id="my-player" controls autoplay preload="auto" class="video-js vjs-big-play-centered vjs-fluid vjs-16-9 vjs-big-play-centered" controls preload="au

使用 css/less 动态更换主题色（换肤功能）

前言说起换肤功能,前端肯定不陌生,其实就是颜色值的更换,实现方式有很多,也各有优缺点一.看需求是什么一般来说换肤的需求分为两种: 1. 一种是几种可供选择的颜色/主题样式,进行选择切换,这种可供选择的主题切换不会很多 2. 另一种是需要自定义色值,或者通过取色板取色,可供选择的范围就很大了二.如何实现 1. 对于可供选择的颜色/主题样式换肤的实现一个全局class控制样式切换切换的时候js控制样式的切换 JS改变href属性值切换样式表,例如: <link id="skinco

利用CSS预处理技术实现项目换肤功能(less css + asp.net mvc4.0 bundle)

一.背景在越来越重视用户体验的今天,换肤功能也慢慢被重视起来.一个web系统用户可以选择一个自己喜欢的系统主题,在用户眼里还是会多少加点分的.我们很开心的是easyui v1.3.4有自带default gray black bootstrap metro五款皮肤,但是它并不像bootsrap提供了很完整的css框架,不能提供项目需要的所有的css,所以还需要自己编写控件之外的一些css.给系统换肤时,easyui控件都没问题,问题就在于自己编写的这部分css怎么实现换肤,当然,最简单的办法就

Vue.js-----轻量高效的MVVM框架（十二、组件动态切换）

在写html的过程中,我们经常会遇到要写tabs的切换,类似于这样: 在vue中,我们也有自己的组件和属性来实现这样的效果,这个东西我们叫做动态组件. html: <h3>动态组件</h3>  <template id="temp-tab01"> <div>this is tab01</div> </template> <template id=&q

vue - 绑定css、style

1.绑定html css1.1对象语法: 传给 v-bind:class 一个对象,以动态地切换 class <div v-bind:class="{ active: isActive }"></div> 上面的语法表示 classactive 的更新将取决于数据属性 isActive 是否为真值1.2我们也可以在对象中传入更多属性用来动态切换多个 class,此外, v-bind:class 指令可以与普通的 class 属性共存 <div class=

vue,elementUI切换主题，自定义主题

本文介绍两种elementUI切换主题色的方法项目示例:http://test.ofoyou.com/theme/ git代码:记得star哦,谢谢 1:官方提供的方法,直接修改scss文件达到修改目的,开发人员使用(比官网容易理解,有图有真相). 2:通过选颜色值在项目中达到换肤目的,用户使用.此方法根据官方主题切换修改而来先搭建项目: npm install -g vue //全局安装vue npm install -g webpack //全局安装webpack npm install

css雪碧图实现数字切换

vue中 css 雪碧图应用及数字切换demo 1. CSS Sprites一般只能使用到固定大小的盒子(box)里,这样才能够遮挡住不应该看到的部分. 2.使用css雪碧图的优点: 利用CSS Sprites能很好地减少网页的http请求,从而大大的提高页面的性能. CSS Sprites能减少图片的字节. 更换风格方便,只需要在一张或少张图片上修改图片的颜色或样式,整个网页的风格就可以改变.维护起来更加方便. 3.主要代码: <template> <div class="t

vue 切换主题（换肤）功能

一:先写好两个css样式放在static文件夹中二:在index.html中添加css link链接 <link rel="stylesheet" id="style" href="static/css/one.css"> 三:在App.vue中的 created中添加默认执行方法 created() { var style = localStorage.getItem("style"); if(style){

利用CSS、JavaScript及Ajax实现图片预加载的三大方法

预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布,也可帮助用户在浏览你网站内容时获得更好的用户体验.本文将分享三个不同的预加载技术,来增强网站的性能与可用性.方法一:用CSS和JavaScript实现预加载实现预加载图片有很多方法,包括使用CSS.JavaScript及两者的各种组合.这些技术可根据不同设计场景设计出相应的解决方案,十分高效.单纯

利用CSS、JavaScript及Ajax实现图片预加载的三大方法(转)

预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布,也可帮助用户在浏览你网站内容时获得更好的用户体验.本文将分享三个不同的预加载技术,来增强网站的性能与可用性. 方法一:用CSS和JavaScript实现预加载实现预加载图片有很多方法,包括使用CSS.JavaScript及两者的各种组合.这些技术可根据不同设计场景设计出相应的解决方案,十分高效.

利用CSS、JavaScript及Ajax实现图片预加载的三大方法及优缺点分析

预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布,也可帮助用户在浏览你网站内容时获得更好的用户体验.本文将分享三个不同的预加载技术,来增强网站的性能与可用性. 方法一:用CSS和JavaScript实现预加载实现预加载图片有很多方法,包括使用CSS.JavaScript及两者的各种组合.这些技术可根据不同设计场景设计出相应的解决方案,十分高效.

关于 ajax 动态返回数据 css 以及 js 失效问题(动态引入JS)

ajax 毕竟是异步的所以动态加载出来的数据难免遇到 css 或者 js 失效的问题,所以要动态加载 css ji等文件了 1.公共方法 load //动态加载 js /css function loadjscssfile(filename, filetype) { if (filetype == "js") { //判定文件类型 var fileref = document.createElement('script')//创建标签 fileref.setAttribute(&q

利用CSS制作背景变色的横向导航栏

1.表单页面如下: <html> <head> <title>注册表单页面</title> </head> <body> <form name="form1" method="post" action=""> <table width="500" border="1" align="center"

css自定义属性（css变量）

感谢原文作者:Kuku殿下原文链接:https://segmentfault.com/a/1190000015948538 前言刚开始的"css变量",经扩展之后,称为"css自定义属性" 当各种预处理器满天飞的时候,css变量已经开始渐渐普及在特定的应用场景,css变量确实发挥了很大的作用下面开始学习css变量. 正文一.变量的声明和使用 CSS选择器不能是数字开头,JS中的变量是不能直接数值的,但是,在CSS变量中,这些限制通通没有. 但不能包含$,[

利用CSS实现带相同间隔地无缝滚动动画

说明:因为在移动上主要利用CSS来做动画,所以没有考虑其他浏览器的兼容性,只有-webkit这个前缀,如果需要其他浏览器,请自行补齐. 首先解释一下什么是无缝滚动动画, 例如下面的例子 See the Pen css实现上下循环滚动效果 by lilyH (@lilyH) on CodePen. ------------------------------------------------------------------------------- 实现原理: 首先需要滚动的是每一条数据,而

如何利用CSS代码使图片和文字在同一行显示且对齐

对于初学css的新手朋友来说,经常会遇到这样一个问题,当文字和图片出现在同一行或者同一个div里面的时候,在浏览器中运行出来的显示效果往往是在不同的行,那么,我们怎么才能利用CSS代码使图片和文字在同一行显示且对齐呢? 对于这种现象,方法有3种: 1.通过添加css的“vertical-align:middle;”: 2.如果图片是背景图片,可以在css中设置背景图片,然后设置文字的padding属性: 3.把文字和图片分别放入不同的div中. 经过多次的测试,上面三种方法都可以让图片和文字在同

css vue 利用css变量动态切换主题

热门专题