corrad-software/corrad-af-2024
Template
9
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

Added New Color Theme

Browse Source
This commit is contained in:
Aiman Fakhrullah Mantasan 2025-06-17 00:28:59 +08:00
parent 3883e5ef20
commit 989b757a9f
5 changed files with 209 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.env.example
View File

@ -1,6 +0,0 @@
NUXT_ENV=
DATABASE_URL=
NUXT_ACCESS_TOKEN_SECRET=
NUXT_REFRESH_TOKEN_SECRET=
PORT=

69
assets/style/css/base/theme.css
View File

@ -225,6 +225,74 @@ html[data-theme="oren"] {
--tw-shadow: #e5eaf2;
}
html[data-theme="purplian"] {
/* Core colors */
--color-primary: 145, 54, 136; /* #913688 - Main Purple */
--color-secondary: 165, 94, 156; /* #a55e9c - Lighter Purple */
--color-accent: 241, 235, 245; /* #f1ebf5 - Very soft purple */
/* Status colors */
--color-success: 67, 160, 71; /* #43a047 - Modern green */
--color-info: 41, 121, 255; /* #2979ff - Bright blue */
--color-warning: 255, 145, 0; /* #ff9100 - Vibrant orange */
--color-danger: 229, 57, 53; /* #e53935 - Refined red */
/* Basic UI colors */
--text-color: 60, 60, 67; /* #3c3c43 - Dark gray text */
--border-color: 232, 232, 235; /* #e8e8eb - Light gray border */
--bg-1: 250, 250, 253; /* #fafafd - Almost white background */
--bg-2: 255, 255, 255; /* #ffffff - Pure white background */
/* Sidebar colors with interactive states */
--sidebar: 145, 54, 136; /* #913688 - Purple sidebar */
--sidebar-menu: 120, 40, 110; /* #78286e - Darker Purple for menu */
--sidebar-text: 255, 255, 255; /* White Text */
--sidebar-hover-bg: 165, 94, 156; /* #a55e9c - Lighter purple for hover */
--sidebar-active-bg: 100, 30, 90; /* #641e5a - Darker purple for active state */
--sidebar-selected-bg: 185, 114, 176; /* #b972b0 - Highlight purple for selected */
--sidebar-indicator: 255, 255, 255; /* #ffffff - White indicator line */
--sidebar-active-text: 255, 236, 249; /* #ffecf9 - Brighter white for active text */
--sidebar-item-spacing: 2px; /* Spacing between sidebar items */
--sidebar-item-radius: 8px; /* Rounded corners for items */
/* Header styles */
--header: 250, 250, 253; /* #fafafd - Light header */
--header-text: 60, 60, 67; /* #3c3c43 - Dark text for header */
--header-active-text: 145, 54, 136; /* #913688 - Purple for active header items */
--header-hover-bg: 241, 235, 245; /* #f1ebf5 - Very soft purple for hover */
--header-border: 232, 232, 235; /* #e8e8eb - Light border under header */
/* UI Element Colors */
--scroll-color: 220, 220, 225; /* #dcdce1 - Light gray scrollbar */
--scroll-hover-color: 145, 54, 136; /* #913688 - Purple on hover */
--fk-border-color: 232, 232, 235; /* #e8e8eb - Light gray border */
--fk-placeholder-color: 150, 150, 155; /* #96969b - Medium gray placeholder */
--fk-focus-border: 145, 54, 136; /* #913688 - Purple border on focus */
--fk-hover-border: 165, 94, 156; /* #a55e9c - Lighter purple on hover */
--box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px,
rgba(0, 0, 0, 0.04) 0px 0px 1px;
--cp-bg: 255, 255, 255; /* White Background */
/* Interactive elements */
--btn-hover-bg: 241, 235, 245; /* #f1ebf5 - Very soft purple for button hover */
--active-tab-border: 145, 54, 136; /* #913688 - Purple border for active tab */
--focus-ring: 185, 114, 176, 0.4; /* #b972b0 - Focus outline with opacity */
/* UI Settings */
--rounded-box: 0.4rem;
--rounded-btn: 0.375rem;
--rounded-badge: 1.9rem;
--animation-btn: 0.2s;
--animation-input: 0.2s;
--btn-text-case: capitalize;
--btn-focus-scale: 0.98;
--padding-btn: 0.6rem 1.2rem;
--border-btn: 1px;
--tab-border: 1px;
--tab-radius: 0.5rem;
--tw-shadow: rgba(0, 0, 0, 0.05);
}
html[data-theme="LZS"] {
--color-primary: 0, 90, 173; /* #005AAD - Blue */
--color-secondary: 141, 199, 61; /* #8DC73D - Green */
@ -266,3 +334,4 @@ html[data-theme="LZS"] {
--focus-ring: 255, 242, 0, 0.5; /* Yellow focus ring */
--tw-shadow: #e5eaf2;
}

124
composables/themeList.js
View File

@ -1,36 +1,135 @@
export default function () {
return [
{
theme: "biasa",
theme: "biru",
colors: [
{
name: "primary",
value: "243, 88, 106",
value: "0, 102, 204", // Strong blue
},
{
name: "secondary",
value: "240, 122, 37",
value: "51, 153, 255", // Lighter blue
},
{
name: "accent",
value: "243, 244, 246",
value: "255, 204, 0", // Gold
},
{
name: "background",
value: "240, 248, 255", // Alice blue
},
{
name: "text",
value: "0, 0, 0", // Black
},
],
},
{
theme: "gelap",
theme: "merah",
colors: [
{
name: "primary",
value: "243, 88, 106",
value: "204, 0, 0", // Strong red
},
{
name: "secondary",
value: "240, 122, 37",
value: "255, 102, 102", // Lighter red
},
{
name: "accent",
value: "15, 23, 42",
value: "255, 255, 153", // Light yellow
},
{
name: "background",
value: "255, 240, 240", // Very light pink
},
{
name: "text",
value: "0, 0, 0", // Black
},
],
},
{
theme: "ungu",
colors: [
{
name: "primary",
value: "75, 0, 130", // Indigo
},
{
name: "secondary",
value: "138, 43, 226", // Blue violet
},
{
name: "accent",
value: "255, 215, 0", // Gold
},
{
name: "background",
value: "240, 248, 255", // Alice blue
},
{
name: "text",
value: "0, 0, 0", // Black
},
],
},
{
theme: "oren",
colors: [
{
name: "primary",
value: "255, 103, 0", // Dark orange
},
{
name: "secondary",
value: "255, 159, 64", // Lighter orange
},
{
name: "accent",
value: "0, 128, 128", // Teal
},
{
name: "background",
value: "255, 250, 240", // Floral white
},
{
name: "text",
value: "0, 0, 0", // Black
},
],
},
{
theme: "purplian",
colors: [
{
name: "primary",
value: "145, 54, 136", // #913688 - Main Purple
},
{
name: "secondary",
value: "165, 94, 156", // #a55e9c - Lighter Purple
},
{
name: "accent",
value: "241, 235, 245", // #f1ebf5 - Very soft purple
},
{
name: "background",
value: "250, 250, 253", // #fafafd - Almost white
},
{
name: "text",
value: "60, 60, 67", // #3c3c43 - Dark gray text
},
{
name: "surface",
value: "255, 255, 255", // #ffffff - Pure white
},
{
name: "highlight",
value: "225, 207, 235", // #e1cfeb - Very soft purple highlight
},
],
},
@ -49,7 +148,16 @@ export default function () {
name: "accent",
value: "255, 242, 0", // #FFF200 - Yellow
},
{
name: "background",
value: "245, 250, 255", // Very light blue background
},
{
name: "text",
value: "0, 0, 0", // Black
},
],
},
];
}

82
composables/themeList2.js
View File

@ -1,102 +1,53 @@
export default function () {
return [
{
theme: "biru",
theme: "biasa",
colors: [
{
name: "primary",
value: "0, 102, 204", // Strong blue
value: "243, 88, 106",
},
{
name: "secondary",
value: "51, 153, 255", // Lighter blue
value: "240, 122, 37",
},
{
name: "accent",
value: "255, 204, 0", // Gold
},
{
name: "background",
value: "240, 248, 255", // Alice blue
},
{
name: "text",
value: "0, 0, 0", // Black
value: "243, 244, 246",
},
],
},
{
theme: "merah",
theme: "gelap",
colors: [
{
name: "primary",
value: "204, 0, 0", // Strong red
value: "243, 88, 106",
},
{
name: "secondary",
value: "255, 102, 102", // Lighter red
value: "240, 122, 37",
},
{
name: "accent",
value: "255, 255, 153", // Light yellow
},
{
name: "background",
value: "255, 240, 240", // Very light pink
},
{
name: "text",
value: "0, 0, 0", // Black
value: "15, 23, 42",
},
],
},
{
theme: "ungu",
theme: "purplian",
colors: [
{
name: "primary",
value: "75, 0, 130", // Indigo
value: "145, 54, 136", // #913688 - Main Purple
},
{
name: "secondary",
value: "138, 43, 226", // Blue violet
value: "165, 94, 156", // #a55e9c - Lighter Purple
},
{
name: "accent",
value: "255, 215, 0", // Gold
},
{
name: "background",
value: "240, 248, 255", // Alice blue
},
{
name: "text",
value: "0, 0, 0", // Black
},
],
},
{
theme: "oren",
colors: [
{
name: "primary",
value: "255, 103, 0", // Dark orange
},
{
name: "secondary",
value: "255, 159, 64", // Lighter orange
},
{
name: "accent",
value: "0, 128, 128", // Teal
},
{
name: "background",
value: "255, 250, 240", // Floral white
},
{
name: "text",
value: "0, 0, 0", // Black
value: "241, 235, 245", // #f1ebf5 - Very soft purple
},
],
},
@ -115,15 +66,8 @@ export default function () {
name: "accent",
value: "255, 242, 0", // #FFF200 - Yellow
},
{
name: "background",
value: "245, 250, 255", // Very light blue background
},
{
name: "text",
value: "0, 0, 0", // Black
},
],
},
];
}

11
prisma/schema.prisma
View File

@ -99,3 +99,14 @@ model site_settings {
settingModifiedDate DateTime? @db.DateTime(0)
siteLoginLogo String? @db.VarChar(500)
}
model ticket {
ticketId Int @id @default(autoincrement())
title String
description String
dueDate DateTime
priority String @default("medium")
status String @default("pending")
createdAt DateTime @default(now())
updatedAt DateTime
}