water.css
1.0.0
？ CSS樣式的摘要集合，以使簡單的網站變得更好一些
我通常會製作簡單內容的快速演示頁或網站。為此，我不想花時間來對它們進行樣式，但不喜歡默認樣式的醜陋。
water.css是一個不需要任何類的CSS框架。您只將其包含在<head>中，然後忘記它，而它會使一切變得更好。
如果您正在製作一個簡單的靜態頁面或演示網站，則可能需要使用water.css。
儘管它最初不是為更複雜的網站構建的，但許多開發人員將water.css用作基礎樣式表，並創造性地應用了自定義樣式來構建整個應用程序。沒有什麼可以阻止您做同樣的事情！
只需將其粘在您的<head>中：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/dark.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/light.min.css">
演示頁面上可以提供不同主題的預覽！ ⚡
主water.css文件自動在光和黑暗模式之間根據用戶設備的系統偏好進行切換。通過稱為prefers-color-scheme的CSS媒體查詢，該檢測成為可能。在無法檢測到偏好的瀏覽器中， water.css會堅持光主題。
如果要避免這種行為，請使用dark.css或light.css 。
CSS的所有三個分佈都支持Internet Explorer 11，但是主要的water.css文件不尊重用戶的配色方案，並且由於缺乏prefers-color-scheme支持，將鎖定到光模式。
請注意，IE也不支持運行時主題，並且將使用固定的後備值。如果您想以與IE兼容的方式覆蓋water.css主題，我們建議您編譯自己的主題。
所有版本也可作為未經啟示的樣式表使用，在開發過程中可以方便。
只需從文件名中刪除.min 。
您是否想進行一些調整或建立自己的主題與官方的黑暗或輕型主題完全不同？由於water.css是使用CSS變量構建的，這非常容易做到！這是您可以更改為喜歡的所有變量的列表：
--background-body--background--background-alt--selection--text-main--text-bright--text-muted--links--focus--border--code--animation-duration--button-hover--scrollbar-thumb--scrollbar-thumb-hover--form-placeholder--form-text--variable--highlight--select-arrow如果您使用版本支持Internet Explorer等舊瀏覽器，請跳過以編譯自己的主題！
water.css使用自定義屬性（ “ CSS變量” ）來定義其基本樣式，例如顏色。這些可以在瀏覽器中更改和覆蓋。
因此，您可以簡單地將自己的樣式表添加到頁面上，並在此處設置自己的CSS變量。只要您的樣式表在html中的water.css之後出現，您的價值將覆蓋默認的值，並應用主題！
這個簡短的示例將使用water.css，但是將所有鏈接變色為紅色：
< link rel =" stylesheet " href =" https://cdn.jsdelivr.net/water.css@2/out/water.min.css " />
< style >
:root {
--links: red;
}
</ style >如果您只想更改黑暗或光模式的值，請使用這樣的媒體查詢：
< style >
:root {
--links: blue; /* Always applied */
}
@media (prefers-color-scheme: dark) {
:root {
--links: yellow; /* Only applied in dark mode (overrides blue) */
}
}
</ style >如果您針對瀏覽器而不支持CSS自定義屬性（例如Internet Explorer），則運行時主題不是一個選項。要應用自己的主題，您需要在源文件本身中進行更改，然後重新編譯CSS文件。這樣的工作如下：
yarn以安裝依賴項src/variables-*.css中進行主題更改yarn build以編譯CSS文件out/ Directory中的編譯文件您可能還需要查看貢獻指南，因為它包含有關構建設置的更多信息。
當像您這樣的人幫助使它變得更好時，Water.css對每個人都會變得更好！
查看我們的貢獻指南，了解如何入門。
感謝您抽出寶貴的時間貢獻！ :)
