Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Variables Theme use this with a basic uikit
/*
Variables Theme
use this with a basic uikit
Change [data-theme="default"] for body
https://gist.github.com/npofopr/af373c6d02958c913ad32f2d7b945996
https://codepen.io/npofopr/pen/MdjZON
*/
:root, [data-theme="default"] {
--primary: 266, 100%;
--l: 50%;
--success: 0, 0%;
--danger: 349, 84%;
--action: 56, 100%;
--text: 120, 5%;
--energy: 318, 76%;
--global:0, 0%;
--muted: 0, 0%;
--alert-primary: 210, 86%;
--alert-success: 159, 84%;
--alert-warning: 28, 100%;
--alert-danger: 348, 83%;
--color-primary: hsl(var(--primary),var(--l));
--color-primary-active: hsl(var(--primary),calc(var(--l) - 5%));
--coloe-success: hsl(var(--success),calc(var(--l) - 37%));
--coloe-danger: hsl(var(--danger),calc(var(--l) + 13%));
--color-action: hsl(var(--action),var(--l));
--color-text: hsl(var(--text),calc(var(--l) - 20%));
--color-energy: hsl(var(--energy),calc(var(--l) - 2%));
--color-global: hsl(var(--global),calc(var(--l) - 23%));
--color-muted: hsl(var(--muted),calc(var(--l) + 10%));
--color-icon-link-active: hsl(var(--global),var(--l));
--color-alert-primary: hsl(var(--alert-primary),calc(var(--l) + 42%));
--color-alert-success: hsl(var(--alert-success),calc(var(--l) + 46%));
--color-alert-warning: hsl(var(--alert-warning),calc(var(--l) + 47%));
--color-alert-danger: hsl(var(--alert-danger),calc(var(--l) + 48%));
--color-button-primary-hover-background: hsl(var(--color-primary),calc(var(--l) - 5%));
--color-button-primary-active-background: hsl(var(--color-primary),calc(var(--l) - 10%));
--color-button-secondary-hover-background: hsl(var(--color-secondary),calc(var(--l) - 5%));
--color-button-secondary-active-background: hsl(var(--color-secondary),calc(var(--l) - 10%));
--color-button-danger-hover-background: hsl(var(--color-danger),calc(var(--l) - 5%));
--color-button-danger-active-background: hsl(var(--color-danger),calc(var(--l) - 10%));
--color-form-radio-checked-focus-background: hsl(var(--color-primary),calc(var(--l) - 10%));
}
[data-theme="yellow"] {
--primary: 41, 100%;
--l: 50%;
--success: 0, 0%;
--danger: 349, 84%;
--action: 56, 100%;
--text: 120, 5%;
--energy: 318, 76%;
--global:0, 0%;
--muted: 0, 0%;
--alert-primary: 210, 86%;
--alert-success: 159, 84%;
--alert-warning: 28, 100%;
--alert-danger: 348, 83%;
--color-primary: hsl(var(--primary),var(--l));
--color-primary-active: hsl(var(--primary),calc(var(--l) - 5%));
--coloe-success: hsl(var(--success),calc(var(--l) - 37%));
--coloe-danger: hsl(var(--danger),calc(var(--l) + 13%));
--color-action: hsl(var(--action),var(--l));
--color-text: hsl(var(--text),calc(var(--l) - 20%));
--color-energy: hsl(var(--energy),calc(var(--l) - 2%));
--color-global: hsl(var(--global),calc(var(--l) - 23%));
--color-muted: hsl(var(--muted),calc(var(--l) + 10%));
--color-icon-link-active: hsl(var(--global),var(--l));
--color-alert-primary: hsl(var(--alert-primary),calc(var(--l) + 42%));
--color-alert-success: hsl(var(--alert-success),calc(var(--l) + 46%));
--color-alert-warning: hsl(var(--alert-warning),calc(var(--l) + 47%));
--color-alert-danger: hsl(var(--alert-danger),calc(var(--l) + 48%));
--color-button-primary-hover-background: hsl(var(--color-primary),calc(var(--l) - 5%));
--color-button-primary-active-background: hsl(var(--color-primary),calc(var(--l) - 10%));
--color-button-secondary-hover-background: hsl(var(--color-secondary),calc(var(--l) - 5%));
--color-button-secondary-active-background: hsl(var(--color-secondary),calc(var(--l) - 10%));
--color-button-danger-hover-background: hsl(var(--color-danger),calc(var(--l) - 5%));
--color-button-danger-active-background: hsl(var(--color-danger),calc(var(--l) - 10%));
--color-form-radio-checked-focus-background: hsl(var(--color-primary),calc(var(--l) - 10%));
}
$global-color: var(--color-global) !default;
$global-primary-background: var(--color-primary) !default;
$global-small-font-size: 0.75rem !default;
$button-padding-horizontal: 20px !default;
$global-link-color: var(--color-primary) !default;
$global-link-hover-color: var(--color-primary-active) !default;
$icon-link-active-color: var(--color-icon-link-active) !default;
$alert-primary-background: var(--color-alert-primary) !default;
$alert-success-background: var(--color-alert-success) !default;
$alert-warning-background: var(--color-alert-warning) !default;
$alert-danger-background: var(--color-alert-danger) !default;
$button-primary-hover-background: var(--color-button-primary-hover-background) !default;
$button-primary-active-background: var(--color-button-primary-active-background) !default;
$button-secondary-hover-background: var(--color-button-secondary-hover-background) !default;
$button-secondary-active-background: var(--color-button-secondary-active-background) !default;
$button-danger-hover-background: var(--color-button-danger-hover-background) !default;
$button-danger-active-background: var(--color-button-danger-active-background) !default;
$form-radio-checked-focus-background: var(--color-form-radio-checked-focus-background) !default;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment