코드 한 줄로 ASP.NET Core에 다크 모드 추가!

ASP.NET Core 의 다크 모드 기능 소개

Tim은 최신 웹 앱에서 흔히 요구되는 사항인 ASP.NET Core 에서 다크 모드를 활성화하는 방법에 대해 설명하면서 튜토리얼을 시작합니다. Blazor, MVC 또는 Razor Pages를 사용하든 관계없이 Bootstrap 5.3은 매우 간단한 방법으로 다크 테마를 지원합니다.

팀이 설명했듯이, 이 다크 모드 기능은 단 한 줄의 코드로 활성화할 수 있으므로 웹사이트의 사용자 인터페이스를 개선하려는 개발자에게 빠르고 효과적인 솔루션입니다. 새로운 다크 모드 지원은 시스템 설정이나 개인 취향에 따라 밝은 테마 또는 어두운 인터페이스를 선호하는 사용자에게 특히 유용합니다.

Blazor 웹 앱에서 Bootstrap 버전 확인하기

Tim은 Visual Studio를 사용하여 Blazor 웹 앱 프로젝트를 단계별로 진행합니다. 그는 wwwroot 폴더로 이동하여 bootstrap.min.css 파일을 열어 앱이 Bootstrap 버전 5.3.3을 사용하고 있는지 확인합니다. 1분 1초에 그는 다크 모드를 지원하려면 버전 5.3 이상이 필요하다고 언급합니다.

프로젝트에서 이미 이 버전 이상을 사용하고 있다면 Bootstrap을 업데이트하거나 추가 도구를 설치할 필요가 없습니다. 이는 매우 중요한 단계입니다. 왜냐하면 이전 버전의 Bootstrap은 data-bs-theme 속성을 사용한 테마 전환을 지원하지 않기 때문입니다.

다크 테마를 활성화하는 단 한 줄의 코드

이때 Tim은 Razor 파일을 엽니다. 그리고 해당 부분을 강조 표시합니다.

data-bs-theme="dark"

이 간단한 추가 사항만으로 Bootstrap은 페이지와 요소 전체에 어두운 색상 테마를 적용하도록 지시합니다. 팀은 선을 추가하기 전과 후에 앱을 실행하여 대비 효과를 보여줍니다. 2분 3초에 그는 다크 모드를 켜고 테마가 즉시 업데이트되는 것을 확인합니다.

다크 모드에서 사용자 지정 CSS 조정하기

팀은 이 한 줄짜리 코드가 전체 배경색과 테마를 변경하지만, 기존 CSS가 다크 테마와 충돌할 수 있다고 지적합니다. 예를 들어, CSS 파일에 하드코딩된 흰색 텍스트, 글꼴 크기 또는 배경은 자동으로 조정되지 않습니다.

팀이 2분 34초에 언급했듯이, 사용자 지정 스타일을 많이 작성할수록 편집하고 테스트해야 할 부분이 많아집니다. 그렇기 때문에 그는 조정해야 할 요소가 적은 개발 초기 단계에서 다크 모드부터 시작하는 것을 권장합니다.

밝은 테마와 어두운 테마 간 전환

2분 50초에 Tim은 어두운 테마와 밝은 테마 사이를 전환할 수도 있다는 점을 강조합니다. 해당 속성을 data-bs-theme="light"로 변경하면 밝은 테마가 다시 활성화됩니다.

data-bs-theme="light"

팀은 개발자들이 JavaScript 나 서버 측 로직을 사용하여 토글 스위치를 추가하는 등의 방법으로 사용자가 원하는 테마를 선택할 수 있도록 하는 방안을 제안했습니다.

어두운 테마와 밝은 테마 간 전환 기능은 사용자들이 점점 더 기대하는 기능이며, 특히 선호하는 색 구성표가 자동으로 감지되는 Windows 앱이나 모바일 기기에서 더욱 그렇습니다.

ASP.NET Core 에서 레이아웃 충돌 해결하기

팀은 흔히 발생하는 문제점 중 하나로 상단 탐색 모음과 같은 특정 요소의 스타일이 일관되지 않은 점을 꼽았습니다. 3분 12초에 그는 레이아웃별 CSS 파일(Razor)이 기본 Bootstrap 속성을 어떻게 재정의하는지 보여줍니다.

그는 테마 설정에 반응하지 않는 색상을 직접 설정하는 .top-row 선택기를 발견했습니다. 그의 해결책은 Bootstrap이 현재 테마에 따라 스타일을 관리할 수 있도록 color 속성을 제거하는 것이었습니다(3:47).

오버라이드를 제거하니 다크 테마가 더 깔끔해 보입니다. 그리고 밝은 테마로 다시 전환해도 여전히 제대로 작동합니다. 이는 Bootstrap이 선택한 테마에 따라 색상 값을 동적으로 적용한다는 것을 보여줍니다.

테마별 CSS 규칙 사용

4분 17초에 Tim은 또 다른 유용한 팁을 제공합니다. 개발자는 CSS 내에서 테마 감지 기능을 사용하여 활성 모드에 따라 다른 스타일을 적용할 수 있습니다. 이를 통해 data-bs-theme 값에 반응하여 앱 스타일을 그에 맞게 지정할 수 있습니다.

예를 들어, 사용자가 다크 모드 또는 라이트 모드를 선택했는지에 따라 글꼴 크기, 텍스트 색상 또는 이미지까지 조정할 수 있습니다. 이를 통해 두 개의 별도 스타일시트를 만들지 않고도 새로운 테마 환경을 원하는 사용자에게 유연성을 제공합니다.

MVC 프로젝트에서 다크 모드 적용하기

다음으로 Tim은 Bootstrap 5.3을 아직 사용하지 않는 앱에서 다크 모드를 활성화하는 방법을 보여주기 위해 이전 ASP.NET MVC 프로젝트로 이동합니다. Bootstrap CSS 파일을 열어보니 버전이 5.1.0으로 다크 모드를 지원하지 않는다는 것을 알게 됩니다(5:07).

CDN을 사용하여 MVC에서 Bootstrap 업그레이드하기

Tim은 로컬 Bootstrap 파일을 GetBootstrap 웹사이트 의 CDN 버전으로 교체할 것을 권장합니다. 5시 51분에 그는 CDN 링크를 _Layout.cshtml 뷰에 붙여넣어 CSS와 JavaScript 포함 내용을 모두 업데이트합니다.

이렇게 함으로써 MVC 앱은 최신 버전의 Bootstrap 덕분에 테마 전환을 지원하게 되었습니다. 그는 또한 CDN이 특히 처음 방문하는 사용자에게 웹사이트 속도를 향상시키는 데 도움이 될 수 있다고 언급했습니다.

다크 모드에 맞춘 내비게이션 스타일 조정

다크 테마를 활성화한 후, Tim은 일부 내비게이션 바 스타일이 다크 테마와 충돌하는 것을 발견했습니다. 6시 40분에 그는 어두운 화면을 방해하는 밝은 색상을 강제로 적용하는 navbar-light 및 bg-white 클래스를 제거합니다.

제거되면 내비게이션 바가 다크 모드에 맞게 제대로 조정됩니다. 하지만 Tim은 색상이 재정의된 다른 텍스트 요소나 구성 요소는 여전히 수동으로 처리해야 할 수도 있다고 경고합니다(6:57). 이 부분에서는 테마를 고려한 CSS를 작성하거나 관리를 쉽게 하기 위해 CSS 변수를 사용하는 것이 좋습니다.

요약: Bootstrap 5.3 테마 지원

Tim은 Bootstrap 5.3이 다크 테마와 라이트 테마를 모두 완벽하게 지원하지만, 사용자 지정 CSS는 지원하지 않을 수 있다는 점을 다시 한번 강조하며 마무리합니다. 클래스를 사용하고 하드코딩된 색상을 피하는 등 스타일을 제대로 구성했다면 테마 전환이 훨씬 원활해집니다.

오전 8시에 그는 단순히 다음과 같이 덧붙이는 것을 강조합니다.

data-bs-theme="dark"

당신에게

팀 코리의 마지막 조언

Bootstrap이나 ASP.NET Core 테마에 진지하게 관심이 있다면 Tim이 제공하는 완벽한 Bootstrap 강좌를 수강해 보세요. 레이아웃 시스템, 테마 전략, 접근성 모범 사례 등 더욱 심도 있는 개념을 다룹니다.

Tim Corey의 비디오 튜토리얼을 따라하면 단 한 단계만으로 ASP.NET Core 앱에 다크 모드를 구현하고, 사용자 지정 CSS, 테마 감지 및 토글 기능을 사용하여 세부적으로 조정할 수 있습니다. Windows용 앱, 웹 또는 기타 플랫폼용 앱을 개발하든 이 방법을 사용하면 테마를 손쉽게 전환하고 사용자를 만족시킬 수 있는 유연성을 확보할 수 있습니다.