전체 소스 코드는 다음 Github 의 BlazorBootswatchTheme 폴더에 있습니다
.net 으로 생성된 blazor wasm 기본 템플릿은 bootstrap 을 기반으로 하고 있습니다.
그리고 bootstratp 을 기반으로 다양한 테마를 제공하는 bootswatch 오픈소스 프로젝트가 있습니다.
MIT 라이센스이며 다양한 테마가 존재합니다.
다양한 테마 목록은 여기(https://bootswatch.com/)를 클릭해서 확인해 보시기 바랍니다.
현재 시점 기준으로 bootstratp 은 v5.2 가 최신 버전이며, 이에 맞춰 bootswatch 도 최근에 v5.2 에 맞게 업데이트 되었습니다.
그러면, 아래 그림처럼 우측 상단에 테마를 선택해서 변경할 수 있는 기능을 추가해 보겠습니다.
현재 v5.2 가 최신 버전이므로 이후 링크는 v5.2 를 기준으로 작성되었습니다.
새 프로젝트 생성 (commit)
visual studio 에서 blazor wasm 프로젝트를 새로 생성합니다.
bootstratp 을 최신 버전으로 업데이트 (commit)
bootstratp 다운로드 페이지에서 최신 버전을 다운로드한 다음 wwwroot\css\bootstrap 폴더에서 bootstrap.min.css 파일을 덮어쓰기 합니다.
javascript 파일(bootstrap.bundle.min.js, bootstrap.bundle.min.js.map) 도 wwwroot\js 폴더에 추가합니다.
bootswatch 테마 파일 및 script 추가 (commit)
bootswatch 테마 파일을 (다운로드 링크) 아래 그림과 같이 테마 별로 bootstrap.min.css 파일을 다운로드 한 다음 bootstrap.{테마이름}.min.css 형식으로 수정합니다.
다운로드한 테마파일을 wwwroot\css\bootstrap 폴더에 추가합니다.
그리고, 기본 테마 파일인 bootstrap.min.css 파일은 bootstrap.Default.min.css 으로 파일 이름을 수정합니다.
wwwroot\index.html 파일에서 bootstrap link 태그의 id 를 themeLink 로 지정하고 파일이름도 bootstrap.Default.min.css 로 수정합니다.
<link id="themeLink" href="css/bootstrap/bootstrap.Default.min.css" rel="stylesheet" />
그리고, head 태그 마지막에 jquery 와 bootstrap script 파일을 불러오는 코드를 추가합니다.
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js" integrity="sha256-eTyxS0rkjpLEo16uXTS0uVCS4815lc40K2iVpWDvdSY=" crossorigin="anonymous"></script>
<script src="js/bootstrap.bundle.min.js"></script>
body 태그 마지막에 테마를 변경하는 script 를 다음과 같이 추가합니다.
<script>
function ToggleTheme(themeName) {
$('#themeLink').attr('href', `css/bootstrap/bootstrap.${themeName}.min.css`);
}
</script>
테마를 변경하는 메뉴 추가 (commit)
테마 서비스 추가
SupportedThemeList 는 다운로드 한 테마 파일에 맞게 수정합니다.
public interface IThemeService
{
public const string DefaultTheme = "Default";
public static readonly string[] SupportedThemeList = new[]
{
DefaultTheme,
"Cerulean",
"Cosmo",
"Cyborg",
"Darkly",
"Flatly",
};
string CurrentTheme { get; }
Task ToggleTheme(string themeName);
}
public class ThemeService : IThemeService
{
public string CurrentTheme { get; private set; } = IThemeService.DefaultTheme;
public async Task ToggleTheme(string themeName)
{
CurrentTheme = themeName;
await Task.CompletedTask;
}
}
테마 서비스 등록
Program.cs 에서 ThemeService 를 추가합니다.
builder.Services.AddScoped<IThemeService, ThemeService>();
테마 변경 메뉴 추가
MainLayout.razor 파일에서 Dropdown 메뉴 추가
@inherits LayoutComponentBase
@using BlazorApp.Services
@inject IThemeService Theme
@inject IJSRuntime JS
<div class="page">
<div class="sidebar">
<NavMenu />
</div>
<main>
<div class="top-row px-4">
<div class="dropdown">
<button class="btn btn-secondary btn-sm me-2" type="button" id="dropdownMenuButtonTheme" data-bs-toggle="dropdown" aria-expanded="false">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-palette me-1" viewBox="0 0 16 16">
<path d="M8 5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm4 3a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zM5.5 7a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm.5 6a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"/>
<path d="M16 8c0 3.15-1.866 2.585-3.567 2.07C11.42 9.763 10.465 9.473 10 10c-.603.683-.475 1.819-.351 2.92C9.826 14.495 9.996 16 8 16a8 8 0 1 1 8-8zm-8 7c.611 0 .654-.171.655-.176.078-.146.124-.464.07-1.119-.014-.168-.037-.37-.061-.591-.052-.464-.112-1.005-.118-1.462-.01-.707.083-1.61.704-2.314.369-.417.845-.578 1.272-.618.404-.038.812.026 1.16.104.343.077.702.186 1.025.284l.028.008c.346.105.658.199.953.266.653.148.904.083.991.024C14.717 9.38 15 9.161 15 8a7 7 0 1 0-7 7z"/>
</svg>@Theme.CurrentTheme
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonTheme">
@foreach (var themeName in IThemeService.SupportedThemeList)
{
<li class="dropdown-item@(themeName == Theme.CurrentTheme ? " active" : "")"
@onclick=@(async () => await ToggleTheme(themeName))>@themeName</li>
}
</ul>
</div>
</div>
<article class="content px-4">
@Body
</article>
</main>
</div>
@code {
async Task ToggleTheme(string themeName)
{
if (Theme.CurrentTheme != themeName)
{
await Theme.ToggleTheme(themeName);
await JS.InvokeVoidAsync("ToggleTheme", themeName);
}
}
}}
0 Comments