github
/
halo-admin
mirror of https://github.com/halo-dev/halo-admin
1
0
Fork 0
Code Issues Releases Wiki Activity

refactor: admin ui theme system 

Signed-off-by: Ryan Wang <i@ryanc.cc>
pull/588/head
Ryan Wang 2022-07-14 11:38:13 +08:00
parent 284edbbee1
commit 3027293bd4
29 changed files with 126 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -43,7 +43,7 @@
}
</style>
</head>
<body class="themeable-default">
<body>
<noscript>
<strong>
We're sorry but halo admin client doesn't work properly without

2
package.json
View File

@ -81,7 +81,7 @@
"start-server-and-test": "^1.14.0",
"tailwindcss": "^3.1.6",
"tailwindcss-safe-area": "^0.2.2",
"tailwindcss-themeable": "^1.3.0",
"tailwindcss-themer": "^2.0.1",
"typescript": "~4.7.4",
"vite": "^2.9.14",
"vite-compression-plugin": "^0.0.4",

2
packages/components/src/components/alert/Alert.vue
View File

@ -78,8 +78,8 @@ const handleClose = () => {
@apply flex-col;
@apply box-border;
@apply border;
@apply rounded-base;
padding: 12px 16px;
border-radius: 4px;
.alert-header {
@apply flex;

10
packages/components/src/components/button/Button.vue
View File

@ -94,7 +94,7 @@ function handleClick() {
</script>
<style lang="scss">
.btn {
border-radius: 4px;
@apply rounded-base;
@apply inline-flex;
@apply flex-shrink-0;
@apply cursor-pointer;
@ -131,18 +131,16 @@ function handleClick() {
border: 1px solid #d9d9d9;
.btn-icon {
color: #0e1731;
@apply text-secondary;
}
}
.btn-primary {
background: #4ccba0;
@apply text-white;
@apply text-white bg-primary;
}
.btn-secondary {
background: #0e1731;
@apply text-white;
@apply text-white bg-secondary;
}
.btn-danger {

2
packages/components/src/components/card/Card.vue
View File

@ -37,7 +37,7 @@ defineProps({
@apply bg-white;
@apply shadow-sm;
@apply overflow-hidden;
border-radius: 4px;
@apply rounded-base;
border: 1px solid #eaecf0;
.card-header {

6
packages/components/src/components/input/Input.vue
View File

@ -66,15 +66,15 @@ function handleInput(e: Event) {
@apply block;
@apply transition-all;
@apply appearance-none;
@apply rounded-base;
border: 1px solid #ced4da;
border-radius: 4px;
&:active {
border-color: #4ccba0;
@apply border-primary;
}
&:focus {
border-color: #4ccba0;
@apply border-primary;
}
&:disabled {

3
packages/components/src/components/menu/MenuItem.vue
View File

@ -85,8 +85,7 @@ function handleClick() {
@apply relative;
@apply p-2;
@apply font-normal;
border-radius: 4px;
@apply rounded-base;
&:hover,
&.active {

2
packages/components/src/components/modal/Modal.vue
View File

@ -130,9 +130,9 @@ function handleClose() {
@apply bg-white;
@apply items-stretch;
@apply shadow-xl;
@apply rounded-base;
width: calc(100vw - 20px);
max-height: calc(100vh - 20px);
border-radius: 4px;
.modal-header {
@apply flex;

7
packages/components/src/components/pagination/Pagination.vue
View File

@ -65,7 +65,7 @@ const { currentPage, pageCount, prev, next } = useOffsetPagination({
<div class="hidden sm:flex-1 sm:flex sm:items-center">
<nav
aria-label="Pagination"
class="relative z-0 inline-flex rounded-[4px] shadow-sm -space-x-px"
class="relative z-0 inline-flex rounded-base shadow-sm -space-x-px"
>
<span
class="relative inline-flex items-center px-2 py-2 rounded-l-[4px] border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 cursor-pointer"
@ -77,9 +77,8 @@ const { currentPage, pageCount, prev, next } = useOffsetPagination({
v-for="i in pageCount"
:key="i"
:class="{
'z-10 bg-themeable-primary-50 border-themeable-primary-500 text-themeable-primary-600':
i === currentPage,
'bg-white border-gray-300 text-gray-500 hover:bg-gray-50 ':
'z-10 bg-primary/1 border-primary text-primary': i === currentPage,
'bg-white border-gray-300 text-gray-500 hover:bg-gray-50':
i !== currentPage,
}"
aria-current="page"

6
packages/components/src/components/select/Select.vue
View File

@ -62,15 +62,15 @@ function handleChange(e: Event) {
@apply block;
@apply transition-all;
@apply appearance-none;
@apply rounded-base;
border: 1px solid #ced4da;
border-radius: 4px;
&:active {
border-color: #4ccba0;
@apply border-primary;
}
&:focus {
border-color: #4ccba0;
@apply border-primary;
}
&:disabled {

2
packages/components/src/components/switch/Switch.vue
View File

@ -18,7 +18,7 @@ const handleChange = () => {
<button
:class="{
'bg-gray-200': !modelValue,
'!bg-themeable-primary-600': modelValue,
'!bg-primary': modelValue,
}"
aria-checked="false"
class="switch-inner"

12
packages/components/src/components/tabs/Tabbar.vue
View File

@ -100,8 +100,8 @@ const handleChange = (id: number | string) => {
border-bottom-width: 2px;
&.tabbar-item-active {
color: #0e1731;
border-bottom-color: #0e1731;
@apply text-secondary;
@apply border-b-secondary;
}
}
}
@ -117,7 +117,7 @@ const handleChange = (id: number | string) => {
@apply px-9;
@apply py-1;
@apply opacity-70;
border-radius: 4px;
@apply rounded-base;
&.tabbar-item-active {
@apply bg-gray-100;
@ -133,7 +133,7 @@ const handleChange = (id: number | string) => {
&.tabbar-outline {
@apply p-1;
@apply bg-gray-100;
border-radius: 4px;
@apply rounded-base;
.tabbar-items {
@apply gap-1;
@ -145,7 +145,7 @@ const handleChange = (id: number | string) => {
@apply px-9;
@apply py-1;
@apply opacity-70;
border-radius: 4px;
@apply rounded-base;
&.tabbar-item-active {
@apply bg-white;
@ -186,7 +186,7 @@ const handleChange = (id: number | string) => {
border-right-width: 2px;
&.tabbar-item-active {
border-right-color: #0e1731;
@apply border-r-secondary;
}
}
}

11
packages/components/src/components/tag/Tag.vue
View File

@ -33,7 +33,7 @@ const classes = computed(() => {
</template>
<style lang="scss">
.tag-wrapper {
border-radius: 4px;
@apply rounded-base;
@apply inline-flex;
@apply flex-shrink-0;
@apply flex-wrap;
@ -46,21 +46,18 @@ const classes = computed(() => {
@apply align-middle;
@apply h-5;
@apply text-xs;
@apply border border-solid;
&.tag-default {
border: 1px solid #d9d9d9;
}
&.tag-primary {
background: #4ccba0;
border: 1px solid #4ccba0;
@apply text-white;
@apply text-white bg-primary border-primary;
}
&.tag-secondary {
background: #0e1731;
border: 1px solid #0e1731;
@apply text-white;
@apply text-white bg-secondary border-secondary;
}
&.tag-danger {

6
packages/components/src/components/textarea/Textarea.vue
View File

@ -53,15 +53,15 @@ function handleInput(e: Event) {
@apply p-3;
@apply text-sm;
@apply rounded-base;
border: 1px solid #ced4da;
border-radius: 4px;
&:active {
border-color: #4ccba0;
@apply border-primary;
}
&:focus {
border-color: #4ccba0;
@apply border-primary;
}
&:disabled {

23
packages/components/tailwind.config.js
View File

@ -1,24 +1,3 @@
const { themeable } = require("tailwindcss-themeable");
module.exports = {
content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
theme: {
extend: {},
},
plugins: [
require("tailwindcss-safe-area"),
require("@tailwindcss/aspect-ratio"),
themeable({
defaultTheme: "default",
themes: [
{
name: "default",
palette: {
primary: "#4CCBA0",
secondary: "#0E1731",
},
},
],
}),
],
...require("../../tailwind.config"),
};

3
packages/shared/src/layouts/BasicLayout.vue
View File

@ -81,8 +81,7 @@ const handleRouteToProfile = () => {
<!--bottom nav bar-->
<div
class="bottom-nav-bar fixed left-0 bottom-0 right-0 grid grid-cols-6 border-t-2 border-black drop-shadow-2xl mt-safe pb-safe md:hidden"
style="background: #0e1731"
class="bottom-nav-bar fixed left-0 bottom-0 right-0 grid grid-cols-6 border-t-2 border-black drop-shadow-2xl mt-safe pb-safe md:hidden bg-secondary"
>
<div
v-for="(menu, index) in minimenus"

49
pnpm-lock.yaml
View File

@ -53,7 +53,7 @@ importers:
start-server-and-test: ^1.14.0
tailwindcss: ^3.1.6
tailwindcss-safe-area: ^0.2.2
tailwindcss-themeable: ^1.3.0
tailwindcss-themer: ^2.0.1
typescript: ~4.7.4
uuid: ^8.3.2
vite: ^2.9.14
@ -124,7 +124,7 @@ importers:
start-server-and-test: 1.14.0
tailwindcss: 3.1.6
tailwindcss-safe-area: 0.2.2
tailwindcss-themeable: 1.3.0
tailwindcss-themer: 2.0.1_tailwindcss@3.1.6
typescript: 4.7.4
vite: 2.9.14_sass@1.53.0
vite-compression-plugin: 0.0.4
@ -3527,6 +3527,21 @@ packages:
/color-name/1.1.4:
resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
/color-string/1.9.1:
resolution: {integrity: sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==}
dependencies:
color-name: 1.1.4
simple-swizzle: 0.2.2
dev: true
/color/4.2.3:
resolution: {integrity: sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==}
engines: {node: '>=12.5.0'}
dependencies:
color-convert: 2.0.1
color-string: 1.9.1
dev: true
/colorette/2.0.16:
resolution: {integrity: sha512-hUewv7oMjCp+wkBv5Rm0v87eJhq4woh5rSR+42YSQJKecCqgIqNkZ6lAlQms/BwHPJA5NKMRlpxPRv0n8HQW6g==}
dev: true
@ -5236,6 +5251,10 @@ packages:
resolution: {integrity: sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==}
dev: true
/is-arrayish/0.3.2:
resolution: {integrity: sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==}
dev: true
/is-bigint/1.0.4:
resolution: {integrity: sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==}
dependencies:
@ -5624,6 +5643,10 @@ packages:
verror: 1.10.0
dev: true
/just-unique/4.0.1:
resolution: {integrity: sha512-rUeSLN44eynoLqpWa/J73f4fGEGoUxBw+3KPCABN2CkCQuP/7WYS6BSQ8/YIIB5wAEdzfHeJhYPfoYIi95UywA==}
dev: true
/kind-of/6.0.3:
resolution: {integrity: sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==}
engines: {node: '>=0.10.0'}
@ -5747,6 +5770,10 @@ packages:
resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
dev: true
/lodash.mergewith/4.6.2:
resolution: {integrity: sha512-GK3g5RPZWTRSeLSpgP8Xhra+pnjBC56q9FZYe1d5RN3TJ35dbkGy3YqBSMbyCrlbi+CM9Z3Jk5yTL7RCsqboyQ==}
dev: true
/lodash.once/4.1.1:
resolution: {integrity: sha512-Sb487aTOCr9drQVL8pIxOzVhafOjZN9UU54hiN8PU3uAiSV7lx1yYNpbNmex2PK6dSJoNTSJUUswT651yww3Mg==}
dev: true
@ -6884,6 +6911,12 @@ packages:
resolution: {integrity: sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==}
dev: true
/simple-swizzle/0.2.2:
resolution: {integrity: sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==}
dependencies:
is-arrayish: 0.3.2
dev: true
/sirv/2.0.2:
resolution: {integrity: sha512-4Qog6aE29nIjAOKe/wowFTxOdmbEZKb+3tsLljaBRzJwtqto0BChD2zzH0LhgCSXiI+V7X+Y45v14wBZQ1TK3w==}
engines: {node: '>= 10'}
@ -7196,8 +7229,16 @@ packages:
resolution: {integrity: sha512-sygGuEFFBBzjqR6d2gB9hDW9xX/4yLt7ymhR2E/XVa6Ar4B86Net8/9EmPAsqFUvXY40+W0HnXwFavFJEM+eCQ==}
dev: true
/tailwindcss-themeable/1.3.0:
resolution: {integrity: sha512-AmZrk3yAZaJqfrbGast24KrFDtD21rwil05xuqNMFPWTswCHyFugetPk9vy1X+KD4ZTAFWZwW2ULov6VUeK/1A==}
/tailwindcss-themer/2.0.1_tailwindcss@3.1.6:
resolution: {integrity: sha512-A6bS7rDjGIgK29Xl3J6B+vnI4bRvYSzoyintxKf2MoTONJnHsRI/heJ+cjUfK+z1q7QX6VFZn1pgyiX69Re0Pw==}
peerDependencies:
tailwindcss: ^3.1.0
dependencies:
color: 4.2.3
just-unique: 4.0.1
lodash.merge: 4.6.2
lodash.mergewith: 4.6.2
tailwindcss: 3.1.6
dev: true
/tailwindcss/3.1.6:

2
src/formkit/theme.ts
View File

@ -2,7 +2,7 @@ const textClassification = {
label: "block font-bold text-sm formkit-invalid:text-red-500 w-56",
wrapper: "flex flex-col sm:flex-row items-start sm:items-center",
inner:
"inline-flex items-center w-full relative box-border border border-gray-300 formkit-invalid:border-red-500 rounded-[4px] overflow-hidden focus-within:border-themeable-primary-500 mt-2 sm:mt-0",
"inline-flex items-center w-full relative box-border border border-gray-300 formkit-invalid:border-red-500 rounded-base overflow-hidden focus-within:border-primary mt-2 sm:mt-0",
input:
"outline-0 bg-white antialiased resize-none w-full text-black block transition-all appearance-none h-9 px-3 text-sm",
};

6
src/modules/contents/attachments/AttachmentList.vue
View File

@ -293,7 +293,7 @@ onMounted(() => {
<ul class="mt-2 space-y-2">
<li>
<div
class="inline-flex w-96 cursor-pointer flex-row gap-x-3 rounded border p-3 hover:border-themeable-primary"
class="inline-flex w-96 cursor-pointer flex-row gap-x-3 rounded border p-3 hover:border-primary"
>
<RouterLink
:to="{
@ -312,7 +312,7 @@ onMounted(() => {
</li>
<li>
<div
class="inline-flex w-96 cursor-pointer flex-row gap-x-3 rounded border p-3 hover:border-themeable-primary"
class="inline-flex w-96 cursor-pointer flex-row gap-x-3 rounded border p-3 hover:border-primary"
>
<RouterLink
:to="{
@ -638,7 +638,7 @@ onMounted(() => {
>
<div
v-show="checkAll"
class="absolute inset-y-0 left-0 w-0.5 bg-themeable-primary"
class="absolute inset-y-0 left-0 w-0.5 bg-primary"
></div>
<div class="relative flex flex-row items-center">
<div class="mr-4 hidden items-center sm:flex">

2
src/modules/contents/comments/CommentList.vue
View File

@ -91,7 +91,7 @@ const checkAll = ref(false);
>
<div
v-show="checkAll"
class="absolute inset-y-0 left-0 w-0.5 bg-themeable-primary"
class="absolute inset-y-0 left-0 w-0.5 bg-primary"
></div>
<div class="relative flex flex-row items-center">
<div class="mr-4 hidden items-center sm:flex">

2
src/modules/contents/pages/PageList.vue
View File

@ -282,7 +282,7 @@ onMounted(() => {
>
<div
v-show="checkAll"
class="absolute inset-y-0 left-0 w-0.5 bg-themeable-primary"
class="absolute inset-y-0 left-0 w-0.5 bg-primary"
></div>
<div class="relative flex flex-row items-center">
<div class="mr-4 hidden items-center sm:flex">

2
src/modules/contents/posts/PostList.vue
View File

@ -343,7 +343,7 @@ onMounted(() => {
>
<div
v-show="selected?.id === post.id || post.checked"
class="absolute inset-y-0 left-0 w-0.5 bg-themeable-primary"
class="absolute inset-y-0 left-0 w-0.5 bg-primary"
></div>
<div class="relative flex flex-row items-center">
<div class="mr-4 hidden items-center sm:flex">

6
src/modules/interface/themes/ThemeDetail.vue
View File

@ -47,7 +47,7 @@ const handleChangeTheme = (theme: any) => {
<div class="flex items-center">
<div
v-show="theme.activated"
class="absolute inset-y-0 left-0 w-0.5 bg-themeable-primary"
class="absolute inset-y-0 left-0 w-0.5 bg-primary"
></div>
<div class="w-40 px-4">
<div
@ -242,7 +242,7 @@ const handleChangeTheme = (theme: any) => {
<ul class="mt-2 space-y-2">
<li>
<div
class="inline-flex w-96 cursor-pointer flex-row flex-col gap-y-3 rounded border p-5 hover:border-themeable-primary"
class="inline-flex w-96 cursor-pointer flex-row flex-col gap-y-3 rounded border p-5 hover:border-primary"
>
<RouterLink
:to="{
@ -262,7 +262,7 @@ const handleChangeTheme = (theme: any) => {
</li>
<li>
<div
class="inline-flex w-96 cursor-pointer flex-row flex-col gap-y-3 rounded border p-5 hover:border-themeable-primary"
class="inline-flex w-96 cursor-pointer flex-row flex-col gap-y-3 rounded border p-5 hover:border-primary"
>
<span class="font-medium hover:text-blue-400">
run.halo.plugins.photos

8
src/modules/system/plugins/PluginDetail.vue
View File

@ -299,7 +299,7 @@ onMounted(handleFetchPlugin);
<ul class="space-y-2">
<li>
<div
class="inline-flex w-72 cursor-pointer flex-row items-center gap-4 rounded border p-5 hover:border-themeable-primary"
class="inline-flex w-72 cursor-pointer flex-row items-center gap-4 rounded border p-5 hover:border-primary"
>
<input
class="h-4 w-4 rounded border-gray-300 text-indigo-600"
@ -317,7 +317,7 @@ onMounted(handleFetchPlugin);
</li>
<li>
<div
class="inline-flex w-72 cursor-pointer items-center gap-4 rounded border p-5 hover:border-themeable-primary"
class="inline-flex w-72 cursor-pointer items-center gap-4 rounded border p-5 hover:border-primary"
>
<input
class="h-4 w-4 rounded border-gray-300 text-indigo-600"
@ -346,7 +346,7 @@ onMounted(handleFetchPlugin);
<ul class="space-y-2">
<li>
<div
class="inline-flex w-72 cursor-pointer flex-row items-center gap-4 rounded border p-5 hover:border-themeable-primary"
class="inline-flex w-72 cursor-pointer flex-row items-center gap-4 rounded border p-5 hover:border-primary"
>
<input
class="h-4 w-4 rounded border-gray-300 text-indigo-600"
@ -364,7 +364,7 @@ onMounted(handleFetchPlugin);
</li>
<li>
<div
class="inline-flex w-72 cursor-pointer items-center gap-4 rounded border p-5 hover:border-themeable-primary"
class="inline-flex w-72 cursor-pointer items-center gap-4 rounded border p-5 hover:border-primary"
>
<input
class="h-4 w-4 rounded border-gray-300 text-indigo-600"

2
src/modules/system/roles/RoleDetail.vue
View File

@ -300,7 +300,7 @@ onMounted(() => {
<ul class="space-y-2">
<li v-for="(role, index) in group.roles" :key="index">
<div
class="inline-flex w-72 cursor-pointer flex-row items-center gap-4 rounded border p-5 hover:border-themeable-primary"
class="inline-flex w-72 cursor-pointer flex-row items-center gap-4 rounded border p-5 hover:border-primary"
>
<input
v-model="formState.selectedRoleTemplates"

2
src/modules/system/roles/components/RoleCreationModal.vue
View File

@ -162,7 +162,7 @@ watch(
<ul class="space-y-2">
<li v-for="(role, index) in group.roles" :key="index">
<div
class="inline-flex w-72 cursor-pointer flex-row items-center gap-4 rounded border p-5 hover:border-themeable-primary"
class="inline-flex w-72 cursor-pointer flex-row items-center gap-4 rounded border p-5 hover:border-primary"
>
<input
v-model="creationFormState.selectedRoleTemplates"

16
src/modules/system/users/PersonalAccessTokens.vue
View File

@ -54,7 +54,7 @@ onMounted(() => {
<ul class="space-y-2">
<li>
<div
class="inline-flex w-72 cursor-pointer flex-row items-center gap-4 rounded border p-5 hover:border-themeable-primary"
class="inline-flex w-72 cursor-pointer flex-row items-center gap-4 rounded border p-5 hover:border-primary"
>
<input
class="h-4 w-4 rounded border-gray-300 text-indigo-600"
@ -72,7 +72,7 @@ onMounted(() => {
</li>
<li>
<div
class="inline-flex w-72 cursor-pointer items-center gap-4 rounded border p-5 hover:border-themeable-primary"
class="inline-flex w-72 cursor-pointer items-center gap-4 rounded border p-5 hover:border-primary"
>
<input
class="h-4 w-4 rounded border-gray-300 text-indigo-600"
@ -98,7 +98,7 @@ onMounted(() => {
<ul class="space-y-2">
<li>
<div
class="inline-flex w-72 cursor-pointer flex-row items-center gap-4 rounded border p-5 hover:border-themeable-primary"
class="inline-flex w-72 cursor-pointer flex-row items-center gap-4 rounded border p-5 hover:border-primary"
>
<input
class="h-4 w-4 rounded border-gray-300 text-indigo-600"
@ -116,7 +116,7 @@ onMounted(() => {
</li>
<li>
<div
class="inline-flex w-72 cursor-pointer items-center gap-4 rounded border p-5 hover:border-themeable-primary"
class="inline-flex w-72 cursor-pointer items-center gap-4 rounded border p-5 hover:border-primary"
>
<input
class="h-4 w-4 rounded border-gray-300 text-indigo-600"
@ -140,7 +140,7 @@ onMounted(() => {
<ul class="space-y-2">
<li>
<div
class="inline-flex w-72 cursor-pointer flex-row items-center gap-4 rounded border p-5 hover:border-themeable-primary"
class="inline-flex w-72 cursor-pointer flex-row items-center gap-4 rounded border p-5 hover:border-primary"
>
<input
class="h-4 w-4 rounded border-gray-300 text-indigo-600"
@ -158,7 +158,7 @@ onMounted(() => {
</li>
<li>
<div
class="inline-flex w-72 cursor-pointer items-center gap-4 rounded border p-5 hover:border-themeable-primary"
class="inline-flex w-72 cursor-pointer items-center gap-4 rounded border p-5 hover:border-primary"
>
<input
class="h-4 w-4 rounded border-gray-300 text-indigo-600"
@ -185,7 +185,7 @@ onMounted(() => {
<ul class="space-y-2">
<li>
<div
class="inline-flex w-72 cursor-pointer flex-row items-center gap-4 rounded border p-5 hover:border-themeable-primary"
class="inline-flex w-72 cursor-pointer flex-row items-center gap-4 rounded border p-5 hover:border-primary"
>
<input
class="h-4 w-4 rounded border-gray-300 text-indigo-600"
@ -203,7 +203,7 @@ onMounted(() => {
</li>
<li>
<div
class="inline-flex w-72 cursor-pointer items-center gap-4 rounded border p-5 hover:border-themeable-primary"
class="inline-flex w-72 cursor-pointer items-center gap-4 rounded border p-5 hover:border-primary"
>
<input
class="h-4 w-4 rounded border-gray-300 text-indigo-600"

2
src/modules/system/users/UserList.vue
View File

@ -215,7 +215,7 @@ onMounted(() => {
>
<div
v-show="checkAll"
class="absolute inset-y-0 left-0 w-0.5 bg-themeable-primary"
class="absolute inset-y-0 left-0 w-0.5 bg-primary"
></div>
<div class="relative flex flex-row items-center">
<div class="mr-4 hidden items-center sm:flex">

29
tailwind.config.js
View File

@ -1,5 +1,3 @@
const { themeable } = require("tailwindcss-themeable");
module.exports = {
content: [
"./index.html",
@ -13,15 +11,30 @@ module.exports = {
require("tailwindcss-safe-area"),
require("@tailwindcss/aspect-ratio"),
require("@formkit/themes/tailwindcss"),
themeable({
defaultTheme: "default",
themes: [
{
name: "default",
palette: {
require("tailwindcss-themer")({
defaultTheme: {
extend: {
colors: {
primary: "#4CCBA0",
secondary: "#0E1731",
},
borderRadius: {
base: "4px",
},
},
},
themes: [
{
name: "theme-dark",
extend: {
colors: {
primary: "black",
secondary: "#0E1731",
},
borderRadius: {
base: "2px",
},
},
},
],
}),