AdminThemeUikit · v36
ProcessWire CMS

Konkat Default
Design System

Default AdminThemeUikit skin for ProcessWire 3.0.255+. Native uk-* classes, ProcessWire admin patterns, and runtime --pw-* tokens for light and dark mode.

Accent Colors

Three presets from ready.php: red (#eb1d61), green (#14ae85), blue (#2380e6). Custom via defaultMainColorCustom.

Click to change --pw-main-color across all components.

Colors & Design Tokens

CSS custom properties using light-dark(). Defined on :root in themes/default/admin-custom.css.

Core Palette
Main Color
--pw-main-color
#eb1d61
Text
--pw-text-color
light:#111 / dark:#fff
Muted
--pw-muted-color
Border
--pw-border-color
Main Background
--pw-main-background
light:#eee / dark:#222
Inputs Background
--pw-inputs-background
light:#f8f8f8 / dark:#161616
Blocks Background
--pw-blocks-background
light:#fff / dark:#000
Code Background
--pw-code-background
Alert Colors
Primary
--pw-alert-primary
Success
--pw-alert-success
Warning
--pw-alert-warning
Danger
--pw-alert-danger
Button & Shape Tokens
TokenLightDark
--pw-button-radius99999px (pill)
--pw-input-radius0 (sharp)
--pw-button-backgroundvar(--pw-text-color)var(--pw-main-color)
--pw-button-colorvar(--pw-blocks-background)var(--pw-text-color)
--pw-button-hover-backgroundvar(--pw-main-color)var(--pw-text-color)
--pw-button-muted-background#737373#404040

Typography

UIkit heading classes. Font: Inter (400, 600). Loaded as WOFF2 from themes/default/fonts/.

uk-h1 — Page Title

uk-h2 — Section Heading

uk-h3 — Subsection

uk-h4 — Inputfield Group

uk-h5 — Small Heading
uk-h6 — Micro Heading

Body text — field descriptions and general content.

uk-text-small uk-text-muted — Helper text, field notes.

uk-text-lead — Intro paragraphs.

uk-text-meta — Dates, metadata.

$page->get('title') — Inline code.

Link Styles

uk-link-muted

uk-link-text

uk-link-heading

uk-link-toggle wrapper

Buttons

Konkat keeps UIkit button classes but changes their hierarchy: uk-button and uk-button-primary are the filled ProcessWire action style, while uk-button-default is the bordered/ghost style.

Large

Large Primary Large Secondary Large Default Large Danger

Default

Small

Text & Link

 

uk-button-group
With Icons

Save Button with Dropdown (pw-button-dropdown-wrap)

From InputfieldSubmit/dropdown.js: the original submit button keeps ui-button and often pw-head-button; JavaScript adds pw-button-dropdown-main and creates a sibling pw-button-dropdown-toggle.

Dropdown Actions (pw-button-dropdown)

Form Elements

From setClasses(): uk-input, uk-select, uk-textarea, uk-checkbox, uk-radio. Sizes: uk-form-small, uk-form-large. Widths: uk-form-width-medium, uk-form-width-small, uk-form-width-xsmall, uk-form-width-large.





uk-placeholder

Drag and drop or browse.

Validation States
Horizontal Layout (uk-form-horizontal)
Vertical Layout (uk-form-vertical — stacked labels, this is the module default)
Fieldset & Legend
Page Settings

Labels & Badges

uk-label, uk-label-success, uk-label-warning, uk-label-danger. uk-badge.

Labels

Default Success Warning Danger

Badges

1 24 99+

Alerts

uk-alert, uk-alert-primary, uk-alert-success, uk-alert-warning, uk-alert-danger.

Page saved successfully.

Module installed: InputfieldTinyMCE

Page is unpublished.

Error: Required field "title" is missing.

Note: Field notes use --pw-notes-background.

Tables

Default: uk-table uk-table-divider uk-table-justify uk-table-small. Extras: uk-table-striped, uk-table-hover.

uk-table uk-table-divider uk-table-justify uk-table-small
TitleTemplateModifiedStatus
Homehome2026-01-15Published
Aboutbasic-page2026-01-14Published
Blogblog2026-01-12Draft
uk-table-striped uk-table-hover
ModuleVersionActions
InputfieldTinyMCE0.9.4Configure
ProcessPageList1.2.1Configure
AdminThemeUikit36Configure

Tab & Subnav

uk-tab
uk-subnav
uk-subnav uk-subnav-pill
uk-subnav uk-subnav-divider
uk-tab (uk-tab-left)

Vertical tab left — uk-tab-left

Dotnav (uk-dotnav)
Iconnav (uk-iconnav)

Cards

Default

uk-card-default

Primary

uk-card-primary

Secondary

uk-card-secondary

Muted

uk-card-muted

Hover

uk-card-hover

Small

uk-card-small

Card with Header, Footer & Badge
New

Card Header

Card with uk-card-header, uk-card-body, uk-card-footer, and uk-card-badge.

Read more

Accordion

Icons

uk-icon, uk-icon-button, uk-icon-link, uk-svg.

Common Admin Icons
home
cog
users
search
plus
trash
pencil
check
close
warning
info
bolt
folder
image
download
upload
copy
move
Icon Variants

Spinner

uk-spinner

Progress

Lists

uk-list with variants: uk-list-divider, uk-list-striped, uk-list-bullet, uk-list-disc, uk-list-circle, uk-list-square, uk-list-hyphen, uk-list-decimal, uk-list-muted, uk-list-emphasis, uk-list-primary, uk-list-secondary, uk-list-large, uk-list-collapse.

uk-list uk-list-divider
  • Home
  • About Us
  • Blog
  • Contact
uk-list uk-list-striped
  • Home
  • About Us
  • Blog
  • Contact
uk-list uk-list-bullet
  • Home
  • About Us
  • Blog
  • Contact
uk-list-disc / uk-list-circle / uk-list-square
  • Disc item
  • Disc item
  • Circle item
  • Circle item
  • Square item
  • Square item
uk-list-hyphen / uk-list-decimal
  • Hyphen item
  • Hyphen item
  • Decimal item
  • Decimal item
Marker colors
  • uk-list-muted
  • uk-list-emphasis
  • uk-list-primary
  • uk-list-secondary

Heading Styles

Decorative heading classes: uk-heading-small through uk-heading-3xlarge. Plus uk-heading-divider, uk-heading-bullet, uk-heading-line.

uk-heading-small

uk-heading-medium

uk-heading-large

uk-heading-divider

uk-heading-bullet

uk-heading-line

xlarge

2xlarge

Dividers
uk-divider-icon
uk-divider-small

Sections & Tiles

uk-section / uk-section-default / uk-section-muted / uk-section-primary / uk-section-secondary. uk-tile variants: uk-tile-default / uk-tile-muted / uk-tile-primary / uk-tile-secondary.

uk-tile-default
var(--pw-blocks-background)
uk-tile-muted
var(--pw-main-background)
uk-tile-primary
var(--pw-main-color)
uk-tile-secondary
var(--pw-inputs-background)
Section Sizes

uk-section-xsmall, uk-section-small, uk-section-large, uk-section-xlarge — control vertical padding.

Overlay & Marker

uk-overlay, uk-overlay-default, uk-overlay-primary. uk-marker.

uk-overlay uk-overlay-primary uk-position-bottom

uk-marker shown top-right. uk-overlay-default uses --pw-modal-color.

Slidenav

uk-slidenav for image gallery / slider navigation.

 

uk-slidenav-previous / uk-slidenav-next

 

uk-slidenav-large

Text Utilities

All uk-text-* classes used in the admin CSS overrides.

Colors

uk-text-muted

uk-text-primary

uk-text-secondary

uk-text-success

uk-text-warning

uk-text-danger

uk-text-emphasis

Alignment

uk-text-left

uk-text-center

uk-text-right

Weight & Transform

uk-text-bold

uk-text-light

uk-text-italic

uk-text-uppercase

uk-text-capitalize

UK-TEXT-LOWERCASE

Sizing

uk-text-small

uk-text-default

uk-text-large

uk-text-lead

uk-text-meta

Overflow

uk-text-truncate — This text will be truncated with an ellipsis if too long

uk-text-break — Superlongwordthatwillbreakifneeded

uk-text-nowrap — This text will never wrap to a new line

Utility Classes

Background, visibility, width, flex, grid, and other utility classes used in the admin.

Backgrounds
uk-background-default
uk-background-muted
uk-background-primary
uk-background-secondary
Visibility

uk-hidden, uk-visible@s, uk-visible@m, uk-visible@l, uk-hidden-hover, uk-invisible

Widths (from templates)
uk-width-1-3
uk-width-2-3
uk-width-auto
uk-width-expand

Also: uk-width-1-1, uk-width-1-2, uk-width-1-4, uk-width-1-5, uk-width-1-6, uk-child-width-*

Flex
uk-flex-left uk-flex-between uk-flex-right

uk-flex, uk-flex-middle, uk-flex-center, uk-flex-between, uk-flex-wrap, uk-flex-column, uk-flex-first, uk-flex-last

Grid

uk-grid, uk-grid-small, uk-grid-medium, uk-grid-large, uk-grid-collapse, uk-grid-divider, uk-grid-match, uk-grid-margin

uk-grid-divider
Column 2
Column 3
Other

uk-clearfix, uk-float-right, uk-float-left, uk-overflow-auto, uk-inline, uk-margin-remove, uk-margin-remove-top, uk-padding-small, uk-logo-inverse

Konkat Helpers

pw-text-main-color pw-bg-main-color

pw-text-main-color applies --pw-main-color. pw-bg-main-color applies main color background, border, and contrasting text.

Masthead

From _masthead.php: uk-navbar, uk-navbar-container, uk-navbar-transparent, uk-container uk-container-expand, uk-navbar-left, uk-navbar-right, uk-navbar-nav, uk-logo.

Default
Colored Masthead Variant

Inputfield Wrappers

Real ProcessWire wrapper markup from InputfieldWrapper: ul.Inputfields, li.Inputfield, label.InputfieldHeader, and div.InputfieldContent. Use this structure for native module forms.

Standard Inputfield Form

  • Required page title.

  • Notes use the same muted admin text pattern.

InputfieldFieldset

States

  • Field is required.

Repeater Header + useBoldItemHeaders

Module Guidelines

From themes/default/KONKAT_THEME.md: standard ProcessWire Inputfields inherit the skin automatically. Custom Process module markup should use scoped selectors, UIkit components, and --pw-* variables instead of hardcoded colors.

Preferred Module Form API
$form = $this->modules->get('InputfieldForm'); $f = $this->modules->get('InputfieldText'); $f->name = 'title'; $f->label = 'Title'; $f->required = true; $form->add($f); $fs = $this->modules->get('InputfieldFieldset'); $fs->label = 'Settings'; $form->add($fs); $select = $this->modules->get('InputfieldSelect'); $select->name = 'status'; $select->label = 'Status'; $select->addOptions(['published' => 'Published', 'hidden' => 'Hidden']); $fs->add($select); return $form->render();

pw-wrap Panel

A custom Process module view can use pw-wrap to get the same panel background, border, spacing, and dark-mode behavior as core admin screens.

Use Tokens

Brand, border, text, background, and alert colors should come from --pw-main-color, --pw-border-color, --pw-text-color, and related variables.

Scope Custom CSS

Module-specific CSS should be scoped to a module container, for example .MyModule .status-indicator, so it does not leak into the admin.

Example
<div class="pw-wrap MyModule"> <h2>My Module</h2> <p class="pw-text-main-color">Token-aware highlight</p> <span class="uk-badge pw-bg-main-color">Active</span> </div>

Modal

uk-modal-dialog, uk-modal-header, uk-modal-body, uk-modal-footer, uk-modal-title, uk-modal-close-default.

Confirm Delete

Are you sure you want to delete this page?

Light/dark mode

    

Offcanvas

uk-offcanvas, uk-offcanvas-bar. From _offcanvas.php.

Notifications

Pagination

Description List

From setClasses(): uk-description-list uk-description-list-divider.

Template
basic-page
Parent
/home/about/
Created
2026-01-10 14:30
Modified
2026-01-15 09:22
Created By
admin

Comment

uk-comment, uk-comment-header, uk-comment-body, uk-comment-meta, uk-comment-primary.

Admin User

Comment component used in page edit discussions. uk-comment-primary highlights important comments.

Panel & Scrollable

uk-panel, uk-panel-scrollable.

uk-panel-scrollable
  • Page: Home
  • Page: About Us
  • Page: Services
  • Page: Blog
  • Page: Blog Post 1
  • Page: Blog Post 2
  • Page: Blog Post 3
  • Page: Contact
  • Page: Privacy Policy
  • Page: Terms
  • Page: Sitemap
  • Page: 404

CSS Overrides & Config

Colored Masthead
:root { --pw-masthead-background: var(--pw-main-color); --pw-masthead-active-color: white; --pw-masthead-text-color: rgba(255,255,255,0.8); --pw-masthead-border-color: var(--pw-main-background); --pw-masthead-logo-color: white; --pw-masthead-input-background: var(--pw-masthead-background); --pw-masthead-input-color: var(--pw-masthead-active-color); --pw-masthead-input-border: var(--pw-masthead-text-color); --pw-masthead-menu-item-background-hover: rgba(255,255,255,.2); }
Borderless
:root { --pw-border-color: var(--pw-main-background); --pw-inputs-background: var(--pw-blocks-background); }
Konkat Theme Files
wire/modules/AdminTheme/AdminThemeUikit/themes/default/ KONKAT_THEME.md admin-custom.css admin.css admin.js config.php ready.php examples/borderless.css examples/masthead.css examples/minimal.css toggles/useBoldItemHeaders.css toggles/usePageListButtons.css toggles/useInputFocus.css toggles/InputfieldTable.css
AdminThemeUikit Theme Settings
// Installer/config theme names themeName = "default" // Konkat default themeName = "original" // Core original // Konkat settings from themes/default/config.php defaultStyleName = "light" | "dark" | "auto" defaultMainColor = "red" | "green" | "blue" | "custom" defaultMainColorCustom = "#eb1d61" defaultMainColorCustomDark = "#eb1d61" defaultCustomCssFile = "/site/templates/styles/my-skin.css"
CSS Toggles (themes/default/ready.php)

useInputFocus useBoldItemHeaders usePageListButtons useTogcbx use2Colors noUserMenu

TinyMCE Integration

When TinyMCE uses the default oxide skin, Konkat swaps in skin.min.css and content.css. The editor content imports admin-custom.css, so the same --pw-* variables apply inside rich text fields.

setClasses() — Module Constructor
$this->setClasses([ 'input' => 'uk-input', 'input-small' => 'uk-input uk-form-small', 'input-checkbox' => 'uk-checkbox', 'input-radio' => 'uk-radio', 'input-password' => 'uk-input uk-form-width-medium', 'select' => 'uk-select', 'select-asm' => 'uk-select uk-form-small', 'select-small' => 'uk-select uk-form-small', 'textarea' => 'uk-textarea', 'table' => 'uk-table uk-table-divider uk-table-justify uk-table-small', 'dl' => 'uk-description-list uk-description-list-divider', ]);