CSS 反色是一種能夠將整個頁面顏色倒轉的技術，讓網頁變成黑底白字，而圖案和圖片顏色互換。下面來介紹如何使用 CSS 實現全站反色。 首先，在 CSS 樣式表中添加以下代碼：

html {
filter: invert(100%);
background-color: #000;
}
img, video {
filter: invert(100%);
}

上面的代碼中，`filter: invert(100%)` 表示將網頁的顏色進行反轉，完全變為相反色，而 `background-color: #000` 則是將背景顏色變成黑色。 針對圖片和視頻等元素，也需要進行反轉，否則會出現錯位現象。 接下來，可以使用 JavaScript 來控制反色樣式的開啟和關閉。

const btn = document.querySelector('.btn');
const html = document.querySelector('html');
let isDark = false;
btn.addEventListener('click', () =>{
isDark = !isDark;
if (isDark) {
html.classList.add('dark');
} else {
html.classList.remove('dark');
}
});

上述代碼通過監聽一個按鈕的點擊事件，將網頁從正常到反色進行切換。 `html.classList.add('dark')` 表示在 HTML 標簽中添加一個名為 `dark` 的類名，然后在使用上面的 CSS 樣式，進行反色的顯示效果。 最后，可以在 HTML 中增加一個按鈕元素用于觸發反色事件。

反色

通過以上步驟，就可以實現網站全站反色的效果，并且提供了一個交互按鈕，可以讓用戶主動完成開啟和關閉操作，增強了用戶的體驗感。