Switch theme to gruvbox with dark mode enforced

- config.json: theme gruvbox (was matrix_crt).
- tailwind darkMode 'class' + src/pages/_document.tsx sets <Html className="dark">,
  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 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Nt6ycjAMdUMqGTGtbKocrs
pull/59/head
Claude 2 months ago
parent c899de346e
commit fa41452bb6
No known key found for this signature in database

@ -4,7 +4,7 @@
"ascii": "MiTerm", "ascii": "MiTerm",
"ps1_hostname": "MiTerm", "ps1_hostname": "MiTerm",
"ps1_username": "MihirTalati", "ps1_username": "MihirTalati",
"theme": "matrix_crt", "theme": "gruvbox",
"repo": "https://github.com/Mihir-Null", "repo": "https://github.com/Mihir-Null",
"resume_url": "/resume.html", "resume_url": "/resume.html",
"colors": { "colors": {

@ -0,0 +1,15 @@
import { Html, Head, Main, NextScript } from 'next/document';
// Dark mode is enforced regardless of system settings: the `dark` class on
// <html> makes every Tailwind `dark:` variant apply (darkMode: 'class').
export default function Document() {
return (
<Html lang="en" className="dark">
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
);
}

@ -32,12 +32,12 @@ div#__next > div {
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background: rgba(154, 205, 50, 0.5); background: rgba(215, 153, 33, 0.5);
border-radius: 5px; border-radius: 5px;
} }
::-webkit-scrollbar-thumb:hover { ::-webkit-scrollbar-thumb:hover {
background: rgba(154, 205, 50, 0.75); background: rgba(215, 153, 33, 0.75);
} }
/* --- Prompt line --- */ /* --- Prompt line --- */
@ -46,16 +46,16 @@ div#__next > div {
} }
.ps1-separator { .ps1-separator {
color: rgba(154, 205, 50, 0.85); color: rgba(215, 153, 33, 0.85);
margin: 0 2px; margin: 0 2px;
} }
.ps1-host { .ps1-host {
color: #a4ffce; color: #8ec07c;
} }
.ps1-path { .ps1-path {
color: rgba(186, 255, 216, 0.85); color: rgba(235, 219, 178, 0.85);
margin-left: 4px; margin-left: 4px;
} }
@ -77,7 +77,7 @@ div#__next > div {
white-space: pre-wrap; white-space: pre-wrap;
} }
.tree-branch { .tree-branch {
color: rgba(154, 205, 50, 0.65); color: rgba(215, 153, 33, 0.65);
} }
.tree-row { .tree-row {
display: inline; display: inline;
@ -85,7 +85,7 @@ div#__next > div {
border-radius: 3px; border-radius: 3px;
} }
.tree-row:hover { .tree-row:hover {
background: rgba(154, 205, 50, 0.12); background: rgba(215, 153, 33, 0.12);
} }
/* --- sumfetch: flat text summary --- */ /* --- sumfetch: flat text summary --- */
@ -97,14 +97,14 @@ div#__next > div {
.sf-name { .sf-name {
font-weight: 700; font-weight: 700;
font-size: 1.05em; font-size: 1.05em;
color: #b6ff66; color: #fabd2f;
} }
.sf-title { .sf-title {
color: rgba(154, 205, 50, 0.85); color: rgba(215, 153, 33, 0.85);
font-weight: 700; font-weight: 700;
} }
.sf-key { .sf-key {
color: #9eff88; color: #a89984;
} }
.sf-link { .sf-link {
color: inherit; color: inherit;
@ -124,12 +124,12 @@ div#__next > div {
z-index: 50; z-index: 50;
font-size: 0.75rem; font-size: 0.75rem;
padding: 0.375rem 0.75rem; padding: 0.375rem 0.75rem;
border: 1px solid rgba(154, 205, 50, 0.6); border: 1px solid rgba(215, 153, 33, 0.6);
color: rgba(186, 255, 216, 0.9); color: rgba(235, 219, 178, 0.9);
text-decoration: none; text-decoration: none;
transition: background-color 0.15s ease, color 0.15s ease; transition: background-color 0.15s ease, color 0.15s ease;
} }
.resume-fab:hover { .resume-fab:hover {
background: rgba(154, 205, 50, 0.85); background: rgba(215, 153, 33, 0.85);
color: #06210f; color: #1d2021;
} }

@ -11,7 +11,7 @@ module.exports = {
'./src/pages/**/*.{js,ts,jsx,tsx}', './src/pages/**/*.{js,ts,jsx,tsx}',
'./src/components/**/*.{js,ts,jsx,tsx}', './src/components/**/*.{js,ts,jsx,tsx}',
], ],
darkMode: 'media', // or 'media' or 'class' darkMode: 'class', // dark enforced via <Html className="dark"> in _document
theme: { theme: {
colors: { colors: {
transparent: 'transparent', transparent: 'transparent',

Loading…
Cancel
Save