Komari 探针 之 Next 主题美化「更新：支持保存主题设置了」

[TVT (EVA)]

之前分享过一个Komari的哪吒主题美化

Komari的哪吒主题美化

跟着站内的大佬安装了Komari探针，感谢大佬的教程，确实挺方便好用的。 不过官方的主题比较少，所以基于我比较喜欢的哪吒面板的主题，靠AI弄了点美化效果上去。 [QQ20251110-150731] 原始哪吒主题： [2025-11-10 14.10.01 nezha-vercel.vercel.app 8ae0c46de27f] 喜欢的可以自取一下，在站点的…

但是这个主题存在一些bug，也很久没有更新了。
于是找了一个类似的新主题next，按照之前的风格重新美化一下。


原版next主题：

美化之后：

喜欢的可以自取使用。

---

首先需要安装这个主题：

GitHub - tonyliuzj/komari-next: Komari-Next is a modern frontend for the Komari...

然后在首页进行如下设置：

因为此主题自带不同的UI，我的优化目前只针对如上设置生效，最下方自带的背景图不要填写，此处填写不会被保存在云端。更换背景图的效果内置在了优化里面。

背景图部分加了随机时间戳，是解决浏览器直接调用缓存，刷新无效，导致背景图很长一段时间不会变化的。不过这样也有一个问题，就是进入子页面也会刷新背景图，不喜欢的话也可以自行修改。

代码也让AI加入了详细的注释，大家可以自行调整细节。

---

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:[email protected]&display=swap">

<script>
  window.addEventListener('load', function() {
    if (!document.getElementById('custom-dynamic-bg')) {
      var bgLayer = document.createElement('div');
      bgLayer.id = 'custom-dynamic-bg';
      bgLayer.style.position = 'fixed';
      bgLayer.style.inset = '0';
      bgLayer.style.zIndex = '-9999'; 
      
      /* ==========================================
         🎨 【全局背景图片设置】 🎨
         ------------------------------------------
         下面这行代码控制了整个网页的背景。
         当前使用的是随机二次元/风景壁纸 API。
         如果你想换成自己的固定图片，只需把单引号 ' ' 里面的链接换掉即可！
         
         例如换成你自己的图：
         bgLayer.style.backgroundImage = "url('https://你的图床链接.jpg')";
         ========================================== */
      bgLayer.style.backgroundImage = 'url(https://api.neix.in/random/pc?t=' + new Date().getTime() + ')';
      
      bgLayer.style.backgroundSize = 'cover';
      bgLayer.style.backgroundPosition = 'center';
      document.body.appendChild(bgLayer);
    }
  });
</script>

<style>
  /* ==========================================
     【0. 全局字体与基础防遮挡】
     ========================================== */
  * { font-family: 'Noto Sans SC', sans-serif !important; }

  body { background-color: transparent !important; }
  body .bg-background:not(nav) { background-color: transparent !important; }
  
  /* 🎨 【全局壁纸压暗蒙版】 */
  body::before {
    content: ""; position: fixed; inset: 0;
    /* 调节最后的 0.35。如果你觉得壁纸太抢眼，可以改大(如 0.5)；如果想壁纸更亮，可以改小(如 0.2) */
    background-color: rgba(0, 0, 0, 0.35) !important; 
    z-index: -9998; pointer-events: none;
  }

  /* ==========================================
     【1. 顶栏导航 (Navbar) 调节】
     ========================================== */
  nav.sticky {
    /* 🎨 【顶栏背景色与透明度】最后面的 0.55 是透明度。想更透明就改小(如 0.3)，想更黑就改大(如 0.8) */
    background-color: rgba(50, 50, 50, 0.55) !important; 
    /* 🎨 【顶栏毛玻璃模糊度】12px 越大越糊，越小越清晰透出壁纸 */
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  }
  
  nav.sticky .container {
    /* 📏 【顶栏高度】4.25rem 约等于 68px。想更窄可以改 3.5rem，想更宽改 5rem */
    height: 4.25rem !important; 
    min-height: 4.25rem !important;
  }

  /* ==========================================
     【2. 主服务器卡片 (Card) 调节】
     ========================================== */
  .text-card-foreground.bg-gradient-to-br.rounded-xl,
  div.bg-card:not(button):not(.bg-popover) {
    /* 🎨 【卡片底色】这一串控制了卡片的渐变光效。最后面的 0.45 控制整体玻璃板的黑度/厚度 */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.02) 40%, rgba(0, 0, 0, 0.15) 100%), rgba(15, 15, 20, 0.45) !important; 
    background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.02) 40%, rgba(0, 0, 0, 0.15) 100%) !important; 
    /* 🎨 【卡片毛玻璃模糊度】默认 16px */
    backdrop-filter: blur(16px) saturate(100%) !important; 
    -webkit-backdrop-filter: blur(16px) saturate(100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important; 
    /* 🎨 【卡片悬浮投影】控制卡片底下的阴影大小和黑度 */
    box-shadow: 0 16px 40px -8px rgba(0, 0, 0, 0.5) !important; 
    color: #ffffff !important;
    transition: all 0.3s ease !important;
    border-radius: 0.75rem !important; 
  }
  /* 卡片鼠标悬浮时的变亮效果 */
  .text-card-foreground.bg-gradient-to-br.rounded-xl:hover,
  div.bg-card:not(button):not(.bg-popover):hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.05) 45%, rgba(0, 0, 0, 0.1) 100%), rgba(25, 25, 30, 0.55) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 24px 50px -10px rgba(0, 0, 0, 0.6) !important;
  }

  /* ==========================================
     【3. 顶部 5 卡片字号排版】
     ========================================== */
  /* 📏 【前三个主数据卡片：单行大数字】 */
  .grid .text-2xl {
      /* 改变这里的 1.65rem 可以控制时间、在线数等主要数字的大小 */
      font-size: 1.65rem !important; 
      line-height: 1.2 !important;
      /* 🎨 【文字阴影】0.5 是阴影深度，如果不想要立体字可以整行删掉 */
      filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.5)) !important; 
  }
  .grid .text-xs.font-black {
      font-size: 1.2rem !important;
      filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.5)) !important; 
  }
  
  /* 📏 【后两个副数据卡片：流量/网速 双行数据】 */
  .grid .text-2xl .flex-col div {
      /* 改变这里的 1.05rem 可以控制上下两排数据的字号 */
      font-size: 1.05rem !important; 
      line-height: 1.4 !important;
  }
  .grid .text-xs.font-black .flex-col div {
      font-size: 0.85rem !important;
      line-height: 1.3 !important;
  }

  /* ==========================================
     【4. 🔥 扁平水晶条形进度条 🔥】
     ========================================== */
  /* 锁定进度条上方的百分比文字颜色为素白 */
  .space-y-1 > div.text-sm.font-bold {
      color: rgba(255, 255, 255, 0.95) !important;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
  }

  /* 进度条轨道（底槽） */
  div[role="progressbar"] {
      background-color: rgba(255, 255, 255, 0.08) !important; 
      border: 1px solid rgba(255, 255, 255, 0.04) !important; 
      /* 📏 【进度条粗细】改大(如 0.5rem)变粗，改小(如 0.2rem)变细 */
      height: 0.35rem !important; 
      border-radius: 9999px !important;
      box-shadow: none !important; 
      overflow: hidden !important;
  }
  
  /* 进度条填充液体（亚克力质感） */
  div[role="progressbar"] > div {
      /* 🎨 【进度条通透度】0.85 既有颜色又透出底部，1 则为纯实心不透明 */
      opacity: 0.85 !important; 
      border-radius: 9999px !important;
      box-shadow: none !important; 
      border-right: none !important; 
      background-color: #4ade80 !important; /* 基础状态颜色：浅绿 */
      transition: background-color 0.5s ease, transform 0.3s ease !important;
  }

  /* 🎨 【智能变色逻辑：解决 90% 变绿问题】 🎨
     ------------------------------------------
     CSS 无法直接进行数字对比，因此我们通过匹配 transform 偏移量来变色。
     由于偏移公式是 -(100 - 占用)%，我们采用多段拦截策略：
  */

  /* 拦截一：中度占用 (50% - 79%) -> 变为【明黄色】 */
  div[role="progressbar"] > div[style*="translateX(-50."],
  div[role="progressbar"] > div[style*="translateX(-4"],  
  div[role="progressbar"] > div[style*="translateX(-3"],  
  div[role="progressbar"] > div[style*="translateX(-2"]   
  {
      background-color: #fbbf24 !important; 
  }

  /* 拦截二：高度占用 (80% - 100%) -> 变为【警报红】 */
  /* 这里精准拦截了 80%-100% 的各种偏移可能性，确保 90% 以上绝对是红色 */
  div[role="progressbar"] > div[style*="translateX(-20."], 
  div[role="progressbar"] > div[style*="translateX(-1"],   
  div[role="progressbar"] > div[style*="translateX(-9."],  
  div[role="progressbar"] > div[style*="translateX(-8."],  
  div[role="progressbar"] > div[style*="translateX(-7."],  
  div[role="progressbar"] > div[style*="translateX(-6."],  
  div[role="progressbar"] > div[style*="translateX(-5."],  
  div[role="progressbar"] > div[style*="translateX(-4."],  /* 针对 96% */
  div[role="progressbar"] > div[style*="translateX(-3."],  /* 针对 97% */
  div[role="progressbar"] > div[style*="translateX(-2."],  /* 针对 98% */
  div[role="progressbar"] > div[style*="translateX(-0."],  /* 针对 99% */
  div[role="progressbar"] > div[style*="translateX(0"]     /* 针对 100% */
  {
      background-color: #f87171 !important; 
  }

  /* 拦截三：0% 异常修复 */
  /* 防止占用为 0% 时（偏移 -100%）被上面的 -1 拦截器误杀成红色 */
  div[role="progressbar"] > div[style*="translateX(-100"] {
      background-color: #4ade80 !important; 
  }


  /* ==========================================
     【5. 各种小控件与按钮修复】
     ========================================== */
  /* 普通按钮底槽 (搜索框、网格切换等) */
  button[data-slot="button"]:not(.size-9):not(.h-8), 
  button[aria-haspopup="dialog"]:not(.size-9):not(.h-8), 
  button.border:not([role="tab"]):not(.rounded-full):not(.size-9):not(.h-8),
  input[placeholder*="搜索"], .bg-muted\/50.p-1.rounded-lg, div[role="tablist"] {
    background: rgba(0, 0, 0, 0.25) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    color: rgba(255, 255, 255, 0.8) !important;
  }
  
  /* 选项卡激活态 */
  button[role="tab"][data-state="active"], .bg-muted\/50.p-1.rounded-lg button.bg-card {
    background: rgba(255, 255, 255, 0.15) !important; 
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
  }
  
  button[role="tab"][data-state="inactive"], .bg-muted\/50.p-1.rounded-lg button:not(.bg-card) {
    background: transparent !important; color: rgba(255, 255, 255, 0.6) !important; border: 1px solid transparent !important;
  }

  /* 状态指示小绿点/红点 */
  .text-card-foreground .rounded-full.bg-green-600 {
      background-color: rgba(34, 197, 94, 0.15) !important; border: 1px solid rgba(34, 197, 94, 0.4) !important; color: #4ade80 !important;
  }
  .text-card-foreground .rounded-full.bg-red-600, .text-card-foreground .rounded-full.bg-destructive {
      background-color: rgba(239, 68, 68, 0.15) !important; border: 1px solid rgba(239, 68, 68, 0.4) !important; color: #f87171 !important;
  }

  /* 🎨 【设置弹窗面板背景】 */
  .bg-popover, div[role="dialog"] { 
      /* 控制弹出菜单的暗度与模糊度 */
      background: rgba(30, 30, 35, 0.85) !important; 
      backdrop-filter: blur(24px) saturate(120%) !important; 
      -webkit-backdrop-filter: blur(24px) saturate(120%) !important;
      border: 1px solid rgba(255, 255, 255, 0.1) !important; 
      box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6) !important; 
      border-radius: 0.75rem !important; 
      color: #ffffff !important;
  }

  /* 🎨 【开关控件颜色】 */
  button[role="switch"] span { 
      background-color: #ffffff !important; /* 开关里的圆球颜色 */
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) !important; 
  }
  button[role="switch"][data-state="unchecked"] { 
      background-color: rgba(255, 255, 255, 0.15) !important; /* 关闭时的轨道颜色 */
      border: 1px solid rgba(255, 255, 255, 0.1) !important; 
  }
  button[role="switch"][data-state="checked"] { 
      /* 开启时的轨道颜色，默认翠绿。可换其他色 */
      background-color: #4ade80 !important; 
      border-color: #4ade80 !important; 
  }
</style>

---

更新啦，现在新设备和新浏览器都可以默认改成对应选项了，不再需要手动勾选主题设置了。同时修复了部分按钮鼠标不会变成小手的问题。
还顺带做了一个12小时制的效果，不过因为是通过JS改的，在不同的浏览器上可能会有问题，比如Safari的显示就有点问题，所以分成改了时间和不改时间的版本。

不修改时间的版本：

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:[email protected]&display=swap">

<script>
  /* ==========================================
     【A. 强制锁定主题与卡片布局 (精准匹配版)】
     ========================================== */
  (function() {
    try {
      var realKey = 'komari-theme-config';
      var realValue = "{\"colorTheme\":\"default\",\"cardLayout\":\"minimal\",\"graphDesign\":\"progress\",\"backgroundImageUrl\":\"\"}";
      var current = localStorage.getItem(realKey);
      
      // 如果新浏览器没有设置，或者设置被重置了，就强制覆盖为你的完美设置
      if (!current || current.indexOf('minimal') === -1 || current.indexOf('progress') === -1) {
        localStorage.setItem(realKey, realValue);
        window.location.reload(); 
      }
    } catch (e) {}
  })();

  /* ==========================================
     【B. 动态随机壁纸加载】
     ========================================== */
  window.addEventListener('load', function() {
    if (!document.getElementById('custom-dynamic-bg')) {
      var bgLayer = document.createElement('div');
      bgLayer.id = 'custom-dynamic-bg';
      bgLayer.style.position = 'fixed';
      bgLayer.style.inset = '0';
      bgLayer.style.zIndex = '-9999'; 
      bgLayer.style.backgroundImage = 'url(https://api.neix.in/random/pc?t=' + new Date().getTime() + ')';
      bgLayer.style.backgroundSize = 'cover';
      bgLayer.style.backgroundPosition = 'center';
      document.body.appendChild(bgLayer);
    }
  });
</script>

<style>
  /* ==========================================
     【0. 全局字体与基础防遮挡】
     ========================================== */
  * { font-family: 'Noto Sans SC', sans-serif !important; }

  body { background-color: transparent !important; }
  body .bg-background:not(nav) { background-color: transparent !important; }
  
  /* 🎨 【全局壁纸压暗蒙版】 */
  body::before {
    content: ""; position: fixed; inset: 0;
    background-color: rgba(0, 0, 0, 0.35) !important; 
    z-index: -9998; pointer-events: none;
  }

  /* ==========================================
     【1. 顶栏导航 (Navbar) 调节】
     ========================================== */
  nav.sticky {
    background-color: rgba(50, 50, 50, 0.55) !important; 
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  }
  
  nav.sticky .container {
    height: 4.25rem !important; 
    min-height: 4.25rem !important;
  }

  /* ==========================================
     【2. 主服务器卡片 (Card) 调节】
     ========================================== */
  .text-card-foreground.bg-gradient-to-br.rounded-xl,
  div.bg-card:not(button):not(.bg-popover) {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.02) 40%, rgba(0, 0, 0, 0.15) 100%), rgba(15, 15, 20, 0.45) !important; 
    background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.02) 40%, rgba(0, 0, 0, 0.15) 100%) !important; 
    backdrop-filter: blur(16px) saturate(100%) !important; 
    -webkit-backdrop-filter: blur(16px) saturate(100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important; 
    box-shadow: 0 16px 40px -8px rgba(0, 0, 0, 0.5) !important; 
    color: #ffffff !important;
    transition: all 0.3s ease !important;
    border-radius: 0.75rem !important; 
  }
  .text-card-foreground.bg-gradient-to-br.rounded-xl:hover,
  div.bg-card:not(button):not(.bg-popover):hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.05) 45%, rgba(0, 0, 0, 0.1) 100%), rgba(25, 25, 30, 0.55) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 24px 50px -10px rgba(0, 0, 0, 0.6) !important;
  }

  /* ==========================================
     【3. 顶部 5 卡片字号排版】
     ========================================== */
  .grid .text-2xl {
      font-size: 1.65rem !important; 
      line-height: 1.2 !important;
      filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.5)) !important; 
  }
  .grid .text-xs.font-black {
      font-size: 1.2rem !important;
      filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.5)) !important; 
  }
  .grid .text-2xl .flex-col div {
      font-size: 1.05rem !important; 
      line-height: 1.4 !important;
  }
  .grid .text-xs.font-black .flex-col div {
      font-size: 0.85rem !important;
      line-height: 1.3 !important;
  }

  /* ==========================================
     【4. 🔥 零 Bug 修复：根据精准位移变色 🔥】
     ========================================== */
  .space-y-1 > div.text-sm.font-bold {
      color: rgba(255, 255, 255, 0.95) !important;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
  }

  div[role="progressbar"] {
      background-color: rgba(255, 255, 255, 0.08) !important; 
      border: 1px solid rgba(255, 255, 255, 0.04) !important; 
      height: 0.35rem !important; 
      border-radius: 9999px !important;
      box-shadow: none !important; 
      overflow: hidden !important;
  }
  
  div[role="progressbar"] > div {
      opacity: 0.85 !important; 
      border-radius: 9999px !important;
      box-shadow: none !important; 
      border-right: none !important; 
      background-color: #4ade80 !important;
      transition: background-color 0.5s ease, transform 0.3s ease !important;
  }

  div[role="progressbar"] > div[style*="translateX(-50."],
  div[role="progressbar"] > div[style*="translateX(-4"],  
  div[role="progressbar"] > div[style*="translateX(-3"],  
  div[role="progressbar"] > div[style*="translateX(-2"]   
  {
      background-color: #fbbf24 !important; 
  }

  div[role="progressbar"] > div[style*="translateX(-20."], 
  div[role="progressbar"] > div[style*="translateX(-1"],   
  div[role="progressbar"] > div[style*="translateX(-9."],  
  div[role="progressbar"] > div[style*="translateX(-8."],  
  div[role="progressbar"] > div[style*="translateX(-7."],  
  div[role="progressbar"] > div[style*="translateX(-6."],  
  div[role="progressbar"] > div[style*="translateX(-5."],  
  div[role="progressbar"] > div[style*="translateX(-4."],  
  div[role="progressbar"] > div[style*="translateX(-3."],  
  div[role="progressbar"] > div[style*="translateX(-2."],  
  div[role="progressbar"] > div[style*="translateX(-0."],  
  div[role="progressbar"] > div[style*="translateX(0"]     
  {
      background-color: #f87171 !important; 
  }

  div[role="progressbar"] > div[style*="translateX(-100"] {
      background-color: #4ade80 !important; 
  }

  /* ==========================================
     【5. 各种小控件与按钮修复】
     ========================================== */
  button[data-slot="button"]:not(.size-9):not(.h-8), 
  button[aria-haspopup="dialog"]:not(.size-9):not(.h-8), 
  button.border:not([role="tab"]):not(.rounded-full):not(.size-9):not(.h-8),
  input[placeholder*="搜索"], .bg-muted\/50.p-1.rounded-lg, div[role="tablist"] {
    background: rgba(0, 0, 0, 0.25) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    color: rgba(255, 255, 255, 0.8) !important;
  }
  
  button[role="tab"][data-state="active"], .bg-muted\/50.p-1.rounded-lg button.bg-card {
    background: rgba(255, 255, 255, 0.15) !important; 
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
  }
  
  button[role="tab"][data-state="inactive"], .bg-muted\/50.p-1.rounded-lg button:not(.bg-card) {
    background: transparent !important; color: rgba(255, 255, 255, 0.6) !important; border: 1px solid transparent !important;
  }

  .text-card-foreground .rounded-full.bg-green-600 {
      background-color: rgba(34, 197, 94, 0.15) !important; border: 1px solid rgba(34, 197, 94, 0.4) !important; color: #4ade80 !important;
  }
  .text-card-foreground .rounded-full.bg-red-600, .text-card-foreground .rounded-full.bg-destructive {
      background-color: rgba(239, 68, 68, 0.15) !important; border: 1px solid rgba(239, 68, 68, 0.4) !important; color: #f87171 !important;
  }

  .bg-popover, div[role="dialog"] { 
      background: rgba(30, 30, 35, 0.85) !important; 
      backdrop-filter: blur(24px) saturate(120%) !important; 
      -webkit-backdrop-filter: blur(24px) saturate(120%) !important;
      border: 1px solid rgba(255, 255, 255, 0.1) !important; 
      box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6) !important; 
      border-radius: 0.75rem !important; 
      color: #ffffff !important;
  }

  button[role="switch"] span { 
      background-color: #ffffff !important; 
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) !important; 
  }
  button[role="switch"][data-state="unchecked"] { 
      background-color: rgba(255, 255, 255, 0.15) !important; 
      border: 1px solid rgba(255, 255, 255, 0.1) !important; 
  }
  button[role="switch"][data-state="checked"] { 
      background-color: #4ade80 !important; 
      border-color: #4ade80 !important; 
  }

  /* ==========================================
     【6. 🔥 修复鼠标指针 (手型) 丢失问题 🔥】
     ========================================== */
  button, 
  [role="tab"], 
  [role="switch"], 
  [role="button"], 
  [aria-haspopup="dialog"],
  .cursor-pointer {
      cursor: pointer !important;
  }
</style>

修改时间的版本：

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:[email protected]&display=swap">

<script>
  /* ==========================================
     【A. 强制锁定主题与卡片布局 (精准匹配版)】
     ========================================== */
  (function() {
    try {
      var realKey = 'komari-theme-config';
      var realValue = "{\"colorTheme\":\"default\",\"cardLayout\":\"minimal\",\"graphDesign\":\"progress\",\"backgroundImageUrl\":\"\"}";
      var current = localStorage.getItem(realKey);
      
      // 如果新浏览器没有设置，或者设置被重置了，就强制覆盖为你的完美设置
      if (!current || current.indexOf('minimal') === -1 || current.indexOf('progress') === -1) {
        localStorage.setItem(realKey, realValue);
        window.location.reload(); 
      }
    } catch (e) {}
  })();

  /* ==========================================
     【B. 动态随机壁纸加载】
     ========================================== */
  window.addEventListener('load', function() {
    if (!document.getElementById('custom-dynamic-bg')) {
      var bgLayer = document.createElement('div');
      bgLayer.id = 'custom-dynamic-bg';
      bgLayer.style.position = 'fixed';
      bgLayer.style.inset = '0';
      bgLayer.style.zIndex = '-9999'; 
      bgLayer.style.backgroundImage = 'url(https://api.neix.in/random/pc?t=' + new Date().getTime() + ')';
      bgLayer.style.backgroundSize = 'cover';
      bgLayer.style.backgroundPosition = 'center';
      document.body.appendChild(bgLayer);
    }
  });

  /* ==========================================
     【C. 🔥 零风险：CSS 变量时钟引擎 (不碰 DOM) 🔥】
     ========================================== */
  setInterval(function() {
      var d = new Date();
      var h = d.getHours();
      var m = d.getMinutes();
      var s = d.getSeconds();
      var ampm = h >= 12 ? 'PM' : 'AM';
      h = h % 12; h = h ? h : 12; 
      var pad = function(n) { return n < 10 ? '0' + n : n; };
      var hms = pad(h) + ':' + pad(m) + ':' + pad(s);

      var root = document.documentElement;
      root.style.setProperty('--my-time-hms', '"' + hms + '"');
      root.style.setProperty('--my-time-ampm', '"' + ampm + '"');
      root.style.setProperty('--my-time-full', '"' + hms + ' ' + ampm + '"');

      var labels = document.querySelectorAll('.text-muted-foreground.uppercase');
      for (var i = 0; i < labels.length; i++) {
          if (labels[i].innerText.indexOf('当前时间') !== -1 || labels[i].innerText.indexOf('CURRENT TIME') !== -1) {
              var card = labels[i].closest('.relative.rounded-xl');
              if (card && card.getAttribute('data-custom-clock') !== 'true') {
                  card.setAttribute('data-custom-clock', 'true');
              }
          }
      }
  }, 500); 
</script>

<style>
  /* ==========================================
     【0. 全局字体与基础防遮挡】
     ========================================== */
  * { font-family: 'Noto Sans SC', sans-serif !important; }

  body { background-color: transparent !important; }
  body .bg-background:not(nav) { background-color: transparent !important; }
  
  /* 🎨 【全局壁纸压暗蒙版】 */
  body::before {
    content: ""; position: fixed; inset: 0;
    background-color: rgba(0, 0, 0, 0.35) !important; 
    z-index: -9998; pointer-events: none;
  }

  /* ==========================================
     【1. 顶栏导航 (Navbar) 调节】
     ========================================== */
  nav.sticky {
    background-color: rgba(50, 50, 50, 0.55) !important; 
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  }
  
  nav.sticky .container {
    height: 4.25rem !important; 
    min-height: 4.25rem !important;
  }

  /* ==========================================
     【2. 主服务器卡片 (Card) 调节】
     ========================================== */
  .text-card-foreground.bg-gradient-to-br.rounded-xl,
  div.bg-card:not(button):not(.bg-popover) {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.02) 40%, rgba(0, 0, 0, 0.15) 100%), rgba(15, 15, 20, 0.45) !important; 
    background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.02) 40%, rgba(0, 0, 0, 0.15) 100%) !important; 
    backdrop-filter: blur(16px) saturate(100%) !important; 
    -webkit-backdrop-filter: blur(16px) saturate(100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important; 
    box-shadow: 0 16px 40px -8px rgba(0, 0, 0, 0.5) !important; 
    color: #ffffff !important;
    transition: all 0.3s ease !important;
    border-radius: 0.75rem !important; 
  }
  .text-card-foreground.bg-gradient-to-br.rounded-xl:hover,
  div.bg-card:not(button):not(.bg-popover):hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.05) 45%, rgba(0, 0, 0, 0.1) 100%), rgba(25, 25, 30, 0.55) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 24px 50px -10px rgba(0, 0, 0, 0.6) !important;
  }

  /* ==========================================
     【3. 顶部 5 卡片字号排版】
     ========================================== */
  .grid .text-2xl {
      font-size: 1.65rem !important; 
      line-height: 1.2 !important;
      filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.5)) !important; 
  }
  .grid .text-xs.font-black {
      font-size: 1.2rem !important;
      filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.5)) !important; 
  }
  .grid .text-2xl .flex-col div {
      font-size: 1.05rem !important; 
      line-height: 1.4 !important;
  }
  .grid .text-xs.font-black .flex-col div {
      font-size: 0.85rem !important;
      line-height: 1.3 !important;
  }

  /* ==========================================
     【4. 🔥 零 Bug 修复：根据精准位移变色 🔥】
     ========================================== */
  .space-y-1 > div.text-sm.font-bold {
      color: rgba(255, 255, 255, 0.95) !important;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
  }

  div[role="progressbar"] {
      background-color: rgba(255, 255, 255, 0.08) !important; 
      border: 1px solid rgba(255, 255, 255, 0.04) !important; 
      height: 0.35rem !important; 
      border-radius: 9999px !important;
      box-shadow: none !important; 
      overflow: hidden !important;
  }
  
  div[role="progressbar"] > div {
      opacity: 0.85 !important; 
      border-radius: 9999px !important;
      box-shadow: none !important; 
      border-right: none !important; 
      background-color: #4ade80 !important;
      transition: background-color 0.5s ease, transform 0.3s ease !important;
  }

  div[role="progressbar"] > div[style*="translateX(-50."],
  div[role="progressbar"] > div[style*="translateX(-4"],  
  div[role="progressbar"] > div[style*="translateX(-3"],  
  div[role="progressbar"] > div[style*="translateX(-2"]   
  {
      background-color: #fbbf24 !important; 
  }

  div[role="progressbar"] > div[style*="translateX(-20."], 
  div[role="progressbar"] > div[style*="translateX(-1"],   
  div[role="progressbar"] > div[style*="translateX(-9."],  
  div[role="progressbar"] > div[style*="translateX(-8."],  
  div[role="progressbar"] > div[style*="translateX(-7."],  
  div[role="progressbar"] > div[style*="translateX(-6."],  
  div[role="progressbar"] > div[style*="translateX(-5."],  
  div[role="progressbar"] > div[style*="translateX(-4."],  
  div[role="progressbar"] > div[style*="translateX(-3."],  
  div[role="progressbar"] > div[style*="translateX(-2."],  
  div[role="progressbar"] > div[style*="translateX(-0."],  
  div[role="progressbar"] > div[style*="translateX(0"]     
  {
      background-color: #f87171 !important; 
  }

  div[role="progressbar"] > div[style*="translateX(-100"] {
      background-color: #4ade80 !important; 
  }

  /* ==========================================
     【5. 各种小控件与按钮修复】
     ========================================== */
  button[data-slot="button"]:not(.size-9):not(.h-8), 
  button[aria-haspopup="dialog"]:not(.size-9):not(.h-8), 
  button.border:not([role="tab"]):not(.rounded-full):not(.size-9):not(.h-8),
  input[placeholder*="搜索"], .bg-muted\/50.p-1.rounded-lg, div[role="tablist"] {
    background: rgba(0, 0, 0, 0.25) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    color: rgba(255, 255, 255, 0.8) !important;
  }
  
  button[role="tab"][data-state="active"], .bg-muted\/50.p-1.rounded-lg button.bg-card {
    background: rgba(255, 255, 255, 0.15) !important; 
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
  }
  
  button[role="tab"][data-state="inactive"], .bg-muted\/50.p-1.rounded-lg button:not(.bg-card) {
    background: transparent !important; color: rgba(255, 255, 255, 0.6) !important; border: 1px solid transparent !important;
  }

  .text-card-foreground .rounded-full.bg-green-600 {
      background-color: rgba(34, 197, 94, 0.15) !important; border: 1px solid rgba(34, 197, 94, 0.4) !important; color: #4ade80 !important;
  }
  .text-card-foreground .rounded-full.bg-red-600, .text-card-foreground .rounded-full.bg-destructive {
      background-color: rgba(239, 68, 68, 0.15) !important; border: 1px solid rgba(239, 68, 68, 0.4) !important; color: #f87171 !important;
  }

  .bg-popover, div[role="dialog"] { 
      background: rgba(30, 30, 35, 0.85) !important; 
      backdrop-filter: blur(24px) saturate(120%) !important; 
      -webkit-backdrop-filter: blur(24px) saturate(120%) !important;
      border: 1px solid rgba(255, 255, 255, 0.1) !important; 
      box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6) !important; 
      border-radius: 0.75rem !important; 
      color: #ffffff !important;
  }

  button[role="switch"] span { 
      background-color: #ffffff !important; 
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) !important; 
  }
  button[role="switch"][data-state="unchecked"] { 
      background-color: rgba(255, 255, 255, 0.15) !important; 
      border: 1px solid rgba(255, 255, 255, 0.1) !important; 
  }
  button[role="switch"][data-state="checked"] { 
      background-color: #4ade80 !important; 
      border-color: #4ade80 !important; 
  }

  /* ==========================================
     【6. 🔥 安全时钟伪装术 (修复透明度 AM/PM) 🔥】
     ========================================== */
  div[data-custom-clock="true"] .bg-clip-text span {
      font-size: 0 !important; 
      visibility: hidden !important;
  }

  div[data-custom-clock="true"] div[class*="sm:block"] .bg-clip-text {
      display: flex !important;
      align-items: baseline !important;
      gap: 0.25rem !important;
  }
  
  /* 强制注入 -webkit-text-fill-color 覆盖透明样式 */
  div[data-custom-clock="true"] div[class*="sm:block"] .bg-clip-text::before {
      content: var(--my-time-hms);
      font-size: 1.65rem !important;
      visibility: visible !important;
      -webkit-text-fill-color: rgba(255, 255, 255, 0.95) !important; 
  }
  div[data-custom-clock="true"] div[class*="sm:block"] .bg-clip-text::after {
      content: var(--my-time-ampm);
      font-size: 0.9rem !important;
      visibility: visible !important;
      -webkit-text-fill-color: rgba(255, 255, 255, 0.65) !important; 
  }

  div[data-custom-clock="true"] div[class*="sm:hidden"] .bg-clip-text::before {
      content: var(--my-time-full);
      font-size: 1.2rem !important;
      visibility: visible !important;
      -webkit-text-fill-color: rgba(255, 255, 255, 0.95) !important;
  }

  /* ==========================================
     【7. 🔥 修复鼠标指针 (手型) 丢失问题 🔥】
     ========================================== */
  button, 
  [role="tab"], 
  [role="switch"], 
  [role="button"], 
  [aria-haspopup="dialog"],
  .cursor-pointer {
      cursor: pointer !important;
  }
</style>

[namei]

感谢分享

[yqyan (Grogu)]

感谢分享教程

[fgozxy (伊斯法罕)]

感谢教程

[AD112]

这个主题怎么保存样式啊，之前我用的时候我都没发现怎么保存，重新登录又默认了，用别的主题可以保存

[megumin1204 (斐斐的小迷妹)]

哇塞真好看

[TVT (EVA)]

什么样式？你说的是哪个？

[AD112]

就是首页设置的那几个选项

[TVT (EVA)]

这个也不是云端的，是通过cookie保存的，这个我也没搞定。

[danielzi1 (骑猪闯红灯)]

挺好看!

[Russel]

感谢分享

[tug]

挺好看的，试试这个美化设置

[Gitlab (Gitlab Agent)]

好看的很现代化

[xpro (微风岛)]

挺好看，感谢分享

[Garfield66]

好看，感谢分享~

[listen11]

感谢分享

[altmanPowell (猛踹瘸子那条好腿)]

好看好看，准备用起来。感谢佬友的分享。

[ptoken (倾风)]

谢谢 拿走试用下了

[nero]

谢谢分享

[TVT (EVA)]

经过尝试，这个问题只能让主题作者来修改了，没办法通过css来修改。