C# Windows Forms 강의 103편: 사용자 맞춤 다크 모드 및 테마 변경 기능 (기본 다크 모드 구현)

 

1. 강의 개요

이번 강의에서는 Windows Forms에서 다크 모드(Dark Mode)와 테마 변경 기능을 구현하는 방법을 학습합니다.
사용자가 버튼을 클릭하면 폼과 컨트롤의 색상이 자동으로 변경되는 다크 모드 기능을 추가합니다.

다크 모드는 사용자 경험(UX)을 개선하고, 눈의 피로를 줄이는 데 도움이 됩니다.
이번 강의에서는 기본적인 다크 모드를 구현하고, 다음 강의(104편)에서 사용자가 직접 테마 색상을 지정할 수 있는 기능을 추가합니다.

---

2. 학습 목표

✅ 버튼 클릭 시 다크 모드와 라이트 모드를 전환하는 기능 구현
✅ 폼과 컨트롤(Label, Button, TextBox 등)의 색상 변경
✅ UI 응답성을 유지하면서 부드러운 전환 효과 추가

---

3. 기능 요구사항

🟢 필수 기능

1️⃣ 다크 모드 및 라이트 모드 전환

• 버튼 클릭 시 테마 변경

2️⃣ 컨트롤 색상 변경

• 폼, 버튼, 텍스트박스, 레이블 등의 색상 조정

3️⃣ 부드러운 색상 전환 애니메이션(옵션)

• Timer를 사용하여 색상이 점진적으로 변경

---

4. 실습: 다크 모드 기본 구현

1️⃣ 폼 구성

• 폼(Form) 이름: Form1
• 컨트롤 배치:

컨트롤 타입 이름 위치 크기

Label	lblTitle	상단	(250 x 30)
TextBox	txtInput	중앙	(250 x 30)
Button	btnToggle	하단	(150 x 40)

📌 폼 디자인 예시:

------------------------------------------------
| [lblTitle]                                  |
| [ txtInput ]                                |
| [        btnToggle (다크 모드 전환)        ] |
------------------------------------------------

---

2️⃣ 코드 작성

(1) 다크 모드 테마 변경 기능

using System;
using System.Drawing;
using System.Windows.Forms;

namespace WindowsFormsApp_DarkMode
{
    public partial class Form1 : Form
    {
        private bool isDarkMode = false;

        public Form1()
        {
            InitializeComponent();
            ApplyTheme(); // 초기 테마 설정
        }

        private void btnToggle_Click(object sender, EventArgs e)
        {
            isDarkMode = !isDarkMode; // 다크 모드 상태 변경
            ApplyTheme();
        }

        private void ApplyTheme()
        {
            if (isDarkMode)
            {
                this.BackColor = Color.FromArgb(45, 45, 45); // 다크 모드 배경색
                lblTitle.ForeColor = Color.White;
                txtInput.BackColor = Color.FromArgb(30, 30, 30);
                txtInput.ForeColor = Color.White;
                btnToggle.BackColor = Color.DimGray;
                btnToggle.ForeColor = Color.White;
                btnToggle.Text = "라이트 모드로 변경";
            }
            else
            {
                this.BackColor = Color.White;
                lblTitle.ForeColor = Color.Black;
                txtInput.BackColor = Color.White;
                txtInput.ForeColor = Color.Black;
                btnToggle.BackColor = Color.LightGray;
                btnToggle.ForeColor = Color.Black;
                btnToggle.Text = "다크 모드로 변경";
            }
        }
    }
}

---

(2) Designer 코드

        private void InitializeComponent()
        {
            this.lblTitle = new Label();
            this.txtInput = new TextBox();
            this.btnToggle = new Button();

            // Label 설정
            this.lblTitle.Location = new System.Drawing.Point(10, 10);
            this.lblTitle.Size = new System.Drawing.Size(250, 30);
            this.lblTitle.Text = "다크 모드 테스트";

            // TextBox 설정
            this.txtInput.Location = new System.Drawing.Point(10, 50);
            this.txtInput.Size = new System.Drawing.Size(250, 30);

            // Toggle Button 설정
            this.btnToggle.Location = new System.Drawing.Point(10, 100);
            this.btnToggle.Size = new System.Drawing.Size(150, 40);
            this.btnToggle.Text = "다크 모드로 변경";
            this.btnToggle.Click += new EventHandler(this.btnToggle_Click);

            // Form 설정
            this.ClientSize = new System.Drawing.Size(300, 200);
            this.Controls.Add(this.lblTitle);
            this.Controls.Add(this.txtInput);
            this.Controls.Add(this.btnToggle);
            this.Text = "다크 모드 구현";
        }

---

3️⃣ 실행 결과

✅ 라이트 모드 (기본 상태)

• 배경: 흰색
• 텍스트: 검은색
• 버튼: 밝은 회색

✅ 다크 모드 (버튼 클릭 후)

• 배경: 어두운 회색
• 텍스트: 흰색
• 버튼: 어두운 회색

---

5. 주요 개념 요약

• 조건문을 활용한 테마 변경: if (isDarkMode) {}
• 폼 및 컨트롤 색상 변경: this.BackColor = Color.DarkGray;
• UI 요소의 텍스트 및 배경 색상 설정: txtInput.ForeColor = Color.White;
• 버튼 클릭 이벤트로 모드 전환: btnToggle.Click += new EventHandler(this.btnToggle_Click);

---

📌 #CSharp #WindowsForms #다크모드 #테마변경 #UI개선