React 个人博客 支持自定义主题

Blog rick-chou.github.io/one-piece-r...

Code github.com/rick-chou/o...

1. 升级 tailwindcss v4

github.com/rick-chou/o...

@import 'tailwindcss';
@plugin '@tailwindcss/typography';

@custom-variant dark (&:where(.dark, .dark *));

/* Typography plugin */
@utility prose {
  :not(pre) > code {
    &::before,
    &::after {
      display: none;
    }
    color: var(--color-slate-500);
    background-color: var(--color-stone-100);
    border-radius: 0.25rem;
    padding: 0.25rem;
    margin-left: 0.25rem;
    margin-right: 0.25rem;
    @apply no-scrollbar;
  }
}

@utility no-scrollbar {
  /* Hide scrollbar for Chrome, Safari and Opera */
  &::-webkit-scrollbar {
    display: none;
  }

  /* Hide scrollbar for IE, Edge and Firefox */
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

2. 重写 ThemeProvider 支持自定义主题

github.com/rick-chou/o...