@aginix/ra-theme-kmitl

A react-admin theme in the KMITL (King Mongkut's Institute of Technology Ladkrabang) corporate identity — the signature สีแสด orange on a warm, flat, border-driven neutral surface. Ships matching light and dark themes plus the raw brand tokens.

Built to pair with @aginix/vulcan-data-provider for a drop-in KMITL admin panel, but works with any react-admin app.

Install

pnpm add @aginix/ra-theme-kmitl

react-admin and @mui/material are peer dependencies — the theme uses your app's existing MUI instance (it bundles none of its own).

Usage

import { Admin, Resource } from 'react-admin'
import { kmitlLightTheme, kmitlDarkTheme } from '@aginix/ra-theme-kmitl'

export const App = () => (
  <Admin theme={kmitlLightTheme} darkTheme={kmitlDarkTheme}>
    <Resource name="courses" /* … */ />
  </Admin>
)

Theme variants

The AppBar has two treatments. The default ('neutral') keeps the chrome quiet and uses orange only as an accent; 'brand' paints a full orange portal bar.

import { createKmitlTheme } from '@aginix/ra-theme-kmitl'

const brandLight = createKmitlTheme('light', { appBar: 'brand' })
const brandDark = createKmitlTheme('dark', { appBar: 'brand' })

<Admin theme={brandLight} darkTheme={brandDark}>…</Admin>

Design tokens

Import the raw brand values for anything outside the theme (login screen, splash, custom widgets):

import { KMITL_ORANGE, KMITL_FONT_FAMILY } from '@aginix/ra-theme-kmitl/tokens'

| Token | Value | Use | |---|---|---| | KMITL_ORANGE | #E35205 | Brand fill (buttons, active state). Pantone 166 C. | | KMITL_ORANGE_TEXT | #B8420A | Orange text/links on light (WCAG-AA safe). | | KMITL_ORANGE_LIGHT | #FF6A26 | Orange lifted for dark surfaces. | | KMITL_ORANGE_TINT | rgba(227,82,5,.12) | Active-nav / selection tint. | | KMITL_GREY | #666666 | Official secondary neutral. | | KMITL_WARNING | #F2A900 | Gold warning (kept off the brand orange). | | KMITL_FONT_FAMILY | "KMITL Go", … | Font stack (see below). |

Fonts

The stack leads with "KMITL Go" — KMITL's official CI typeface (Fontcraft, 2019; Thai + Latin). It is distributed only through the KMITL PR office and is not redistributable, so this package does not ship it.

• Licensed to use it? Self-host KMITL Go under that exact family name and it is picked up automatically.

• Otherwise the open fallback Anuphan (Thai + Latin) renders cleanly. Load it once in your app shell:

  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link href="https://fonts.googleapis.com/css2?family=Anuphan:wght@400;500;600;700&display=swap" rel="stylesheet" />

  or pnpm add @fontsource/anuphan and import '@fontsource/anuphan'.

Accessibility

• The raw brand orange #E35205 on white is ~3.8:1 — fine for fills (buttons, the brand AppBar) and large text, but it fails WCAG AA for body text. The theme therefore renders orange text and links in #B8420A (~5.5:1 on white).
• warning is a gold #F2A900, deliberately kept off the brand orange so a "warning" never reads as a primary action.
• Both light and dark palettes are tuned independently (dark lifts the orange to #FF6A26). These guarantees are enforced by the test suite.

Notes

• The theme is a plain, serialisable RaThemeOptions object with no runtime dependency on @mui/material — so there is only ever one MUI instance (your app's), avoiding duplicate-module styling bugs.
• Flat by design: all elevation shadows are none; separation comes from 1px borders (same philosophy as react-admin's bwTheme).