Skip to main content

Styling

GTKX provides a CSS-in-JS styling system through the @gtkx/css package, built on top of Emotion.

Overview​

GTK uses CSS for styling, but with its own syntax and properties. GTKX bridges the gap by letting you write styles in JavaScript that get applied to GTK widgets.

import { css } from "@gtkx/css";

const buttonStyle = css`
  background: #3584e4;
  color: white;
  padding: 8px 16px;
  border-radius: 6px;
`;

<GtkButton cssClasses={[buttonStyle]} label="Styled Button" />;

Nesting​

The css function supports nesting with &:

const buttonStyle = css`
  background: #3584e4;

  &:hover {
    background: #1c71d8;
  }

  &:disabled {
    opacity: 0.5;
  }
`;

Practical Examples​

Themed Card​

const cardStyle = css`
 background: @theme_bg_color;
 border: 1px solid @borders;
 border-radius: 12px;
 padding: 16px;

 &:hover {
 background: alpha(@theme_fg_color, 0.05);
 }
`;

<GtkBox cssClasses={[cardStyle]} orientation={Gtk.Orientation.VERTICAL} spacing={8}>
 <GtkLabel label="Card Title" cssClasses={["title-3"]} />
 <GtkLabel label="Card content goes here" cssClasses={["dim-label"]} />
</GtkBox>

Conditional Styling​

const itemStyle = css`
 padding: 8px 12px;
 border-radius: 6px;
`;

const selectedStyle = css`
 background: @theme_selected_bg_color;
 color: @theme_selected_fg_color;
`;

<GtkBox orientation={Gtk.Orientation.VERTICAL} cssClasses={cx(itemStyle, isSelected && selectedStyle)}>
 {item.name}
</GtkBox>

Global Application Styles​

// styles/global.ts
import { injectGlobal } from "@gtkx/css";

injectGlobal`
 window {
 background: @theme_bg_color;
 }

 .sidebar {
 background: alpha(@theme_bg_color, 0.95);
 border-right: 1px solid @borders;
 }

 .content-area {
 padding: 24px;
 }
`;

Import in your app entry:

import "./styles/global.js";