idea暗黑主题样式

骑猪看日落 2023-07-01 08:51 10阅读 0赞

File-->settings打开设置面板，找到plugins,输入 Material Theme UI

一下参考文档：[https://www.achais.com/articles/2018/01/material-theme-ui.html][https_www.achais.com_articles_2018_01_material-theme-ui.html]

Sublime通用编辑器、Atom写前端、PhpStorm开发PHP项目，今日将在PhpStorm中使用 Material Theme UI。

Install Material Theme UI Plugin  
PhpStorm：Windows中File->settings，OSX中PhpStorm->Perferences。找到Plugin，点击Search in repositories搜索material theme ui安装后重启PhpStorm。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dveWl6aGl6YWl6aGFvbmk_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dveWl6aGl6YWl6aGFvbmk_size_16_color_FFFFFF_t_70 1][]

Tools->Materia Theme->Atom One Dark Theme (选择自己喜欢的主题)

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dveWl6aGl6YWl6aGFvbmk_size_16_color_FFFFFF_t_70 2][]

再微调字体和字体大小

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dveWl6aGl6YWl6aGFvbmk_size_16_color_FFFFFF_t_70 3][]

最终结果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dveWl6aGl6YWl6aGFvbmk_size_16_color_FFFFFF_t_70 4][]

\------------------------

Material-UI是一个实现了Google's Material Design设计规范的react组件库，开箱即用，使用它可以快速搭建出赏心悦目的应用界面。

**一、安装**

npm install --save material-ui@next

npm install --save material-ui-icons

**二、基本使用**

MUI的使用和大多数其它UI框架的区别，它是按需加载的，即需要什么组件引入相应组件即可，比如需要使用Button，就import Button from "material-ui/Button"即可，使用其它组件与此一致。这有利于在bundle打包时，大大地减小bundle体积。

![format_png][]

user.png

**三、自定义theme主题**

使用createMuiTheme创建自定义的theme主题，用MuiThemeProvider包裹MUI组件即可让自定义主题生效。

![format_png 1][]

custom.png

**四、Color System**

Material-UI提供了一套color system，源码见material-ui/styles/color.js，对颜色进行命名并导出，如red50, red100, redA100等。通过官方提供的Color Tool（[https://material.io/color/\#!/?view.left=0&view.right=0）][https_material.io_color_view.left_0_view.right_0]可以方便地为你创建一套颜色模板。

![format_png 2][]

color.png

**五、Icons**

Material-UI使用几何图形，形象化地提供了一套FontIcon和SvgIcon。推荐使用SvgIcon，使用方法如下，

先安装 npm install material-ui-icons -S。

然后按需引入所需要的icon，比如：import AccessAlarmIcon from 'material-ui-icons/AccessAlarm';即可使用AccessAlarmIcon了。

**六、Layout**

Material-UI提供了响应式UI、Grid布局功能。另外Material-UI组件的外观样式采用的是css in js的方式，使用css in js来写css样式，可以方便且灵活地自定义元素样式。

![format_png 3][]

css in js.png

**七、Utils**

Material-UI提供了Modal模态框、Popover窗口、Portal等UI工具，还提供了Transitions过渡动画功能。

**八、Components**

Material-UI提供了近30种按需加载、开箱即用的组件，包括List、Avatar、App Bar、Menu、Picker等常用组件。与组件对应，还提供了若干组件API，为组件更好的用户体验提供了交互功能。在Material-UI官网上，每种组件的使用都有代码演示：

![format_png 4][]

card.png

![format_png 5][]

card-code.png

**九、小结**

Material-UI的界面设计，倾向于同时兼顾PC端和移动端。它的主题和样式可以极其灵活地进行个性化定制，Material-UI对Color和Theme进行了良好封装，采用CSS in JS可以方便地帮助我们完成个性化需求。它还支持服务端渲染。总体上，Material-UI使用还算简单，只需要我们有一定的单页面应用开发基础、会使用react，就可以快速上手。在Material-UI的Github仓库中，还有四五个demo，有助于我们参考学习。

**参考资源：**

1、Material-UI官网：[https://material-ui-next.com/][https_material-ui-next.com]

2、Github仓库：[https://github.com/mui-org/material-ui][https_github.com_mui-org_material-ui]

作者：夏海峰  
链接：https://www.jianshu.com/p/b3cfaca94596  
来源：简书  
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

[https_www.achais.com_articles_2018_01_material-theme-ui.html]: https://www.achais.com/articles/2018/01/material-theme-ui.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dveWl6aGl6YWl6aGFvbmk_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200120171904726.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dveWl6aGl6YWl6aGFvbmk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dveWl6aGl6YWl6aGFvbmk_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200120171920146.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dveWl6aGl6YWl6aGFvbmk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dveWl6aGl6YWl6aGFvbmk_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200120171935190.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dveWl6aGl6YWl6aGFvbmk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dveWl6aGl6YWl6aGFvbmk_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200120171941642.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dveWl6aGl6YWl6aGFvbmk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dveWl6aGl6YWl6aGFvbmk_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200120172016973.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dveWl6aGl6YWl6aGFvbmk=,size_16,color_FFFFFF,t_70
[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8yNDYzMjkwLTg5YmQ2MWVhYjExN2Y0ZmUucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvNjAyL2Zvcm1hdC93ZWJw?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8yNDYzMjkwLWEwNGViOGY2NjgyYTcyMDEucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvNjUzL2Zvcm1hdC93ZWJw?x-oss-process=image/format,png
[https_material.io_color_view.left_0_view.right_0]: https://material.io/color/#!/?view.left=0&view.right=0%EF%BC%89
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8yNDYzMjkwLWVhOTIyZTU0OWE3NjM0ZGMucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvNTk1L2Zvcm1hdC93ZWJw?x-oss-process=image/format,png
[format_png 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8yNDYzMjkwLThkNzFmMzY4MmM5YmVkNjMucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvNDEzL2Zvcm1hdC93ZWJw?x-oss-process=image/format,png
[format_png 4]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8yNDYzMjkwLTE3NGY1NjA4YjhlMzJlMTkucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvODYwL2Zvcm1hdC93ZWJw?x-oss-process=image/format,png
[format_png 5]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8yNDYzMjkwLTdkODY3MWUwNWE0ZTE0ZmIucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvNzIwL2Zvcm1hdC93ZWJw?x-oss-process=image/format,png
[https_material-ui-next.com]: https://material-ui-next.com/
[https_github.com_mui-org_material-ui]: https://github.com/mui-org/material-ui