Feat#1291 && Fix#1768

.editorconfig

@@ -0,0 +1,13 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+# Tab indentation
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+quote_type = single

.vscode/extensions.json

@@ -0,0 +1,7 @@
+{
+  "recommendations": [
+    "ms-dotnettools.csharp",
+    "octref.vetur",
+    "editorconfig.editorconfig"
+  ]
+}

src/style/custom-navbar/custom-navbar.scss

@@ -971,6 +971,7 @@ li.nav-item[report-id="playpage_dynamic"] .i-frame,
 }
 #custom-navbar-home-popup .category-item .popup a,
 #upload-actions a,
+#ranking-list a,
 #message-list a {
   position: relative;
   padding: 8px;
@@ -997,6 +998,7 @@ li.nav-item[report-id="playpage_dynamic"] .i-frame,
 }
 #custom-navbar-home-popup .category-item .popup,
 #upload-actions,
+#ranking-list,
 #message-list {
   a:hover::before {
     transform: scaleX(1);
@@ -1011,6 +1013,7 @@ li.nav-item[report-id="playpage_dynamic"] .i-frame,
   font-weight: bold;
 }
 #upload-actions,
+#ranking-list,
 #message-list {
   width: max-content;
 }

src/style/custom-navbar/custom-navbar.ts

@@ -108,11 +108,12 @@ export default (() => {
       const { UserInfo } = await import('./simple/custom-navbar-user-info')
       const { SearchBox } = await import('./simple/custom-navbar-search-box')
       const { Iframe } = await import('./simple/custom-navbar-iframe')
+      const { Rank } = await import('./simple/custom-navbar-rank')
       const components = [
         new Blank(1),
         new Logo(),
         new Category(),
-        new SimpleLink('排行', 'https://www.bilibili.com/v/popular/rank/all', 'ranking'),
+        new Rank(),
         new SimpleLink('相簿', 'https://h.bilibili.com', 'drawing'),
         new SimpleLink('音频', 'https://www.bilibili.com/audio/home/', 'music'),
         new Iframe('游戏中心', 'https://game.bilibili.com/', {

src/style/custom-navbar/simple/custom-navbar-rank.ts

@@ -0,0 +1,25 @@
+import { NavbarComponent } from '../custom-navbar-component';
+
+export class Rank extends NavbarComponent {
+  constructor() {
+    super();
+    this.href = 'https://www.bilibili.com/v/popular/rank/all';
+    this.html = '排行';
+    this.popupHtml = /*html*/ `
+      <ul id="ranking-list">
+        <li><a target="_blank" href="https://www.bilibili.com/v/popular/all">综合热门</a></li>
+        <li><a target="_blank" href="https://www.bilibili.com/v/popular/weekly">每周必看</a></li>
+        <li><a target="_blank" href="https://www.bilibili.com/v/popular/history">入站必刷</a></li>
+        <li><a target="_blank" href="https://www.bilibili.com/v/popular/rank/all">排行榜</a></li>
+      </ul>
+    `;
+  }
+  get name(): keyof CustomNavbarOrders {
+    return 'rankingLink';
+  }
+}
+export default {
+  export: {
+    Rank,
+  },
+};

src/style/dark/dark-color-scheme.ts

@@ -3,8 +3,12 @@ const check = (isSystemDark: boolean) => {
   if (isSystemDark !== settings.useDarkStyle) {
     settings.useDarkStyle = isSystemDark
   }
+  return isSystemDark
 }
-check(matchList.matches)
+(async()=>{
+  const { load:loadDarkMod, unload:unloadDarkMod } = await import('./dark-styles')
+  check(matchList.matches) ? loadDarkMod() : unloadDarkMod()
+})()
 matchList.addEventListener('change', e => {
   check(e.matches)
 })

src/style/dark/dark-styles.ts

@@ -1,7 +1,7 @@
 const removeBadScrollbar = () => {
   SpinQuery.select('.custom-scrollbar').then(it => it && it.classList.remove('custom-scrollbar'))
 }
-const unload = () => {
+export const unload = () => {
   document.body.classList.remove('dark')
   resources.removeStyle('darkStyleNavBar')
   resources.removeStyle('darkStyle')
@@ -22,7 +22,7 @@ const notSupported: (string | RegExp)[] = [
   // 创作中心-收益管理-悬赏计划
   "//cm.bilibili.com/quests/#/task",
 ]
-const load = () => {
+export const load = () => {
   if (settings.noDarkOnMember && notSupported.some(it => {
     if (typeof it === 'string') {
       return document.URL.replace(location.search, '').includes(it)
@@ -50,4 +50,8 @@ addSettingsListener('useDarkStyleAsUserStyle', () => {
 export default {
   reload: load,
   unload: unload,
+  export: {
+    load,
+    unload
+  }
 }