feat: light & dark style auto switch for Sidebery

.gitignore

@@ -0,0 +1 @@
+.DS_store

README.md

@@ -1,29 +1,32 @@
 ![](./assets/header.png)
+
 # VerticalFox
+
 [中文文档](readme_ch.md)
 
-Get an Edge like auto-hide vertical tabs bar on Firefox! Powerd by Sidebery, you can have your bookmarks, pinned tabs all in side bar and get a clean, compact look. Support MacOS and Windows. 
+Get an Edge like auto-hide vertical tabs bar on Firefox! Powerd by Sidebery, you can have your bookmarks, pinned tabs all in side bar and get a clean, compact look. Support MacOS and Windows.
 
 ![](./assets/gif1.gif)
 
 *The auto hide also works on Tree Style Tabs, but you may need to adjust the css to achieve the best look.*
+
 ## How to apply
-1. You need to have [Sidebery](https://addons.mozilla.org/en-US/firefox/addon/sidebery/) installed.
-2. Download the zip files in release according to your operation system. You can also directly use the source files you need.
 
+1. You need to have [Sidebery](https://addons.mozilla.org/en-US/firefox/addon/sidebery/) installed.
+2. Download the files in release according to your operation system. You can also directly use the source files you need.
 3. If you haven't customized your Firefox before, check out [this guide](https://www.reddit.com/r/firefox/wiki/userchrome/) for how to set up your Firefox and the profiles. TL;DR version:
-    1. Navigate to `about:config` in the address bar and accept the risks.
-    2. Search for `toolkit.legacyUserProfileCustomizations.stylesheets` and toggle it to true (by double clicking on it).
-    3. Navigate to `about:support` in the address bar, under **Application Basics**, find **Profile Folder** and open it. You should now see your profile folder.
-    4. Inside your profile folder, create a new folder named `chrome` (all lower case).
-
+
+   1. Navigate to `about:config` in the address bar and accept the risks.
+   2. Search for `toolkit.legacyUserProfileCustomizations.stylesheets` and toggle it to true (by double clicking on it).
+   3. Navigate to `about:support` in the address bar, under **Application Basics**, find **Profile Folder** and open it. You should now see your profile folder.
+   4. Inside your profile folder, create a new folder named `chrome` (all lower case).
 4. Once you have your `chrome` folder under your profile directory, copy the `userChrome.css` you downloaded into `chrome`. Alternatively you can create a blank `userChrome.css` and paste the code. Restart your browser.
+5. Go to the settings of Sidebery, go to **Styles editor**, paste all the code from `sidebery_styles.css`. 
 
+![](/assets/img1.png)
 
-5. Go to the settings of Sidebery, go to **Styles editor**, paste all the code from `switch_light&dark.css`if you wanna use automatically switch between dark theme and light theme, or `dark_sidebery_styles.css` if you wanna use dark theme, or `light_sidebery_styles.css` if you wanna use light theme.
+When you switch between light and dark browser theme, remember to also change it in sidebery settings for best experience: appearance -> color scheme
 
-
-![](/assets/img1.png)
+![](assets/img2.png)
 
 Now you can enjoy your new Firefox!
-

readme_ch.md

@@ -1,4 +1,5 @@
 ![](assets/header.png)
+
 # VerticalFox
 
 在 Firefox 上你也能拥有 Edge 浏览器的自动伸缩垂直标签栏！该主题配合 Sidebery 插件使用，所以收藏夹、标签置顶、独立工作区等功能都一并集成到了侧边栏中，赋予你的 Firefox 一个干净、极简的外观。同时支持 MacOS 与 Windows。
@@ -8,13 +9,17 @@
 # 安装指南
 
 1. 安装 [Sidebery](https://addons.mozilla.org/en-US/firefox/addon/sidebery/) 插件。
-2. 根据你所使用的操作系统，下载 release 中的压缩包。
+2. 根据你所使用的操作系统，下载 release 中的压缩包并解压。（如果你熟悉 Firefox 自定义，你可以直接在源码中找到你要的文件）
 3. 在地址栏中输入 `about:config` 并前往，接受风险提示。
 4. 搜索 `toolkit.legacyUserProfileCustomizations.stylesheets` 并双击设置为 true。
 5. 在地址栏中输入 `about:support` 并前往，在 **Application Basics** 中找到 **Profile Folder** 并打开。
 6. 在打开的目录下新建 `chrome` 文件夹，名称必须全部小写。
 7. 复制下载好的 `userChrome.css` 到 `chrome` 文件夹中，重启浏览器。
-8. 打开 Sidebery 的设置，前往 **Styles Editor**，在右侧复制粘贴`switch_light&dark.css`(自动切换深浅色模式)中的代码, 也可以单独使用 `dark_sidebery_styles.css` (暗黑模式主题) 或 `light_sidebery_styles.css` (亮色模式主题) 。
-![](assets/img1.png)
+8. 打开 Sidebery 的设置，前往 **Styles Editor**，在右侧复制粘贴 `sidebery_styles.css` 中的代码。
+   ![img](assets/img1.png)
+
+当切换浏览器的亮色/暗色主题时，在 sidebery 设置中也需要进行切换以获得最佳体验：
+
+![](/assets/img2.png)
 
-一切就绪！
+一切就绪！