Skip to main content
Home
Browse packagesDocsSign in

@tycrek/gruvbox-ts@1.4.0

latest

The gruvbox palette for use in TypeScript projects - https://git.tycrek.com/tycrek/gruvbox-ts

This package works with Cloudflare Workers, Node.js, Deno, BunIt is unknown whether this package works with Browsers
This package works with Cloudflare Workers
This package works with Node.js
This package works with Deno
This package works with Bun
It is unknown whether this package works with Browsers
JSR Score
94%
Published
2 weeks ago (1.4.0)

gruvbox-ts

The gruvbox palette for use in TypeScript projects

Usage

Add it to your project:

# bun
bunx jsr add @tycrek/gruvbox-ts

# deno
deno add jsr:@tycrek/gruvbox-ts

# yarn
yarn add jsr:@tycrek/gruvbox-ts

# pnpm
pnpm i jsr:@tycrek/gruvbox-ts

# npm
npx jsr add @tycrek/gruvbox-ts

Import it:

// to use the palette directly
import dark from '@tycrek/gruvbox-ts/dark';
import light from '@tycrek/gruvbox-ts/light';

console.log(dark['aqua-1']) // #689d6a
console.log(light.bg2) // #d5c4a1

// to get the stylesheet
import { toCss } from '@tycrek/gruvbox-ts';

// example route with Hono
app.get('/css/gruvbox.css', (ctx) => {
	ctx.header('Content-Type', 'text/css');
	return ctx.body(toCss('dark'));
});

// example route with Hono with prefixed variables
app.get('/css/gruvbox-dark.css', (ctx) => {
	ctx.header('Content-Type', 'text/css');
	return ctx.body(toCss('dark', 'gd'));
});

app.get('/css/gruvbox-light.css', (ctx) => {
	ctx.header('Content-Type', 'text/css');
	return ctx.body(toCss('light', 'gl'));
});

Palettes

Dark

Variable Value
--gd-bg #282828
--gd-fg #ebdbb2
--gd-bg0_h #1d2021
--gd-bg0_s #32302f
--gd-bg0 #282828
--gd-bg1 #3c3836
--gd-bg2 #504945
--gd-bg3 #665c54
--gd-bg4 #7c6f64
--gd-fg0 #fbf1c7
--gd-fg1 #ebdbb2
--gd-fg2 #d5c4a1
--gd-fg3 #bdae93
--gd-fg4 #a89984
--gd-red-1 #cc241d
--gd-red-2 #fb4934
--gd-green-1 #98971a
--gd-green-2 #b8bb26
--gd-yellow-1 #d79921
--gd-yellow-2 #fabd2f
--gd-blue-1 #458588
--gd-blue-2 #83a598
--gd-purple-1 #b16286
--gd-purple-2 #d3869b
--gd-aqua-1 #689d6a
--gd-aqua-2 #8ec07c
--gd-orange-1 #d65d0e
--gd-orange-2 #fe8019
--gd-gray-1 #a89984
--gd-gray-2 #928374

gruvbox dark

Light

Variable Value
--gl-bg #fbf1c7
--gl-fg #3c3836
--gl-bg0_h #f9f5d7
--gl-bg0_s #f2e5bc
--gl-bg0 #fbf1c7
--gl-bg1 #ebdbb2
--gl-bg2 #d5c4a1
--gl-bg3 #bdae93
--gl-bg4 #a89984
--gl-fg0 #282828
--gl-fg1 #3c3836
--gl-fg2 #504945
--gl-fg3 #665c54
--gl-fg4 #7c6f64
--gl-red-1 #cc241d
--gl-red-2 #9d0006
--gl-green-1 #98971a
--gl-green-2 #79740e
--gl-yellow-1 #d79921
--gl-yellow-2 #b57614
--gl-blue-1 #458588
--gl-blue-2 #076678
--gl-purple-1 #b16286
--gl-purple-2 #8f3f71
--gl-aqua-1 #689d6a
--gl-aqua-2 #427b58
--gl-orange-1 #d65d0e
--gl-orange-2 #af3a03
--gl-gray-1 #7c6f64
--gl-gray-2 #928374

gruvbox light

New Ticket: Report package

Please provide a reason for reporting this package. We will review your report and take appropriate action.

Please review the JSR usage policy before submitting a report.

Add Package

deno add jsr:@tycrek/gruvbox-ts

Import symbol

import * as gruvbox_ts from "@tycrek/gruvbox-ts";
or

Import directly with a jsr specifier

import * as gruvbox_ts from "jsr:@tycrek/gruvbox-ts";

Add Package

pnpm i jsr:@tycrek/gruvbox-ts
or (using pnpm 10.8 or older)
pnpm dlx jsr add @tycrek/gruvbox-ts

Import symbol

import * as gruvbox_ts from "@tycrek/gruvbox-ts";

Add Package

yarn add jsr:@tycrek/gruvbox-ts
or (using Yarn 4.8 or older)
yarn dlx jsr add @tycrek/gruvbox-ts

Import symbol

import * as gruvbox_ts from "@tycrek/gruvbox-ts";

Add Package

npx jsr add @tycrek/gruvbox-ts

Import symbol

import * as gruvbox_ts from "@tycrek/gruvbox-ts";

Add Package

bunx jsr add @tycrek/gruvbox-ts

Import symbol

import * as gruvbox_ts from "@tycrek/gruvbox-ts";