up
This commit is contained in:
		@@ -1,52 +1,195 @@
 | 
			
		||||
@if (PublicCacheData != null)
 | 
			
		||||
{
 | 
			
		||||
	if (PublicCacheData.ThemeIsDarkMode)
 | 
			
		||||
	if (PublicCacheData.PageSettings.ThemeIsDarkMode)
 | 
			
		||||
	{
 | 
			
		||||
		<Meta Content="@($"hsl({PublicCacheData.ThemeIndexColour},16%,12%)")" Name="theme-color"/>
 | 
			
		||||
		<Meta Content="@($"hsl({PublicCacheData.ThemeIndexColour},16%,12%)")" Name="background-color"/>
 | 
			
		||||
		<Meta Content="@($"hsl({PublicCacheData.PageSettings.DarkThemeIndexColour},16%,12%)")" Name="theme-color"/>
 | 
			
		||||
		<Meta Content="@($"hsl({PublicCacheData.PageSettings.DarkThemeIndexColour},16%,12%)")" Name="background-color"/>
 | 
			
		||||
	}
 | 
			
		||||
	else
 | 
			
		||||
	{
 | 
			
		||||
		<Meta Content="@($"hsl({PublicCacheData.ThemeIndexColour},84%,88%)")" Name="theme-color"/>
 | 
			
		||||
		<Meta Content="@($"hsl({PublicCacheData.ThemeIndexColour},84%,88%)")" Name="background-color"/>
 | 
			
		||||
		<Meta Content="@($"hsl({PublicCacheData.PageSettings.LightThemeIndexColour},84%,88%)")" Name="theme-color"/>
 | 
			
		||||
		<Meta Content="@($"hsl({PublicCacheData.PageSettings.LightThemeIndexColour},84%,88%)")" Name="background-color"/>
 | 
			
		||||
	}
 | 
			
		||||
}
 | 
			
		||||
<style>
 | 
			
		||||
	:root {
 | 
			
		||||
	@if (PublicCacheData != null)
 | 
			
		||||
	{@if (PublicCacheData.ThemeIsDarkMode)
 | 
			
		||||
	{
 | 
			
		||||
		@($@"--background: hsl({PublicCacheData.ThemeIndexColour},16%,12%); 
 | 
			
		||||
--text-color: hsl({PublicCacheData.ThemeIndexColour},16%,73.6%); 
 | 
			
		||||
--placeholder-text-color: hsla({PublicCacheData.ThemeIndexColour},84%,52.8%,.3); 
 | 
			
		||||
--primary-color: hsl({PublicCacheData.ThemeIndexColour},16%,12%); 
 | 
			
		||||
--primary-color-light: hsl({PublicCacheData.ThemeIndexColour},84%,100%); 
 | 
			
		||||
--primary-color-dark: hsl({PublicCacheData.ThemeIndexColour},16%,33%); 
 | 
			
		||||
--primary-gradiend-light: hsl({PublicCacheData.ThemeIndexColour},16%,16%); 
 | 
			
		||||
--primary-gradiend-dark: hsl({PublicCacheData.ThemeIndexColour},16%,8%); 
 | 
			
		||||
--primary-gradiend-lighter: hsl({PublicCacheData.ThemeIndexColour},16%,20%); 
 | 
			
		||||
--primary-gradiend-darker: hsl({PublicCacheData.ThemeIndexColour},16%,4%); 
 | 
			
		||||
--light-shadow: hsla({PublicCacheData.ThemeIndexColour},84%,66%,.1); 
 | 
			
		||||
--dark-shadow: hsla({PublicCacheData.ThemeIndexColour},16%,1%,.5);")
 | 
			
		||||
	}
 | 
			
		||||
	else
 | 
			
		||||
	{
 | 
			
		||||
		@($@"--background: hsl({PublicCacheData.ThemeIndexColour},84%,88%); 
 | 
			
		||||
--text-color: hsl({PublicCacheData.ThemeIndexColour},84%,26.4%); 
 | 
			
		||||
--placeholder-text-color: hsla({PublicCacheData.ThemeIndexColour},84%,26.4%,.3); 
 | 
			
		||||
--primary-color: hsl({PublicCacheData.ThemeIndexColour},84%,88%); 
 | 
			
		||||
--primary-color-light: hsl({PublicCacheData.ThemeIndexColour},84%,100%); 
 | 
			
		||||
--primary-color-dark: hsl({PublicCacheData.ThemeIndexColour},84%,66%); 
 | 
			
		||||
--primary-gradiend-light: hsl({PublicCacheData.ThemeIndexColour},84%,92%); 
 | 
			
		||||
--primary-gradiend-dark: hsl({PublicCacheData.ThemeIndexColour},84%,84%); 
 | 
			
		||||
--primary-gradiend-lighter: hsl({PublicCacheData.ThemeIndexColour},84%,96%); 
 | 
			
		||||
--primary-gradiend-darker: hsl({PublicCacheData.ThemeIndexColour},84%,80%); 
 | 
			
		||||
--light-shadow: hsla({PublicCacheData.ThemeIndexColour},84%,100%,.5); 
 | 
			
		||||
--dark-shadow: hsla({PublicCacheData.ThemeIndexColour},84%,66%,.5);")
 | 
			
		||||
	}
 | 
			
		||||
	}
 | 
			
		||||
	}
 | 
			
		||||
</style>
 | 
			
		||||
 | 
			
		||||
<HeadContent>
 | 
			
		||||
 | 
			
		||||
	<style>
 | 
			
		||||
		@if (PublicCacheData != null)
 | 
			
		||||
		{
 | 
			
		||||
			var iconsColour = PublicCacheData.PageSettings.IconsThemeIndexColour is >= 0 and <= 359 ?
 | 
			
		||||
				$"--fa-primary-color: hsl({PublicCacheData.PageSettings.IconsThemeIndexColour},84%,26.4%);--fa-secondary-color: hsl({PublicCacheData.PageSettings.IconsThemeIndexColour},84%,66%);" :
 | 
			
		||||
				PublicCacheData.PageSettings.IconsThemeIndexColour is -2 ?
 | 
			
		||||
				$"--fa-primary-color: hsl(0,0%,1%);--fa-secondary-color: hsl(0,0%,40%);" : 
 | 
			
		||||
				$"--fa-primary-color: hsl(0,0%,60%);--fa-secondary-color: hsl(0,0%,99%);";
 | 
			
		||||
			@if (PublicCacheData.PageSettings.PreferSystemTheming)
 | 
			
		||||
			{
 | 
			
		||||
				if (PublicCacheData.PageSettings.ThemeIsDarkGray || PublicCacheData.PageSettings.ThemeIsLightGray)
 | 
			
		||||
				{
 | 
			
		||||
					@($@"@media screen and (prefers-color-scheme: light) {{
 | 
			
		||||
									:root {{
 | 
			
		||||
										--colour-index: 0;
 | 
			
		||||
										--background: hsl(0,0%,88%);
 | 
			
		||||
										--text-color: hsl(0,0%,26.4%);
 | 
			
		||||
										--primary-color: hsl(0,0%,88%);
 | 
			
		||||
										--primary-color-light: hsl(0,0%,100%);
 | 
			
		||||
										--primary-color-dark: hsl(0,0%,66%);
 | 
			
		||||
										--primary-gradiend-light: hsl(0,0%,92%);
 | 
			
		||||
										--primary-gradiend-dark: hsl(0,0%,84%);
 | 
			
		||||
										--primary-gradiend-lighter: hsl(0,0%,96%);
 | 
			
		||||
										--primary-gradiend-darker: hsl(0,0%,80%);
 | 
			
		||||
										--light-shadow: hsla(0,0%,100%, .5);
 | 
			
		||||
										--dark-shadow: hsla(0,0%,66%, .5);
 | 
			
		||||
										--danger-gradiend-light: hsl(0,0%,92%);
 | 
			
		||||
										--danger-gradiend-dark: hsl(0,0%,84%);
 | 
			
		||||
										{iconsColour}
 | 
			
		||||
									}}
 | 
			
		||||
								}}
 | 
			
		||||
							
 | 
			
		||||
							@media screen and (prefers-color-scheme: dark) {{
 | 
			
		||||
									:root {{
 | 
			
		||||
										--colour-index: 0;
 | 
			
		||||
										--background: hsl(0,0%,12%); 
 | 
			
		||||
										--text-color: hsl(0,0%,73.6%); 
 | 
			
		||||
										--primary-color: hsl(0,0%,12%); 
 | 
			
		||||
										--primary-color-light: hsl(0,0%,100%); 
 | 
			
		||||
										--primary-color-dark: hsl(0,0%,33%); 
 | 
			
		||||
										--primary-gradiend-light: hsl(0,0%,16%); 
 | 
			
		||||
										--primary-gradiend-dark: hsl(0,0%,8%); 
 | 
			
		||||
										--primary-gradiend-lighter: hsl(0,0%,20%); 
 | 
			
		||||
										--primary-gradiend-darker: hsl(0,0%,4%);
 | 
			
		||||
										--light-shadow: hsla(0,0%,66%,.1); 
 | 
			
		||||
										--dark-shadow: hsla(0,0%,1%,.5);
 | 
			
		||||
										--danger-gradiend-light: hsl(0,16%,16%);
 | 
			
		||||
										--danger-gradiend-dark: hsl(0,16%,8%);
 | 
			
		||||
										{iconsColour}
 | 
			
		||||
									}}
 | 
			
		||||
								}}")
 | 
			
		||||
				}
 | 
			
		||||
				else
 | 
			
		||||
				{
 | 
			
		||||
					@($@"@media screen and (prefers-color-scheme: light) {{
 | 
			
		||||
									:root {{
 | 
			
		||||
										--colour-index: {PublicCacheData.PageSettings.LightThemeIndexColour};
 | 
			
		||||
										--background: hsl(var(--colour-index,25),84%,88%);
 | 
			
		||||
										--text-color: hsl(var(--colour-index,25),84%,26.4%);
 | 
			
		||||
										--primary-color: hsl(var(--colour-index,25),84%,88%);
 | 
			
		||||
										--primary-color-light: hsl(var(--colour-index,25),84%,100%);
 | 
			
		||||
										--primary-color-dark: hsl(var(--colour-index,25),84%,66%);
 | 
			
		||||
										--primary-gradiend-light: hsl(var(--colour-index,25),84%,92%);
 | 
			
		||||
										--primary-gradiend-dark: hsl(var(--colour-index,25),84%,84%);
 | 
			
		||||
										--primary-gradiend-lighter: hsl(var(--colour-index,25),84%,96%);
 | 
			
		||||
										--primary-gradiend-darker: hsl(var(--colour-index,25),84%,80%);
 | 
			
		||||
										--light-shadow: hsla(var(--colour-index,25),84%,100%, .5);
 | 
			
		||||
										--dark-shadow: hsla(var(--colour-index,25),84%,66%, .5);
 | 
			
		||||
										--danger-gradiend-light: hsl(0,84%,92%);
 | 
			
		||||
										--danger-gradiend-dark: hsl(0,84%,84%);
 | 
			
		||||
										{iconsColour}
 | 
			
		||||
									}}
 | 
			
		||||
								}}
 | 
			
		||||
							
 | 
			
		||||
							@media screen and (prefers-color-scheme: dark) {{
 | 
			
		||||
									:root {{
 | 
			
		||||
										--colour-index: {PublicCacheData.PageSettings.DarkThemeIndexColour};
 | 
			
		||||
										--background: hsl(var(--colour-index,215),16%,12%); 
 | 
			
		||||
										--text-color: hsl(var(--colour-index,215),16%,73.6%); 
 | 
			
		||||
										--primary-color: hsl(var(--colour-index,215),16%,12%); 
 | 
			
		||||
										--primary-color-light: hsl(var(--colour-index,215),84%,100%); 
 | 
			
		||||
										--primary-color-dark: hsl(var(--colour-index,215),16%,33%); 
 | 
			
		||||
										--primary-gradiend-light: hsl(var(--colour-index,215),16%,16%); 
 | 
			
		||||
										--primary-gradiend-dark: hsl(var(--colour-index,215),16%,8%); 
 | 
			
		||||
										--primary-gradiend-lighter: hsl(var(--colour-index,215),16%,20%); 
 | 
			
		||||
										--primary-gradiend-darker: hsl(var(--colour-index,215),16%,4%);
 | 
			
		||||
										--light-shadow: hsla(var(--colour-index,215),84%,66%,.1); 
 | 
			
		||||
										--dark-shadow: hsla(var(--colour-index,215),16%,1%,.5);
 | 
			
		||||
										--danger-gradiend-light: hsl(0,16%,16%);
 | 
			
		||||
										--danger-gradiend-dark: hsl(0,16%,8%);
 | 
			
		||||
										{iconsColour}
 | 
			
		||||
									}}
 | 
			
		||||
								}}")
 | 
			
		||||
				}
 | 
			
		||||
			}
 | 
			
		||||
			else
 | 
			
		||||
			{
 | 
			
		||||
				if (PublicCacheData.PageSettings.ThemeIsDarkGray || PublicCacheData.PageSettings.ThemeIsLightGray)
 | 
			
		||||
				{
 | 
			
		||||
					if (PublicCacheData.PageSettings.ThemeIsDarkGray)
 | 
			
		||||
					{
 | 
			
		||||
						@($@":root{{--colour-index: 0;
 | 
			
		||||
									--background: hsl(0,0%,12%); 
 | 
			
		||||
									--text-color: hsl(0,0%,73.6%); 
 | 
			
		||||
									--primary-color: hsl(0,0%,12%); 
 | 
			
		||||
									--primary-color-light: hsl(0,0%,100%); 
 | 
			
		||||
									--primary-color-dark: hsl(0,0%,33%); 
 | 
			
		||||
									--primary-gradiend-light: hsl(0,0%,16%); 
 | 
			
		||||
									--primary-gradiend-dark: hsl(0,0%,8%); 
 | 
			
		||||
									--primary-gradiend-lighter: hsl(0,0%,20%); 
 | 
			
		||||
									--primary-gradiend-darker: hsl(0,0%,4%);
 | 
			
		||||
									--light-shadow: hsla(0,0%,66%,.1); 
 | 
			
		||||
									--dark-shadow: hsla(0,0%,1%,.5);
 | 
			
		||||
									--danger-gradiend-light: hsl(0,16%,16%);
 | 
			
		||||
									--danger-gradiend-dark: hsl(0,16%,8%);{iconsColour}}}")
 | 
			
		||||
					}
 | 
			
		||||
					else
 | 
			
		||||
					{
 | 
			
		||||
						@($@":root{{--colour-index: 0;
 | 
			
		||||
								--background: hsl(0,0%,88%);
 | 
			
		||||
								--text-color: hsl(0,0%,26.4%);
 | 
			
		||||
								--primary-color: hsl(0,0%,88%);
 | 
			
		||||
								--primary-color-light: hsl(0,0%,100%);
 | 
			
		||||
								--primary-color-dark: hsl(0,0%,66%);
 | 
			
		||||
								--primary-gradiend-light: hsl(0,0%,92%);
 | 
			
		||||
								--primary-gradiend-dark: hsl(0,0%,84%);
 | 
			
		||||
								--primary-gradiend-lighter: hsl(0,0%,96%);
 | 
			
		||||
								--primary-gradiend-darker: hsl(0,0%,80%);
 | 
			
		||||
								--light-shadow: hsla(0,0%,100%, .5);
 | 
			
		||||
								--dark-shadow: hsla(0,0%,66%, .5);
 | 
			
		||||
								--danger-gradiend-light: hsl(0,84%,92%);
 | 
			
		||||
								--danger-gradiend-dark: hsl(0,84%,84%);{iconsColour}}}")	
 | 
			
		||||
					}
 | 
			
		||||
				}
 | 
			
		||||
				else
 | 
			
		||||
				{
 | 
			
		||||
					if (PublicCacheData.PageSettings.ThemeIsDarkMode)
 | 
			
		||||
					{
 | 
			
		||||
						@($@":root{{--colour-index: {PublicCacheData.PageSettings.DarkThemeIndexColour};
 | 
			
		||||
								--background: hsl(var(--colour-index,215),16%,12%); 
 | 
			
		||||
								--text-color: hsl(var(--colour-index,215),16%,73.6%); 
 | 
			
		||||
								--primary-color: hsl(var(--colour-index,215),16%,12%); 
 | 
			
		||||
								--primary-color-light: hsl(var(--colour-index,215),84%,100%); 
 | 
			
		||||
								--primary-color-dark: hsl(var(--colour-index,215),16%,33%); 
 | 
			
		||||
								--primary-gradiend-light: hsl(var(--colour-index,215),16%,16%); 
 | 
			
		||||
								--primary-gradiend-dark: hsl(var(--colour-index,215),16%,8%); 
 | 
			
		||||
								--primary-gradiend-lighter: hsl(var(--colour-index,215),16%,20%); 
 | 
			
		||||
								--primary-gradiend-darker: hsl(var(--colour-index,215),16%,4%);
 | 
			
		||||
								--light-shadow: hsla(var(--colour-index,215),84%,66%,.1); 
 | 
			
		||||
								--dark-shadow: hsla(var(--colour-index,215),16%,1%,.5);
 | 
			
		||||
								--danger-gradiend-light: hsl(0,16%,16%);
 | 
			
		||||
								--danger-gradiend-dark: hsl(0,16%,8%);{iconsColour}}}")
 | 
			
		||||
					}
 | 
			
		||||
					else
 | 
			
		||||
					{
 | 
			
		||||
						@($@":root{{--colour-index: {PublicCacheData.PageSettings.LightThemeIndexColour};
 | 
			
		||||
								--background: hsl(var(--colour-index,25),84%,88%);
 | 
			
		||||
								--text-color: hsl(var(--colour-index,25),84%,26.4%);
 | 
			
		||||
								--primary-color: hsl(var(--colour-index,25),84%,88%);
 | 
			
		||||
								--primary-color-light: hsl(var(--colour-index,25),84%,100%);
 | 
			
		||||
								--primary-color-dark: hsl(var(--colour-index,25),84%,66%);
 | 
			
		||||
								--primary-gradiend-light: hsl(var(--colour-index,25),84%,92%);
 | 
			
		||||
								--primary-gradiend-dark: hsl(var(--colour-index,25),84%,84%);
 | 
			
		||||
								--primary-gradiend-lighter: hsl(var(--colour-index,25),84%,96%);
 | 
			
		||||
								--primary-gradiend-darker: hsl(var(--colour-index,25),84%,80%);
 | 
			
		||||
								--light-shadow: hsla(var(--colour-index,25),84%,100%, .5);
 | 
			
		||||
								--dark-shadow: hsla(var(--colour-index,25),84%,66%, .5);
 | 
			
		||||
								--danger-gradiend-light: hsl(0,84%,92%);
 | 
			
		||||
								--danger-gradiend-dark: hsl(0,84%,84%);{iconsColour}}}")	
 | 
			
		||||
					}
 | 
			
		||||
				}
 | 
			
		||||
			}
 | 
			
		||||
		}
 | 
			
		||||
	</style>
 | 
			
		||||
 | 
			
		||||
</HeadContent>
 | 
			
		||||
 | 
			
		||||
<CascadingValue IsFixed=false Value=this>
 | 
			
		||||
	@ChildContent
 | 
			
		||||
@@ -54,7 +197,6 @@
 | 
			
		||||
 | 
			
		||||
@code {
 | 
			
		||||
	[Parameter] public RenderFragment ChildContent { get; set; }
 | 
			
		||||
	[Inject] public IStringLocalizer<AllStrings> Localizer { get; set; }
 | 
			
		||||
	[Inject] IStorage DbStorage { get; set; }
 | 
			
		||||
	[Inject] ILocalStorageService Storage { get; set; }
 | 
			
		||||
	[Inject] IJSRuntime JS { get; set; }
 | 
			
		||||
 
 | 
			
		||||
							
								
								
									
										12
									
								
								LayerComponents/LocalizableComponentBase.cs
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										12
									
								
								LayerComponents/LocalizableComponentBase.cs
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,12 @@
 | 
			
		||||
using collAnon.Client.Services;
 | 
			
		||||
using Microsoft.AspNetCore.Components;
 | 
			
		||||
 | 
			
		||||
namespace decePubClient.LayerComponents
 | 
			
		||||
{
 | 
			
		||||
	public class LocalizableComponentBase : ComponentBase
 | 
			
		||||
	{
 | 
			
		||||
		[Inject] public CoalescingStringLocalizer Localizer { get; set; }
 | 
			
		||||
		protected List<Func<Task>> AfterRenderAsyncJobs = new();
 | 
			
		||||
		protected bool IsLoading { get; set; } = true;
 | 
			
		||||
	}
 | 
			
		||||
}
 | 
			
		||||
@@ -1,9 +1,6 @@
 | 
			
		||||
using Microsoft.AspNetCore.Components;
 | 
			
		||||
 | 
			
		||||
namespace decePubClient.LayerComponents
 | 
			
		||||
namespace decePubClient.LayerComponents
 | 
			
		||||
{
 | 
			
		||||
	public class PagesBase : ComponentBase
 | 
			
		||||
	public class PagesBase : LocalizableComponentBase
 | 
			
		||||
	{
 | 
			
		||||
		public bool IsLoading { get; set; } = true;
 | 
			
		||||
	}
 | 
			
		||||
}
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user