CSS_VARS.md
# CSS Variables
This list contains all CSS variables used in Voyagers stylesheet.
Each variable (expect `font-family`) has a corresponding `-dark` variable.
For example `bg-color` also exists as `bg-color-dark`
## Accent
- **accent-active-color** = theme('colors.blue.800')
- **accent-active-color-dark** = theme('colors.blue.800')
- **accent-bg-color** = theme('colors.blue.500')
- **accent-bg-color-dark** = theme('colors.blue.500')
- **accent-border-color** = theme('colors.blue.500')
- **accent-border-color-dark** = theme('colors.blue.500')
- **accent-focus-color** = theme('colors.blue.700')
- **accent-focus-color-dark** = theme('colors.blue.700')
- **accent-hover-color** = theme('colors.blue.600')
- **accent-hover-color-dark** = theme('colors.blue.600')
- **accent-text-color** = theme('colors.blue.500')
- **accent-text-color-dark** = theme('colors.blue.500')
## Bg
- **bg-color** = theme('colors.gray.100')
- **bg-color-dark** = theme('colors.gray.900')
## Card
- **card-bg-color** = theme('colors.white')
- **card-bg-color-dark** = theme('colors.gray.800')
- **card-border-color** = theme('colors.gray.400')
- **card-border-color-dark** = theme('colors.gray.700')
- **card-text-color** = theme('colors.gray.700')
- **card-text-color-dark** = theme('colors.gray.300')
- **card-title-color** = theme('colors.gray.700')
- **card-title-color-dark** = theme('colors.gray.300')
## Code
- **code-bg-color** = theme('colors.gray.300')
- **code-bg-color-dark** = theme('colors.gray.900')
- **code-text-color** = theme('colors.gray.800')
- **code-text-color-dark** = theme('colors.gray.200')
## Description
- **description-text-color** = theme('colors.gray.800')
- **description-text-color-dark** = theme('colors.gray.200')
## Dropdown
- **dropdown-bg-color** = theme('colors.white')
- **dropdown-bg-color-dark** = theme('colors.gray.900')
- **dropdown-border-color** = theme('colors.gray.400')
- **dropdown-border-color-dark** = theme('colors.gray.700')
- **dropdown-divider-border-color** = theme('colors.gray.300')
- **dropdown-divider-border-color-dark** = theme('colors.gray.700')
- **dropdown-link-color** = theme('colors.blue.600')
- **dropdown-link-color-dark** = theme('colors.blue.600')
- **dropdown-link-hover-color** = theme('colors.gray.100')
- **dropdown-link-hover-color-dark** = theme('colors.gray.800')
## Input
- **input-bg-color** = theme('colors.white')
- **input-bg-color-dark** = theme('colors.gray.700')
- **input-border-color** = theme('colors.gray.500')
- **input-border-color-dark** = theme('colors.gray.600')
- **input-text-color** = theme('colors.gray.800')
- **input-text-color-dark** = theme('colors.gray.200')
## Label
- **label-text-color** = theme('colors.gray.800')
- **label-text-color-dark** = theme('colors.gray.200')
## Link
- **link-color** = theme('colors.blue.600')
- **link-color-dark** = theme('colors.blue.600')
## Loader
- **loader-bg-color** = theme('colors.gray.100')
- **loader-bg-color-dark** = theme('colors.gray.800')
- **loader-text-color** = theme('colors.black')
- **loader-text-color-dark** = theme('colors.gray.200')
## Media
- **media-bg-color** = theme('colors.white')
- **media-bg-color-dark** = theme('colors.gray.850')
- **media-border-color** = theme('colors.gray.300')
- **media-border-color-dark** = theme('colors.gray.700')
- **media-breadcrumbs-bg-color** = theme('colors.gray.150')
- **media-breadcrumbs-bg-color-dark** = theme('colors.gray.800')
- **media-breadcrumbs-border-color** = theme('colors.gray.300')
- **media-breadcrumbs-border-color-dark** = theme('colors.gray.700')
- **media-item-bg-color** = theme('colors.gray.100')
- **media-item-bg-color-dark** = theme('colors.gray.800')
- **media-item-border-color** = theme('colors.gray.300')
- **media-item-border-color-dark** = theme('colors.gray.700')
- **media-item-hover-bg-color** = theme('colors.gray.200')
- **media-item-hover-bg-color-dark** = theme('colors.gray.700')
- **media-item-selected-bg-color** = theme('colors.gray.250')
- **media-item-selected-bg-color-dark** = theme('colors.gray.750')
- **media-item-selected-border-color** = theme('colors.blue.300')
- **media-item-selected-border-color-dark** = theme('colors.blue.700')
- **media-sidebar-bg-color** = theme('colors.white')
- **media-sidebar-bg-color-dark** = theme('colors.gray.800')
- **media-sidebar-border-color** = theme('colors.gray.300')
- **media-sidebar-border-color-dark** = theme('colors.gray.700')
## Notification
- **notification-bg-color** = theme('colors.white')
- **notification-bg-color-dark** = theme('colors.gray.800')
- **notification-message-color** = theme('colors.gray.500')
- **notification-message-color-dark** = theme('colors.gray.500')
- **notification-title-color** = theme('colors.gray.900')
- **notification-title-color-dark** = theme('colors.gray.100')
## Scrollbar
- **scrollbar-bg-color** = theme('colors.gray.250')
- **scrollbar-bg-color-dark** = theme('colors.gray.800')
- **scrollbar-handle-color** = theme('colors.gray.400')
- **scrollbar-handle-color-dark** = theme('colors.gray.600')
## Select
- **select-bg-color** = theme('colors.white')
- **select-bg-color** = theme('colors.gray.400')
- **select-bg-color-dark** = theme('colors.gray.800')
- **select-bg-color-dark** = theme('colors.gray.600')
- **select-bg-focused-color** = theme('colors.gray.100')
- **select-bg-focused-color-dark** = theme('colors.gray.750')
- **select-bg-selected-color** = theme('colors.gray.150')
- **select-bg-selected-color-dark** = theme('colors.gray.700')
- **select-text-color** = theme('colors.gray.900')
- **select-text-color-dark** = theme('colors.gray.100')
- **select-text-focused-color** = theme('colors.gray.900')
- **select-text-focused-color-dark** = theme('colors.gray.100')
- **select-text-selected-color** = theme('colors.gray.900')
- **select-text-selected-color-dark** = theme('colors.gray.100')
## Sidebar
- **sidebar-bg-color** = theme('colors.gray.800')
- **sidebar-bg-color-dark** = theme('colors.gray.800')
- **sidebar-border-color** = theme('colors.gray.600')
- **sidebar-border-color-dark** = theme('colors.gray.700')
- **sidebar-icon-color** = theme('colors.gray.200')
- **sidebar-icon-color-dark** = theme('colors.gray.200')
- **sidebar-item-active-color** = theme('colors.gray.700')
- **sidebar-item-active-color-dark** = theme('colors.gray.900')
- **sidebar-item-hover-color** = theme('colors.gray.600')
- **sidebar-item-hover-color-dark** = theme('colors.gray.700')
- **sidebar-item-icon-active-color** = theme('colors.gray.300')
- **sidebar-item-icon-active-color-dark** = theme('colors.gray.200')
- **sidebar-item-icon-color** = theme('colors.gray.300')
- **sidebar-item-icon-color-dark** = theme('colors.gray.300')
- **sidebar-item-text-active-color** = theme('colors.gray.300')
- **sidebar-item-text-active-color-dark** = theme('colors.gray.200')
- **sidebar-item-text-color** = theme('colors.gray.300')
- **sidebar-item-text-color-dark** = theme('colors.gray.300')
- **sidebar-sub-item-color** = theme('colors.gray.850')
- **sidebar-sub-item-color-dark** = theme('colors.gray.850')
- **sidebar-title-color** = theme('colors.gray.200')
- **sidebar-title-color-dark** = theme('colors.gray.200')
## Table
- **table-border-color** = theme('colors.gray.300')
- **table-border-color-dark** = theme('colors.gray.600')
- **table-head-bg-color** = theme('colors.gray.100')
- **table-head-bg-color-dark** = theme('colors.transparent')
- **table-head-border-color** = theme('colors.gray.300')
- **table-head-border-color-dark** = theme('colors.gray.600')
- **table-head-text-color** = theme('colors.gray.900')
- **table-head-text-color-dark** = theme('colors.gray.400')
- **table-row-border-color** = theme('colors.gray.300')
- **table-row-border-color-dark** = theme('colors.gray.600')
- **table-row-even-bg-color** = theme('colors.transparent')
- **table-row-even-bg-color-dark** = theme('colors.transparent')
- **table-row-even-bg-color-hover** = theme('colors.gray.100')
- **table-row-even-bg-color-hover-dark** = theme('colors.gray.700')
- **table-row-even-text-color** = theme('colors.gray.700')
- **table-row-even-text-color-dark** = theme('colors.gray.400')
- **table-row-even-text-color-hover** = theme('colors.gray.800')
- **table-row-even-text-color-hover-dark** = theme('colors.gray.400')
- **table-row-odd-bg-color** = theme('colors.gray.50')
- **table-row-odd-bg-color-dark** = theme('colors.gray.750')
- **table-row-odd-bg-color-hover** = theme('colors.gray.150')
- **table-row-odd-bg-color-hover-dark** = theme('colors.gray.700')
- **table-row-odd-text-color** = theme('colors.gray.800')
- **table-row-odd-text-color-dark** = theme('colors.gray.400')
- **table-row-odd-text-color-hover** = theme('colors.gray.800')
- **table-row-odd-text-color-hover-dark** = theme('colors.gray.400')
## Tabs
- **tabs-border-color** = theme('colors.gray.200')
- **tabs-border-color-active** = theme('colors.blue.500')
- **tabs-border-color-active-dark** = theme('colors.blue.500')
- **tabs-border-color-dark** = theme('colors.gray.700')
- **tabs-border-color-hover** = theme('colors.gray.300')
- **tabs-border-color-hover-dark** = theme('colors.gray.500')
- **tabs-text-color** = theme('colors.gray.400')
- **tabs-text-color-active** = theme('colors.blue.600')
- **tabs-text-color-active-dark** = theme('colors.blue.600')
- **tabs-text-color-dark** = theme('colors.gray.400')
- **tabs-text-color-hover** = theme('colors.gray.700')
- **tabs-text-color-hover-dark** = theme('colors.gray.500')
## Text
- **text-color** = theme('colors.gray.700')
- **text-color-dark** = theme('colors.gray.300')
## Tooltip
- **tooltip-arrow-border-color** = theme('colors.gray.900')
- **tooltip-arrow-border-color-dark** = theme('colors.gray.900')
- **tooltip-bg-color** = theme('colors.gray.900')
- **tooltip-bg-color-dark** = theme('colors.gray.900')
- **tooltip-border-color** = theme('colors.gray.700')
- **tooltip-border-color-dark** = theme('colors.gray.700')
- **tooltip-text-color** = theme('colors.white')
- **tooltip-text-color-dark** = theme('colors.white')
For convenience, here is a usable stylesheet:
```css
:root {
/* Accent */
accent-active-color: theme('colors.blue.800');
accent-active-color-dark: theme('colors.blue.800');
accent-bg-color: theme('colors.blue.500');
accent-bg-color-dark: theme('colors.blue.500');
accent-border-color: theme('colors.blue.500');
accent-border-color-dark: theme('colors.blue.500');
accent-focus-color: theme('colors.blue.700');
accent-focus-color-dark: theme('colors.blue.700');
accent-hover-color: theme('colors.blue.600');
accent-hover-color-dark: theme('colors.blue.600');
accent-text-color: theme('colors.blue.500');
accent-text-color-dark: theme('colors.blue.500');
/* Bg */
bg-color: theme('colors.gray.100');
bg-color-dark: theme('colors.gray.900');
/* Card */
card-bg-color: theme('colors.white');
card-bg-color-dark: theme('colors.gray.800');
card-border-color: theme('colors.gray.400');
card-border-color-dark: theme('colors.gray.700');
card-text-color: theme('colors.gray.700');
card-text-color-dark: theme('colors.gray.300');
card-title-color: theme('colors.gray.700');
card-title-color-dark: theme('colors.gray.300');
/* Code */
code-bg-color: theme('colors.gray.300');
code-bg-color-dark: theme('colors.gray.900');
code-text-color: theme('colors.gray.800');
code-text-color-dark: theme('colors.gray.200');
/* Description */
description-text-color: theme('colors.gray.800');
description-text-color-dark: theme('colors.gray.200');
/* Dropdown */
dropdown-bg-color: theme('colors.white');
dropdown-bg-color-dark: theme('colors.gray.900');
dropdown-border-color: theme('colors.gray.400');
dropdown-border-color-dark: theme('colors.gray.700');
dropdown-divider-border-color: theme('colors.gray.300');
dropdown-divider-border-color-dark: theme('colors.gray.700');
dropdown-link-color: theme('colors.blue.600');
dropdown-link-color-dark: theme('colors.blue.600');
dropdown-link-hover-color: theme('colors.gray.100');
dropdown-link-hover-color-dark: theme('colors.gray.800');
/* Input */
input-bg-color: theme('colors.white');
input-bg-color-dark: theme('colors.gray.700');
input-border-color: theme('colors.gray.500');
input-border-color-dark: theme('colors.gray.600');
input-text-color: theme('colors.gray.800');
input-text-color-dark: theme('colors.gray.200');
/* Label */
label-text-color: theme('colors.gray.800');
label-text-color-dark: theme('colors.gray.200');
/* Link */
link-color: theme('colors.blue.600');
link-color-dark: theme('colors.blue.600');
/* Loader */
loader-bg-color: theme('colors.gray.100');
loader-bg-color-dark: theme('colors.gray.800');
loader-text-color: theme('colors.black');
loader-text-color-dark: theme('colors.gray.200');
/* Media */
media-bg-color: theme('colors.white');
media-bg-color-dark: theme('colors.gray.850');
media-border-color: theme('colors.gray.300');
media-border-color-dark: theme('colors.gray.700');
media-breadcrumbs-bg-color: theme('colors.gray.150');
media-breadcrumbs-bg-color-dark: theme('colors.gray.800');
media-breadcrumbs-border-color: theme('colors.gray.300');
media-breadcrumbs-border-color-dark: theme('colors.gray.700');
media-item-bg-color: theme('colors.gray.100');
media-item-bg-color-dark: theme('colors.gray.800');
media-item-border-color: theme('colors.gray.300');
media-item-border-color-dark: theme('colors.gray.700');
media-item-hover-bg-color: theme('colors.gray.200');
media-item-hover-bg-color-dark: theme('colors.gray.700');
media-item-selected-bg-color: theme('colors.gray.250');
media-item-selected-bg-color-dark: theme('colors.gray.750');
media-item-selected-border-color: theme('colors.blue.300');
media-item-selected-border-color-dark: theme('colors.blue.700');
media-sidebar-bg-color: theme('colors.white');
media-sidebar-bg-color-dark: theme('colors.gray.800');
media-sidebar-border-color: theme('colors.gray.300');
media-sidebar-border-color-dark: theme('colors.gray.700');
/* Notification */
notification-bg-color: theme('colors.white');
notification-bg-color-dark: theme('colors.gray.800');
notification-message-color: theme('colors.gray.500');
notification-message-color-dark: theme('colors.gray.500');
notification-title-color: theme('colors.gray.900');
notification-title-color-dark: theme('colors.gray.100');
/* Scrollbar */
scrollbar-bg-color: theme('colors.gray.250');
scrollbar-bg-color-dark: theme('colors.gray.800');
scrollbar-handle-color: theme('colors.gray.400');
scrollbar-handle-color-dark: theme('colors.gray.600');
/* Select */
select-bg-color: theme('colors.white');
select-bg-color: theme('colors.gray.400');
select-bg-color-dark: theme('colors.gray.800');
select-bg-color-dark: theme('colors.gray.600');
select-bg-focused-color: theme('colors.gray.100');
select-bg-focused-color-dark: theme('colors.gray.750');
select-bg-selected-color: theme('colors.gray.150');
select-bg-selected-color-dark: theme('colors.gray.700');
select-text-color: theme('colors.gray.900');
select-text-color-dark: theme('colors.gray.100');
select-text-focused-color: theme('colors.gray.900');
select-text-focused-color-dark: theme('colors.gray.100');
select-text-selected-color: theme('colors.gray.900');
select-text-selected-color-dark: theme('colors.gray.100');
/* Sidebar */
sidebar-bg-color: theme('colors.gray.800');
sidebar-bg-color-dark: theme('colors.gray.800');
sidebar-border-color: theme('colors.gray.600');
sidebar-border-color-dark: theme('colors.gray.700');
sidebar-icon-color: theme('colors.gray.200');
sidebar-icon-color-dark: theme('colors.gray.200');
sidebar-item-active-color: theme('colors.gray.700');
sidebar-item-active-color-dark: theme('colors.gray.900');
sidebar-item-hover-color: theme('colors.gray.600');
sidebar-item-hover-color-dark: theme('colors.gray.700');
sidebar-item-icon-active-color: theme('colors.gray.300');
sidebar-item-icon-active-color-dark: theme('colors.gray.200');
sidebar-item-icon-color: theme('colors.gray.300');
sidebar-item-icon-color-dark: theme('colors.gray.300');
sidebar-item-text-active-color: theme('colors.gray.300');
sidebar-item-text-active-color-dark: theme('colors.gray.200');
sidebar-item-text-color: theme('colors.gray.300');
sidebar-item-text-color-dark: theme('colors.gray.300');
sidebar-sub-item-color: theme('colors.gray.850');
sidebar-sub-item-color-dark: theme('colors.gray.850');
sidebar-title-color: theme('colors.gray.200');
sidebar-title-color-dark: theme('colors.gray.200');
/* Table */
table-border-color: theme('colors.gray.300');
table-border-color-dark: theme('colors.gray.600');
table-head-bg-color: theme('colors.gray.100');
table-head-bg-color-dark: theme('colors.transparent');
table-head-border-color: theme('colors.gray.300');
table-head-border-color-dark: theme('colors.gray.600');
table-head-text-color: theme('colors.gray.900');
table-head-text-color-dark: theme('colors.gray.400');
table-row-border-color: theme('colors.gray.300');
table-row-border-color-dark: theme('colors.gray.600');
table-row-even-bg-color: theme('colors.transparent');
table-row-even-bg-color-dark: theme('colors.transparent');
table-row-even-bg-color-hover: theme('colors.gray.100');
table-row-even-bg-color-hover-dark: theme('colors.gray.700');
table-row-even-text-color: theme('colors.gray.700');
table-row-even-text-color-dark: theme('colors.gray.400');
table-row-even-text-color-hover: theme('colors.gray.800');
table-row-even-text-color-hover-dark: theme('colors.gray.400');
table-row-odd-bg-color: theme('colors.gray.50');
table-row-odd-bg-color-dark: theme('colors.gray.750');
table-row-odd-bg-color-hover: theme('colors.gray.150');
table-row-odd-bg-color-hover-dark: theme('colors.gray.700');
table-row-odd-text-color: theme('colors.gray.800');
table-row-odd-text-color-dark: theme('colors.gray.400');
table-row-odd-text-color-hover: theme('colors.gray.800');
table-row-odd-text-color-hover-dark: theme('colors.gray.400');
/* Tabs */
tabs-border-color: theme('colors.gray.200');
tabs-border-color-active: theme('colors.blue.500');
tabs-border-color-active-dark: theme('colors.blue.500');
tabs-border-color-dark: theme('colors.gray.700');
tabs-border-color-hover: theme('colors.gray.300');
tabs-border-color-hover-dark: theme('colors.gray.500');
tabs-text-color: theme('colors.gray.400');
tabs-text-color-active: theme('colors.blue.600');
tabs-text-color-active-dark: theme('colors.blue.600');
tabs-text-color-dark: theme('colors.gray.400');
tabs-text-color-hover: theme('colors.gray.700');
tabs-text-color-hover-dark: theme('colors.gray.500');
/* Text */
text-color: theme('colors.gray.700');
text-color-dark: theme('colors.gray.300');
/* Tooltip */
tooltip-arrow-border-color: theme('colors.gray.900');
tooltip-arrow-border-color-dark: theme('colors.gray.900');
tooltip-bg-color: theme('colors.gray.900');
tooltip-bg-color-dark: theme('colors.gray.900');
tooltip-border-color: theme('colors.gray.700');
tooltip-border-color-dark: theme('colors.gray.700');
tooltip-text-color: theme('colors.white');
tooltip-text-color-dark: theme('colors.white');
}
```
And a small hackish script to extract all CSS variables from Voyagers assets.
Please change the pathes accordingly.
Also note that this script will only work when assets are **not** compiled for production:
```php
$as_md = false; // Set this to true if you want to generate the markdown list seen above, false for the stylesheet
$content = file_get_contents(base_path().'/vendor/voyager-admin/voyager/resources/assets/dist/css/voyager.css');
$content .= file_get_contents(base_path().'/vendor/voyager-admin/voyager/resources/assets/dist/js/voyager.js');
preg_match_all('/\/*\sVARIABLE:([^ ]+)\s\*\//', $content, $matches);
$vars = collect($matches[1])->transform(function ($match, $key) use ($as_md) {
list($name, $default) = explode('|', Str::after($match, 'VARIABLE:'));
return [
'name' => $name,
'section' => Str::before($name, '-'),
'default' => $default,
];
})->unique()->sortBy('name')->groupBy('section')->each(function ($vars, $group) use ($as_md) {
if ($as_md) {
echo '## ' . ucfirst($group) . '<br>';
} else {
echo '/* ' . ucfirst($group) . ' */<br>';
}
$vars->each(function ($var) use ($as_md) {
if ($as_md) {
if (Str::startsWith($var['default'], 'colors.')) {
echo '- **' . $var['name'] . '** = theme(\''.$var['default'].'\')<br>';
} else {
echo '- **' . $var['name'] . '** = '.$var['default'].'<br>';
}
} else {
if (Str::startsWith($var['default'], 'colors.')) {
echo $var['name'] . ': theme(\''.$var['default'].'\');<br>';
} else {
echo $var['name'] . ': '.$var['default'].';<br>';
}
}
});
echo '<br>';
});
```