iT邦幫忙

2025 iThome 鐵人賽

0
自我挑戰組

給愛追劇的你:30天互動網站挑戰系列 第 21

Day 21:主題定稿:Y2K 霓虹配色 & Token

  • 分享至 

  • xImage
  •  

目標:把整站顏色與陰影統一到設計 Token,之後改色只改一處。
檔案style.css
步驟

1. 在 :root 補齊/微調 Token(已內建,可調整飽和度與陰影強度):

:root{
  --y2k-neon:#a78bfa; --y2k-pink:#ff6ad5; --y2k-cyan:#00e5ff; --y2k-lime:#b8ff5c;
  --y2k-ink:#0b1020; --y2k-card:#0f152b;
  --text:#eaeaf7; --muted:#a8b0d6;
  --radius:18px;
  --shadow-neon:0 0 20px rgba(167,139,250,.45), 0 0 40px rgba(255,106,213,.2);
}

2. 把頁面上零散的顏色值改成使用變數(例如按鈕、卡片框線、hover 狀態)。

3. 調整背景漸層的兩個色斑位置,讓首頁標題更亮。

驗收:把 --y2k-neon 改成別的色(如 #8B5CF6),整站重載後風格仍一致。
進階:新增 :root[data-theme="alt"] 做副主題,未來做一鍵換色。


上一篇
Day 20:資料持久化加強(版本鍵 + 資料結構升級)
下一篇
Day 22:字體與排版階層
系列文
給愛追劇的你:30天互動網站挑戰30
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言