Custom Theme Support (Kareadita#1077)

* Started the migration to bootstrap 5. Introduced a breakpoint system that bootstrap reflects for our screens.

* sr only migrated

* mr/ml -> me/ms

* pl/pr -> ps/pe

* btn-block

* removed input-group-append

* Added form-label to all labels

* Added some style overrides for inputs

* Replaced form-group with mb-3

* Ignore journal files

* Update media to d-flex/flex-grow-1

* Fixed reading list detail page

* For develop builds, don't inline critical styles

* Fixed some downstream security issues

* Fixed a layout issue in series detail

* Fixed issue with btn-light not having background color. Updated layout for series detail metadata

* Cleaned up nav search

* Laid out the organization for custom theme components. Update _inputs.scss with variable overrides and depending on theme, it will just work.

* Lots of theming work

* Added inputs to the theme page

* Login and input placeholder changes

- Fixed login screen centering issue on all devices
- Changed the format of the login screen
- Change the input placeholder color

* Added checkbox styles

* Refactored tagbadges and removed some ngdeep selectors

* Added nav bar component and refactored some styles into event widget

* Cleaned nav events again and made dedicated popover body

* Finished pagination component

* Fixed up some styles with buttons

* refactored dropdown component

* Update accordion component

* Refactored breadcrumbs and rating star. Fixed a missing style for cards

* Fixed some styling issues on person badge, added modal component, and some global styles

* Finished moving everything within dark to component files

* Fixed up filter buttons, move card styles into a component theme, fixed slider style

* Refactored library card and grouped typeahead

* Updated normal typeahead component and reduced amount of ngdeep selector

* Refactored grid breakpoints to be available by css variable, but it's hardcoded into the app

* Ensure breakpoints are defined per theme

* Fixed up some styling overrides and customization for nav links and alt button

* Removed some deep styles, moved css out of splash container and brough back labels for login page

* Finished css variable refactor

* Refactored all the theme variable definitions into files for each theme.

* Added back bootstrap overrides

* Added a note about bootstrap theme colors being not-possible to swap out at runtime

* Cleaned up some dead code

* Implemented the ability to set a custom theme on the site. Cleaned up misc code throughout.

* Additional changes

- Fixed nav where "kavita" was not hiding correctly on small viewports
- Fixed search bar to make the behavior more consistent
- Fixed accordion buttons
- Changed accordion buttons to be more responsive
- Added radio button colors
- Fixed radios on theme test page
- Changed login and reset password card layouts to be more consistent.
- Added primary color shade for when darker shading is needed.

* Built a basic site, allow the user to apply different themes, refactored nav service code out.

* Implemented the ability update a user's theme

* Added unit tests for Scan and Get Content in SiteThemeService.

* Fixed a bug in the login code and Pref code which wasn't joining on SiteTheme table. Wrote Unit tests and the UI component to manage current theme.

* Implemented scan so that it manages custom themes with unit tests

* Component updates

- Repositioning style ordering
- Adding indicator override
- Adding select styles

* SignlaR integration, some fixes when creating custom entities, one single migration. Just login functionality left.

* More ui updated

- Added .no-hover to prevent hover on elements where not needed
- Changed all selects I could find to appropriate class
- Changed up nav tabs to work more like bootstrap tabs than pills
- Added padding to top of some containers to make styles consistent
- Added ability to change navbar fontawesome icon colors
- removed some unecessary inline styling
- Changed radio button to appropriate class
- Toned down primate color, a bit too bright for dark theme.
- Added ability to change button fontawesome icon color

* nav-tab fix for series-detail

* Added themes folder to gitignore

* Adding card overlay

* Fixing up light theme

* Everything is done. Only bug is that color-scheme isn't being set properly from css variable.

* Checkboxes have pointer by default. Confirm/Confirm email use default (dark) theme by default

* Fixed an error where color-scheme wasn't reflecting correctly on themes on first load

* Fixed user preferences not available on login

* Changing dual radios to switches and color tweaks

* disabled primary APCA fix

* button APCA fixes

* Fixed some timing issues with first load and image service

* Fixed swiper issues from upgrade

* Changed themes to be scss files again and adjusted Seed code

* Migrated carousel to css variables. Fixed a broken animation for search.

* Cleaned up some backend smells

* Fixed white border outline on nav tabs, added some variables for header

* Nav bar has been css variable-ified

* Added some basic eink stuff to make the app useable

Co-authored-by: Robbie Davis <[email protected]>

.gitignore

@@ -510,11 +510,13 @@ UI/Web/dist/
 /API/config/backups/
 /API/config/cache/
 /API/config/temp/
+/API/config/themes/
 /API/config/stats/
 /API/config/bookmarks/
 /API/config/kavita.db
 /API/config/kavita.db-shm
 /API/config/kavita.db-wal
+/API/config/kavita.db-journal
 /API/config/Hangfire.db
 /API/config/Hangfire-log.db
 API/config/covers/

API.Tests/Services/SiteThemeServiceTests.cs

@@ -0,0 +1,264 @@
+using System.Collections.Generic;
+using System.Data.Common;
+using System.IO.Abstractions.TestingHelpers;
+using System.Linq;
+using System.Threading.Tasks;
+using API.Data;
+using API.Entities;
+using API.Entities.Enums;
+using API.Entities.Enums.Theme;
+using API.Helpers;
+using API.Services;
+using API.Services.Tasks;
+using API.SignalR;
+using AutoMapper;
+using Kavita.Common;
+using Microsoft.AspNetCore.SignalR;
+using Microsoft.Data.Sqlite;
+using Microsoft.EntityFrameworkCore;
+using Microsoft.EntityFrameworkCore.Infrastructure;
+using Microsoft.Extensions.Logging;
+using NSubstitute;
+using Xunit;
+
+namespace API.Tests.Services;
+
+public class SiteThemeServiceTests
+{
+    private readonly ILogger<SiteThemeService> _logger = Substitute.For<ILogger<SiteThemeService>>();
+    private readonly IHubContext<MessageHub> _messageHub = Substitute.For<IHubContext<MessageHub>>();
+
+    private readonly DbConnection _connection;
+    private readonly DataContext _context;
+    private readonly IUnitOfWork _unitOfWork;
+
+    private const string CacheDirectory = "C:/kavita/config/cache/";
+    private const string CoverImageDirectory = "C:/kavita/config/covers/";
+    private const string BackupDirectory = "C:/kavita/config/backups/";
+    private const string BookmarkDirectory = "C:/kavita/config/bookmarks/";
+    private const string SiteThemeDirectory = "C:/kavita/config/themes/";
+
+    public SiteThemeServiceTests()
+    {
+        var contextOptions = new DbContextOptionsBuilder()
+            .UseSqlite(CreateInMemoryDatabase())
+            .Options;
+        _connection = RelationalOptionsExtension.Extract(contextOptions).Connection;
+
+        _context = new DataContext(contextOptions);
+        Task.Run(SeedDb).GetAwaiter().GetResult();
+
+        var config = new MapperConfiguration(cfg => cfg.AddProfile<AutoMapperProfiles>());
+        var mapper = config.CreateMapper();
+        _unitOfWork = new UnitOfWork(_context, mapper, null);
+    }
+
+    #region Setup
+
+    private static DbConnection CreateInMemoryDatabase()
+    {
+        var connection = new SqliteConnection("Filename=:memory:");
+
+        connection.Open();
+
+        return connection;
+    }
+
+    private async Task<bool> SeedDb()
+    {
+        await _context.Database.MigrateAsync();
+        var filesystem = CreateFileSystem();
+
+        await Seed.SeedSettings(_context, new DirectoryService(Substitute.For<ILogger<DirectoryService>>(), filesystem));
+
+        var setting = await _context.ServerSetting.Where(s => s.Key == ServerSettingKey.CacheDirectory).SingleAsync();
+        setting.Value = CacheDirectory;
+
+        setting = await _context.ServerSetting.Where(s => s.Key == ServerSettingKey.BackupDirectory).SingleAsync();
+        setting.Value = BackupDirectory;
+
+        setting = await _context.ServerSetting.Where(s => s.Key == ServerSettingKey.BookmarkDirectory).SingleAsync();
+        setting.Value = BookmarkDirectory;
+
+        _context.ServerSetting.Update(setting);
+
+        _context.AppUser.Add(new AppUser()
+        {
+            UserName = "Joe",
+            UserPreferences = new AppUserPreferences
+            {
+                Theme = Seed.DefaultThemes[1]
+            }
+        });
+
+        _context.Library.Add(new Library()
+        {
+            Name = "Manga",
+            Folders = new List<FolderPath>()
+            {
+                new FolderPath()
+                {
+                    Path = "C:/data/"
+                }
+            }
+        });
+        return await _context.SaveChangesAsync() > 0;
+    }
+
+    private static MockFileSystem CreateFileSystem()
+    {
+        var fileSystem = new MockFileSystem();
+        fileSystem.Directory.SetCurrentDirectory("C:/kavita/");
+        fileSystem.AddDirectory("C:/kavita/config/");
+        fileSystem.AddDirectory(CacheDirectory);
+        fileSystem.AddDirectory(CoverImageDirectory);
+        fileSystem.AddDirectory(BackupDirectory);
+        fileSystem.AddDirectory(BookmarkDirectory);
+        fileSystem.AddDirectory(SiteThemeDirectory);
+        fileSystem.AddDirectory("C:/data/");
+
+        return fileSystem;
+    }
+
+    private async Task ResetDb()
+    {
+        _context.SiteTheme.RemoveRange(_context.SiteTheme);
+        await _context.SaveChangesAsync();
+    }
+
+    #endregion
+
+    [Fact]
+    public async Task Scan_ShouldFindCustomFile()
+    {
+        await ResetDb();
+        var filesystem = CreateFileSystem();
+        filesystem.AddFile($"{SiteThemeDirectory}custom.css", new MockFileData(""));
+        var ds = new DirectoryService(Substitute.For<ILogger<DirectoryService>>(), filesystem);
+        var siteThemeService = new SiteThemeService(ds, _unitOfWork, _messageHub);
+        await siteThemeService.Scan();
+
+        Assert.NotNull(await _unitOfWork.SiteThemeRepository.GetThemeDtoByName("custom"));
+    }
+
+    [Fact]
+    public async Task Scan_ShouldOnlyInsertOnceOnSecondScan()
+    {
+        await ResetDb();
+        var filesystem = CreateFileSystem();
+        filesystem.AddFile($"{SiteThemeDirectory}custom.css", new MockFileData(""));
+        var ds = new DirectoryService(Substitute.For<ILogger<DirectoryService>>(), filesystem);
+        var siteThemeService = new SiteThemeService(ds, _unitOfWork, _messageHub);
+        await siteThemeService.Scan();
+
+        Assert.NotNull(await _unitOfWork.SiteThemeRepository.GetThemeDtoByName("custom"));
+
+        await siteThemeService.Scan();
+
+        var customThemes = (await _unitOfWork.SiteThemeRepository.GetThemeDtos()).Where(t =>
+            API.Parser.Parser.Normalize(t.Name).Equals(API.Parser.Parser.Normalize("custom")));
+        Assert.Single(customThemes);
+    }
+
+    [Fact]
+    public async Task Scan_ShouldDeleteWhenFileDoesntExistOnSecondScan()
+    {
+        await ResetDb();
+        var filesystem = CreateFileSystem();
+        filesystem.AddFile($"{SiteThemeDirectory}custom.css", new MockFileData(""));
+        var ds = new DirectoryService(Substitute.For<ILogger<DirectoryService>>(), filesystem);
+        var siteThemeService = new SiteThemeService(ds, _unitOfWork, _messageHub);
+        await siteThemeService.Scan();
+
+        Assert.NotNull(await _unitOfWork.SiteThemeRepository.GetThemeDtoByName("custom"));
+
+        filesystem.RemoveFile($"{SiteThemeDirectory}custom.css");
+        await siteThemeService.Scan();
+
+        var customThemes = (await _unitOfWork.SiteThemeRepository.GetThemeDtos()).Where(t =>
+            API.Parser.Parser.Normalize(t.Name).Equals(API.Parser.Parser.Normalize("custom")));
+
+        Assert.Empty(customThemes);
+    }
+
+    [Fact]
+    public async Task GetContent_ShouldReturnContent()
+    {
+        await ResetDb();
+        var filesystem = CreateFileSystem();
+        filesystem.AddFile($"{SiteThemeDirectory}custom.css", new MockFileData("123"));
+        var ds = new DirectoryService(Substitute.For<ILogger<DirectoryService>>(), filesystem);
+        var siteThemeService = new SiteThemeService(ds, _unitOfWork, _messageHub);
+
+        _context.SiteTheme.Add(new SiteTheme()
+        {
+            Name = "Custom",
+            NormalizedName = API.Parser.Parser.Normalize("Custom"),
+            Provider = ThemeProvider.User,
+            FileName = "custom.css",
+            IsDefault = false
+        });
+        await _context.SaveChangesAsync();
+
+        var content = await siteThemeService.GetContent((await _unitOfWork.SiteThemeRepository.GetThemeDtoByName("Custom")).Id);
+        Assert.NotNull(content);
+        Assert.NotEmpty(content);
+        Assert.Equal("123", content);
+    }
+
+    [Fact]
+    public async Task UpdateDefault_ShouldHaveOneDefault()
+    {
+        await ResetDb();
+        var filesystem = CreateFileSystem();
+        filesystem.AddFile($"{SiteThemeDirectory}custom.css", new MockFileData("123"));
+        var ds = new DirectoryService(Substitute.For<ILogger<DirectoryService>>(), filesystem);
+        var siteThemeService = new SiteThemeService(ds, _unitOfWork, _messageHub);
+
+        _context.SiteTheme.Add(new SiteTheme()
+        {
+            Name = "Custom",
+            NormalizedName = API.Parser.Parser.Normalize("Custom"),
+            Provider = ThemeProvider.User,
+            FileName = "custom.css",
+            IsDefault = false
+        });
+        await _context.SaveChangesAsync();
+
+        var customTheme = (await _unitOfWork.SiteThemeRepository.GetThemeDtoByName("Custom"));
+
+        await siteThemeService.UpdateDefault(customTheme.Id);
+
+
+
+        Assert.Equal(customTheme.Id, (await _unitOfWork.SiteThemeRepository.GetDefaultTheme()).Id);
+    }
+
+    [Fact]
+    public async Task UpdateDefault_ShouldThrowOnInvalidId()
+    {
+        await ResetDb();
+        var filesystem = CreateFileSystem();
+        filesystem.AddFile($"{SiteThemeDirectory}custom.css", new MockFileData("123"));
+        var ds = new DirectoryService(Substitute.For<ILogger<DirectoryService>>(), filesystem);
+        var siteThemeService = new SiteThemeService(ds, _unitOfWork, _messageHub);
+
+        _context.SiteTheme.Add(new SiteTheme()
+        {
+            Name = "Custom",
+            NormalizedName = API.Parser.Parser.Normalize("Custom"),
+            Provider = ThemeProvider.User,
+            FileName = "custom.css",
+            IsDefault = false
+        });
+        await _context.SaveChangesAsync();
+
+
+
+        var ex = await Assert.ThrowsAsync<KavitaException>(async () => await siteThemeService.UpdateDefault(10));
+        Assert.Equal("Theme file missing or invalid", ex.Message);
+
+    }
+
+
+}

API/API.csproj

@@ -310,4 +310,8 @@
     <Reference Include="System.Drawing.Common" />
   </ItemGroup>
 
+  <ItemGroup>
+    <Folder Include="config\themes" />
+  </ItemGroup>
+
 </Project>

API/Controllers/AccountController.cs

@@ -106,7 +106,10 @@ public async Task<ActionResult<UserDto>> RegisterFirstUser(RegisterDto registerD
                 {
                     UserName = registerDto.Username,
                     Email = registerDto.Email,
-                    UserPreferences = new AppUserPreferences(),
+                    UserPreferences = new AppUserPreferences
+                    {
+                        Theme = await _unitOfWork.SiteThemeRepository.GetDefaultTheme()
+                    },
                     ApiKey = HashUtil.ApiKey()
                 };
 
@@ -179,22 +182,23 @@ public async Task<ActionResult<UserDto>> Login(LoginDto loginDto)
 
             // Update LastActive on account
             user.LastActive = DateTime.Now;
-            user.UserPreferences ??= new AppUserPreferences();
+            user.UserPreferences ??= new AppUserPreferences
+            {
+                Theme = await _unitOfWork.SiteThemeRepository.GetDefaultTheme()
+            };
 
             _unitOfWork.UserRepository.Update(user);
             await _unitOfWork.CommitAsync();
 
             _logger.LogInformation("{UserName} logged in at {Time}", user.UserName, user.LastActive);
 
-            return new UserDto
-            {
-                Username = user.UserName,
-                Email = user.Email,
-                Token = await _tokenService.CreateToken(user),
-                RefreshToken = await _tokenService.CreateRefreshToken(user),
-                ApiKey = user.ApiKey,
-                Preferences = _mapper.Map<UserPreferencesDto>(user.UserPreferences)
-            };
+            var dto = _mapper.Map<UserDto>(user);
+            dto.Token = await _tokenService.CreateToken(user);
+            dto.RefreshToken = await _tokenService.CreateRefreshToken(user);
+            var pref = await _unitOfWork.UserRepository.GetPreferencesAsync(user.UserName);
+            pref.Theme ??= await _unitOfWork.SiteThemeRepository.GetDefaultTheme();
+            dto.Preferences = _mapper.Map<UserPreferencesDto>(pref);
+            return dto;
         }
 
         [HttpPost("refresh-token")]
@@ -358,7 +362,10 @@ public async Task<ActionResult<string>> InviteUser(InviteUserDto dto)
                 UserName = dto.Email,
                 Email = dto.Email,
                 ApiKey = HashUtil.ApiKey(),
-                UserPreferences = new AppUserPreferences()
+                UserPreferences = new AppUserPreferences
+                {
+                    Theme = await _unitOfWork.SiteThemeRepository.GetDefaultTheme()
+                }
             };
 
             try