JayLin教你製作DarkMode & LightMode 主題在你的網站上

JayLinXR-avatar-img
JayLinXR
發佈於軟體開發
更新 發佈閱讀 1 分鐘

教大家如何用TailwindCSS來做現代蠻流行的DarkMode和LightMode之間轉換😃

註: 最後面"dark"請改為"black"，錄製太快沒有看到有錯誤


學習重點

  • Tailwind CSS 動畫運用
  • React 按鈕上運用
  • 實施 React Icon



額外資源教學

如果你對基礎有不了解地方可以前往以下去學習，Tailwind CSS 初學課程教學 - https://vocus.cc/article/64643471fd897800017d35e1



更多相關教學文章持續更新，請別忘記追蹤呦

JayLinXR YT: https://www.youtube.com/@jaylinxr

JayLinXR IG: https://www.instagram.com/jaylin_xr/

JayLinXR軟體開發
留言
avatar-img
JayLinXR
13會員
39內容數
設計 + 程式，是一個出版對設計和程式的學習影片和教學文章，目的是為了讓大家能加快學習最新技術以及設計相關題目去思考如何改變產品的設計體驗。 請追蹤JayLinXR獲得最新消息: https://www.youtube.com/@jaylinxr
JayLinXR的其他內容
2024/05/22
使用 React Marquee 創建流暢的跑馬燈效果
React Marquee是一個輕量級的React library，可以在網頁上創建流暢的跑馬燈效果。本文提供快速教學和講解，教大家如何安裝、使用React跑馬燈library官方網站。另外，也分享了額外的資源和相關教學文章。希望透過以上講解和影片教學，能幫助大家瞭解這個library。
Thumbnail
2024/05/22
使用 React Marquee 創建流暢的跑馬燈效果
React Marquee是一個輕量級的React library，可以在網頁上創建流暢的跑馬燈效果。本文提供快速教學和講解，教大家如何安裝、使用React跑馬燈library官方網站。另外，也分享了額外的資源和相關教學文章。希望透過以上講解和影片教學，能幫助大家瞭解這個library。
Thumbnail
2024/05/03
Vite前端工具加入Tailwindcss教學
本文介紹如何使用Vite建立前端開發初始檔案，並加入Tailwindcss的教學。透過指令和配置檔，讓你能快速建立個人專案的開發環境，並學習如何加入全域的Tailwindcss樣式。還有影片教學、資源連結和更多相關教學文章等，幫助你進一步學習。
Thumbnail
2024/05/03
Vite前端工具加入Tailwindcss教學
本文介紹如何使用Vite建立前端開發初始檔案，並加入Tailwindcss的教學。透過指令和配置檔，讓你能快速建立個人專案的開發環境，並學習如何加入全域的Tailwindcss樣式。還有影片教學、資源連結和更多相關教學文章等，幫助你進一步學習。
Thumbnail
2024/04/27
使用Vite工具創建開發初始檔案的教學
這一集用最新的Vite工具去創建初始檔案。Vite用於創建和構建Web應用程序，具有快速的啟動時間、即時熱更新、小型體積、支持多種框架和可擴展性等優點。
Thumbnail
2024/04/27
使用Vite工具創建開發初始檔案的教學
這一集用最新的Vite工具去創建初始檔案。Vite用於創建和構建Web應用程序，具有快速的啟動時間、即時熱更新、小型體積、支持多種框架和可擴展性等優點。
Thumbnail
看更多
你可能也想看
Thumbnail
avatar-avatar
步履不停 Wandering On
從家庭主婦到旅遊部落客都愛的信用卡，玉山Unicard讓你FUN心玩
身為一個精打細算，又熱愛旅遊美食的家庭主婦，皮包裡有好幾張信用卡，每次都想著哪張卡要搭配哪個通路比較划算，著實讓人燒腦，這次玉山Unicard彷彿聽到我的心聲，百大消費通路全都給你優惠，讓你無腦消費，帶一張卡就可以輕鬆省錢，FUN心玩透透！
#玉山銀行#玉山Unicard#信用卡
Thumbnail
avatar-avatar
步履不停 Wandering On
從家庭主婦到旅遊部落客都愛的信用卡，玉山Unicard讓你FUN心玩
身為一個精打細算，又熱愛旅遊美食的家庭主婦，皮包裡有好幾張信用卡，每次都想著哪張卡要搭配哪個通路比較划算，著實讓人燒腦，這次玉山Unicard彷彿聽到我的心聲，百大消費通路全都給你優惠，讓你無腦消費，帶一張卡就可以輕鬆省錢，FUN心玩透透！
#玉山銀行#玉山Unicard#信用卡
Thumbnail
avatar-avatar
Miller的投資沙龍
我的美股ETF篩選筆記
話說身為短線交易者，每天要作的事情就是從盤勢觀察、到籌碼流向，再到經過多維度資料數據交叉比對，盤中盯著分K、江波圖和五檔報價，算計著每一分K線的轉折，雖能換來即時驗證判斷的快感與成就，但長期下來，卻也衍生眼睛與肩頸卻成了抹不去的職業病。
#當沖#短線#波段
Thumbnail
avatar-avatar
Miller的投資沙龍
我的美股ETF篩選筆記
話說身為短線交易者，每天要作的事情就是從盤勢觀察、到籌碼流向，再到經過多維度資料數據交叉比對，盤中盯著分K、江波圖和五檔報價，算計著每一分K線的轉折，雖能換來即時驗證判斷的快感與成就，但長期下來，卻也衍生眼睛與肩頸卻成了抹不去的職業病。
#當沖#短線#波段
Thumbnail
avatar-avatar
夢夢 🍰 甜點魔法
《我的生活費被放大了♡ 五大通路消費最高回饋7.5%｜玉山 Unicard 新申辦活動倒數 1 個月！》
每天都在花錢，但你知道這些錢都能省下一筆嗎？玉山 Unicard 期間限定活動，結合日常高頻消費通路，提供最高 7.5% 的超有感回饋。文章將分享真實使用情境，教你如何聰明運用，讓每筆開銷都化為小確幸。
#玉山銀行#玉山Unicard#信用卡
Thumbnail
avatar-avatar
夢夢 🍰 甜點魔法
《我的生活費被放大了♡ 五大通路消費最高回饋7.5%｜玉山 Unicard 新申辦活動倒數 1 個月！》
每天都在花錢，但你知道這些錢都能省下一筆嗎？玉山 Unicard 期間限定活動，結合日常高頻消費通路，提供最高 7.5% 的超有感回饋。文章將分享真實使用情境，教你如何聰明運用，讓每筆開銷都化為小確幸。
#玉山銀行#玉山Unicard#信用卡
Thumbnail
avatar-avatar
JayLinXR
Vite前端工具加入Tailwindcss教學
本文介紹如何使用Vite建立前端開發初始檔案，並加入Tailwindcss的教學。透過指令和配置檔，讓你能快速建立個人專案的開發環境，並學習如何加入全域的Tailwindcss樣式。還有影片教學、資源連結和更多相關教學文章等，幫助你進一步學習。
#教學#應用程式#文章
Thumbnail
avatar-avatar
JayLinXR
Vite前端工具加入Tailwindcss教學
本文介紹如何使用Vite建立前端開發初始檔案，並加入Tailwindcss的教學。透過指令和配置檔，讓你能快速建立個人專案的開發環境，並學習如何加入全域的Tailwindcss樣式。還有影片教學、資源連結和更多相關教學文章等，幫助你進一步學習。
#教學#應用程式#文章
Thumbnail
avatar-avatar
W. C. Chen的沙龍
【Flowbite】使用 JavaScript 和 Tailwind.css 實現Dark Mode
今天在練習寫網頁時，剛好要來有做到Dark Mode 的功能，那順便來記錄一下做法～ 首先要先知道Dark Mode的運作原理。是如何知道你現在是Light Mode還是Dark Mode呢？ 😀就是這邊拉～當你按下按鈕時，javascript 的toggle()去為<html>增加dark標
#DarkMode#Tailwind#Flowbite
Thumbnail
avatar-avatar
W. C. Chen的沙龍
【Flowbite】使用 JavaScript 和 Tailwind.css 實現Dark Mode
今天在練習寫網頁時，剛好要來有做到Dark Mode 的功能，那順便來記錄一下做法～ 首先要先知道Dark Mode的運作原理。是如何知道你現在是Light Mode還是Dark Mode呢？ 😀就是這邊拉～當你按下按鈕時，javascript 的toggle()去為<html>增加dark標
#DarkMode#Tailwind#Flowbite
Thumbnail
avatar-avatar
W. C. Chen的沙龍
【Tailwind CSS】「從頭開始：逐步引入 Tailwind CSS 到你的網頁專案」
當然指令不是背的，所以第一步就是要打開Tailwind CSS的官網。 Installation - Tailwind CSS 主要的方式有CLI跟CDN，這裡使用的方式前者。 Install Tailwind CSS npm install -D tailwindcss npx tai
#Tailwind#CSS#網頁開發
Thumbnail
avatar-avatar
W. C. Chen的沙龍
【Tailwind CSS】「從頭開始：逐步引入 Tailwind CSS 到你的網頁專案」
當然指令不是背的，所以第一步就是要打開Tailwind CSS的官網。 Installation - Tailwind CSS 主要的方式有CLI跟CDN，這裡使用的方式前者。 Install Tailwind CSS npm install -D tailwindcss npx tai
#Tailwind#CSS#網頁開發
Thumbnail
avatar-avatar
JayLinXR
學習React.js - 如何開發一個組件(Component)
React.js 是一個熱門的library，JayLin今天講解React核心概念以及利用一個小案例概括理論部分
#學習#程式#軟體工程師
Thumbnail
avatar-avatar
JayLinXR
學習React.js - 如何開發一個組件(Component)
React.js 是一個熱門的library，JayLin今天講解React核心概念以及利用一個小案例概括理論部分
#學習#程式#軟體工程師
Thumbnail
avatar-avatar
JayLinXR
JayLin教你如何部署你的網站Next.js到Vercel，讓別人看的你的網頁
當你做好你的網站後，教大家把你的網站部署到雲端伺服器Vercel
#網站#伺服器#教學
Thumbnail
avatar-avatar
JayLinXR
JayLin教你如何部署你的網站Next.js到Vercel，讓別人看的你的網頁
當你做好你的網站後，教大家把你的網站部署到雲端伺服器Vercel
#網站#伺服器#教學
Thumbnail
avatar-avatar
JayLinXR
學習image 圖片元件在Next.js並做一個簡單的作品集(Portfolio)
這集介紹Next Image Module模組和CSS3如何定位在Next.js Framework
#學習#教學#程式
Thumbnail
avatar-avatar
JayLinXR
學習image 圖片元件在Next.js並做一個簡單的作品集(Portfolio)
這集介紹Next Image Module模組和CSS3如何定位在Next.js Framework
#學習#教學#程式
Thumbnail
avatar-avatar
JayLinXR
深入了解_App檔案上設置在Next.js功能並且做一個Footer 頁腳
Next.js 架構是怎麼構成的呢?這次教學視頻和文章來帶大家了解_app.js or layout.js
#教學#文章#nextjs
Thumbnail
avatar-avatar
JayLinXR
深入了解_App檔案上設置在Next.js功能並且做一個Footer 頁腳
Next.js 架構是怎麼構成的呢?這次教學視頻和文章來帶大家了解_app.js or layout.js
#教學#文章#nextjs
Thumbnail
avatar-avatar
JayLinXR
安裝Google字型到Next.js 教學
當你有客製化的字型在Google Font裡面，但是又不知道如何導入到Next.js嗎? 這一集教大家如何從Google Font導入Next.js和做一個導覽列
#教學#軟體#設計
Thumbnail
avatar-avatar
JayLinXR
安裝Google字型到Next.js 教學
當你有客製化的字型在Google Font裡面，但是又不知道如何導入到Next.js嗎? 這一集教大家如何從Google Font導入Next.js和做一個導覽列
#教學#軟體#設計
Thumbnail
avatar-avatar
JayLinXR
學習如何用HMTL5和CSS3，跟JayLin一起做一個NFT卡片完整課程
介紹編譯器使用以及HTML5 | CSS 初學者學習HTML5和CSS3不知道從哪裡開始，這次Jay帶你來做個NFT卡片，一次完整教學案例來理解HTML5和CSS3
#學習#NFT#區塊鏈
Thumbnail
avatar-avatar
JayLinXR
學習如何用HMTL5和CSS3，跟JayLin一起做一個NFT卡片完整課程
介紹編譯器使用以及HTML5 | CSS 初學者學習HTML5和CSS3不知道從哪裡開始，這次Jay帶你來做個NFT卡片，一次完整教學案例來理解HTML5和CSS3
#學習#NFT#區塊鏈
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News