Merge pull request #146 from jerboa88/80-add-darklight-mode-support

80 add darklight mode support

Author: jerboa88

src/components/input/ghost-button.tsx

@@ -13,7 +13,7 @@ export function GhostButton({
 	...remainingProps
 }: Button) {
 	const classNameProps = getClassNameProps(
-		'p-2 sm:p-4 drop-shadow',
+		'p-2 sm:p-4 dark:drop-shadow',
 		!disabled && 'interactive-text', // Enable hover effect only when button is not disabled
 		className,
 	);

src/components/text/heading.tsx

@@ -11,7 +11,7 @@ interface Props extends PropsWithClassName, PropsWithChildren {}
 
 export function Heading({ className, children }: Props) {
 	const classNameProps = getClassNameProps(
-		'align-middle font-heading font-bold uppercase drop-shadow interactive-text text-neutral-content',
+		'align-middle font-heading font-bold uppercase dark:drop-shadow interactive-text text-neutral-content',
 		className,
 	);
 

src/components/text/section-heading.tsx

@@ -11,7 +11,7 @@ interface Props extends PropsWithClassName, PropsWithChildren {}
 
 export function SectionHeading({ className, children }: Props) {
 	const classNameProps = getClassNameProps(
-		'py-4 text-3xl align-middle font-heading font-medium drop-shadow',
+		'py-4 text-3xl align-middle font-heading font-medium dark:drop-shadow',
 		className,
 	);
 

src/components/text/subsection-heading.tsx

@@ -11,7 +11,7 @@ interface Props extends PropsWithClassName, PropsWithChildren {}
 
 export function SubsectionHeading({ className, children }: Props) {
 	const classNameProps = getClassNameProps(
-		'text-lg font-heading font-semibold drop-shadow',
+		'text-lg font-heading font-semibold dark:drop-shadow',
 		className,
 	);
 

tailwind.config.ts

@@ -9,6 +9,7 @@ import { getTheme } from './src/common/config-manager';
 
 export default {
 	content: ['src/**/*.{js,jsx,ts,tsx}'],
+	darkMode: ['class', '[data-theme="dark"]'],
 	theme: {
 		fontFamily: {
 			sans: [