style: 默认主题和暗黑主题样式精调

[heshuyue]

该 PR 调整默认主题和暗黑主题的样式

对应 issue: #800

具体修改内容都已在 commit 中说明。

默认主题

调整之前预览：

调整之后预览：

调整参考：

• 网站设计最重要的11个设计原则：https://www.da-vinci.com.tw/cn/blog/design-improve-list
• 主要的网页设计原则：https://appmaster.io/zh/blog/zhu-yao-de-wang-ye-she-ji-yuan-ze
• 8个web设计原则，看看大厂是如何做设计的：https://pixso.cn/designskills/wangyejiemiansjyz/
• 每位设计师都应该知道的20条网站设计原则：https://www.sumaarts.com/share/1514.html
• 设计一个完美的超链接——没那么简单：https://www.woshipm.com/pd/82538.html
• 设计超链接:提示和最佳实践：https://www.psicolabor.com/blog/web-design/designing-hyperlinks-tips-and-best-practices/
• 设计完美的超链接 - 它并不像你想象的那么简单：https://www.iran-store.com/blog/web-design/hyperlink-design/

现阶段发现的问题：

1. 网页全屏按钮失效（已解决）
2. 建议增加回到顶部按钮（已解决）
3. 悬浮菜单（cherry-floatmenu）的位置应该放在当前编辑行的上方，而不是右方，容易误点击（待优化）
4. 跳转新窗口超链接的a::after元素图标不直观，会让人认为这只是一个普通链接，不是跳转新窗口的链接，同时不跳转新窗口的链接又没有a::after，就会造成超链接元素样式风格的割裂，普通超链接、蓝色文字以及跳转新窗口的超链接三者没有明显的区分，易造成混淆。应该更换一个更直观的图标。（待优化）例如：
   

暗黑主题

调整前预览：

调整后预览：

调整参考：

• 设计暗黑模式，掌握这几个方法就简单了：http://www.mysecretrainbow.com/blog/14324.html
• 顶级大厂如何做好暗黑模式设计？来看 Ant Design 的规范文档：https://www.uisdc.com/dark-pattern-design
• TDesign Dark Mode 暗黑模式：https://tdesign.tencent.com/design/dark
• Dark theme - Material Design：https://m2.material.io/design/color/dark-theme.html
• 暗模式设计指南：基础知识、最佳实践、示例和模板：https://www.sumaarts.com/share/1409.html
• Material Design 可用性参考：https://www.mdui.org/zh-cn/design/1/usability/accessibility.html#

[github-actions]

【预览链接】

• https://cherrymd.com/pr845/examples/index.html

[sunsonliu]

哇塞，你的【调整参考】真滴厉害，可以看出非常用心了，点赞~~

对于发现的问题，我尝试回复下：

1. 网页全屏按钮是正常的，只不过在默认demo里因为已经是全屏状态了，所以没效果。若想体验，可以在这里体验全屏按钮功能
2. 由于已经有了右侧悬浮目录，所以“回到顶部”的功能反而没有那么急迫了，所以就没有排issue实现，不过确实可以考虑增加这么个按钮
3. 悬浮菜单位置确实挺尴尬的，不论放在哪都比较容易误触，所以大部分业务在引入cherry时确实都关掉了这个功能。若想彻底解决这个问题，可能还需要从长计议下
4. 新页面打开的超链接图标确实不太好认，确实可以考虑统一设计、梳理下

最后，感谢pr，也期待有更多的pr~

[heshuyue]

好的，非常感谢您的解答。

对于第1个问题，原来我们对于“全屏”的定义是不一样的哈哈哈，我自己理解的全屏是指网页铺满整个显示屏，也就是浏览器的标签页也会隐藏（效果和Windows处于浏览器时按下F11键相同），而你们的全屏只是铺满整个浏览器网页，那没问题了，哈哈，这里产生了歧义，不过，我见过的其他网站的“全屏”都是铺满整个显示屏，所以我觉得cherry-markdown的全屏应该叫做“网页全屏”更合适，不过这只是我的看法哈哈，肯定也有思考得不周到的地方。

对于第2个问题，我当时确实忽略了右侧悬浮目录，不够细心哈哈，那确实不是很有必要增加回到顶部按钮了。

最后，再次感谢您的细心解答😀@sunsonliu

[sunsonliu]

哈哈，那个“F11全屏”我懂，我们最开始实现的就是“F11全屏”，后来有人反馈这种全屏不好控制（ #441 ），所以就改成当前这种形态了

[heshuyue]

哈哈，那个“F11全屏”我懂，我们最开始实现的就是“F11全屏”，后来有人反馈这种全屏不好控制（ #441 ），所以就改成当前这种形态了

原来是这样😀

[github-actions]

【预览链接】

• https://cherrymd.com/pr845/examples/index.html

[github-actions]

【预览链接】

• https://cherrymd.com/pr845/examples/index.html

[github-actions]

【预览链接】

• https://cherrymd.com/pr845/examples/index.html

[github-actions]

【预览链接】

• full model
• basic
• mobile
• multiple instances
• editor without toolbar
• pure preview
• XSS（Not allowed by default）
• img wysiwyg
• table wysiwyg
• headers with auto num
• 流式输入模式（AI chart场景）
• VIM 编辑模式

[github-actions]

【预览链接】

• full model
• basic
• mobile
• multiple instances
• editor without toolbar
• pure preview
• XSS（Not allowed by default）
• img wysiwyg
• table wysiwyg
• headers with auto num
• 流式输入模式（AI chart场景）
• VIM 编辑模式

[github-actions]

【预览链接】

• full model
• basic
• mobile
• multiple instances
• editor without toolbar
• pure preview
• XSS（Not allowed by default）
• img wysiwyg
• table wysiwyg
• headers with auto num
• 流式输入模式（AI chart场景）
• VIM 编辑模式