Optimizations for Vivaldi 6.9

1.	Optimized for Vivaldi 6.9.
2.	Added some custom-made Vivaldi themes.
3.	Added two documentation files: one explaining how to use local themes, and the other on how to set up different versions of VivalArc.

.gitignore

@@ -2,4 +2,5 @@
 assets/.DS_Store
 docs/.DS_Store
 css/.DS_Store
-.DS_Store
+.DS_Store
+.vscode/

README-cn.md

@@ -5,13 +5,17 @@
   - [📝开始配置 VivalArc](https://github.com/tovifun/VivalArc/blob/main/docs/configure-vivaldi-cn.md)
 - 如果不想阅读文字版，也可以看我在B站上的步骤视频 
   - [📺5分钟将 Vivaldi 配置成 Arc](https://www.bilibili.com/video/BV1fe4y1a7WQ)
+- VivalArc Blog
+  - [🎨推荐一些 Vivaldi 主题](https://github.com/tovifun/VivalArc/blob/main/docs/curated-themes-cn.md)
+  - [🧑‍💻如何使用 VivalArc 不同版本](https://github.com/tovifun/VivalArc/blob/main/docs/vivalarc-variants-cn.md)
+  - [🎨如何使用本地的 Vivaldi 主题](https://github.com/tovifun/VivalArc/blob/main/using-local-vivaldi-theme-cn.md)
 - 更多相关链接
-  - [🎉更新日志](https://github.com/tovifun/VivalArc/blob/main/docs/changelog-cn.md)
-  - [🎨推荐主题](https://github.com/tovifun/VivalArc/blob/main/docs/curated-themes-cn.md)
   - [🧑‍💻常见问题](https://github.com/tovifun/VivalArc/blob/main/docs/faq-cn.md)
+  - [🎉更新日志](https://github.com/tovifun/VivalArc/blob/main/docs/changelog-cn.md)
   - [🌐VivalArc 官网](https://arc.tovi.fun)
   - [📝VivalArc README English version](https://github.com/tovifun/VivalArc/blob/main/README.md) 
 
+## 🖥️ VivalArc Screenshot
  ![Screenshot](./screenshots/vivalarc_1.0.0_mac.jpeg)
 
 ---

README.md

@@ -1,11 +1,19 @@
 This project mainly includes a set of CSS files and a Vivaldi theme. With a few simple steps of configuration, you can modify Vivaldi into Arc style. Compatible with macOS, Windows, and Linux.
+
+## VivalArc Blog
 - [📝VivalArc, Configuration Steps](https://github.com/tovifun/VivalArc/blob/main/docs/configure-vivaldi.md)
+- [🎨Recommended Vivaldi Themes](https://github.com/tovifun/VivalArc/blob/main/docs/curated-themes.md)
+- [🎨How to Set Up Different Versions of Vivaldi Arc](https://github.com/tovifun/VivalArc/blob/main/docs/curated-themes.md)
+- [🎨How to Use Local Vivaldi Themes](https://github.com/tovifun/VivalArc/blob/main/using-local-vivaldi-theme.md)
+
+## 🗃️ Resources
 - [🎉Change Log](https://github.com/tovifun/VivalArc/blob/main/docs/changelog.md)
-- [🎨Curated Themes](https://github.com/tovifun/VivalArc/blob/main/docs/curated-themes.md)
 - [🧑‍💻FAQ](https://github.com/tovifun/VivalArc/blob/main/docs/faq.md)
 - [🌐VivalArc Website](https://arc.tovi.fun)
 - [📝VivalArc 中文介绍和配置方式](https://github.com/tovifun/VivalArc/blob/main/README-cn.md) 
 
+---
+## 🖥️ VivalArc Screenshot
  ![Screenshot](./screenshots/vivalarc_1.0.0_mac.jpeg)
 
 ---

docs/changelog-cn.md

@@ -1,3 +1,13 @@
+## 🗓️ 2024.08.17 | v1.0.4
+### 1. 针对 Vivaldi 6.9 的优化
+Vivaldi Snapshot 6.9（Vivaldi 的 Beta 版）最近发布了更新，这次更新引发了 VivalArc 的一个小问题——侧边栏的背景多了一层半透明效果 #24。此次优化的重点是解决这个问题。
+
+### 2. 如何使用 VivalArc 的不同版本
+有些用户询问如何使用带有标题栏的样式 #26。实际上，我已经设置了几个不同版本的变体，用户可以根据自己的喜好选择使用。详细信息请参阅：[如何使用 Vivaldi Arc 的不同版本](./vivalarc-variants-cn.md)。
+
+### 2. Reflect New Tab 主题
+最近，我发现了一个名为 [Reflect New Tab](https://chromewebstore.google.com/detail/reflect-new-tab/jnhdkfampckckkmbanadkkjlcaemdkob) 的新标签页插件，其渐变背景非常美观。于是，我将这个插件的背景图制作成了 [Vivaldi 的主题](./curated-themes-cn.md)。效果出乎意料地好，让 VivalArc 的外观焕然一新，尤其是粉色主题，我个人非常喜欢。强烈推荐大家试试。
+
 ## 🗓️ 2024.06.29 | v1.0.3
 1. 这个版本主要优化 Vivaldi 6.8 更新之后的一个小问题——“[Issue#20左侧标签栏后，工作区下的分割线与第一个标签页有重合](https://github.com/tovifun/VivalArc/issues/20)”。（感谢 @NextEcho 细心提供 CSS，虽然最后我采取的方法和他的不完全一致
 2. 在之前的版本里面，我为了模仿 Arc 的样式，做了几个渐变的 Vivaldi 主题放在了项目文件里供大家使用。然后我前几天去逛了一下 Vivald Community 的 Themes 专区，发现上面就有很多合适的主题。我就在想，我何必舍近求远自己自制主题，于是我在 Community 尝试了一些热门主题，并挑选了几个我觉得合适的主题提供大家直接使用。使用的方式很简单：

docs/changelog.md

@@ -1,3 +1,14 @@
+## 🗓️ 2024.08.17 | v1.0.4
+
+### 1. Optimization for Vivaldi 6.9
+Vivaldi Snapshot 6.9 (the Beta version of Vivaldi) was recently updated, which introduced a minor issue with VivalArc—an extra semi-transparent layer appeared on the sidebar background #24 . This update primarily addresses and resolves this issue.
+
+### 2. How to Use Different Versions of VivalArc
+Some users have asked how to use the style with a title bar #26. In fact, I have created several variants of VivalArc, allowing you to choose the style that best suits your preferences. For more details, please refer to: [How to Set Up Different Versions of Vivaldi Arc](./vivalarc-variants.md).
+
+### 3. Reflect New Tab Theme
+I recently discovered a plugin called [Reflect New Tab](https://chromewebstore.google.com/detail/reflect-new-tab/jnhdkfampckckkmbanadkkjlcaemdkob), which features a beautiful gradient background. I decided to create a [Vivaldi theme](./curated-themes.md) using this background, and the results were impressive—it gave VivalArc a whole new look. My personal favorite is the pink theme, and I highly recommend you give it a try.
+
 ## 🗓️ 2024.06.29 | v1.0.3
 1. This version mainly addresses a minor issue in Vivaldi 6.8 update—[Issue#20](https://github.com/tovifun/VivalArc/issues/20). (Special thanks to @NextEcho for providing CSS solutions, although I did not entirely adopt their method in the end).
 2. In previous versions, I created a few gradient Vivaldi themes to mimic the Arc style and included them in the project files for everyone to use. A few days ago, I explored the Themes section on the Vivaldi Community and discovered many suitable themes. I realized there was no need to go out of my way to create new themes, so I tried some of the popular themes in the Community and selected a few that I found fitting. Here’s how you can use them:

docs/configure-vivaldi-cn.md

@@ -50,9 +50,9 @@
 ### 第三步：自定义 UI MOD
 
 1. [**下载这个文件**](https://github.com/tovifun/VivalArc/archive/refs/heads/main.zip)，解压保存在一个你不会删除的地方
-2. **设置主题**：可使用我放在本地的主题，如theme-ArcLight.zip（或者直接打开[我在 Vivaldi Community 上挑选的几个主题](./curated-themes-cn.md)
-3. 在 Vivaldi 地址栏：打开 `vivaldi://experiments` 并开启  `"Allow for using CSS modifications"`
-4. 打开 Vivaldi 设置 > 外观 > `自定义UI MOD`
-5. 选择文件夹 > 选择刚才解压的文件夹
-6. 重启 Vivaldi，这时你应该可以看到你的浏览器效果跟我上方的图片效果一样了
-7. 换一张你喜欢的壁纸，你刚解压的文件夹里我放了几张进去，可以换上看看
+2. **打开Vivaldi 设置，设置主题**：可使用我放在本地的主题，如theme-ArcLight.zip
+   - 或者直接打开[我在 Vivaldi Community 上挑选的几个主题](./curated-themes-cn.md)
+3. **在 Vivaldi 地址栏**：打开 `vivaldi://experiments` 并开启  `"Allow for using CSS modifications"`
+4. **打开 Vivaldi 设置** > 外观 > `自定义UI MOD`
+   - 选择文件夹 > 选择刚才解压的文件夹
+5. **重启 Vivaldi**，这时你应该可以看到你的浏览器效果跟我上方的图片效果一样了

docs/curated-themes-cn.md

@@ -1,8 +1,28 @@
 # 推荐的浏览器主题
 
 在之前的版本里面，我为了模仿 Arc 的样式，做了几个渐变的 Vivaldi 主题放在了项目文件里供大家使用。然后我前几天去逛了一下 Vivald Community 的 Themes 专区，发现上面就有很多合适的主题。我就在想，我何必舍近求远自己自制主题，于是我在 Community 尝试了一些热门主题，并挑选了几个我觉得合适的主题提供大家直接使用。使用的方式很简单：
-1. 点击主题名字跳转到主题页面
-2. 点击主题下方的安装按钮å
+1. 点击主题名字跳转到主题页面（如果主题名字无法点击，说明该主题尚在审核中，你可以[使用本地的主题](./using-local-vivaldi-theme-cn.md)）
+2. 点击主题下方的安装按钮
+
+## 几个原本放在项目里的主题我也传到了 Vivaldi 主题社区
+
+| name       | preview                           | 
+| ---------- | ----------------------------------- | 
+| [VivalArc Reflect Pink]  | ![theme](../themes/theme_screenshots/vivalarc_reflect_pink.jpg) | 
+| [VivalArc Reflect Purple Vibrant]  | ![theme](../themes/theme_screenshots/vivalarc_reflect_purple_vibrant.jpg) | 
+| [VivalArc Reflect Purple]  | ![theme](../themes/theme_screenshots/vivalarc_reflect_purple.jpg) | 
+| [VivalArc Reflect Blue]  | ![theme](../themes/theme_screenshots/vivalarc_reflect_blue.jpg) | 
+| [VivalArc Reflect Green]  | ![theme](../themes/theme_screenshots/vivalarc_reflect_green.jpg) | 
+| [VivalArc Reflect Dark]  | ![theme](../themes/theme_screenshots/vivalarc_reflect_dark.jpg) | 
+| [VivalArc Reflect Dark Purple]  | ![theme](../themes/theme_screenshots/vivalarc_reflect_dark_purple.jpg) | 
+| [VivalArc Reflect Dark Pink]  | ![theme](../themes/theme_screenshots/vivalarc_reflect_dark_pink.jpg) | 
+| [VivalArc Reflect Dark Blue]  | ![theme](../themes/theme_screenshots/vivalarc_reflect_dark_blue.jpg) | 
+| [VivalArc Reflect Dark Green]  | ![theme](../themes/theme_screenshots/vivalarc_reflect_dark_green.jpg) | 
+| [Arc Light](https://themes.vivaldi.net/themes/1LVJ2bOYJx9)  | ![theme](../themes/theme_screenshots/theme_arclight.jpg) | 
+| [Arc Green](https://themes.vivaldi.net/themes/eZXvokoRvOW) | ![theme](../themes/theme_screenshots/theme_gradient_greenlight.jpg) | 
+| [Arc Pink](https://themes.vivaldi.net/themes/0WV7AngZlaX) | ![theme](../themes/theme_screenshots/theme_gradient_pinklight.jpg) | 
+| [Arc Dark](https://themes.vivaldi.net/themes/rwjvExg4lAL) | ![theme](../themes/theme_screenshots/theme_arcdark.jpg) | 
+| [Arc Dark Pure](https://themes.vivaldi.net/themes/NOb71LX8J1g) | ![theme](../themes/theme_screenshots/theme_arcdark_pure.jpg) | 
 
 ## 来自社区-浅色
 
@@ -21,14 +41,3 @@
 | [Montanhas](https://themes.vivaldi.net/themes/MD07Kq4gv14)  | ![theme](../themes/theme_screenshots/montanhas.jpg) | 
 | [Vivaldi Midnight](https://themes.vivaldi.net/themes/rwjvExj2lAL)  | ![theme](../themes/theme_screenshots/vivaldi_midnight.jpg) | 
 | [Sunset into the midnight](https://themes.vivaldi.net/themes/gZplByVe7QV)  | ![theme](../themes/theme_screenshots/sunset_into_the_midnight.jpg) | 
-
-
-## 几个原本放在项目里的主题我也传到了 Vivaldi 主题社区
-
-| 名字       | 缩略图                              | 
-| ---------- | ----------------------------------- | 
-| [Arc Light](https://themes.vivaldi.net/themes/1LVJ2bOYJx9)  | ![theme](../themes/theme_screenshots/theme_arclight.jpg) | 
-| [Arc Green](https://themes.vivaldi.net/themes/eZXvokoRvOW) | ![theme](../themes/theme_screenshots/theme_gradient_greenlight.jpg) | 
-| [Arc Pink](https://themes.vivaldi.net/themes/0WV7AngZlaX) | ![theme](../themes/theme_screenshots/theme_gradient_pinklight.jpg) | 
-| [Arc Dark](https://themes.vivaldi.net/themes/rwjvExg4lAL) | ![theme](../themes/theme_screenshots/theme_arcdark.jpg) | 
-| [Arc Dark Pure](https://themes.vivaldi.net/themes/NOb71LX8J1g) | ![theme](../themes/theme_screenshots/theme_arcdark_pure.jpg) | 

docs/curated-themes.md

@@ -1,8 +1,29 @@
 # Recommended Themes
 In previous versions, I created a few gradient Vivaldi themes to mimic the Arc style and included them in the project files for everyone to use. A few days ago, I explored the Themes section on the Vivaldi Community and discovered many suitable themes. I realized there was no need to go out of my way to create new themes, so I tried some of the popular themes in the Community and selected a few that I found fitting. Here’s how you can use them:
-1.	Click on the theme name to go to its page.
+1.	Click on the theme name to go to its page. If a theme name is not clickable, it means the theme is still under review, and you can [use the local version instead](./using-local-vivaldi-theme.md).
 2.	Click the install button below the theme.
 
+## Themes By ToviFun: 
+You can also find these themes in the local folder ../themes/
+
+| name       | preview                           | 
+| ---------- | ----------------------------------- | 
+| [VivalArc Reflect Pink]  | ![theme](../themes/theme_screenshots/vivalarc_reflect_pink.jpg) | 
+| [VivalArc Reflect Purple Vibrant]  | ![theme](../themes/theme_screenshots/vivalarc_reflect_purple_vibrant.jpg) | 
+| [VivalArc Reflect Purple]  | ![theme](../themes/theme_screenshots/vivalarc_reflect_purple.jpg) | 
+| [VivalArc Reflect Blue]  | ![theme](../themes/theme_screenshots/vivalarc_reflect_blue.jpg) | 
+| [VivalArc Reflect Green]  | ![theme](../themes/theme_screenshots/vivalarc_reflect_green.jpg) | 
+| [VivalArc Reflect Dark]  | ![theme](../themes/theme_screenshots/vivalarc_reflect_dark.jpg) | 
+| [VivalArc Reflect Dark Purple]  | ![theme](../themes/theme_screenshots/vivalarc_reflect_dark_purple.jpg) | 
+| [VivalArc Reflect Dark Pink]  | ![theme](../themes/theme_screenshots/vivalarc_reflect_dark_pink.jpg) | 
+| [VivalArc Reflect Dark Blue]  | ![theme](../themes/theme_screenshots/vivalarc_reflect_dark_blue.jpg) | 
+| [VivalArc Reflect Dark Green]  | ![theme](../themes/theme_screenshots/vivalarc_reflect_dark_green.jpg) | 
+| [Arc Light](https://themes.vivaldi.net/themes/1LVJ2bOYJx9)  | ![theme](../themes/theme_screenshots/theme_arclight.jpg) | 
+| [Arc Green](https://themes.vivaldi.net/themes/eZXvokoRvOW) | ![theme](../themes/theme_screenshots/theme_gradient_greenlight.jpg) | 
+| [Arc Pink](https://themes.vivaldi.net/themes/0WV7AngZlaX) | ![theme](../themes/theme_screenshots/theme_gradient_pinklight.jpg) | 
+| [Arc Dark](https://themes.vivaldi.net/themes/rwjvExg4lAL) | ![theme](../themes/theme_screenshots/theme_arcdark.jpg) | 
+| [Arc Dark Pure](https://themes.vivaldi.net/themes/NOb71LX8J1g) | ![theme](../themes/theme_screenshots/theme_arcdark_pure.jpg) | 
+
 ## Light Themes from the Vivaldi Community
 
 | theme's name & link       | preview                              | 
@@ -20,14 +41,3 @@ In previous versions, I created a few gradient Vivaldi themes to mimic the Arc s
 | [Montanhas](https://themes.vivaldi.net/themes/MD07Kq4gv14)  | ![theme](../themes/theme_screenshots/montanhas.jpg) | 
 | [Vivaldi Midnight](https://themes.vivaldi.net/themes/rwjvExj2lAL)  | ![theme](../themes/theme_screenshots/vivaldi_midnight.jpg) | 
 | [Sunset into the midnight](https://themes.vivaldi.net/themes/gZplByVe7QV)  | ![theme](../themes/theme_screenshots/sunset_into_the_midnight.jpg) | 
-
-
-## Themes in local folder: ../themes/
-
-| name       | preview                           | 
-| ---------- | ----------------------------------- | 
-| [Arc Light](https://themes.vivaldi.net/themes/1LVJ2bOYJx9)  | ![theme](../themes/theme_screenshots/theme_arclight.jpg) | 
-| [Arc Green](https://themes.vivaldi.net/themes/eZXvokoRvOW) | ![theme](../themes/theme_screenshots/theme_gradient_greenlight.jpg) | 
-| [Arc Pink](https://themes.vivaldi.net/themes/0WV7AngZlaX) | ![theme](../themes/theme_screenshots/theme_gradient_pinklight.jpg) | 
-| [Arc Dark](https://themes.vivaldi.net/themes/rwjvExg4lAL) | ![theme](../themes/theme_screenshots/theme_arcdark.jpg) | 
-| [Arc Dark Pure](https://themes.vivaldi.net/themes/NOb71LX8J1g) | ![theme](../themes/theme_screenshots/theme_arcdark_pure.jpg) | 

docs/using-local-vivaldi-theme-cn.md

@@ -0,0 +1,5 @@
+# 如何使用本地的 Vivaldi 主题
+
+我在 VivalArc 的项目文件夹中放置了一些 Vivaldi 主题文件，这些主题我也上传到了 Vivaldi 社区。不过，由于部分主题仍在审核中，目前无法直接在社区中安装。如果你想要使用这些仅在本地的主题，可以查看下方的视频，了解如何进行设置：
+
+https://github.com/user-attachments/assets/dcae1cb5-10ed-4da9-b554-2daa9925f732

docs/using-local-vivaldi-theme.md

@@ -0,0 +1,5 @@
+# How to Use Local Vivaldi Themes
+
+I have placed some Vivaldi theme files in the VivalArc project folder. These themes have also been uploaded to the Vivaldi community. However, since some themes are still under review, they cannot be installed directly from the community at this time. If you want to use these themes locally, you can watch the video below to learn how to set them up.
+
+https://github.com/user-attachments/assets/dcae1cb5-10ed-4da9-b554-2daa9925f732

docs/vivalarc-variants-cn.md

@@ -0,0 +1,13 @@
+# VivalArc 样式设置
+
+在根目录下有一个名为 vivalarc.css 的文件，这是我为 VivalArc 设置的默认样式。不过，由于不同用户有不同的喜好，我微调了一些 VivalArc 的变体，供大家选择使用。
+
+## 不同版本介绍
+目前提供了两个变体版本，分别是 vivalarc-larger-ui 和 vivalarc-compact-ui。尽管目前这两个版本的视觉差异较小，但我会根据用户反馈继续进行调整并增加更多变体。
+
+https://github.com/user-attachments/assets/dbc3699c-c07a-4098-949b-825a03a6b543
+
+## 使用方式
+使用方式非常简单。在 Vivaldi 的设置中选择自定义的 UI 修改时，只需选择 vivalarc-larger-ui 或 vivalarc-compact-ui 文件夹即可。具体操作可以参考下方的演示视频。
+
+https://github.com/user-attachments/assets/84e80816-35bb-46e0-952f-896004d17029

docs/vivalarc-variants.md

@@ -0,0 +1,14 @@
+# Setting up Different VivalArc Versions
+
+In the root directory, there is a file named vivalarc.css, which serves as the default style for VivalArc. However, since users have different preferences, I’ve fine-tuned several variants of VivalArc for everyone to choose from.
+
+## Overview of Different Versions
+
+Currently, there are two variants available: vivalarc-larger-ui and vivalarc-compact-ui. The visual differences between these versions are minimal, but I plan to introduce more adjustments based on user feedback.
+
+https://github.com/user-attachments/assets/dbc3699c-c07a-4098-949b-825a03a6b543
+
+## Setup Instructions
+In Vivaldi’s settings, when selecting the custom UI Modification, simply choose the vivalarc-larger-ui or vivalarc-compact-ui folder. You can refer to the demonstration video below for a detailed guide on the setup process.
+
+https://github.com/user-attachments/assets/84e80816-35bb-46e0-952f-896004d17029