dark mode

ErsatzTV/Pages/FFmpeg.razor

@@ -37,7 +37,7 @@
         <ToolBarContent>
             <MudText Typo="Typo.h6">FFmpeg Profiles</MudText>
             <MudToolBarSpacer></MudToolBarSpacer>
-            <MudText Color="Color.Primary">Colored settings will be normalized</MudText>
+            <MudText Color="Color.Tertiary">Colored settings will be normalized</MudText>
         </ToolBarContent>
         <ColGroup>
             <col/>
@@ -61,17 +61,17 @@
                 @(context.Transcode ? "Yes" : "No")
             </MudTd>
             <MudTd DataLabel="Resolution">
-                <MudText Color="@(context.Transcode && context.NormalizeResolution ? Color.Primary : Color.Inherit)">
+                <MudText Color="@(context.Transcode && context.NormalizeResolution ? Color.Tertiary : Color.Inherit)">
                     @context.Resolution.Name
                 </MudText>
             </MudTd>
             <MudTd DataLabel="Video Codec">
-                <MudText Color="@(context.Transcode && context.NormalizeVideoCodec ? Color.Primary : Color.Inherit)">
+                <MudText Color="@(context.Transcode && context.NormalizeVideoCodec ? Color.Tertiary : Color.Inherit)">
                     @context.VideoCodec
                 </MudText>
             </MudTd>
             <MudTd DataLabel="Audio Codec">
-                <MudText Color="@(context.Transcode && context.NormalizeAudioCodec ? Color.Primary : Color.Inherit)">
+                <MudText Color="@(context.Transcode && context.NormalizeAudioCodec ? Color.Tertiary : Color.Inherit)">
                     @context.AudioCodec
                 </MudText>
             </MudTd>

ErsatzTV/Shared/MainLayout.razor

@@ -9,25 +9,27 @@
 
 <MudLayout>
     <MudAppBar Elevation="1">
-        <MudText Typo="Typo.h4" Style="width: 240px">ErsatzTV</MudText>
+        <div style="min-width: 240px">
+            <img src="/images/ersatztv.png" alt="ErsatzTV"/>
+        </div>
         <MudTextField T="string"
-                      @ref="_textField"
+                      @ref="                            _textField"
-                      Placeholder="Search"
+                      AdornmentIcon="@Icons.Material.Filled.Search"
+                      Adornment="Adornment.Start"
                       Variant="Variant.Outlined"
                       Class="search-bar"
                       OnKeyDown="@OnSearchKeyDown"
                       Immediate="true">
         </MudTextField>
         <MudAppBarSpacer/>
-        <MudLink Style="@($"color:{Colors.Shades.White}")" Color="Color.Inherit" Href="/iptv/channels.m3u" Target="_blank" Underline="Underline.None">M3U</MudLink>
+        <MudLink Color="Color.Info" Href="/iptv/channels.m3u" Target="_blank" Underline="Underline.None">M3U</MudLink>
-        <MudLink Style="@($"color:{Colors.Shades.White}")" Color="Color.Inherit" Href="/iptv/xmltv.xml" Target="_blank" Class="mx-4" Underline="Underline.None">XMLTV</MudLink>
+        <MudLink Color="Color.Info" Href="/iptv/xmltv.xml" Target="_blank" Class="mx-4" Underline="Underline.None">XMLTV</MudLink>
-        <MudLink Style="@($"color:{Colors.Shades.White}")" Color="Color.Inherit" Href="/swagger" Target="_blank" Class="mr-4" Underline="Underline.None">API</MudLink>
+        <MudLink Color="Color.Info" Href="/swagger" Target="_blank" Class="mr-4" Underline="Underline.None">API</MudLink>
-        <MudDivider Vertical="true" FlexItem="true" DividerType="DividerType.Middle" Class="mx-4 my-5"/>
         <MudTooltip Text="Discord">
-            <MudIconButton Icon="fab fa-discord" Color="Color.Inherit" Link="https://discord.gg/hHaJm3yGy6" Target="_blank"/>
+            <MudIconButton Icon="fab fa-discord" Color="Color.Primary" Link="https://discord.gg/hHaJm3yGy6" Target="_blank"/>
         </MudTooltip>
         <MudTooltip Text="GitHub">
-            <MudIconButton Icon="@Icons.Custom.Brands.GitHub" Color="Color.Inherit" Link="https://github.com/jasongdove/ErsatzTV" Target="_blank"/>
+            <MudIconButton Icon="@Icons.Custom.Brands.GitHub" Color="Color.Primary" Link="https://github.com/jasongdove/ErsatzTV" Target="_blank"/>
         </MudTooltip>
     </MudAppBar>
     <MudDrawer Open="true" Elevation="2" ClipMode="DrawerClipMode.Always">
@@ -74,9 +76,18 @@
             {
                 Palette = new Palette
                 {
-                    DrawerBackground = current.Palette.Background,
+                    ActionDefault = "rgba(255,255,255, 0.80)",
-                    Background = current.Palette.BackgroundGrey,
+                    Primary = "#009000",
-                    Tertiary = Colors.Shades.White
+                    AppbarBackground = "#121212",
+                    Background = "#272727",
+                    DrawerBackground = "#1f1f1f",
+                    Surface = "#1f1f1f",
+                    DrawerText = "rgba(255,255,255, 0.80)",
+                    TextPrimary = "rgba(255,255,255, 0.80)",
+                    TextSecondary = "rgba(255,255,255, 0.80)",
+                    Info = "#00c0c0",
+                    Tertiary = "#00c000",
+                    White = Colors.Shades.White
                 }
             };
         }

ErsatzTV/wwwroot/css/site.css

@@ -1,4 +1,8 @@
-.media-card-grid {
+.mud-breadcrumb-separator > span {
+    color: inherit !important;
+}
+
+.media-card-grid {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
@@ -113,11 +117,11 @@
 
 .media-item-title {
     color: #fff;
-    text-shadow: 1px 1px 3px #000;
+    text-shadow: 1px 1px 5px #000;
 }
 
 .media-item-subtitle {
     color: #fff;
-    text-shadow: 1px 1px 3px #000;
+    text-shadow: 1px 1px 5px #000;
 }