ASP.NET 2.0 主題與皮膚完整指南：打造可切換、可維護的網站外觀

ASP.NET 2.0 引入主題機制，讓開發者以宣告式方式統一管理控件外觀，支援多主題切換、CSS 整合、皮膚繼承與覆寫規則。本文從建立主題、皮膚類型、命名皮膚、樣式表主題差異、停用機制到全域註冊，完整梳理主題開發全流程。

主題目錄結構與建立

• 專案根目錄下建立 App_Themes 資料夾。
• 每個子資料夾代表一個主題（如 Simple, Dark, Mobile）。
• 主題資料夾可包含 .skin 皮膚檔、.css 樣式表、圖片等靜態資源。

皮膚檔核心語法

皮膚檔定義控件預設屬性，不含 ID，必須有 runat="server"。

<!-- Simple/TextBox.skin -->
<asp:TextBox BackColor="Yellow" BorderStyle="Dotted" runat="server" />
<asp:Button BackColor="Navy" ForeColor="White" Font-Bold="true" runat="server" />

一個主題可含多個 .skin，編譯時合併為單一主題類別。

套用主題三種方式

關鍵進階特性

命名皮膚

同一控件類型需多種外觀時，加入 SkinID：

<asp:TextBox SkinID="Highlight" BackColor="Yellow" runat="server" />
<asp:TextBox SkinID="ReadOnly" Enabled="false" BorderStyle="None" runat="server" />

頁面使用：<asp:TextBox SkinID="Highlight" runat="server" />

Theme vs StyleSheetTheme

• Theme：皮膚屬性 覆寫 頁面上控件原本屬性。
• StyleSheetTheme：頁面控件屬性 覆寫 皮膚，皮膚僅提供預設值。

<%@ Page StyleSheetTheme="Simple" %> <!-- 頁面屬性優先 -->

停用主題

• 控件層級：<asp:TextBox EnableTheming="false" />
• 頁面層級：<%@ Page EnableTheming="false" %>
• 全站層級：<pages enableTheming="false" />

CSS 整合最佳實踐

• 主題資料夾放置 Style.css，頁面以 <link rel="stylesheet" href="~/App_Themes/Simple/Style.css" /> 參考（或用 CssFilePath 動態切換）。
• 皮膚處理控件屬性（色彩、框線、字型），CSS 處理版面、間距、動畫，職責分離。
• 善用 CSS 變數 (Custom Properties) 讓主題色系集中管理。

結語

主題與皮膚將「外觀」從「結構」剝離，配合 StyleSheetTheme 漸進式增強，讓多品牌、多裝置、季節性活動頁面切換變得優雅可控。善用命名皮膚與停用機制，兼顧一致性與彈性。