设为首页收藏本站
QQ交流群：1025805328
  • 首页Portal
  • K网论坛BBS
  • 资源软件
  • K网圈子Group
  • 我的关注
  • 打赏赞助
    • 立即注册
    小K网-QQ活动_资源分享-源码基地-项目分享-安卓绿色软件基地»K网论坛 › 互联网相关 › 网页代码装饰 › 零宽字符隐写工具（可以定制字并隐藏任何字） ...
    返回列表 发布新帖

    零宽字符隐写工具（可以定制字并隐藏任何字）

    2027 0
    小K网牛逼 发表于 11 小时前 | 查看全部 阅读模式 <

    马上注册，结交更多好友，享用更多功能，让你轻松玩转小K网。

    您需要 登录 才可以下载或查看，没有账号？立即注册 微信登录

    ×
    零宽字符隐写工具（可以定制字并隐藏任何字）
    我的需求介绍:为什么要有这个工具,因为之前我弄个RSA加密的激活码太长，怕用户看的麻烦，所以我只好做了个这个零宽工具，让客户有更好的体验
    原理就是利用零宽字符（Zero Width Characters，如 \u200B）不可见的特性，将秘密信息二进制化后隐藏在普通文本（宿主文本）中。复制出来的文本看起来很正常，但粘贴到解密区就能看到隐藏内容。整个工具封装在一个 HTML 文件中，使用了 Tailwind CSS 做 UI，支持自动跟随系统的暗黑模式。

    工具特点：
    • 纯本地运行：所有逻辑都在浏览器完成，不上传服务器，安全隐私。
    • 单文件：HTML/CSS/JS 合一，双击即用，方便部署或收藏。
    • UI 美观：适配移动端和桌面端，支持深色/浅色模式切换。
    • 一键复制：交互体验优化，支持一键复制加密结果。

    使用场景：
    • 在公开论坛/群聊传递秘密信息。
    • 给文字添加“数字水印”。
    • 单纯觉得好玩，整蛊朋友（比如表面发一句“你好”，实际隐藏了“V我50”）。

    目前测试情况： QQ全端支持，微信手机端不支持发送零宽，只接受和复制粘贴
    源码：代码直接保存为 .html 文件，用浏览器打开即可
    注意：该工具不是加密工具，只是将字变成了零宽大小，专业的零宽加密工具找风导的

    零宽字符隐写工具（可以定制字并隐藏任何字）

    零宽字符隐写工具（可以定制字并隐藏任何字） 
    1. <!DOCTYPE html>

    2. <html lang="zh-CN">

    3. <head>

    4.     <meta charset="UTF-8">

    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">

    6.     <title>Zero Text - 零宽文本加密</title>

    7.     <!-- 引入 Tailwind CSS (CDN) -->

    8.     <script src="https://cdn.tailwindcss.com"></script>

    9.     <!-- 配置 Tailwind 主题 -->

    10.     <script>

    11.         tailwind.config = {

    12.             darkMode: 'class',

    13.             theme: {

    14.                 extend: {

    15.                     colors: {

    16.                         primary: '#3b82f6', // blue-500

    17.                         primaryHover: '#2563eb', // blue-600

    18.                         darkBg: '#0f172a', // slate-900

    19.                         darkCard: '#1e293b', // slate-800

    20.                     },

    21.                     boxShadow: {

    22.                         'glow': '0 0 15px rgba(59, 130, 246, 0.5)',

    23.                     }

    24.                 }

    25.             }

    26.         }

    27.     </script>

    28.     <style>

    29.         /* 自定义滚动条样式 */

    30.         ::-webkit-scrollbar {

    31.             width: 8px;

    32.             height: 8px;

    33.         }

    34.         ::-webkit-scrollbar-track {

    35.             background: transparent;

    36.         }

    37.         ::-webkit-scrollbar-thumb {

    38.             background: #cbd5e1;

    39.             border-radius: 4px;

    40.         }

    41.         .dark ::-webkit-scrollbar-thumb {

    42.             background: #475569;

    43.         }

    44.         ::-webkit-scrollbar-thumb:hover {

    45.             background: #94a3b8;

    46.         }

    47. 

    48.         /* 动画过渡 */

    49.         .transition-all-300 {

    50.             transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    51.         }

    52. 

    53.         /* 文本域聚焦样式 */

    54.         .input-group:focus-within label {

    55.             color: #3b82f6;

    56.         }

    57.     </style>

    58. </head>

    59. <body class="min-h-screen bg-gray-100 dark:bg-darkBg text-slate-800 dark:text-slate-200 transition-colors duration-300 flex flex-col items-center py-8 px-4 font-sans">

    60. 

    61.     <!-- 顶部标题栏 -->

    62.     <header class="w-full max-w-5xl flex justify-between items-center mb-8">

    63.         <div class="flex items-center gap-3">

    64.             <div class="bg-blue-600 p-2 rounded-lg shadow-lg text-white">

    65.                 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>

    66.             </div>

    67.             <div>

    68.                 <h1 class="text-2xl font-bold tracking-tight text-slate-900 dark:text-white">Zero Text</h1>

    69.                 <p class="text-xs text-slate-500 dark:text-slate-400">零宽字符隐写工具</p>

    70.             </div>

    71.         </div>

    72. 

    73.         <div class="flex items-center gap-4">

    74.             <!-- GitHub Link -->

    75.             <a href="https://www.52pojie.cn/" target="_blank" class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-slate-700 transition-colors text-slate-600 dark:text-slate-400" title="View on GitHub">

    76.                 <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>

    77.             </a>

    78.             <!-- Theme Toggle -->

    79.             <button id="themeToggle" class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-slate-700 transition-colors text-slate-600 dark:text-slate-400">

    80.                 <svg id="iconSun" class="hidden w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path></svg>

    81.                 <svg id="iconMoon" class="block w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path></svg>

    82.             </button>

    83.         </div>

    84.     </header>

    85. 

    86.     <!-- 主容器 -->

    87.     <main class="w-full max-w-5xl grid grid-cols-1 md:grid-cols-2 gap-8">

    88. 

    89.         <!-- 左侧：加密卡片 -->

    90.         <section class="bg-white dark:bg-darkCard rounded-2xl shadow-xl overflow-hidden border border-gray-200 dark:border-slate-700 flex flex-col h-full transition-all-300 hover:shadow-2xl">

    91.             <div class="bg-gradient-to-r from-blue-500 to-blue-600 p-4">

    92.                 <h2 class="text-white font-semibold flex items-center gap-2">

    93.                     <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4"></path></svg>

    94.                     加密 / 隐藏信息

    95.                 </h2>

    96.             </div>

    97. 

    98.             <div class="p-6 flex flex-col gap-5 flex-1">

    99.                 <!-- 宿主文本 -->

    100.                 <div class="input-group">

    101.                     <label class="block text-sm font-medium text-slate-600 dark:text-slate-400 mb-1.5 transition-colors">

    102.                         1. 宿主文本（表面显示的内容）

    103.                     </label>

    104.                     <textarea id="carrierText" class="w-full h-24 p-3 rounded-lg border border-gray-300 dark:border-slate-600 bg-gray-50 dark:bg-slate-900/50 focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none transition-all resize-none text-sm" placeholder="例如：今天天气真不错，要不要一起去喝咖啡？"></textarea>

    105.                 </div>

    106. 

    107.                 <!-- 秘密文本 -->

    108.                 <div class="input-group">

    109.                     <label class="block text-sm font-medium text-slate-600 dark:text-slate-400 mb-1.5 transition-colors">

    110.                         2. 秘密文本（要隐藏的内容）

    111.                     </label>

    112.                     <textarea id="secretText" class="w-full h-24 p-3 rounded-lg border border-gray-300 dark:border-slate-600 bg-gray-50 dark:bg-slate-900/50 focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none transition-all resize-none text-sm" placeholder="例如：你好鸭"></textarea>

    113.                 </div>

    114. 

    115.                 <!-- 按钮区 -->

    116.                 <button id="encryptBtn" class="w-full py-3 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-xl shadow-lg shadow-blue-500/30 transition-all active:scale-[0.98] flex items-center justify-center gap-2 group">

    117.                     <span class="group-hover:scale-110 transition-transform">🔒</span>

    118.                     生成加密文本

    119.                 </button>

    120. 

    121.                 <!-- 结果区 -->

    122.                 <div class="relative mt-2">

    123.                     <label class="block text-xs font-semibold uppercase text-slate-400 dark:text-slate-500 mb-1 tracking-wider">

    124.                         加密结果

    125.                     </label>

    126.                     <div class="relative group">

    127.                         <div id="encryptResult" class="w-full h-28 p-3 pr-12 rounded-lg border-2 border-dashed border-gray-300 dark:border-slate-600 bg-gray-50 dark:bg-slate-900/50 text-sm text-slate-500 dark:text-slate-400 break-all overflow-y-auto font-mono transition-colors group-hover:border-blue-300 dark:group-hover:border-slate-500">

    128.                             (等待生成...)

    129.                         </div>

    130. 

    131.                         <!-- 复制按钮 (悬浮) -->

    132.                         <button id="copyEncryptBtn" disabled class="absolute top-2 right-2 p-2 bg-white dark:bg-slate-700 border border-gray-200 dark:border-slate-600 rounded-md shadow-sm text-slate-500 hover:text-blue-600 hover:border-blue-200 dark:hover:text-blue-400 transition-all disabled:opacity-50 disabled:cursor-not-allowed group-hover:opacity-100" title="复制结果">

    133.                             <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>

    134.                         </button>

    135.                     </div>

    136.                 </div>

    137.             </div>

    138.         </section>

    139. 

    140.         <!-- 右侧：解密卡片 -->

    141.         <section class="bg-white dark:bg-darkCard rounded-2xl shadow-xl overflow-hidden border border-gray-200 dark:border-slate-700 flex flex-col h-full transition-all-300 hover:shadow-2xl">

    142.             <div class="bg-gradient-to-r from-emerald-500 to-emerald-600 p-4">

    143.                 <h2 class="text-white font-semibold flex items-center gap-2">

    144.                     <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 9.9-1"></path></svg>

    145.                     解密 / 提取信息

    146.                 </h2>

    147.             </div>

    148. 

    149.             <div class="p-6 flex flex-col gap-5 flex-1">

    150.                 <!-- 解密输入 -->

    151.                 <div class="input-group">

    152.                     <label class="block text-sm font-medium text-slate-600 dark:text-slate-400 mb-1.5 transition-colors">

    153.                         粘贴包含零宽字符的文本

    154.                     </label>

    155.                     <textarea id="decodeInput" class="w-full h-[220px] p-3 rounded-lg border border-gray-300 dark:border-slate-600 bg-gray-50 dark:bg-slate-900/50 focus:ring-2 focus:ring-emerald-500 focus:border-transparent outline-none transition-all resize-none text-sm" placeholder="在此处粘贴..."></textarea>

    156.                 </div>

    157. 

    158.                 <!-- 按钮区 -->

    159.                 <button id="decryptBtn" class="w-full py-3 bg-emerald-600 hover:bg-emerald-700 text-white font-semibold rounded-xl shadow-lg shadow-emerald-500/30 transition-all active:scale-[0.98] flex items-center justify-center gap-2 group">

    160.                     <span class="group-hover:scale-110 transition-transform">🔓</span>

    161.                     解密提取内容

    162.                 </button>

    163. 

    164.                 <!-- 结果区 -->

    165.                 <div class="relative mt-2 flex-1 flex flex-col">

    166.                     <label class="block text-xs font-semibold uppercase text-slate-400 dark:text-slate-500 mb-1 tracking-wider">

    167.                         还原结果

    168.                     </label>

    169.                     <div class="relative group flex-1">

    170.                         <div id="decryptResult" class="w-full h-full min-h-[112px] p-3 pr-12 rounded-lg border-2 border-dashed border-gray-300 dark:border-slate-600 bg-gray-50 dark:bg-slate-900/50 text-sm text-slate-500 dark:text-slate-400 break-all overflow-y-auto font-mono transition-colors group-hover:border-emerald-300 dark:group-hover:border-slate-500">

    171.                             (等待解密...)

    172.                         </div>

    173. 

    174.                          <!-- 复制按钮 (悬浮) -->

    175.                          <button id="copyDecryptBtn" disabled class="absolute top-2 right-2 p-2 bg-white dark:bg-slate-700 border border-gray-200 dark:border-slate-600 rounded-md shadow-sm text-slate-500 hover:text-emerald-600 hover:border-emerald-200 dark:hover:text-emerald-400 transition-all disabled:opacity-50 disabled:cursor-not-allowed group-hover:opacity-100" title="复制结果">

    176.                             <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>

    177.                         </button>

    178.                     </div>

    179.                 </div>

    180.             </div>

    181.         </section>

    182. 

    183.     </main>

    184. 

    185.     <footer class="mt-8 text-center text-xs text-slate-400 dark:text-slate-500">

    186.         <p>🔒 所有加密/解密均在本地浏览器完成，不会上传数据</p>

    187.     </footer>

    188. 

    189.     <!-- JavaScript 逻辑 -->

    190.     <script>

    191.         // ==========================================

    192.         // 核心加密解密逻辑 (保持不变)

    193.         // ==========================================

    194.         const ZWC = { 0: '\u200B', 1: '\u200C' };

    195. 

    196.         function textToBinary(text) {

    197.             const utf8 = new TextEncoder().encode(text);

    198.             return Array.from(utf8)

    199.                 .map((b) => b.toString(2).padStart(8, '0'))

    200.                 .join('');

    201.         }

    202. 

    203.         function binaryToText(bin) {

    204.             const bytesMatch = bin.match(/.{8}/g);

    205.             if (!bytesMatch) return '';

    206.             const bytes = bytesMatch.map((b) => parseInt(b, 2));

    207.             return new TextDecoder().decode(new Uint8Array(bytes));

    208.         }

    209. 

    210.         function binaryToZWC(bin) {

    211.             return bin.split('').map((b) => ZWC[Number(b)]).join('');

    212.         }

    213. 

    214.         function zwcToBinary(zwcText) {

    215.             return [...zwcText]

    216.                 .map((c) => (c === '\u200B' ? '0' : c === '\u200C' ? '1' : ''))

    217.                 .join('');

    218.         }

    219. 

    220.         function insertZWCIntoCarrier(carrier, zwc) {

    221.             if (!carrier) carrier = " "; 

    222.             const mid = Math.floor(carrier.length / 2);

    223.             return carrier.slice(0, mid) + zwc + carrier.slice(mid);

    224.         }

    225. 

    226.         // ==========================================

    227.         // DOM 操作

    228.         // ==========================================

    229. 

    230.         document.addEventListener('DOMContentLoaded', () => {

    231.             const carrierInput = document.getElementById('carrierText');

    232.             const secretInput = document.getElementById('secretText');

    233.             const encryptBtn = document.getElementById('encryptBtn');

    234.             const encryptResultDiv = document.getElementById('encryptResult');

    235.             const copyEncryptBtn = document.getElementById('copyEncryptBtn');

    236. 

    237.             const decodeInput = document.getElementById('decodeInput');

    238.             const decryptBtn = document.getElementById('decryptBtn');

    239.             const decryptResultDiv = document.getElementById('decryptResult');

    240.             const copyDecryptBtn = document.getElementById('copyDecryptBtn');

    241. 

    242.             const themeToggle = document.getElementById('themeToggle');

    243.             const iconSun = document.getElementById('iconSun');

    244.             const iconMoon = document.getElementById('iconMoon');

    245. 

    246.             let encryptedValue = '';

    247.             let decryptedValue = '';

    248. 

    249.             // 辅助函数：更新结果框状态

    250.             function updateResultBox(element, text, isPlaceholder = false) {

    251.                 element.innerText = text;

    252.                 if (isPlaceholder) {

    253.                     element.classList.add('text-slate-500', 'dark:text-slate-400');

    254.                     element.classList.remove('text-slate-800', 'dark:text-slate-200');

    255.                 } else {

    256.                     element.classList.remove('text-slate-500', 'dark:text-slate-400');

    257.                     element.classList.add('text-slate-800', 'dark:text-slate-200');

    258.                 }

    259.             }

    260. 

    261.             // --- 加密 ---

    262.             encryptBtn.addEventListener('click', () => {

    263.                 const secret = secretInput.value;

    264.                 const carrier = carrierInput.value;

    265. 

    266.                 if (!secret) {

    267.                     // 简单的震动反馈或边框红色提示

    268.                     secretInput.classList.add('ring-2', 'ring-red-500');

    269.                     setTimeout(() => secretInput.classList.remove('ring-2', 'ring-red-500'), 500);

    270.                     return;

    271.                 }

    272. 

    273.                 try {

    274.                     const binary = textToBinary(secret);

    275.                     const zwcText = binaryToZWC(binary);

    276.                     const final = insertZWCIntoCarrier(carrier || 'Processing...', zwcText);

    277. 

    278.                     encryptedValue = final;

    279.                     updateResultBox(encryptResultDiv, final);

    280.                     copyEncryptBtn.disabled = false;

    281. 

    282.                     // 视觉反馈：稍微闪烁一下结果框

    283.                     encryptResultDiv.classList.add('bg-blue-50', 'dark:bg-blue-900/20');

    284.                     setTimeout(() => encryptResultDiv.classList.remove('bg-blue-50', 'dark:bg-blue-900/20'), 300);

    285.                 } catch (e) {

    286.                     console.error(e);

    287.                     alert('加密失败');

    288.                 }

    289.             });

    290. 

    291.             // --- 解密 ---

    292.             decryptBtn.addEventListener('click', () => {

    293.                 const input = decodeInput.value;

    294.                 if (!input) return;

    295. 

    296.                 try {

    297.                     const zwcChars = [...input]

    298.                         .filter((c) => c === '\u200B' || c === '\u200C')

    299.                         .join('');

    300. 

    301.                     if (!zwcChars) {

    302.                         updateResultBox(decryptResultDiv, "⚠️ 未检测到隐藏信息", true);

    303.                         decryptedValue = "";

    304.                         copyDecryptBtn.disabled = true;

    305.                         return;

    306.                     }

    307. 

    308.                     const binary = zwcToBinary(zwcChars);

    309.                     const text = binaryToText(binary);

    310. 

    311.                     decryptedValue = text;

    312.                     updateResultBox(decryptResultDiv, text);

    313.                     copyDecryptBtn.disabled = false;

    314. 

    315.                     // 视觉反馈

    316.                     decryptResultDiv.classList.add('bg-emerald-50', 'dark:bg-emerald-900/20');

    317.                     setTimeout(() => decryptResultDiv.classList.remove('bg-emerald-50', 'dark:bg-emerald-900/20'), 300);

    318. 

    319.                 } catch (e) {

    320.                     console.error(e);

    321.                     updateResultBox(decryptResultDiv, "❌ 解密失败：数据损坏", true);

    322.                 }

    323.             });

    324. 

    325.             // --- 复制 ---

    326.             async function copyToClipboard(text, btnElement) {

    327.                 if (!text) return;

    328.                 try {

    329.                     await navigator.clipboard.writeText(text);

    330.                     const originalIcon = btnElement.innerHTML;

    331. 

    332.                     // 切换为打钩图标

    333.                     btnElement.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-green-500"><polyline points="20 6 9 17 4 12"></polyline></svg>`;

    334. 

    335.                     setTimeout(() => {

    336.                         btnElement.innerHTML = originalIcon;

    337.                     }, 1500);

    338.                 } catch (err) {

    339.                     alert('复制失败');

    340.                 }

    341.             }

    342. 

    343.             copyEncryptBtn.addEventListener('click', () => {

    344.                 copyToClipboard(encryptedValue, copyEncryptBtn);

    345.             });

    346. 

    347.             copyDecryptBtn.addEventListener('click', () => {

    348.                 copyToClipboard(decryptedValue, copyDecryptBtn);

    349.             });

    350. 

    351.             // --- 深色模式 ---

    352.             function updateThemeIcon(isDark) {

    353.                 if (isDark) {

    354.                     iconSun.classList.remove('hidden');

    355.                     iconMoon.classList.add('hidden');

    356.                 } else {

    357.                     iconSun.classList.add('hidden');

    358.                     iconMoon.classList.remove('hidden');

    359.                 }

    360.             }

    361. 

    362.             function initTheme() {

    363.                 const stored = localStorage.getItem('theme');

    364.                 const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;

    365. 

    366.                 if (stored === 'dark' || (!stored && prefersDark)) {

    367.                     document.documentElement.classList.add('dark');

    368.                     updateThemeIcon(true);

    369.                 } else {

    370.                     document.documentElement.classList.remove('dark');

    371.                     updateThemeIcon(false);

    372.                 }

    373.             }

    374. 

    375.             themeToggle.addEventListener('click', () => {

    376.                 const isDark = document.documentElement.classList.toggle('dark');

    377.                 localStorage.setItem('theme', isDark ? 'dark' : 'light');

    378.                 updateThemeIcon(isDark);

    379.             });

    380. 

    381.             initTheme();

    382.         });

    383.     </script>

    384. </body>

    385. </html>
    复制代码


    0宽字符, 字符隐写工具, 隐藏工具
    回复

    使用道具 举报

    相关帖子

    返回列表 发布新帖

    回复
    高级模式
    B Color Image Link Quote Code Smilies
    您需要登录后才可以回帖 登录 | 立即注册 微信登录

    本版积分规则

    上一主题     下一主题
    您需要 登录 后才可以回复，轻松玩转社区，没有帐号？立即注册
    快速回复
    小K网承接程序二开，各类小程序定制开发，价格优惠

    投诉/建议联系微信

    +xiaokheik

    |Archiver|手机版|小黑屋

    Copyright © 2026 小K网 版权所有 备案号： 蜀ICP备18015321号-3

    关灯 在本版发帖
    扫一扫添加微信客服
     QQ客服返回顶部
    快速回复 返回顶部 返回列表