Dark Mode (OLED)

ui-ux-pro-maxMITWarm · warmDark · darkMedium · mediumBlue · blueVivid · vividSerif · serifGeneral · generalLanding · landing

Dark Mode (OLED). Best for Night-mode apps, coding platforms, entertainment, eye-strain prevention, OLED devices, low-light.

NNorthwind

Product · Pricing

Specimen

Make the work feel finished

One interface, dressed in this style. Compare type, color, radius, and density.

128

Active

4.8

Score

12ms

Edge

Attribution

"Dark Mode (OLED)" from https://github.com/nextlevelbuilder/ui-ux-pro-max-skill (MIT). © Next Level Builder. src/ui-ux-pro-max/data/styles.csv#dark-mode-oled @ 28b3b8dee8c9.

https://github.com/nextlevelbuilder/ui-ux-pro-max-skill · src/ui-ux-pro-max/data/styles.csv#dark-mode-oled · 28b3b8dee8c9 · © Next Level Builder

Do

Deep black #000000 or #121212
☐ Vibrant neon accents used
☐ Text contrast 7:1+
☐ Minimal glow effects
☐ OLED power optimization
☐ No white (#FFFFFF) background

Don't

Print-first content
high-brightness outdoor
color-accuracy-critical

Prompt

Create an OLED-optimized dark interface with deep black (#000000), dark grey (#121212), midnight blue accents. Use minimal glow effects, vibrant neon accents (green, blue, gold, purple), high contrast text. Optimize for eye comfort and OLED power saving.

---
"Dark Mode (OLED)" from https://github.com/nextlevelbuilder/ui-ux-pro-max-skill (MIT). © Next Level Builder. src/ui-ux-pro-max/data/styles.csv#dark-mode-oled @ 28b3b8dee8c9.
powered by Styledex — https://styledex.dev

Tokens

DTCG

{
  "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
  "$description": "Dark Mode (OLED). \"Dark Mode (OLED)\" from https://github.com/nextlevelbuilder/ui-ux-pro-max-skill (MIT). © Next Level Builder. src/ui-ux-pro-max/data/styles.csv#dark-mode-oled @ 28b3b8dee8c9.",
  "$extensions": {
    "dev.styledex": {
      "id": "uupm-dark-mode-oled",
      "license": "MIT",
      "attribution": "\"Dark Mode (OLED)\" from https://github.com/nextlevelbuilder/ui-ux-pro-max-skill (MIT). © Next Level Builder. src/ui-ux-pro-max/data/styles.csv#dark-mode-oled @ 28b3b8dee8c9.",
      "banner": "powered by Styledex — https://styledex.dev"
    }
  },
  "color": {
    "background": {
      "$type": "color",
      "$value": "#000000"
    },
    "foreground": {
      "$type": "color",
      "$value": "#fafaf9"
    },
    "card": {
      "$type": "color",
      "$value": "#000000"
    },
    "card-foreground": {
      "$type": "color",
      "$value": "#fafaf9"
    },
    "primary": {
      "$type": "color",
      "$value": "#0a0e27"
    },
    "primary-foreground": {
      "$type": "color",
      "$value": "#fafaf9"
    },
    "secondary": {
      "$type": "color",
      "$value": "#121212"
    },
    "secondary-foreground": {
      "$type": "color",
      "$value": "#fafaf9"
    },
    "accent": {
      "$type": "color",
      "$value": "#39ff14"
    },
    "accent-foreground": {
      "$type": "color",
      "$value": "#1c1917"
    },
    "muted": {
      "$type": "color",
      "$value": "#0f0f0f"
    },
    "muted-foreground": {
      "$type": "color",
      "$value": "#a3a3a2"
    },
    "border": {
      "$type": "color",
      "$value": "#242424"
    },
    "destructive": {
      "$type": "color",
      "$value": "#dc2626"
    },
    "ring": {
      "$type": "color",
      "$value": "#0a0e27"
    }
  },
  "font": {
    "sans": {
      "$type": "fontFamily",
      "$value": [
        "ui-sans-serif",
        "system-ui",
        "sans-serif"
      ]
    },
    "serif": {
      "$type": "fontFamily",
      "$value": [
        "ui-serif",
        "Georgia",
        "serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "monospace"
      ]
    }
  },
  "radius": {
    "base": {
      "$type": "dimension",
      "$value": "0.5rem"
    }
  },
  "spacing": {
    "base": {
      "$type": "dimension",
      "$value": "1rem"
    }
  },
  "shadow": {
    "base": {
      "$type": "shadow",
      "$value": "0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04)"
    }
  }
}

CSS

/* powered by Styledex — https://styledex.dev */
/* "Dark Mode (OLED)" from https://github.com/nextlevelbuilder/ui-ux-pro-max-skill (MIT). © Next Level Builder. src/ui-ux-pro-max/data/styles.csv#dark-mode-oled @ 28b3b8dee8c9. */
:root {
  --background: #000000;
  --foreground: #fafaf9;
  --card: #000000;
  --card-foreground: #fafaf9;
  --primary: #0a0e27;
  --primary-foreground: #fafaf9;
  --secondary: #121212;
  --secondary-foreground: #fafaf9;
  --accent: #39ff14;
  --accent-foreground: #1c1917;
  --muted: #0f0f0f;
  --muted-foreground: #a3a3a2;
  --border: #242424;
  --destructive: #dc2626;
  --ring: #0a0e27;
  --radius: 0.5rem;
  --font-sans: ui-sans-serif, system-ui, sans-serif;
  --font-serif: ui-serif, Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --spacing: 1rem;
  --shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04);
}

Tailwind

/* powered by Styledex — https://styledex.dev */
/* "Dark Mode (OLED)" from https://github.com/nextlevelbuilder/ui-ux-pro-max-skill (MIT). © Next Level Builder. src/ui-ux-pro-max/data/styles.csv#dark-mode-oled @ 28b3b8dee8c9. */
/** Tailwind theme extend for Dark Mode (OLED) (uupm-dark-mode-oled) */
module.exports = {
  "theme": {
    "extend": {
      "colors": {
        "background": "#000000",
        "foreground": "#fafaf9",
        "card": "#000000",
        "primary": "#0a0e27",
        "primary-foreground": "#fafaf9",
        "secondary": "#121212",
        "accent": "#39ff14",
        "muted": "#0f0f0f",
        "border": "#242424",
        "destructive": "#dc2626",
        "ring": "#0a0e27"
      },
      "borderRadius": {
        "lg": "0.5rem"
      },
      "fontFamily": {
        "sans": [
          "ui-sans-serif",
          "system-ui",
          "sans-serif"
        ],
        "serif": [
          "ui-serif",
          "Georgia",
          "serif"
        ],
        "mono": [
          "ui-monospace",
          "SFMono-Regular",
          "Menlo",
          "monospace"
        ]
      },
      "boxShadow": {
        "styledex": "0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04)"
      }
    }
  }
};

shadcn

/* powered by Styledex — https://styledex.dev */
/* "Dark Mode (OLED)" from https://github.com/nextlevelbuilder/ui-ux-pro-max-skill (MIT). © Next Level Builder. src/ui-ux-pro-max/data/styles.csv#dark-mode-oled @ 28b3b8dee8c9. */
@layer base {
:root {
  --background: #000000;
  --foreground: #fafaf9;
  --card: #000000;
  --card-foreground: #fafaf9;
  --primary: #0a0e27;
  --primary-foreground: #fafaf9;
  --secondary: #121212;
  --secondary-foreground: #fafaf9;
  --accent: #39ff14;
  --accent-foreground: #1c1917;
  --muted: #0f0f0f;
  --muted-foreground: #a3a3a2;
  --border: #242424;
  --destructive: #dc2626;
  --ring: #0a0e27;
  --radius: 0.5rem;
  --font-sans: ui-sans-serif, system-ui, sans-serif;
  --font-serif: ui-serif, Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --spacing: 1rem;
  --shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04);
}
}