xfy/DefectingCat.github.io
1
0
Fork 0
mirror of https://github.com/DefectingCat/DefectingCat.github.io synced 2025-07-15 16:51:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix tailwind dark mode

Browse Source
This commit is contained in:
DefectingCat
2023-11-10 10:07:05 +08:00
parent e83fd2dff5
commit 4fec92ba77
5 changed files with 15 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/layout.tsx
View File

@ -39,7 +39,7 @@ export default function RootLayout({
crossOrigin=""
/>
</head>
<body className="latte">
<body>
<RUAThemeProvider>
<div className="flex flex-col min-h-[100vh]">
<HeadBar />

18
components/pages/dark-mode-btn.tsx
View File

@ -8,12 +8,12 @@ const DarkModeBtn = () => {
const { mounted } = useMounted();
const { systemTheme, theme, setTheme } = useTheme();
const currentTheme = theme === 'system' ? systemTheme : theme;
const handleTheme = (type: 'light' | 'dark') => () => {
const map = {
light: 'latte',
dark: 'mocha',
};
document.body.className = map[type];
const handleTheme = (type: 'latte' | 'mocha') => () => {
// const map = {
// light: 'latte',
// dark: 'mocha',
// };
// document.body.className = map[type];
setTheme(type);
};
@ -32,13 +32,13 @@ const DarkModeBtn = () => {
return (
<>
{currentTheme === 'dark' ? (
{currentTheme === 'mocha' ? (
<button>
<FiSun className="w-5 h-5" onClick={handleTheme('light')} />
<FiSun className="w-5 h-5" onClick={handleTheme('latte')} />
</button>
) : (
<button>
<FiMoon className="w-5 h-5" onClick={handleTheme('dark')} />
<FiMoon className="w-5 h-5" onClick={handleTheme('mocha')} />
</button>
)}
</>

5
components/pages/gists/gists-code.tsx
View File

@ -1,13 +1,14 @@
import rehypePrism from '@mapbox/rehype-prism';
import clsx from 'clsx';
import { createElement, Fragment, memo } from 'react';
import rehypeReact from 'rehype-react';
import remarkGfm from 'remark-gfm';
import remarkParse from 'remark-parse';
import remarkRehype from 'remark-rehype';
import rehypeHighlight from 'rehype-highlight';
import { GistsFile } from 'types';
import { unified } from 'unified';
import styles from './gists-code.module.css';
import '@catppuccin/highlightjs/sass/catppuccin.variables.scss';
interface Props {
file: GistsFile;
@ -22,7 +23,7 @@ const GistsCode = ({ file, showFileName = false }: Props) => {
.use(remarkParse)
.use(remarkRehype)
.use(remarkGfm)
.use(rehypePrism, { ignoreMissing: true })
.use(rehypeHighlight, { ignoreMissing: true })
.use(rehypeReact, {
createElement,
Fragment,

2
components/pages/theme-provider.tsx
View File

@ -12,7 +12,7 @@ export default function RUAThemeProvider({
<ThemeProvider
attribute="class"
storageKey="rua-theme"
themes={['light', 'dark']}
themes={['latte', 'mocha']}
enableSystem
defaultTheme="system"
>

2
tailwind.config.js
View File

@ -1,5 +1,5 @@
module.exports = {
darkMode: 'class',
darkMode: ['class', '.mocha'],
plugins: [require('@catppuccin/tailwindcss')],
content: [
'./app/**/*.{js,ts,jsx,tsx,md,mdx}',