From fa41452bb62c0d0f5d481e840f8252311a67a6e7 Mon Sep 17 00:00:00 2001 From: Claude Date: Thu, 16 Jul 2026 15:48:44 +0000 Subject: [PATCH] Switch theme to gruvbox with dark mode enforced - config.json: theme gruvbox (was matrix_crt). - tailwind darkMode 'class' + src/pages/_document.tsx sets , so dark mode applies regardless of the visitor's system setting. - global.css: retheme the hardcoded terminal accents (prompt, tree, sumfetch, scrollbar, resume button) from matrix-green to gruvbox yellow/aqua/fg. Co-Authored-By: Claude Opus 4.8 Claude-Session: https://claude.ai/code/session_01Nt6ycjAMdUMqGTGtbKocrs --- config.json | 2 +- src/pages/_document.tsx | 15 +++++++++++++++ src/styles/global.css | 28 ++++++++++++++-------------- tailwind.config.js | 2 +- 4 files changed, 31 insertions(+), 16 deletions(-) create mode 100644 src/pages/_document.tsx diff --git a/config.json b/config.json index e6a2179..fd4f8d4 100644 --- a/config.json +++ b/config.json @@ -4,7 +4,7 @@ "ascii": "MiTerm", "ps1_hostname": "MiTerm", "ps1_username": "MihirTalati", - "theme": "matrix_crt", + "theme": "gruvbox", "repo": "https://github.com/Mihir-Null", "resume_url": "/resume.html", "colors": { diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx new file mode 100644 index 0000000..a59699e --- /dev/null +++ b/src/pages/_document.tsx @@ -0,0 +1,15 @@ +import { Html, Head, Main, NextScript } from 'next/document'; + +// Dark mode is enforced regardless of system settings: the `dark` class on +// makes every Tailwind `dark:` variant apply (darkMode: 'class'). +export default function Document() { + return ( + + + +
+ + + + ); +} diff --git a/src/styles/global.css b/src/styles/global.css index fecb478..4edb3df 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -32,12 +32,12 @@ div#__next > div { } ::-webkit-scrollbar-thumb { - background: rgba(154, 205, 50, 0.5); + background: rgba(215, 153, 33, 0.5); border-radius: 5px; } ::-webkit-scrollbar-thumb:hover { - background: rgba(154, 205, 50, 0.75); + background: rgba(215, 153, 33, 0.75); } /* --- Prompt line --- */ @@ -46,16 +46,16 @@ div#__next > div { } .ps1-separator { - color: rgba(154, 205, 50, 0.85); + color: rgba(215, 153, 33, 0.85); margin: 0 2px; } .ps1-host { - color: #a4ffce; + color: #8ec07c; } .ps1-path { - color: rgba(186, 255, 216, 0.85); + color: rgba(235, 219, 178, 0.85); margin-left: 4px; } @@ -77,7 +77,7 @@ div#__next > div { white-space: pre-wrap; } .tree-branch { - color: rgba(154, 205, 50, 0.65); + color: rgba(215, 153, 33, 0.65); } .tree-row { display: inline; @@ -85,7 +85,7 @@ div#__next > div { border-radius: 3px; } .tree-row:hover { - background: rgba(154, 205, 50, 0.12); + background: rgba(215, 153, 33, 0.12); } /* --- sumfetch: flat text summary --- */ @@ -97,14 +97,14 @@ div#__next > div { .sf-name { font-weight: 700; font-size: 1.05em; - color: #b6ff66; + color: #fabd2f; } .sf-title { - color: rgba(154, 205, 50, 0.85); + color: rgba(215, 153, 33, 0.85); font-weight: 700; } .sf-key { - color: #9eff88; + color: #a89984; } .sf-link { color: inherit; @@ -124,12 +124,12 @@ div#__next > div { z-index: 50; font-size: 0.75rem; padding: 0.375rem 0.75rem; - border: 1px solid rgba(154, 205, 50, 0.6); - color: rgba(186, 255, 216, 0.9); + border: 1px solid rgba(215, 153, 33, 0.6); + color: rgba(235, 219, 178, 0.9); text-decoration: none; transition: background-color 0.15s ease, color 0.15s ease; } .resume-fab:hover { - background: rgba(154, 205, 50, 0.85); - color: #06210f; + background: rgba(215, 153, 33, 0.85); + color: #1d2021; } diff --git a/tailwind.config.js b/tailwind.config.js index 1025852..27dc08d 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -11,7 +11,7 @@ module.exports = { './src/pages/**/*.{js,ts,jsx,tsx}', './src/components/**/*.{js,ts,jsx,tsx}', ], - darkMode: 'media', // or 'media' or 'class' + darkMode: 'class', // dark enforced via in _document theme: { colors: { transparent: 'transparent',