You are viewing an old version (v. 1) of this page.
The latest version is v. 3, last edited on Feb 01, 2023
(view differences
|
)
view page history | view next version >>
view page history | view next version >>
Since QB 13.0, dark theme is introduced. And now, it is easy to do some customization for both light mode and dark mode.
The CSS framework in QB 13.0 is largely based on Tailwind CSS
, you can use most of the utility classes as long as QuickBuild has already included, otherwise, you have to provide the css by yourself.
Since QB 13, add your CSS customization from QuickBuild Administration page, where you can find a tab "Css Customization" like below where you can add your css customization:
The color scheme or font system in QuickBuild is using CSS variables. So you can override a color or font by setting the CSS variables, for example, if you want to change the background to stone in dark mode, you can add the customization like below:
.dark {
--qb-body-bg: var(--qb-color-stone-800);
}
Here, -qb-body-bg is a variable and --qb-color-stone-800 is another variable which has been defined in QB system. The default color palette can be found in Tailwind site below:
https://tailwindcss.com/docs/customizing-colors
Below code list all variables (mostly are colors) we override the light them in dark mode:
.dark {
/* GLOBAL STATE COLORS */
--qb-color-success: var(--qb-color-green-500);
--qb-color-danger: var(--qb-color-red-500);
--qb-color-warning: var(--qb-color-yellow-500);
--qb-color-primary-focus: var(--qb-color-blue-400);
--qb-color-danger-focus: var(--qb-color-red-400);
--qb-color-secondary-focus: var(--qb-color-gray-400);
--qb-color-neutral-focus: var(--qb-color-neutral-400);
--qb-color-accent-focus: var(--qb-color-purple-400);
--qb-color-success-focus: var(--qb-color-green-400);
--qb-color-info-focus: var(--qb-color-cyan-400);
--qb-color-warning-focus: var(--qb-color-yellow-400);
--qb-color-primary-ring: var(--qb-color-blue-700);
--qb-color-danger-ring: var(--qb-color-red-700);
--qb-color-secondary-ring: var(--qb-color-gray-700);
--qb-color-neutral-ring: var(--qb-color-neutral-700);
--qb-color-accent-ring: var(--qb-color-purple-700);
--qb-color-success-ring: var(--qb-color-green-700);
--qb-color-info-ring: var(--qb-color-cyan-700);
--qb-color-warning-ring: var(--qb-color-yellow-700);
--qb-color-primary-light: var(--qb-color-blue-800);
--qb-color-accent-dark: var(--qb-color-purple-100);
--qb-color-accent-muted: var(--qb-color-purple-900);
--qb-color-accent-light: var(--qb-color-purple-800);
/* BACKGROUND COLORS */
--qb-color-bg-muted: var(--qb-color-neutral-800);
--qb-color-bg-base: var(--qb-color-neutral-700);
--qb-color-bg-dim: var(--qb-color-neutral-600);
--qb-color-bg-dark: var(--qb-color-neutral-500);
--qb-color-bg-default: var(--qb-color-neutral-900);
--qb-color-bg-darker: var(--qb-color-neutral-600);
--qb-color-bg-black: var(--qb-color-neutral-50);
--qb-color-bg-dialog: var(--qb-color-neutral-700);
/* TEXT COLORS */
--qb-color-text-dark: var(--qb-color-neutral-50);
--qb-color-text-emphasis: var(--qb-color-neutral-50);
--qb-color-text-default: var(--qb-color-neutral-400);
--qb-color-text-muted: var(--qb-color-neutral-500);
--qb-color-text-focus: var(--qb-color-neutral-50);
--qb-color-text-light: var(--qb-color-neutral-500);
--qb-color-text-neglected: var(--qb-color-neutral-700);
--qb-color-text-placeholder: var(--qb-color-neutral-600);
/* BORDER COLORS */
--qb-color-border-disabled: var(--qb-color-neutral-800);
--qb-color-border-light: var(--qb-color-neutral-800);
--qb-color-border-default: var(--qb-color-neutral-700);
--qb-color-border-dim: var(--qb-color-neutral-600);
--qb-color-border-dark: var(--qb-color-neutral-500);
--qb-color-border-darker: var(--qb-color-neutral-300);
--qb-color-border-black: var(--qb-color-neutral-50);
--qb-body-fg: var(--qb-color-text-default);
--qb-body-bg: var(--qb-color-neutral-900);
/* TYPOGRAPH */
--qb-headings-color: var(--qb-color-neutral-100);
--qb-link-color: var(--qb-color-blue-400);
--qb-color-link-hover: var(--qb-color-white);
/* BUTTON */
--qb-input-btn-disabled-border-color: var(--qb-color-gray-600);
/* TABLE */
--qb-table-th-bg: var(--qb-color-stone-800);
--qb-table-th-fg: var(--qb-color-stone-300);
--qb-table-th-hover-bg: var(--qb-color-stone-500);
--qb-table-th-hover-fg: var(--qb-color-stone-100);
--qb-table-th-ordered-bg: var(--qb-color-stone-600);
--qb-table-th-ordered-fg: var(--qb-color-white);
--qb-table-td-ordered-bg: var(--qb-color-neutral-700);
--qb-table-striped-bg: var(--qb-color-neutral-800);
--qb-scorecard-primary-fg: var(--qb-color-neutral-100);
--qb-table-settings-td-name-bg: var(--qb-color-stone-800);
/* ATTEIBUTES TABLE */
--qb-table-attributes-name-bg: var(--qb-color-stone-800);
--qb-table-attributes-border-color: var(--qb-color-border-default);
--qb-table-attributes-on-left-bg: var(--qb-color-blue);
--qb-table-attributes-on-right-bg: var(--qb-color-green);
--qb-table-attributes-differing-bg: var(--qb-color-yellow);
/* TREE */
--qb-tree-th-bg: var(--qb-color-black);
--qb-tree-tr-hover-bg: var(--qb-color-bg-base);
/* BOX */
--qb-box-head-bg: var(--qb-color-stone-600);
--qb-box-head-border-color: var(--qb-color-stone-600);
--qb-box-head-fg: var(--qb-color-neutral-200);
/* GADGET */
--qb-gadget-module-footer-bg: var(--qb-color-bg);
--qb-gadget-placeholder-bg: var(--qb-color-bg-muted);
--qb-gadget-placeholder-fg: var(--qb-color-text-default);
--qb-gadget-placeholder-border-color: var(--qb-color-border-dark);
/* SOURCE VIEW / DIFF */
--qb-table-sources-line-num-fg: var(--qb-color-red-600);
--qb-diff-insert-bg-color: var(--qb-color-green-900);
--qb-diff-insert-fg-color: var(--qb-color-green-50);
--qb-diff-delete-bg-color: var(--qb-color-red-900);
--qb-diff-delete-fg-color: var(--qb-color-red-50);
/* STEP GRAPH */
--qb-step-head-fg: var(--qb-color-gray-200);
--qb-step-placeholder-bg: 47 27 8;
--qb-step-head-muted-opacity: 0.3;
--qb-step-timeout-icon-color: var(--qb-color-white);
--qb-step-timeout-head-bg-opacity: 0.5;
--qb-step-idle-icon-color: var(--qb-color-gray-300);
--qb-step-hover-bg-opacity: 0.12;
/* COMMIT BLOCK */
--qb-num-block-info-bg: var(--qb-color-stone-700);
--qb-num-block-info-fg: var(--qb-color-stone-100);
--qb-num-block-add-bg: var(--qb-color-green-600);
--qb-num-block-add-fg: var(--qb-color-green-100);
--qb-num-block-modify-bg: var(--qb-color-yellow-600);
--qb-num-block-modify-fg: var(--qb-color-yellow-100);
--qb-num-block-delete-bg: var(--qb-color-red-600);
--qb-num-block-delete-fg: var(--qb-color-red-100);
--qb-swagger-opblock-bg-opacity: 0.2;
/* POPUP */
--qb-popup-bg: var(--qb-color-bg-muted);
/* JQUERY UI */
--qb-ui-dialog-titlebar-gradient-from: var(--qb-color-bg-dim);
--qb-ui-dialog-titlebar-gradient-to: var(--qb-color-bg-muted);
--qb-ui-widget-overlay-bg: var(--qb-color-neutral-600);
--qb-ui-draggable-dragging-fg: var(--qb-color-gray-800);
--qb-ui-draggable-dragging-border-color: var(--qb-color-gray-600);
/* FORM */
--qb-form-check-input-bg: var(--qb-body-bg);
--qb-form-check-input-border-color: var(--qb-color-neutral-500);
/* STATISTICS */
--qb-stats-gradient-from: var(--qb-color-neutral-700);
--qb-stats-gradient-to: var(--qb-color-neutral-800);
/* MISC COLORS */
--qb-blankslate-fg: var(--qb-color-yellow-200);
--qb-color-attention-muted: var(--qb-color-neutral-800);
}