mirror of https://github.com/knative/docs.git
27 lines
702 B
JavaScript
27 lines
702 B
JavaScript
'use client';
|
|
import React from 'react';
|
|
import { useTheme } from 'next-themes';
|
|
import { useEffect } from 'react';
|
|
|
|
const Toggle = () => {
|
|
const { systemTheme, theme, setTheme } = useTheme();
|
|
useEffect(() => {
|
|
const systemPreference = window.matchMedia('(prefers-color-scheme: dark)')
|
|
.matches
|
|
? 'dark'
|
|
: 'light';
|
|
|
|
setTheme(systemPreference);
|
|
}, []);
|
|
return (
|
|
<button
|
|
onClick={() => (theme == 'dark' ? setTheme('light') : setTheme('dark'))}
|
|
className='bg-gray-800 dark:bg-gray-50 hover:bg-gray-600 dark:hover:bg-gray-300 transition-all duration-100 text-white dark:text-gray-800 px-6 py-1 text-xl md:text-2xl rounded-md'
|
|
>
|
|
Mode
|
|
</button>
|
|
);
|
|
};
|
|
|
|
export default Toggle;
|