Blazor bootstrap theme sample

Published Aug 16, 2022 | Updated May 19, 2023 | 0 comments

전체 소스 코드는 다음 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);
        }
    }
}}

TAG INFORMATION

Learn more on this topic

Related Blog Posts

Join in the conversation

Leave a Comment

0 Comments

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

무료 온라인 전광판

전광판

텍스트를 입력하고 텍스트 효과 및 배경효과 를 변경해서 전체화면으로 표시할 수 있는 전광판 용도로 사용하실 수 있습니다. 각종 스포츠 및 공연 관람시 응원 용도로 사용이 가능합니다.

Carousel

여러개의 슬라이드를 추가하여 프레젠테이션 및 이미지 슬라이드 용도로 사용하실 수 있습니다. 브라우저가 포함된 IT 기기로 큰 모니터에 연결하여 매장 내 공지사항 및 메뉴소개를 이미지로 표시할 수 있습니다.

Pin It on Pinterest

Shares
Share This

Share This

Share this post with your friends!

Shares