60 lines
1.4 KiB
Plaintext
60 lines
1.4 KiB
Plaintext
@inject IJSRuntime JS
|
|
@inject LocalizationService Loc
|
|
|
|
<button class="theme-toggle" @onclick="ToggleTheme" title="@Loc["theme.toggle"]">
|
|
@(isDark ? "☀️" : "🌙")
|
|
</button>
|
|
|
|
<style>
|
|
.theme-toggle {
|
|
position: fixed;
|
|
top: 15px;
|
|
right: 15px;
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 50%;
|
|
border: 1px solid var(--border-color);
|
|
background-color: var(--bg-secondary);
|
|
color: var(--text-primary);
|
|
font-size: 16px;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all 0.3s ease;
|
|
z-index: 1000;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.theme-toggle:hover {
|
|
transform: scale(1.1);
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.theme-toggle:active {
|
|
transform: scale(0.95);
|
|
}
|
|
</style>
|
|
|
|
@code {
|
|
private bool isDark = false;
|
|
|
|
protected override async Task OnAfterRenderAsync(bool firstRender)
|
|
{
|
|
if (firstRender)
|
|
{
|
|
// JavaScript에서 현재 테마 가져오기
|
|
var theme = await JS.InvokeAsync<string>("getTheme");
|
|
isDark = theme == "dark";
|
|
StateHasChanged();
|
|
}
|
|
}
|
|
|
|
private async Task ToggleTheme()
|
|
{
|
|
isDark = !isDark;
|
|
var newTheme = isDark ? "dark" : "light";
|
|
await JS.InvokeVoidAsync("setTheme", newTheme);
|
|
}
|
|
}
|