Skip to content

colors ​

Read Windows system colors, detect dark mode, and access the accent color. Ideal for building widgets that adapt to the user's system theme.

javascript
import { colors } from "system";

Availability

Available in the Main script only.

Table of Contents ​

Methods ​

colors.get() #
colors

Returns all system colors as an object with color properties. Each color property contains hex, r, g, b, and a values.

Return value properties:

Property Type Description
isDarkMode boolean Whether the system is in dark mode
accent object System accent color
window object Window background color
windowText object Window text color
highlight object Highlight color (e.g., selected text background)
highlightText object Highlight text color
hotTracking object Hot tracking color (e.g., hover effects)
buttonFace object Button face color
buttonText object Button text color
grayText object Grayed-out text color
background object Desktop background color
activeBorder object Active window border color
inactiveBorder object Inactive window border color
menu object Menu background color
menuText object Menu text color

Color object format:

Property Type Description
hex string Hex color string (e.g., "#FF00FF")
r number Red component (0–255)
g number Green component (0–255)
b number Blue component (0–255)
a number Alpha component (0–255, always 255 for system colors)
RETURNS: object
javascript
import { colors } from "system";

const sysColors = colors.get();
console.log("Dark mode:", sysColors.isDarkMode);
console.log("Accent:", sysColors.accent.hex);
console.log("Window:", sysColors.window.hex);
colors.isDarkMode() #
colors

Returns whether the system is currently using a dark color scheme.

RETURNS: boolean true if the system is using a dark theme, false otherwise.
javascript
import { colors } from "system";

if (colors.isDarkMode()) {
  console.log("System is in dark mode");
} else {
  console.log("System is in light mode");
}
colors.getAccent() #
colors

Returns the system accent color. This is the color Windows uses for highlights, selected items, and other UI accents.

RETURNS: object Color object with hex, r, g, b, a properties.
javascript
import { colors } from "system";

const accent = colors.getAccent();
console.log("Accent color:", accent.hex);
console.log("RGB:", accent.r, accent.g, accent.b);
colors.getColor(name) #
colors

Returns a specific system color by name. The name comparison is case-insensitive.

Supported color names:

Name Aliases Description
accent — System accent color
window — Window background color
windowText — Window text color
highlight — Highlight color
highlightText — Highlight text color
hotTracking hotlight Hot tracking color
buttonFace face, 3dface Button face color
buttonText btntext Button text color
grayText — Grayed-out text color
background desktop Desktop background color
activeBorder — Active window border color
inactiveBorder — Inactive window border color
menu — Menu background color
menuText — Menu text color

PARAMETERS

name string
Color name (case-insensitive). See supported names below.
RETURNS: object | undefined Color object with hex, r, g, b, a properties, or undefined if the name is not recognized.
javascript
import { colors } from "system";

// Get accent color
const accent = colors.getColor("accent");
console.log("Accent:", accent.hex);

// Get window background
const window = colors.getColor("window");
console.log("Window bg:", window.hex);

// Case-insensitive
const btn = colors.getColor("ButtonFace");
console.log("Button face:", btn.hex);

Practical Examples ​

Adapt widget colors to system theme

javascript
import { colors } from "system";

const isDark = colors.isDarkMode();
const bgColor = isDark ? "rgb(30,30,30)" : "rgb(240,240,240)";
const textColor = isDark ? "rgb(230,230,230)" : "rgb(30,30,30)";

console.log("Background:", bgColor);
console.log("Text:", textColor);

Use system accent color in UI

javascript
import { colors } from "system";

const accent = colors.getAccent();
const accentRgb = `rgb(${accent.r},${accent.g},${accent.b})`;

console.log("Use accent for highlights:", accentRgb);

Get all system colors for theming

javascript
import { colors } from "system";

const sysColors = colors.get();
console.log("Is dark mode:", sysColors.isDarkMode);
console.log("Accent:", sysColors.accent.hex);
console.log("Window:", sysColors.window.hex);
console.log("WindowText:", sysColors.windowText.hex);
console.log("Highlight:", sysColors.highlight.hex);
console.log("Button face:", sysColors.buttonFace.hex);