CSS控制界面风格及深浅色模式的一些思路

深浅色模式的一些思路"/>

CSS控制界面风格及深浅色模式的一些思路

    我们设定一个设置功能，这套功能是本人研究开发学习使用，请大家多提意见、建议，登录后如下图：

       如图的左上开始菜单按钮、中部的导航快捷链接和右下方的快捷设置图标，三个入口均可以访问设置功能，以右下方最为直接进行调用。调用后如下图：

      点击设置继续层级菜单，操作方式类似手机界面：

       如图我们在样式外观选项里提供了“简约动感” 和 “经典” 两选择，显示与亮度选项里有三个模式，即浅色模式、深色模式与智能模式（根据时间自动进行深浅切换的一种模式），以下是这几种方式的组合效果，大家可以参照一下：

（一）简约动感之浅色模式

简约动感的主要体现为文本框为下划线式，另外还有按钮元素的控制等。

(二) 简约动感之深色模式

（三）经典之浅色模式

（四）经典之深色模式

实现的思路大体是设计N套皮肤风格CSS，这是里假设为 JANE.CSS(简约）和 CLASSIC.CSS(经典)，再配套对应 JANE_STD.CSS (浅色) JANE_DARK.CSS (深色) ，CLASSIC_STD.CSS (浅色) CLASSIC_DARK.CSS (深色) 来控制深浅色的切换，规则的定义有助于JS的控制和功能的区分、细节元素的处理。

后期我们可以根据需求添加更多的风格CSS并配套对应的深浅模式CSS，嵌入到系统中，实现灵活的设计，以上就是整体的设计思路，希望大家评论指教！

谢谢大家积极投票反馈！