valknar/kit-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: refactor theme, add tailwind-scrollbar, and improve UI components

Browse Source 
- Removed manual theme switching logic and ThemeProvider
- Installed and configured tailwind-scrollbar plugin
- Updated FileConverter and ConversionOptions to use shadcn Input
- Refactored FontSelector to use shadcn Tabs
- Simplified global styles and adjusted glassmorphic effects
This commit is contained in:
Sebastian Krüger
2026-02-26 22:22:32 +01:00
parent a3ef948600
commit 782923f2e0
20 changed files with 178 additions and 248 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
app/(app)/layout.tsx
View File

@@ -1,3 +1,4 @@
import AnimatedBackground from '@/components/AnimatedBackground';
import { AppShell } from '@/components/layout/AppShell';
import { Providers } from '@/components/providers/Providers';

32
app/globals.css
View File

@@ -1,4 +1,5 @@
@import "tailwindcss";
@plugin "tailwind-scrollbar";
@source "../components/*.{js,ts,jsx,tsx}";
@source "../components/ui/*.{js,ts,jsx,tsx}";
@@ -85,14 +86,13 @@
}
}
:root, .dark {
color-scheme: dark;
:root {
/* CORPORATE DARK THEME (The Standard) */
--background: #0a0a0f;
--foreground: #ffffff;
--card: rgba(255, 255, 255, 0.03);
--card-foreground: #ffffff;
--popover: #0f0f15;
--popover: #5D429C;
--popover-foreground: #ffffff;
--primary: #8b5cf6;
--primary-foreground: #ffffff;
@@ -110,36 +110,12 @@
--radius: 1rem;
}
.light {
color-scheme: light;
/* LIGHT ADAPTATION (Keeping the "Glass" look) */
--background: oklch(98% 0.005 255);
--foreground: oklch(20% 0.04 255);
--card: rgba(255, 255, 255, 0.4);
--card-foreground: oklch(20% 0.04 255);
--popover: oklch(100% 0 0);
--popover-foreground: oklch(20% 0.04 255);
--primary: oklch(55% 0.22 270);
--primary-foreground: oklch(100% 0 0);
--secondary: rgba(0, 0, 0, 0.02);
--secondary-foreground: oklch(20% 0.04 255);
--muted: rgba(0, 0, 0, 0.02);
--muted-foreground: oklch(45% 0.04 255);
--accent: rgba(0, 0, 0, 0.03);
--accent-foreground: oklch(15% 0.05 255);
--destructive: oklch(60% 0.2 25);
--destructive-foreground: oklch(100% 0 0);
--border: rgba(0, 0, 0, 0.2);
--input: rgba(0, 0, 0, 0.08);
--ring: rgba(139, 92, 246, 0.4);
}
@layer base {
* {
@apply border-border outline-ring/50;
}
body {
@apply bg-background text-foreground;
@apply bg-background text-foreground scrollbar-thin scrollbar-thumb-primary/20 scrollbar-track-transparent hover:scrollbar-thumb-primary/40;
font-family: var(--font-sans);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

25
app/layout.tsx
View File

@@ -1,6 +1,5 @@
import type { Metadata } from 'next';
import './globals.css';
import { Providers } from '@/components/providers/Providers';
const siteUrl = process.env.NEXT_PUBLIC_SITE_URL || 'http://localhost:3000';
@@ -37,7 +36,7 @@ export default function RootLayout({
const isProd = process.env.NODE_ENV === 'production';
return (
<html lang="en" className="dark" suppressHydrationWarning>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="apple-mobile-web-app-capable" content="yes" />
@@ -49,28 +48,6 @@ export default function RootLayout({
{isProd && umamiScript && umamiId && (
<script defer src={umamiScript} data-website-id={umamiId}></script>
)}
<script
dangerouslySetInnerHTML={{
__html: `
(function() {
try {
var theme = localStorage.getItem('theme');
var isLanding = window.location.pathname === '/';
if (isLanding) {
document.documentElement.classList.add('dark');
document.documentElement.classList.remove('light');
} else if (theme === 'light' || (!theme && window.matchMedia('(prefers-color-scheme: light)').matches)) {
document.documentElement.classList.add('light');
document.documentElement.classList.remove('dark');
} else {
document.documentElement.classList.add('dark');
document.documentElement.classList.remove('light');
}
} catch (e) {}
})();
`,
}}
/>
</head>
<body className="antialiased">
{children}

6
app/not-found.tsx
View File

@@ -1,6 +1,5 @@
'use client';
import * as React from 'react';
import Link from 'next/link';
import { motion } from 'framer-motion';
import AnimatedBackground from '@/components/AnimatedBackground';
@@ -10,11 +9,6 @@ import { Button } from '@/components/ui/button';
import { Home } from 'lucide-react';
export default function NotFound() {
React.useEffect(() => {
// Force dark mode on html element for the 404 page
document.documentElement.classList.remove('light');
document.documentElement.classList.add('dark');
}, []);
return (
<main className="relative min-h-screen dark text-foreground flex flex-col">

7
app/page.tsx
View File

@@ -1,6 +1,5 @@
'use client';
import { useEffect } from 'react';
import AnimatedBackground from '@/components/AnimatedBackground';
import Hero from '@/components/Hero';
import Stats from '@/components/Stats';
@@ -9,12 +8,6 @@ import Footer from '@/components/Footer';
import BackToTop from '@/components/BackToTop';
export default function Home() {
useEffect(() => {
// Force dark mode on html element for the landing page
document.documentElement.classList.remove('light');
document.documentElement.classList.add('dark');
}, []);
return (
<main className="relative min-h-screen dark text-foreground">
<AnimatedBackground />