ibufu
V2EX  ›  问与答

如何根据用户的设置动态设置网站的主题色?

  •  
  •   ibufu · Mar 2, 2017 · 2790 views
    This topic created in 3541 days ago, the information mentioned may be changed or developed.

    项目是前后端分离的,不想依赖后端渲染

    14 replies  •  2017-03-03 11:42:34 +08:00
    A3m0n
    A3m0n
    Mar 2, 2017
    1
    写两份 css 然后通过 js 来改变
    顺便把当前状态存在用户本地
    ibufu
    ibufu
    OP
    Mar 2, 2017
    2
    @A3m0n 颜色不固定
    ibufu
    ibufu
    OP
    Mar 2, 2017
    3
    @A3m0n 这个网站是一个电商性质的,不同的商家任意配置。普通用户访问不同的商家看到的颜色是不一样的,存在本地没有意义。
    qiayue
    qiayue
    Mar 2, 2017
    4
    你再怎么前后端分离,数据还是从后端来的啊

    等等,你到底是要不同的颜色(网页布局一致,仅配色)还是要不同的主题(布局、展示的内容都可能不一致)?
    ibufu
    ibufu
    OP
    Mar 2, 2017
    5
    @qiayue 颜色。
    ibufu
    ibufu
    OP
    Mar 2, 2017
    6
    这里前后端的分离的意思主要是不依赖后端渲染。
    目前想到的方案是预制一套 css 模板,接收到后台的颜色后, replace 模板里的颜色,再将模板插入 html 中。
    Ncanback
    Ncanback
    Mar 2, 2017
    7
    只是配色的话 可以这样 red.css blue.css 里面只写各个 color border-color background-color 等等
    style.css (主 css ) 里也应该有默认样式
    用户登录后台传递一个参数给前端,前端根据参数,引用相应的 css ,覆盖默认样式( VIP2 用户进入 后台传递 red 前端引用 red.css , vip3 用户进入 后台传递 blue 前端引用 blue.css ,普通用户不引用,使用 style.css 的默认样式)
    warpbootstrap 上很多模板 侧边工具栏调整网站配色 效果和你说的差不多 只不过你这个靠用户来判断
    布局的话就太麻烦了 ....你得写多少类似 css....
    LittleWhiteMouse
    LittleWhiteMouse
    Mar 2, 2017
    8
    LESS 可以直接引入的……
    ibufu
    ibufu
    OP
    Mar 2, 2017
    9
    @Ncanback 用户可以自定义任何颜色,所以没办法预制 red.css blue.css
    Ncanback
    Ncanback
    Mar 2, 2017
    10
    @ibufu 用户动态更改 sass ?
    zhihaofans
    zhihaofans
    Mar 3, 2017 via iPhone
    11
    jquery.css()?
    ys0290
    ys0290
    Mar 3, 2017 via iPhone
    12
    你三楼的描述来看,只能存在网站里面,存在数据库里面咋么样?可以问问站长,本站就是这样的,有的节点是自定义背景的
    ibufu
    ibufu
    OP
    Mar 3, 2017
    13
    @Ncanback 就是会有个输入框,让用户自己输入色值。
    @ys0290 把什么存数据库里?
    ys0290
    ys0290
    Mar 3, 2017 via iPhone
    14
    @ibufu css
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   907 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 33ms · UTC 20:28 · PVG 04:28 · LAX 12:28 · JFK 15:28
    ♥ Do have faith in what you're doing.