Reduced animations

src/app/dev/DevToys.Api/Core/Theme/IThemeListener.cs

@@ -35,6 +35,11 @@ public interface IThemeListener
     /// </summary>
     bool UserIsCompactModePreference { get; }
 
+    /// <summary>
+    /// Gets a value indicating whether the app should use less animations.
+    /// </summary>
+    bool UseLessAnimations { get; }
+
     /// <summary>
     /// Raised when the theme has changed.
     /// </summary>

src/app/dev/DevToys.Blazor/Assets/sass/_transitions.scss

@@ -16,6 +16,15 @@
     animation-timing-function: ease-out;
 }
 
+// Use less animations
+div[data-uselessanimations] {
+    .entrance-theme-transition {
+        animation-name: entrance-theme-transition-key-frames;
+        animation-duration: 0s;
+        animation-timing-function: linear;
+    }
+}
+
 @mixin transition($transition...) {
     @if length($transition) == 0 {
         $transition: all 0.2s ease-in-out !default;

src/app/dev/DevToys.Blazor/Components/Layout/Dialog/Dialog.razor.scss

@@ -89,3 +89,14 @@
         opacity: 1;
     }
 }
+
+// Use less animations
+div[data-uselessanimations] {
+    .dialog {
+        animation: none;
+
+        &-overlay {
+            animation: none;
+        }
+    }
+}

src/app/dev/DevToys.Blazor/Components/Menu/NavBar/NavBar.razor.scss

@@ -141,3 +141,14 @@ div[data-compactmode] {
         }
     }
 }
+
+// Use less animations
+div[data-uselessanimations] {
+    .nav-bar-root {
+        nav {
+            &.transition {
+                @include transition( left 0s linear, width 0s linear, max-width 0s linear, box-shadow 0s linear);
+            }
+        }
+    }
+}

src/app/dev/DevToys.Blazor/Pages/MainLayout.razor

@@ -4,6 +4,7 @@
 <div class="main-layout @(Class)"
      data-theme="@ThemeName"
      data-compactmode="@IsCompactMode"
-     data-usercompactmode="@UserIsCompactModePreference">
+     data-usercompactmode="@UserIsCompactModePreference"
+     data-uselessanimations="@UseLessAnimations">
         @Body
 </div>

src/app/dev/DevToys.Blazor/Pages/MainLayout.razor.cs

@@ -31,6 +31,9 @@ public partial class MainLayout : LayoutComponentBase
     [Parameter]
     public bool UserIsCompactModePreference { get; set; }
 
+    [Parameter]
+    public bool UseLessAnimations { get; set; }
+
     [Parameter]
     public string Class { get; set; } = default!;
 
@@ -104,6 +107,8 @@ private void ApplyTheme()
         ThemeName = themeName;
         IsCompactMode = _themeListener.IsCompactMode;
         UserIsCompactModePreference = _themeListener.UserIsCompactModePreference;
+        UseLessAnimations = _themeListener.UseLessAnimations;
+
         InvokeAsync(() =>
         {
             StateHasChanged();

src/app/dev/DevToys.Blazor/Pages/SubPages/ToolGroup.razor.scss

@@ -145,3 +145,13 @@ div[data-compactmode] {
         padding: 8px 16px;
     }
 }
+
+// Use less animations
+div[data-uselessanimations] {
+    .hero {
+        &::before {
+            animation: none;
+            -webkit-animation: none;
+        }
+    }
+}

src/app/dev/platforms/desktop/DevToys.Linux/Core/ThemeListener.cs

@@ -48,6 +48,8 @@ public ThemeListener(ISettingsProvider settingsProvider)
 
     public bool UserIsCompactModePreference => _settingsProvider.GetSetting(PredefinedSettings.CompactMode);
 
+    public bool UseLessAnimations => true;
+
     public event EventHandler? ThemeChanged;
 
     public void ApplyDesiredColorTheme()

src/app/dev/platforms/desktop/DevToys.MacOS/Core/ThemeListener.cs

@@ -48,6 +48,8 @@ public ThemeListener(ISettingsProvider settingsProvider)
 
     public bool UserIsCompactModePreference => _settingsProvider.GetSetting(PredefinedSettings.CompactMode);
 
+    public bool UseLessAnimations => true;
+
     public event EventHandler? ThemeChanged;
 
     public void Dispose()

src/app/dev/platforms/desktop/DevToys.Windows/Core/ThemeListener.cs

@@ -43,6 +43,8 @@ public ThemeListener(ISettingsProvider settingsProvider)
 
     public bool UserIsCompactModePreference => _settingsProvider.GetSetting(PredefinedSettings.CompactMode);
 
+    public bool UseLessAnimations => !SystemParameters.ClientAreaAnimation;
+
     public event EventHandler? ThemeChanged;
 
     public void ApplyDesiredColorTheme()