今天我要給大家介紹一種很棒的CSS換膚效果代碼,它可以讓你的網站在不同的主題之間切換,提供更多的選擇給你的用戶。
代碼如下:
:root { --bg-color: #FFFFFF; --text-color: #000000; --heading-color: #333333; } .dark { --bg-color: #000000; --text-color: #FFFFFF; --heading-color: #CCCCCC; } .light { --bg-color: #FFFFFF; --text-color: #000000; --heading-color: #333333; } body { background-color: var(--bg-color); color: var(--text-color); } h1, h2, h3 { color: var(--heading-color); }在這個代碼中,我們首先定義了一個根變量(:root),用來存儲不同主題的顏色。接下來我們定義兩個不同的CSS類,一個是“dark”,一個是“light”,它們分別設置了不同的背景色、文字顏色和標題顏色。最后,我們在全局選擇器中應用這些變量,其中body元素和標題元素都有不同的顏色值。 通過這個代碼,你可以在你的網站中添加一個簡單的按鈕來切換不同主題,讓用戶可以體驗到不同的外觀和體驗。 總之,這是一個非常簡單但實用的CSS換膚效果代碼,希望能對你有所幫助!
上一篇css排版標簽
下一篇css排序對應關系就亂了