feat: enable dark mode for diff2html

backend/src/main/java/com/openisle/dto/PostChangeLogDto.java

@@ -5,7 +5,6 @@ import lombok.Getter;
 import lombok.Setter;
 
 import java.time.LocalDateTime;
-import java.util.List;
 
 @Getter
 @Setter
@@ -19,10 +18,10 @@ public class PostChangeLogDto {
     private String newTitle;
     private String oldContent;
     private String newContent;
-    private CategoryDto oldCategory;
-    private CategoryDto newCategory;
-    private List<TagDto> oldTags;
-    private List<TagDto> newTags;
+    private String oldCategory;
+    private String newCategory;
+    private String oldTags;
+    private String newTags;
     private Boolean oldClosed;
     private Boolean newClosed;
     private LocalDateTime oldPinnedAt;

backend/src/main/java/com/openisle/mapper/PostChangeLogMapper.java

@@ -1,15 +1,9 @@
 package com.openisle.mapper;
 
-import com.openisle.dto.CategoryDto;
 import com.openisle.dto.PostChangeLogDto;
-import com.openisle.dto.TagDto;
 import com.openisle.model.*;
 import org.springframework.stereotype.Component;
 
-import java.util.Arrays;
-import java.util.List;
-import java.util.stream.Collectors;
-
 @Component
 public class PostChangeLogMapper {
     public PostChangeLogDto toDto(PostChangeLog log) {
@@ -28,41 +22,11 @@ public class PostChangeLogMapper {
             dto.setOldContent(c.getOldContent());
             dto.setNewContent(c.getNewContent());
         } else if (log instanceof PostCategoryChangeLog cat) {
-            if (cat.getOldCategory() != null) {
-                CategoryDto oldCat = new CategoryDto();
-                oldCat.setName(cat.getOldCategory());
-                dto.setOldCategory(oldCat);
-            }
-            if (cat.getNewCategory() != null) {
-                CategoryDto newCat = new CategoryDto();
-                newCat.setName(cat.getNewCategory());
-                dto.setNewCategory(newCat);
-            }
+            dto.setOldCategory(cat.getOldCategory());
+            dto.setNewCategory(cat.getNewCategory());
         } else if (log instanceof PostTagChangeLog tag) {
-            if (tag.getOldTags() != null && !tag.getOldTags().isBlank()) {
-                List<TagDto> oldTags = Arrays.stream(tag.getOldTags().split(","))
-                        .map(String::trim)
-                        .filter(s -> !s.isEmpty())
-                        .map(name -> {
-                            TagDto t = new TagDto();
-                            t.setName(name);
-                            return t;
-                        })
-                        .collect(Collectors.toList());
-                dto.setOldTags(oldTags);
-            }
-            if (tag.getNewTags() != null && !tag.getNewTags().isBlank()) {
-                List<TagDto> newTags = Arrays.stream(tag.getNewTags().split(","))
-                        .map(String::trim)
-                        .filter(s -> !s.isEmpty())
-                        .map(name -> {
-                            TagDto t = new TagDto();
-                            t.setName(name);
-                            return t;
-                        })
-                        .collect(Collectors.toList());
-                dto.setNewTags(newTags);
-            }
+            dto.setOldTags(tag.getOldTags());
+            dto.setNewTags(tag.getNewTags());
         } else if (log instanceof PostClosedChangeLog cl) {
             dto.setOldClosed(cl.isOldClosed());
             dto.setNewClosed(cl.isNewClosed());

frontend_nuxt/components/PostChangeLogItem.vue

@@ -45,6 +45,7 @@ import { useIsMobile } from '~/utils/screen'
 import 'diff2html/bundles/css/diff2html.min.css'
 import BaseImage from '~/components/BaseImage.vue'
 import { navigateTo } from 'nuxt/app'
+import { themeState } from '~/utils/theme'
 const props = defineProps({
   log: Object,
   title: String,
@@ -52,6 +53,11 @@ const props = defineProps({
 
 const diffHtml = computed(() => {
   const isMobile = useIsMobile()
+  // Track theme changes
+  const isDark = import.meta.client && document.documentElement.dataset.theme === 'dark'
+  themeState.mode
+  const colorScheme = isDark ? 'dark' : 'light'
+
   if (props.log.type === 'CONTENT') {
     const oldContent = props.log.oldContent ?? ''
     const newContent = props.log.newContent ?? ''
@@ -62,6 +68,7 @@ const diffHtml = computed(() => {
       matching: 'lines',
       drawFileList: false,
       outputFormat: isMobile.value ? 'line-by-line' : 'side-by-side',
+      colorScheme,
     })
   } else if (props.log.type === 'TITLE') {
     const oldTitle = props.log.oldTitle ?? ''
@@ -73,6 +80,7 @@ const diffHtml = computed(() => {
       matching: 'lines',
       drawFileList: false,
       outputFormat: isMobile.value ? 'line-by-line' : 'side-by-side',
+      colorScheme,
     })
   }
   return ''