修改小红书 PWA 标题栏颜色

修改小红书 PWA 标题栏颜色为 #0A0A0A

  1. // ==UserScript==
  2. // @name 修改小红书 PWA 标题栏颜色
  3. // @version 0.1
  4. // @description 修改小红书 PWA 标题栏颜色为 #0A0A0A
  5. // @author hiisme
  6. // @match https://www.xiaohongshu.com/*
  7. // @grant GM_addStyle
  8. // @namespace https://gf.qytechs.cn/users/217852
  9. // ==/UserScript==
  10.  
  11. (function() {
  12. 'use strict';
  13.  
  14. // 修改标题栏颜色的 CSS 样式
  15. const style = `
  16. /* 修改标题栏颜色为 #0A0A0A */
  17. @media (display-mode: standalone) {
  18. /* 修改 PWA 独立显示模式下的标题栏颜色 */
  19. header {
  20. background-color: #0A0A0A !important;
  21. }
  22. }
  23. `;
  24.  
  25. // 将样式添加到页面
  26. GM_addStyle(style);
  27.  
  28. // 监听页面变化
  29. const observer = new MutationObserver(() => {
  30. // 重新设置标题栏颜色
  31. const changePwaTitleBarColor = () => {
  32. const metaThemeColor = document.querySelector('meta[name="theme-color"]');
  33. if (metaThemeColor) {
  34. metaThemeColor.setAttribute('content', '#0A0A0A');
  35. } else {
  36. const newMetaTag = document.createElement('meta');
  37. newMetaTag.setAttribute('name', 'theme-color');
  38. newMetaTag.setAttribute('content', '#0A0A0A');
  39. document.head.appendChild(newMetaTag);
  40. }
  41. };
  42.  
  43. // 重新调用修改标题栏颜色的函数
  44. changePwaTitleBarColor();
  45. });
  46.  
  47. // 配置并启动 MutationObserver
  48. const config = { attributes: true, childList: true, subtree: true };
  49. observer.observe(document.body, config);
  50. })();

QingJ © 2025

镜像随时可能失效,请加Q群300939539或关注我们的公众号极客氢云获取最新地址