xfy/DefectingCat.github.io
1
0
Fork 0
mirror of https://github.com/DefectingCat/DefectingCat.github.io synced 2025-07-16 01:01:38 +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="" crossOrigin=""
/> />
</head> </head>
<body className="latte"> <body>
<RUAThemeProvider> <RUAThemeProvider>
<div className="flex flex-col min-h-[100vh]"> <div className="flex flex-col min-h-[100vh]">
<HeadBar /> <HeadBar />

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

@ -8,12 +8,12 @@ const DarkModeBtn = () => {
const { mounted } = useMounted(); const { mounted } = useMounted();
const { systemTheme, theme, setTheme } = useTheme(); const { systemTheme, theme, setTheme } = useTheme();
const currentTheme = theme === 'system' ? systemTheme : theme; const currentTheme = theme === 'system' ? systemTheme : theme;
const handleTheme = (type: 'light' | 'dark') => () => { const handleTheme = (type: 'latte' | 'mocha') => () => {
const map = { // const map = {
light: 'latte', // light: 'latte',
dark: 'mocha', // dark: 'mocha',
}; // };
document.body.className = map[type]; // document.body.className = map[type];
setTheme(type); setTheme(type);
}; };
@ -32,13 +32,13 @@ const DarkModeBtn = () => {
return ( return (
<> <>
{currentTheme === 'dark' ? ( {currentTheme === 'mocha' ? (
<button> <button>
<FiSun className="w-5 h-5" onClick={handleTheme('light')} /> <FiSun className="w-5 h-5" onClick={handleTheme('latte')} />
</button> </button>
) : ( ) : (
<button> <button>
<FiMoon className="w-5 h-5" onClick={handleTheme('dark')} /> <FiMoon className="w-5 h-5" onClick={handleTheme('mocha')} />
</button> </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 clsx from 'clsx';
import { createElement, Fragment, memo } from 'react'; import { createElement, Fragment, memo } from 'react';
import rehypeReact from 'rehype-react'; import rehypeReact from 'rehype-react';
import remarkGfm from 'remark-gfm'; import remarkGfm from 'remark-gfm';
import remarkParse from 'remark-parse'; import remarkParse from 'remark-parse';
import remarkRehype from 'remark-rehype'; import remarkRehype from 'remark-rehype';
import rehypeHighlight from 'rehype-highlight';
import { GistsFile } from 'types'; import { GistsFile } from 'types';
import { unified } from 'unified'; import { unified } from 'unified';
import styles from './gists-code.module.css'; import styles from './gists-code.module.css';
import '@catppuccin/highlightjs/sass/catppuccin.variables.scss';
interface Props { interface Props {
file: GistsFile; file: GistsFile;
@ -22,7 +23,7 @@ const GistsCode = ({ file, showFileName = false }: Props) => {
.use(remarkParse) .use(remarkParse)
.use(remarkRehype) .use(remarkRehype)
.use(remarkGfm) .use(remarkGfm)
.use(rehypePrism, { ignoreMissing: true }) .use(rehypeHighlight, { ignoreMissing: true })
.use(rehypeReact, { .use(rehypeReact, {
createElement, createElement,
Fragment, Fragment,

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

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

2
tailwind.config.js
View File

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