From e803452a0071164cf1369d846ad5f4eaad56c1ae Mon Sep 17 00:00:00 2001
From: lukman <lukman@lukmans-MacBook-Air.local>
Date: Fri, 13 Sep 2024 11:58:55 +0800
Subject: [PATCH] style : update tema

Deskripsi:
- update calender
- update color palette
- update discussion
- update division
- update task

No Issue
---
 .../calender/ui/create_user_calender.tsx      | 30 +++++++++------
 .../ui/create_user_detail_calender.tsx        | 22 ++++++-----
 .../calender/ui/date_event_division.tsx       |  3 +-
 .../calender/ui/dawer_division_calender.tsx   | 12 +++---
 .../calender/ui/detail_event_division.tsx     | 28 +++++++-------
 .../calender/ui/drawer_detail_event.tsx       | 16 ++++----
 .../calender/ui/history_division_calender.tsx | 12 +++---
 .../ui/navbar_create_division_calender.tsx    | 15 ++++----
 .../calender/ui/navbar_division_calender.tsx  |  6 ++-
 .../calender/ui/update_division_calender.tsx  |  8 ++--
 src/module/calender/ui/update_list_users.tsx  | 21 +++++-----
 .../color_palette/ui/create_palette_color.tsx | 22 ++++++++---
 .../ui/drawer_create_palette.tsx              |  8 ++--
 .../ui/drawer_palet_edit_end_default.tsx      | 10 ++---
 .../color_palette/ui/edit_palette_color.tsx   | 21 ++++++++--
 .../color_palette/ui/list_color_palette.tsx   | 10 +++--
 .../discussion/ui/detail_discussion.tsx       | 23 +++++------
 .../ui/drawer_detail_discussion.tsx           | 19 +++++-----
 .../discussion/ui/drawer_list_discussion.tsx  |  8 ++--
 .../discussion/ui/form_create_discussion.tsx  |  8 ++--
 .../discussion/ui/form_edit_discussion.tsx    |  8 ++--
 src/module/discussion/ui/list_discussion.tsx  | 12 +++---
 .../ui/navbar_detail_discussion.tsx           |  5 ++-
 .../discussion/ui/navbar_list_discussion.tsx  |  6 ++-
 .../division_new/ui/carousel_division.tsx     | 10 +++--
 .../ui/create_anggota_division.tsx            | 20 +++++-----
 .../division_new/ui/create_division.tsx       | 15 ++++----
 src/module/division_new/ui/create_report.tsx  | 10 +++--
 .../ui/drawer_detail_division.tsx             | 12 +++---
 .../division_new/ui/drawer_division.tsx       | 15 ++++----
 .../division_new/ui/echart_bar_report.tsx     |  6 ++-
 .../division_new/ui/echart_pai_report.tsx     |  6 ++-
 src/module/division_new/ui/edit_division.tsx  |  8 ++--
 .../ui/feature_detail_division.tsx            | 38 ++++++++++---------
 .../division_new/ui/information_division.tsx  | 23 +++++------
 .../division_new/ui/list_discussion.tsx       |  6 ++-
 src/module/division_new/ui/list_division.tsx  | 30 ++++++++-------
 src/module/division_new/ui/list_document.tsx  |  6 ++-
 src/module/division_new/ui/list_task.tsx      | 10 +++--
 .../division_new/ui/navbar_admin_division.tsx | 11 +++---
 .../division_new/ui/navbar_create_users.tsx   | 21 +++++-----
 .../ui/navbar_detail_division.tsx             |  6 ++-
 .../division_new/ui/report_division_id.tsx    | 10 +++--
 src/module/task/ui/add_detail_task.tsx        | 10 +++--
 src/module/task/ui/add_file_detail_task.tsx   | 14 ++++---
 src/module/task/ui/add_member_detail_task.tsx | 22 ++++++-----
 src/module/task/ui/cancel_task.tsx            |  8 ++--
 src/module/task/ui/create_date_end_task.tsx   | 12 +++---
 src/module/task/ui/create_task.tsx            | 27 ++++++-------
 src/module/task/ui/create_users_project.tsx   | 25 ++++++------
 .../task/ui/detail_list_anggota_task.tsx      | 17 +++++----
 src/module/task/ui/detail_list_file_task.tsx  | 14 ++++---
 src/module/task/ui/detail_list_tugas_task.tsx | 17 +++++----
 src/module/task/ui/detail_progress_task.tsx   | 12 +++---
 src/module/task/ui/drawer_division_task.tsx   |  8 ++--
 src/module/task/ui/edit_detail_task.tsx       | 12 +++---
 src/module/task/ui/edit_task.tsx              |  8 ++--
 src/module/task/ui/list_division_task.tsx     | 33 ++++++++--------
 .../task/ui/navbar_detail_division_task.tsx   | 25 ++++++------
 src/module/task/ui/navbar_division_task.tsx   |  5 ++-
 src/module/task/ui/results_date-and_task.tsx  |  1 -
 src/module/task/ui/results_file.tsx           |  1 -
 src/module/task/ui/tabs_division_task.tsx     | 10 +++--
 63 files changed, 502 insertions(+), 375 deletions(-)

diff --git a/src/module/calender/ui/create_user_calender.tsx b/src/module/calender/ui/create_user_calender.tsx
index 0c14fdb..f538ef0 100644
--- a/src/module/calender/ui/create_user_calender.tsx
+++ b/src/module/calender/ui/create_user_calender.tsx
@@ -5,10 +5,10 @@ import { funGetDivisionById, funGetSearchMemberDivision, IDataMemberDivision } f
 import { useHookstate } from '@hookstate/core';
 import toast from 'react-hot-toast';
 import { useShallowEffect } from '@mantine/hooks';
-import { LayoutNavbarNew, SkeletonSingle, WARNA } from '@/module/_global';
+import { LayoutNavbarNew, SkeletonSingle, TEMA } from '@/module/_global';
 import { ActionIcon, Avatar, Box, Button, Center, Divider, Flex, Grid, Group, Indicator, rem, Text, TextInput } from '@mantine/core';
 import { FaCheck } from 'react-icons/fa6';
-import { HiMagnifyingGlass } from 'react-icons/hi2';
+import { HiChevronLeft, HiMagnifyingGlass } from 'react-icons/hi2';
 import { IoArrowBackOutline, IoClose } from 'react-icons/io5';
 import { Carousel } from '@mantine/carousel';
 
@@ -22,6 +22,7 @@ export default function CreateUserCalender({ onClose }: { onClose: (val: any) =>
   const [loading, setLoading] = useState(true)
   const [onClickSearch, setOnClickSearch] = useState(false)
   const [searchQuery, setSearchQuery] = useState('')
+  const tema = useHookstate(TEMA)
 
   async function getData() {
     try {
@@ -117,7 +118,14 @@ export default function CreateUserCalender({ onClose }: { onClose: (val: any) =>
       <LayoutNavbarNew
         // back=""
         title="Pilih Anggota"
-        menu={<ActionIcon onClick={handleSearchClick} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="search">
+        state={
+          <Box>
+            <ActionIcon variant="light" onClick={() => { onClose(true) }} bg={tema.get().bgIcon} size="lg" radius="lg" aria-label="Settings">
+              <HiChevronLeft size={20} color='white' />
+            </ActionIcon>
+          </Box>
+        }
+        menu={<ActionIcon onClick={handleSearchClick} variant="light" bg={tema.get().bgIcon} size="lg" radius="lg" aria-label="search">
           <HiMagnifyingGlass size={20} color='white' />
         </ActionIcon>}
       />
@@ -129,7 +137,7 @@ export default function CreateUserCalender({ onClose }: { onClose: (val: any) =>
             pos={'fixed'} top={0} p={rem(20)} w={"100%"} style={{
               maxWidth: rem(550),
               zIndex: 9999,
-              backgroundColor: `${WARNA.biruTua}`,
+              backgroundColor: `${tema.get().utama}`,
               borderBottomLeftRadius: 20,
               borderBottomRightRadius: 20,
             }}>
@@ -145,8 +153,8 @@ export default function CreateUserCalender({ onClose }: { onClose: (val: any) =>
                     input: {
                       color: "white",
                       borderRadius: '#A3A3A3',
-                      borderColor: `${WARNA.biruTua}`,
-                      backgroundColor: `${WARNA.biruTua}`,
+                      borderColor: `${tema.get().utama}`,
+                      backgroundColor: `${tema.get().utama}`,
                     },
                   }}
                   size="md"
@@ -164,7 +172,7 @@ export default function CreateUserCalender({ onClose }: { onClose: (val: any) =>
             <Box pos={'fixed'} top={80} pl={rem(20)} pr={rem(20)} pt={rem(20)} pb={rem(5)} w={"100%"} style={{
         maxWidth: rem(550),
         zIndex: 100,
-        backgroundColor: `${WARNA.bgWhite}`,
+        backgroundColor: `${tema.get().bgUtama}`,
         borderBottom: `1px solid ${"#E0DFDF"}`
       }}>
         {selectedFiles.length > 0 ? (
@@ -181,7 +189,7 @@ export default function CreateUserCalender({ onClose }: { onClose: (val: any) =>
                     <Center>
                       <Indicator inline size={25} offset={7} position="bottom-end" color="red" withBorder label={<IoClose />}>
                         <Avatar style={{
-                          border: `2px solid ${WARNA.biruTua}`
+                          border: `2px solid ${tema.get().utama}`
                         }} src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} alt="it's me" size="lg" />
                       </Indicator>
                     </Center>
@@ -202,7 +210,7 @@ export default function CreateUserCalender({ onClose }: { onClose: (val: any) =>
 
       <Box p={20}>
         <Group justify="space-between" mt={100} onClick={handleSelectAll}>
-          <Text c={WARNA.biruTua} fw={"bold"}>
+          <Text c={tema.get().utama} fw={"bold"}>
             Pilih Semua Anggota
           </Text>
           {selectAll ? <FaCheck style={{ marginRight: 10 }} /> : ""}
@@ -249,11 +257,11 @@ export default function CreateUserCalender({ onClose }: { onClose: (val: any) =>
       <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
         maxWidth: rem(550),
         zIndex: 999,
-        backgroundColor: `${WARNA.bgWhite}`,
+        backgroundColor: `${tema.get().bgUtama}`,
       }}>
         <Button
           c={"white"}
-          bg={WARNA.biruTua}
+          bg={tema.get().utama}
           size="lg"
           radius={30}
           fullWidth
diff --git a/src/module/calender/ui/create_user_detail_calender.tsx b/src/module/calender/ui/create_user_detail_calender.tsx
index e2c0b72..a2a31e9 100644
--- a/src/module/calender/ui/create_user_detail_calender.tsx
+++ b/src/module/calender/ui/create_user_detail_calender.tsx
@@ -4,7 +4,7 @@ import { useParams, useRouter } from 'next/navigation';
 import { funGetSearchMemberDivision, IDataMemberDivision } from '@/module/division_new';
 import toast from 'react-hot-toast';
 import { useShallowEffect } from '@mantine/hooks';
-import { LayoutNavbarNew, SkeletonSingle, WARNA } from '@/module/_global';
+import { LayoutNavbarNew, SkeletonSingle, TEMA } from '@/module/_global';
 import { ActionIcon, Avatar, Box, Button, Center, Divider, Flex, Grid, Group, Indicator, rem, Text, TextInput } from '@mantine/core';
 import { FaCheck } from 'react-icons/fa6';
 import { HiMagnifyingGlass } from 'react-icons/hi2';
@@ -12,6 +12,7 @@ import { IoArrowBackOutline, IoClose } from 'react-icons/io5';
 import { Carousel } from '@mantine/carousel';
 import { funAddMemberCalender, funGetOneCalender } from '../lib/api_calender';
 import { IDataDetailByIdCalender, IDataDetailByIdMember } from '../lib/type_calender';
+import { useHookstate } from '@hookstate/core';
 
 export default function CreateUserDetailCalender() {
   const router = useRouter()
@@ -24,6 +25,7 @@ export default function CreateUserDetailCalender() {
   const [loading, setLoading] = useState(true)
   const [onClickSearch, setOnClickSearch] = useState(false)
   const [searchQuery, setSearchQuery] = useState('')
+  const tema = useHookstate(TEMA)
 
   async function getData() {
     try {
@@ -130,7 +132,7 @@ export default function CreateUserDetailCalender() {
       <LayoutNavbarNew
         back=""
         title="Pilih Anggota"
-        menu={<ActionIcon onClick={handleSearchClick} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="search">
+        menu={<ActionIcon onClick={handleSearchClick} variant="light" bg={tema.get().bgIcon} size="lg" radius="lg" aria-label="search">
           <HiMagnifyingGlass size={20} color='white' />
         </ActionIcon>}
       />
@@ -142,7 +144,7 @@ export default function CreateUserDetailCalender() {
             pos={'fixed'} top={0} p={rem(20)} w={"100%"} style={{
               maxWidth: rem(550),
               zIndex: 9999,
-              backgroundColor: `${WARNA.biruTua}`,
+              backgroundColor: `${tema.get().utama}`,
               borderBottomLeftRadius: 20,
               borderBottomRightRadius: 20,
             }}>
@@ -158,8 +160,8 @@ export default function CreateUserDetailCalender() {
                     input: {
                       color: "white",
                       borderRadius: '#A3A3A3',
-                      borderColor: `${WARNA.biruTua}`,
-                      backgroundColor: `${WARNA.biruTua}`,
+                      borderColor: `${tema.get().utama}`,
+                      backgroundColor: `${tema.get().utama}`,
                     },
                   }}
                   size="md"
@@ -177,7 +179,7 @@ export default function CreateUserDetailCalender() {
       <Box pos={'fixed'} top={80} pl={rem(20)} pr={rem(20)} pt={rem(20)} pb={rem(5)} w={"100%"} style={{
         maxWidth: rem(550),
         zIndex: 100,
-        backgroundColor: `${WARNA.bgWhite}`,
+        backgroundColor: `${tema.get().bgUtama}`,
         borderBottom: `1px solid ${"#E0DFDF"}`
       }}>
         {selectedFiles.length > 0 ? (
@@ -194,7 +196,7 @@ export default function CreateUserDetailCalender() {
                     <Center>
                       <Indicator inline size={25} offset={7} position="bottom-end" color="red" withBorder label={<IoClose />}>
                         <Avatar style={{
-                          border: `2px solid ${WARNA.biruTua}`
+                          border: `2px solid ${tema.get().utama}`
                         }} src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} alt="it's me" size="lg" />
                       </Indicator>
                     </Center>
@@ -215,7 +217,7 @@ export default function CreateUserDetailCalender() {
 
       <Box p={20}>
         <Group justify="space-between" mt={100} onClick={handleSelectAll}>
-          <Text c={WARNA.biruTua} fw={"bold"}>
+          <Text c={tema.get().utama} fw={"bold"}>
             Pilih Semua Anggota
           </Text>
           {selectAll ? <FaCheck style={{ marginRight: 10 }} /> : ""}
@@ -264,11 +266,11 @@ export default function CreateUserDetailCalender() {
       <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
         maxWidth: rem(550),
         zIndex: 999,
-        backgroundColor: `${WARNA.bgWhite}`,
+        backgroundColor: `${tema.get().bgUtama}`,
       }}>
         <Button
           c={"white"}
-          bg={WARNA.biruTua}
+          bg={tema.get().utama}
           size="lg"
           radius={30}
           fullWidth
diff --git a/src/module/calender/ui/date_event_division.tsx b/src/module/calender/ui/date_event_division.tsx
index 24ffd1d..9b936ce 100644
--- a/src/module/calender/ui/date_event_division.tsx
+++ b/src/module/calender/ui/date_event_division.tsx
@@ -1,4 +1,3 @@
-import { WARNA } from '@/module/_global';
 import { Box, Divider, Flex, Group, Indicator, Skeleton, Text } from '@mantine/core';
 import { DatePicker, DatePickerProps } from '@mantine/dates';
 import { useParams, useRouter } from 'next/navigation';
@@ -10,7 +9,6 @@ import moment from 'moment';
 import _ from 'lodash';
 import toast from 'react-hot-toast';
 import 'dayjs/locale/id'
-import { PiCalendarStarThin } from 'react-icons/pi';
 
 
 export default function DateEventDivision() {
@@ -23,6 +21,7 @@ export default function DateEventDivision() {
   const [loading, setLoading] = useState(true)
   const isMobile = useMediaQuery('(max-width: 369px)');
 
+
   const getData = async (tgl: any) => {
     try {
       setLoading(true)
diff --git a/src/module/calender/ui/dawer_division_calender.tsx b/src/module/calender/ui/dawer_division_calender.tsx
index 9340caf..909a278 100644
--- a/src/module/calender/ui/dawer_division_calender.tsx
+++ b/src/module/calender/ui/dawer_division_calender.tsx
@@ -1,4 +1,5 @@
-import { WARNA } from '@/module/_global';
+import { TEMA } from '@/module/_global';
+import { useHookstate } from '@hookstate/core';
 import { Box, Flex, SimpleGrid, Stack, Text } from '@mantine/core';
 import { useParams } from 'next/navigation';
 import React from 'react';
@@ -7,6 +8,7 @@ import { IoAddCircle } from 'react-icons/io5';
 
 export default function DawerDivisionCalender() {
   const param = useParams<{ id: string }>()
+  const tema = useHookstate(TEMA)
   return (
     <Box>
       <Stack pt={10}>
@@ -15,18 +17,18 @@ export default function DawerDivisionCalender() {
         >
           <Flex onClick={() => window.location.href = `/division/${param.id}/calender/create`} justify={'center'} align={'center'} direction={'column'} >
             <Box>
-              <IoAddCircle size={30} color={WARNA.biruTua} />
+              <IoAddCircle size={30} color={tema.get().utama} />
             </Box>
             <Box>
-              <Text ta={"center"} c={WARNA.biruTua}>Tambah Acara</Text>
+              <Text ta={"center"} c={tema.get().utama}>Tambah Acara</Text>
             </Box>
           </Flex>
           <Flex onClick={() => window.location.href = `/division/${param.id}/calender/history`} justify={'center'} align={'center'} direction={'column'} >
             <Box>
-              <AiOutlineFileSearch size={30} color={WARNA.biruTua} />
+              <AiOutlineFileSearch size={30} color={tema.get().utama} />
             </Box>
             <Box>
-              <Text c={WARNA.biruTua}>Riwayat</Text>
+              <Text c={tema.get().utama}>Riwayat</Text>
             </Box>
           </Flex>
         </SimpleGrid>
diff --git a/src/module/calender/ui/detail_event_division.tsx b/src/module/calender/ui/detail_event_division.tsx
index 1372c50..ab8cb89 100644
--- a/src/module/calender/ui/detail_event_division.tsx
+++ b/src/module/calender/ui/detail_event_division.tsx
@@ -1,5 +1,5 @@
 'use client'
-import { LayoutDrawer, LayoutNavbarNew, SkeletonSingle, WARNA } from '@/module/_global';
+import { LayoutDrawer, LayoutNavbarNew, SkeletonSingle, TEMA } from '@/module/_global';
 import { ActionIcon, Avatar, Box, CopyButton, Divider, Flex, Grid, Group, SimpleGrid, Skeleton, Spoiler, Stack, Text, Tooltip } from '@mantine/core';
 import React, { useState } from 'react';
 import { BsCalendar2Event, BsCalendarDate } from 'react-icons/bs';
@@ -19,6 +19,7 @@ import SkeletonDetailEvent from './skeleton_detail_event';
 import { IoIosCloseCircle } from 'react-icons/io';
 import LayoutModal from '@/module/_global/layout/layout_modal';
 import toast from 'react-hot-toast';
+import { useHookstate } from '@hookstate/core';
 
 export default function DetailEventDivision() {
   const param = useParams<{ id: string, detail: string }>()
@@ -31,6 +32,7 @@ export default function DetailEventDivision() {
   const [isOpenModal, setOpenModal] = useState(false)
   const router = useRouter()
   const [dataChoose, setDataChoose] = useState({ id: '', name: '' })
+  const tema = useHookstate(TEMA)
 
 
   const getData = async () => {
@@ -73,7 +75,7 @@ export default function DetailEventDivision() {
   return (
     <Box>
       <LayoutNavbarNew back={`/division/${param.id}/calender/`} title="Detail Acara"
-        menu={<ActionIcon variant="light" onClick={() => setOpenDrawer(true)} bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
+        menu={<ActionIcon variant="light" onClick={() => setOpenDrawer(true)} bg={tema.get().bgIcon} size="lg" radius="lg" aria-label="Settings">
           <HiMenu size={20} color='white' />
         </ActionIcon>} />
       <Box p={20}>
@@ -92,7 +94,7 @@ export default function DetailEventDivision() {
                   base: 2,
                   xl: 1
                 }}>
-                  <BsCalendar2Event size={25} color={WARNA.biruTua} />
+                  <BsCalendar2Event size={25} color={tema.get().utama} />
                 </Grid.Col>
                 <Grid.Col span={{
                   base: 10,
@@ -106,7 +108,7 @@ export default function DetailEventDivision() {
                   base: 2,
                   xl: 1
                 }}>
-                  <BsCalendarDate size={25} color={WARNA.biruTua} />
+                  <BsCalendarDate size={25} color={tema.get().utama} />
                 </Grid.Col>
                 <Grid.Col span={{
                   base: 10,
@@ -120,7 +122,7 @@ export default function DetailEventDivision() {
                   base: 2,
                   xl: 1
                 }}>
-                  <LuClock size={25} color={WARNA.biruTua} />
+                  <LuClock size={25} color={tema.get().utama} />
                 </Grid.Col>
                 <Grid.Col span={{
                   base: 10,
@@ -134,7 +136,7 @@ export default function DetailEventDivision() {
                   base: 2,
                   xl: 1
                 }}>
-                  <BsCalendarDate size={25} color={WARNA.biruTua} />
+                  <BsCalendarDate size={25} color={tema.get().utama} />
                 </Grid.Col>
                 <Grid.Col span={{
                   base: 10,
@@ -156,7 +158,7 @@ export default function DetailEventDivision() {
                   base: 2,
                   xl: 1
                 }}>
-                  <LuLink size={25} color={WARNA.biruTua} />
+                  <LuLink size={25} color={tema.get().utama} />
                 </Grid.Col>
                 <Grid.Col span={{
                   base: 10,
@@ -173,7 +175,7 @@ export default function DetailEventDivision() {
                       <CopyButton value={String(isDataCalender?.linkMeet)} timeout={2000}>
                         {({ copied, copy }) => (
                           <Tooltip label={copied ? 'Copied' : 'Copy'} withArrow position="right">
-                            <ActionIcon color={copied ? 'teal' : WARNA.biruTua} variant="subtle" onClick={copy}>
+                            <ActionIcon color={copied ? 'teal' : tema.get().utama} variant="subtle" onClick={copy}>
                               {copied ? (
                                 <FaCheck size={20} />
                               ) : (
@@ -195,7 +197,7 @@ export default function DetailEventDivision() {
                   base: 2,
                   xl: 1
                 }}>
-                  <MdOutlineFormatListBulleted size={25} color={WARNA.biruTua} />
+                  <MdOutlineFormatListBulleted size={25} color={tema.get().utama} />
                 </Grid.Col>
                 <Grid.Col span={{
                   base: 10,
@@ -317,19 +319,19 @@ export default function DetailEventDivision() {
                 onClick={() => { router.push('/member/' + dataChoose.id) }}
                 justify={'center'} align={'center'} direction={'column'} >
                 <Box>
-                  <FaUser size={30} color={WARNA.biruTua} />
+                  <FaUser size={30} color={tema.get().utama} />
                 </Box>
                 <Box>
-                  <Text c={WARNA.biruTua}>Lihat profil</Text>
+                  <Text c={tema.get().utama}>Lihat profil</Text>
                 </Box>
               </Flex>
 
               <Flex onClick={() => { setOpenModal(true) }} justify={'center'} align={'center'} direction={'column'} >
                 <Box>
-                  <IoIosCloseCircle size={30} color={WARNA.biruTua} />
+                  <IoIosCloseCircle size={30} color={tema.get().utama} />
                 </Box>
                 <Box>
-                  <Text c={WARNA.biruTua}>Keluarkan anggota</Text>
+                  <Text c={tema.get().utama}>Keluarkan anggota</Text>
                 </Box>
               </Flex>
             </SimpleGrid>
diff --git a/src/module/calender/ui/drawer_detail_event.tsx b/src/module/calender/ui/drawer_detail_event.tsx
index 1797754..b0b5fa8 100644
--- a/src/module/calender/ui/drawer_detail_event.tsx
+++ b/src/module/calender/ui/drawer_detail_event.tsx
@@ -1,5 +1,5 @@
 "use client"
-import { WARNA } from '@/module/_global';
+import { TEMA } from '@/module/_global';
 import LayoutModal from '@/module/_global/layout/layout_modal';
 import { Box, Flex, SimpleGrid, Stack, Text } from '@mantine/core';
 import { useParams, useRouter } from 'next/navigation';
@@ -8,11 +8,13 @@ import toast from 'react-hot-toast';
 import { MdDelete, MdEdit } from 'react-icons/md';
 import { funDeleteCalenderById } from '../lib/api_calender';
 import { FaUsers } from 'react-icons/fa6';
+import { useHookstate } from '@hookstate/core';
 
 export default function DrawerDetailEvent({ idCalendar }: { idCalendar: string }) {
   const router = useRouter()
   const [isModal, setModal] = useState(false)
   const param = useParams<{ id: string, detail: string }>()
+  const tema = useHookstate(TEMA)
 
   async function fetchDeleteCalender(val: boolean) {
     try {
@@ -42,26 +44,26 @@ export default function DrawerDetailEvent({ idCalendar }: { idCalendar: string }
         >
           <Flex onClick={() => setModal(true)} justify={'center'} align={'center'} direction={'column'} >
             <Box>
-              <MdDelete size={30} color={WARNA.biruTua} />
+              <MdDelete size={30} color={tema.get().utama} />
             </Box>
             <Box>
-              <Text ta={"center"} c={WARNA.biruTua}>Hapus Acara</Text>
+              <Text ta={"center"} c={tema.get().utama}>Hapus Acara</Text>
             </Box>
           </Flex>
           <Flex onClick={() => router.push(`/division/${param.id}/calender/update/${idCalendar}`)} justify={'center'} align={'center'} direction={'column'} >
             <Box>
-              <MdEdit size={30} color={WARNA.biruTua} />
+              <MdEdit size={30} color={tema.get().utama} />
             </Box>
             <Box>
-              <Text c={WARNA.biruTua}>Edit Acara</Text>
+              <Text c={tema.get().utama}>Edit Acara</Text>
             </Box>
           </Flex>
           <Flex onClick={() => router.push(`/division/${param.id}/calender/${param.detail}/add-member`)} justify={'center'} align={'center'} direction={'column'} >
             <Box>
-              <FaUsers size={30} color={WARNA.biruTua} />
+              <FaUsers size={30} color={tema.get().utama} />
             </Box>
             <Box>
-              <Text c={WARNA.biruTua} ta={"center"}>Tambah Anggota</Text>
+              <Text c={tema.get().utama} ta={"center"}>Tambah Anggota</Text>
             </Box>
           </Flex>
         </SimpleGrid>
diff --git a/src/module/calender/ui/history_division_calender.tsx b/src/module/calender/ui/history_division_calender.tsx
index ac560a2..e5fa192 100644
--- a/src/module/calender/ui/history_division_calender.tsx
+++ b/src/module/calender/ui/history_division_calender.tsx
@@ -1,5 +1,5 @@
 "use client"
-import { LayoutNavbarNew, WARNA } from '@/module/_global';
+import { LayoutNavbarNew, TEMA } from '@/module/_global';
 import { Box, Center, Flex, Grid, Group, Skeleton, Text, TextInput } from '@mantine/core';
 import { useParams, useRouter } from 'next/navigation';
 import React, { useState } from 'react';
@@ -10,6 +10,7 @@ import { useShallowEffect } from '@mantine/hooks';
 import moment from 'moment';
 import "moment/locale/id";
 import _ from 'lodash';
+import { useHookstate } from '@hookstate/core';
 
 export default function HistoryDivisionCalender() {
   const [isData, setData] = useState<IHistoryCalender[]>([])
@@ -17,6 +18,7 @@ export default function HistoryDivisionCalender() {
   const param = useParams<{ id: string, detail: string }>()
   const [searchQuery, setSearchQuery] = useState('')
   const [loading, setLoading] = useState(true)
+  const tema = useHookstate(TEMA)
 
 
   const getData = async () => {
@@ -42,9 +44,9 @@ export default function HistoryDivisionCalender() {
         <TextInput
           styles={{
             input: {
-              color: WARNA.biruTua,
-              borderRadius: WARNA.biruTua,
-              borderColor: WARNA.biruTua,
+              color: tema.get().utama,
+              borderRadius: tema.get().utama,
+              borderColor: tema.get().utama,
             },
           }}
           size="md"
@@ -55,7 +57,7 @@ export default function HistoryDivisionCalender() {
           onChange={(e) => setSearchQuery(e.target.value)}
         />
         <Box mt={30}>
-          <Box bg={"#DBE9D8"} style={{
+          <Box bg={tema.get().bgTotalKegiatan} style={{
             borderRadius: 10,
             padding: 20
           }}>
diff --git a/src/module/calender/ui/navbar_create_division_calender.tsx b/src/module/calender/ui/navbar_create_division_calender.tsx
index f9f06bc..3df54a8 100644
--- a/src/module/calender/ui/navbar_create_division_calender.tsx
+++ b/src/module/calender/ui/navbar_create_division_calender.tsx
@@ -1,5 +1,5 @@
 "use client"
-import { LayoutNavbarNew, WARNA } from '@/module/_global';
+import { LayoutNavbarNew, TEMA } from '@/module/_global';
 import { Avatar, Box, Button, Divider, Flex, Grid, Group, Input, NumberInput, rem, Select, SimpleGrid, Stack, Text, Textarea, TextInput } from '@mantine/core';
 import { DateInput, TimeInput } from '@mantine/dates';
 import React, { useState } from 'react';
@@ -22,6 +22,7 @@ export default function NavbarCreateDivisionCalender() {
   const memberValue = member.get() as IFormMemberCalender[]
   const [openMember, setOpenMember] = useState(false)
   const param = useParams<{ id: string, detail: string }>()
+  const tema = useHookstate(TEMA)
   const [touched, setTouched] = useState({
     title: false,
     dateStart: false,
@@ -274,8 +275,8 @@ export default function NavbarCreateDivisionCalender() {
             member.length > 0 &&
             <Box pt={30} mb={60}>
               <Group justify="space-between">
-                <Text c={WARNA.biruTua}>Anggota Terpilih</Text>
-                <Text c={WARNA.biruTua}>Total {member.length} Anggota</Text>
+                <Text c={tema.get().utama}>Anggota Terpilih</Text>
+                <Text c={tema.get().utama}>Total {member.length} Anggota</Text>
               </Group>
               <Box pt={10}>
                 <Box mb={20}>
@@ -305,14 +306,14 @@ export default function NavbarCreateDivisionCalender() {
                                     base: 140,
                                     xl: 270
                                   }}>
-                                    <Text c={WARNA.biruTua} fw={"bold"} lineClamp={1}>
+                                    <Text c={tema.get().utama} fw={"bold"} lineClamp={1}>
                                       {v.name}
                                     </Text>
                                   </Box>
                                 </Group>
                               </Grid.Col>
                               <Grid.Col span={3}>
-                                <Text c={WARNA.biruTua} fw={"bold"} ta={'end'}>
+                                <Text c={tema.get().utama} fw={"bold"} ta={'end'}>
                                   Anggota
                                 </Text>
                               </Grid.Col>
@@ -333,11 +334,11 @@ export default function NavbarCreateDivisionCalender() {
       <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
         maxWidth: rem(550),
         zIndex: 999,
-        backgroundColor: `${WARNA.bgWhite}`,
+        backgroundColor: `${tema.get().bgUtama}`,
       }}>
         <Button
           c={"white"}
-          bg={WARNA.biruTua}
+          bg={tema.get().utama}
           size="lg"
           radius={30}
           fullWidth
diff --git a/src/module/calender/ui/navbar_division_calender.tsx b/src/module/calender/ui/navbar_division_calender.tsx
index 9cc6272..bf4bbc0 100644
--- a/src/module/calender/ui/navbar_division_calender.tsx
+++ b/src/module/calender/ui/navbar_division_calender.tsx
@@ -1,20 +1,22 @@
 'use client'
-import { LayoutDrawer, LayoutNavbarNew, WARNA } from '@/module/_global';
+import { LayoutDrawer, LayoutNavbarNew, TEMA } from '@/module/_global';
 import { ActionIcon, Box } from '@mantine/core';
 import React, { useState } from 'react';
 import { HiMenu } from 'react-icons/hi';
 import DawerDivisionCalender from './dawer_division_calender';
 import DateEventDivision from './date_event_division';
 import { useParams } from 'next/navigation';
+import { useHookstate } from '@hookstate/core';
 
 export default function NavbarDivisionCalender() {
   const [openDrawer, setOpenDrawer] = useState(false)
   const param = useParams<{ id: string }>()
+  const tema = useHookstate(TEMA)
   return (
     <div>
       <LayoutNavbarNew back={`/division/${param.id}`} title="Kalender"
         menu={
-          <ActionIcon variant="light" onClick={() => setOpenDrawer(true)} bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
+          <ActionIcon variant="light" onClick={() => setOpenDrawer(true)} bg={tema.get().bgIcon} size="lg" radius="lg" aria-label="Settings">
             <HiMenu size={20} color='white' />
           </ActionIcon>
         }
diff --git a/src/module/calender/ui/update_division_calender.tsx b/src/module/calender/ui/update_division_calender.tsx
index d38aa5f..148a2c7 100644
--- a/src/module/calender/ui/update_division_calender.tsx
+++ b/src/module/calender/ui/update_division_calender.tsx
@@ -1,5 +1,5 @@
 "use client"
-import { LayoutNavbarNew, WARNA } from '@/module/_global';
+import { LayoutNavbarNew, TEMA } from '@/module/_global';
 import { Box, Button, Group, rem, Select, SimpleGrid, Skeleton, Stack, Text, Textarea, TextInput } from '@mantine/core';
 import { DateInput, TimeInput } from '@mantine/dates';
 import React, { useState } from 'react';
@@ -12,6 +12,7 @@ import { IDetailByIdCalender } from '../lib/type_calender';
 import moment from 'moment';
 import "moment/locale/id";
 import UpdateListUsers from './update_list_users';
+import { useHookstate } from '@hookstate/core';
 
 export default function UpdateDivisionCalender() {
   const [isModal, setModal] = useState(false)
@@ -19,6 +20,7 @@ export default function UpdateDivisionCalender() {
   const [isDataCalender, setDataCalender] = useState<IDetailByIdCalender>()
   const [openMember, setOpenMember] = useState(false)
   const [loading, setLoading] = useState(true)
+  const tema = useHookstate(TEMA)
   const [touched, setTouched] = useState({
     title: false,
     dateStart: false,
@@ -324,14 +326,14 @@ export default function UpdateDivisionCalender() {
       <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
         maxWidth: rem(550),
         zIndex: 999,
-        backgroundColor: `${WARNA.bgWhite}`,
+        backgroundColor: `${tema.get().bgUtama}`,
       }}>
         {loading ?
           <Skeleton height={50} radius={30} />
           :
           <Button
             c={"white"}
-            bg={WARNA.biruTua}
+            bg={tema.get().utama}
             size="lg"
             radius={30}
             fullWidth
diff --git a/src/module/calender/ui/update_list_users.tsx b/src/module/calender/ui/update_list_users.tsx
index bf66b49..7fcd86c 100644
--- a/src/module/calender/ui/update_list_users.tsx
+++ b/src/module/calender/ui/update_list_users.tsx
@@ -1,5 +1,5 @@
 "use client"
-import { LayoutNavbarNew, SkeletonSingle, WARNA } from '@/module/_global';
+import { LayoutNavbarNew, SkeletonSingle, TEMA } from '@/module/_global';
 import { funGetDivisionById, funGetSearchMemberDivision, IDataMemberDivision } from '@/module/division_new';
 import { useHookstate } from '@hookstate/core';
 import { ActionIcon, Avatar, Box, Button, Center, Divider, Flex, Grid, Group, Indicator, rem, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core';
@@ -24,6 +24,7 @@ export default function UpdateListUsers({ onClose }: { onClose: (val: any) => vo
   const [loading, setLoading] = useState(true)
   const [onClickSearch, setOnClickSearch] = useState(false)
   const [searchQuery, setSearchQuery] = useState('')
+  const tema = useHookstate(TEMA)
 
   async function getData() {
     try {
@@ -118,7 +119,7 @@ export default function UpdateListUsers({ onClose }: { onClose: (val: any) => vo
       <LayoutNavbarNew
         // back=""
         title="Pilih Anggota"
-        menu={<ActionIcon onClick={handleSearchClick} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="search">
+        menu={<ActionIcon onClick={handleSearchClick} variant="light" bg={tema.get().bgIcon} size="lg" radius="lg" aria-label="search">
           <HiMagnifyingGlass size={20} color='white' />
         </ActionIcon>}
       />
@@ -130,7 +131,7 @@ export default function UpdateListUsers({ onClose }: { onClose: (val: any) => vo
             pos={'fixed'} top={0} p={rem(20)} w={"100%"} style={{
               maxWidth: rem(550),
               zIndex: 9999,
-              backgroundColor: `${WARNA.biruTua}`,
+              backgroundColor: `${tema.get().utama}`,
               borderBottomLeftRadius: 20,
               borderBottomRightRadius: 20,
             }}>
@@ -146,8 +147,8 @@ export default function UpdateListUsers({ onClose }: { onClose: (val: any) => vo
                     input: {
                       color: "white",
                       borderRadius: '#A3A3A3',
-                      borderColor: `${WARNA.biruTua}`,
-                      backgroundColor: `${WARNA.biruTua}`,
+                      borderColor: `${tema.get().utama}`,
+                      backgroundColor: `${tema.get().utama}`,
                     },
                   }}
                   size="md"
@@ -165,7 +166,7 @@ export default function UpdateListUsers({ onClose }: { onClose: (val: any) => vo
       <Box pos={'fixed'} top={80} pl={rem(20)} pr={rem(20)} pt={rem(20)} pb={rem(5)} w={"100%"} style={{
         maxWidth: rem(550),
         zIndex: 100,
-        backgroundColor: `${WARNA.bgWhite}`,
+        backgroundColor: `${tema.get().bgUtama}`,
         borderBottom: `1px solid ${"#E0DFDF"}`
       }}>
         {selectedFiles.length > 0 ? (
@@ -182,7 +183,7 @@ export default function UpdateListUsers({ onClose }: { onClose: (val: any) => vo
                     <Center>
                       <Indicator inline size={25} offset={7} position="bottom-end" color="red" withBorder label={<IoClose />}>
                         <Avatar style={{
-                          border: `2px solid ${WARNA.biruTua}`
+                          border: `2px solid ${tema.get().utama}`
                         }} src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} alt="it's me" size="lg" />
                       </Indicator>
                     </Center>
@@ -203,7 +204,7 @@ export default function UpdateListUsers({ onClose }: { onClose: (val: any) => vo
 
       <Box p={20}>
         <Group justify="space-between" mt={100} onClick={handleSelectAll}>
-          <Text c={WARNA.biruTua} fw={"bold"}>
+          <Text c={tema.get().utama} fw={"bold"}>
             Pilih Semua Anggota
           </Text>
           {selectAll ? <FaCheck style={{ marginRight: 10 }} /> : ""}
@@ -250,14 +251,14 @@ export default function UpdateListUsers({ onClose }: { onClose: (val: any) => vo
       <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
         maxWidth: rem(550),
         zIndex: 999,
-        backgroundColor: `${WARNA.bgWhite}`,
+        backgroundColor: `${tema.get().bgUtama}`,
       }}>
         {loading ?
           <Skeleton height={50} radius={30} />
           :
           <Button
             c={"white"}
-            bg={WARNA.biruTua}
+            bg={tema.get().utama}
             size="lg"
             radius={30}
             fullWidth
diff --git a/src/module/color_palette/ui/create_palette_color.tsx b/src/module/color_palette/ui/create_palette_color.tsx
index a0a4791..f380808 100644
--- a/src/module/color_palette/ui/create_palette_color.tsx
+++ b/src/module/color_palette/ui/create_palette_color.tsx
@@ -1,11 +1,13 @@
-
 "use client"
-import { LayoutNavbarNew, WARNA } from '@/module/_global';
-import { Badge, Box, Button, Center, ColorInput, Flex, Pill, rem, SimpleGrid, Stack, Text } from '@mantine/core';
+import { LayoutNavbarNew, TEMA } from '@/module/_global';
+import { useHookstate } from '@hookstate/core';
+import { Badge, Box, Button, Center, ColorInput, Flex, Pill, rem, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
 import React, { useState } from 'react';
 
 export default function CreatePaletteColor() {
+  const tema = useHookstate(TEMA)
   const [isWarna, setWarna] = useState({
+    judulTema: '',
     warnaUtama: '',
     backgroundUtama: '',
     backgroundIcon: '',
@@ -18,6 +20,16 @@ export default function CreatePaletteColor() {
       <LayoutNavbarNew back='/color-palette' title='Tambah Tema' menu />
       <Box p={20}>
         <Stack>
+          <TextInput
+            label={'Judul Tema'}
+            placeholder='Judul Tema'
+            required
+            size="md"
+            radius="md"
+            onChange={
+              (e) => setWarna({ ...isWarna, judulTema: e.target.value })
+            }
+          />
           <ColorInput
             label={'Warna Utama'}
             placeholder='Pilih Warna'
@@ -152,11 +164,11 @@ export default function CreatePaletteColor() {
       <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
         maxWidth: rem(535),
         zIndex: 999,
-        backgroundColor: `${WARNA.bgWhite}`,
+        backgroundColor: `${tema.get().bgUtama}`,
       }}>
         <Button
           color="white"
-          bg={WARNA.biruTua}
+          bg={tema.get().utama}
           size="lg"
           radius={30}
           fullWidth
diff --git a/src/module/color_palette/ui/drawer_create_palette.tsx b/src/module/color_palette/ui/drawer_create_palette.tsx
index ad0c12c..dcdcf10 100644
--- a/src/module/color_palette/ui/drawer_create_palette.tsx
+++ b/src/module/color_palette/ui/drawer_create_palette.tsx
@@ -1,4 +1,5 @@
-import { WARNA } from '@/module/_global';
+import { TEMA } from '@/module/_global';
+import { useHookstate } from '@hookstate/core';
 import { Box, Flex, SimpleGrid, Text } from '@mantine/core';
 import { useRouter } from 'next/navigation';
 import React from 'react';
@@ -6,6 +7,7 @@ import { IoAddCircle } from 'react-icons/io5';
 
 export default function DrawerCreatePalette() {
   const router = useRouter()
+  const tema = useHookstate(TEMA)
   return (
     <Box>
       <SimpleGrid
@@ -15,10 +17,10 @@ export default function DrawerCreatePalette() {
         onClick={() => router.push('/color-palette/create')}
         >
           <Box>
-            <IoAddCircle size={30} color={WARNA.biruTua} />
+            <IoAddCircle size={30} color={tema.get().utama} />
           </Box>
           <Box>
-            <Text ta={'center'} c={WARNA.biruTua}>Tambah Tema</Text>
+            <Text ta={'center'} c={tema.get().utama}>Tambah Tema</Text>
           </Box>
         </Flex>
       </SimpleGrid>
diff --git a/src/module/color_palette/ui/drawer_palet_edit_end_default.tsx b/src/module/color_palette/ui/drawer_palet_edit_end_default.tsx
index 8029fb7..45d5d9a 100644
--- a/src/module/color_palette/ui/drawer_palet_edit_end_default.tsx
+++ b/src/module/color_palette/ui/drawer_palet_edit_end_default.tsx
@@ -1,4 +1,4 @@
-import { TEMA, WARNA } from '@/module/_global';
+import { TEMA } from '@/module/_global';
 import LayoutModal from '@/module/_global/layout/layout_modal';
 import { useHookstate } from '@hookstate/core';
 import { Box, Flex, SimpleGrid, Text } from '@mantine/core';
@@ -29,20 +29,20 @@ export default function DrawerPaletEditEndDefault() {
           onClick={() => setModal(true)}
         >
           <Box>
-            <IoColorPalette size={30} color={WARNA.biruTua} />
+            <IoColorPalette size={30} color={tema.get().utama} />
           </Box>
           <Box>
-            <Text ta={'center'} c={WARNA.biruTua}>Gunakan Tema</Text>
+            <Text ta={'center'} c={tema.get().utama}>Gunakan Tema</Text>
           </Box>
         </Flex>
         <Flex justify={'center'} align={'center'} direction={'column'}
           onClick={() => router.push('/color-palette/update/1')}
         >
           <Box>
-            <FaPencil size={30} color={WARNA.biruTua} />
+            <FaPencil size={30} color={tema.get().utama} />
           </Box>
           <Box>
-            <Text ta={'center'} c={WARNA.biruTua}>Edit Tema</Text>
+            <Text ta={'center'} c={tema.get().utama}>Edit Tema</Text>
           </Box>
         </Flex>
       </SimpleGrid>
diff --git a/src/module/color_palette/ui/edit_palette_color.tsx b/src/module/color_palette/ui/edit_palette_color.tsx
index 5a5f032..b75fc0a 100644
--- a/src/module/color_palette/ui/edit_palette_color.tsx
+++ b/src/module/color_palette/ui/edit_palette_color.tsx
@@ -1,10 +1,13 @@
 "use client"
-import { LayoutNavbarNew, WARNA } from '@/module/_global';
-import { Badge, Box, Button, Center, ColorInput, Flex, Pill, rem, SimpleGrid, Stack, Text } from '@mantine/core';
+import { LayoutNavbarNew, TEMA } from '@/module/_global';
+import { useHookstate } from '@hookstate/core';
+import { Badge, Box, Button, Center, ColorInput, Flex, Pill, rem, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
 import React, { useState } from 'react';
 
 export default function EditPaletteColor() {
+  const tema = useHookstate(TEMA)
   const [isWarna, setWarna] = useState({
+    judulTema: '',
     warnaUtama: '',
     backgroundUtama: '',
     backgroundIcon: '',
@@ -17,6 +20,16 @@ export default function EditPaletteColor() {
       <LayoutNavbarNew back='/color-palette' title='Edit Tema' menu />
       <Box p={20}>
         <Stack>
+        <TextInput
+            label={'Judul Tema'}
+            placeholder='Judul Tema'
+            required
+            size="md"
+            radius="md"
+            onChange={
+              (e) => setWarna({ ...isWarna, judulTema: e.target.value })
+            }
+          />
           <ColorInput
             label={'Warna Utama'}
             placeholder='Pilih Warna'
@@ -151,11 +164,11 @@ export default function EditPaletteColor() {
       <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
         maxWidth: rem(535),
         zIndex: 999,
-        backgroundColor: `${WARNA.bgWhite}`,
+        backgroundColor: `${tema.get().bgUtama}`,
       }}>
         <Button
           color="white"
-          bg={WARNA.biruTua}
+          bg={tema.get().utama}
           size="lg"
           radius={30}
           fullWidth
diff --git a/src/module/color_palette/ui/list_color_palette.tsx b/src/module/color_palette/ui/list_color_palette.tsx
index f5a0055..5b65b9a 100644
--- a/src/module/color_palette/ui/list_color_palette.tsx
+++ b/src/module/color_palette/ui/list_color_palette.tsx
@@ -1,5 +1,5 @@
 "use client"
-import { LayoutDrawer, LayoutNavbarNew, WARNA } from '@/module/_global';
+import { LayoutDrawer, LayoutNavbarNew, TEMA } from '@/module/_global';
 import { ActionIcon, Box, Checkbox, Flex, Group, Text } from '@mantine/core';
 import { useRouter } from 'next/navigation';
 import React, { useState } from 'react';
@@ -7,8 +7,9 @@ import { FaCircleCheck } from 'react-icons/fa6';
 import { HiMenu } from 'react-icons/hi';
 import DrawerCreatePalette from './drawer_create_palette';
 import DrawerPaletEditEndDefault from './drawer_palet_edit_end_default';
+import { useHookstate } from '@hookstate/core';
 
-const paletWarna = [
+const palettema = [
   {
     id: 1,
     name: 'Tema Bawaan 1',
@@ -38,15 +39,16 @@ export default function ListColorPalette() {
   const router = useRouter()
   const [isOpen, setOpen] = useState(false)
   const [isOpenTambahan, setOpenTambahan] = useState(false)
+  const tema = useHookstate(TEMA)
   return (
     <Box>
       <LayoutNavbarNew back='/home' title='Tema Aplikasi' menu={
-        <ActionIcon onClick={() => { setOpen(true) }} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
+        <ActionIcon onClick={() => { setOpen(true) }} variant="light" bg={tema.get().bgIcon} size="lg" radius="lg" aria-label="Settings">
           <HiMenu size={20} color='white' />
         </ActionIcon>
       } />
       <Box p={20}>
-        {paletWarna.map((v, i) => (
+        {palettema.map((v, i) => (
           <Box mb={20} key={i}>
             <Box style={{
               borderWidth: "3px",
diff --git a/src/module/discussion/ui/detail_discussion.tsx b/src/module/discussion/ui/detail_discussion.tsx
index e8b53cf..6e6cadd 100644
--- a/src/module/discussion/ui/detail_discussion.tsx
+++ b/src/module/discussion/ui/detail_discussion.tsx
@@ -1,10 +1,10 @@
 "use client"
-import { ActionIcon, Avatar, Badge, Box, Center, Divider, Flex, Grid, Group, Input, rem, Skeleton, Spoiler, Text, TextInput } from "@mantine/core";
-import { globalRole, LayoutDrawer, LayoutNavbarNew, SkeletonDetailDiscussionComment, SkeletonDetailDiscussionMember, SkeletonSingle, WARNA } from "@/module/_global";
+import { ActionIcon, Avatar, Badge, Box, Center, Divider, Flex, Grid, Group, rem, Skeleton, Spoiler, Text, TextInput } from "@mantine/core";
+import { globalRole, LayoutDrawer, LayoutNavbarNew, TEMA } from "@/module/_global";
 import { GrChatOption } from "react-icons/gr";
 import { LuSendHorizonal } from "react-icons/lu";
 import { useState } from "react";
-import { funCreateComent, funGetAllDiscussion, funGetDiscussionById } from "../lib/api_discussion";
+import { funCreateComent, funGetDiscussionById } from "../lib/api_discussion";
 import { useShallowEffect } from "@mantine/hooks";
 import { IDetailDiscussion } from "../lib/type_discussion";
 import moment from "moment";
@@ -27,6 +27,7 @@ export default function DetailDiscussion({ id, idDivision }: { id: string, idDiv
    const roleLogin = useHookstate(globalRole)
    const [isCreator, setCreator] = useState(false)
    const adminLogin = useHookstate(globalIsAdminDivision)
+   const tema = useHookstate(TEMA)
 
    const getData = async () => {
       try {
@@ -83,7 +84,7 @@ export default function DetailDiscussion({ id, idDivision }: { id: string, idDiv
          <LayoutNavbarNew back={`/division/${param.id}/discussion/`} title="Diskusi "
             menu={
                ((roleLogin.get() != 'user' && roleLogin.get() != 'coadmin') || adminLogin.get() || isCreator) ?
-                  <ActionIcon variant="light" onClick={() => setOpenDrawer(true)} bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
+                  <ActionIcon variant="light" onClick={() => setOpenDrawer(true)} bg={tema.get().bgIcon} size="lg" radius="lg" aria-label="Settings">
                      <HiMenu size={20} color='white' />
                   </ActionIcon>
                   : <></>
@@ -133,7 +134,7 @@ export default function DetailDiscussion({ id, idDivision }: { id: string, idDiv
                               <Group>
                                  <Avatar src={`https://wibu-storage.wibudev.com/api/files/${isData?.user_img}`} alt="it's me" size="lg" />
                                  <Box>
-                                    <Text c={WARNA.biruTua} fw={"bold"}>
+                                    <Text c={tema.get().utama} fw={"bold"}>
                                        {isData?.username}
                                     </Text>
                                     <Badge color={isData?.status === 1 ? "green" : "red"} size="sm">{isData?.status === 1 ? "BUKA" : "TUTUP"}</Badge>
@@ -175,7 +176,7 @@ export default function DetailDiscussion({ id, idDivision }: { id: string, idDiv
                                  md: 0,
                                  base: 10
                               }}>
-                                 <Text c={WARNA.biruTua} fw={"bold"} lineClamp={1}>
+                                 <Text c={tema.get().utama} fw={"bold"} lineClamp={1}>
                                     {isData?.username}
                                  </Text>
                                  <Badge color={isData?.status === 1 ? "green" : "red"} size="sm">{isData?.status === 1 ? "BUKA" : "TUTUP"}</Badge>
@@ -249,7 +250,7 @@ export default function DetailDiscussion({ id, idDivision }: { id: string, idDiv
                               </Grid.Col>
                               <Grid.Col span={6}>
                                  <Box>
-                                    <Text c={WARNA.biruTua} fw={"bold"} lineClamp={1} fz={15}>
+                                    <Text c={tema.get().utama} fw={"bold"} lineClamp={1} fz={15}>
                                        {v.username}
                                     </Text>
                                  </Box>
@@ -283,12 +284,12 @@ export default function DetailDiscussion({ id, idDivision }: { id: string, idDiv
             :
             <Box pos={'fixed'} bottom={0} w={"100%"} style={{
                maxWidth: rem(550)
-            }} pl={rem(15)} pr={rem(15)} bg={WARNA.bgWhite}>
-               <Box bg={WARNA.bgWhite} >
+            }} pl={rem(15)} pr={rem(15)} bg={tema.get().bgUtama}>
+               <Box bg={tema.get().bgUtama} >
                   <Group justify="flex-end">
                      <Text fz={13}>{300 - isComent.length} karakter tersisa</Text>
                   </Group>
-                  <Box mb={20} bg={WARNA.bgWhite}>
+                  <Box mb={20} bg={tema.get().bgUtama}>
                      <Grid bg={"white"} style={{
                         border: '1px solid gray',
                         borderRadius: 40
@@ -297,7 +298,7 @@ export default function DetailDiscussion({ id, idDivision }: { id: string, idDiv
                            <TextInput
                               styles={{
                                  input: {
-                                    color: WARNA.biruTua,
+                                    color: tema.get().utama,
                                     border: "none",
                                     backgroundColor: "transparent"
                                  },
diff --git a/src/module/discussion/ui/drawer_detail_discussion.tsx b/src/module/discussion/ui/drawer_detail_discussion.tsx
index 2647eb7..a4b5513 100644
--- a/src/module/discussion/ui/drawer_detail_discussion.tsx
+++ b/src/module/discussion/ui/drawer_detail_discussion.tsx
@@ -1,4 +1,4 @@
-import { WARNA } from "@/module/_global";
+import { TEMA } from "@/module/_global";
 import LayoutModal from "@/module/_global/layout/layout_modal";
 import { Box, Stack, SimpleGrid, Flex, Text } from "@mantine/core";
 import { useState } from "react";
@@ -17,6 +17,7 @@ export default function DrawerDetailDiscussion({ onSuccess, id, status, idDivisi
    const router = useRouter()
    const param = useParams<{ id: string, detail: string }>()
    const refresh = useHookstate(globalRefreshDiscussion)
+   const tema = useHookstate(TEMA)
 
 
    async function fetchStatusDiscussion(val: boolean) {
@@ -77,19 +78,19 @@ export default function DrawerDetailDiscussion({ onSuccess, id, status, idDivisi
             >
                <Flex onClick={() => setValModal(true)} justify={'center'} align={'center'} direction={'column'} >
                   <Box>
-                     <BsTrash3 size={30} color={WARNA.biruTua} />
+                     <BsTrash3 size={30} color={tema.get().utama} />
                   </Box>
                   <Box>
-                     <Text c={WARNA.biruTua}>Hapus</Text>
+                     <Text c={tema.get().utama}>Hapus</Text>
                   </Box>
                </Flex>
 
                <Flex onClick={() => window.location.href = `/division/${param.id}/discussion/update/${param.detail}`} justify={'center'} align={'center'} direction={'column'} >
                   <Box>
-                     <FaPencil size={30} color={WARNA.biruTua} />
+                     <FaPencil size={30} color={tema.get().utama} />
                   </Box>
                   <Box>
-                     <Text c={WARNA.biruTua}>Edit</Text>
+                     <Text c={tema.get().utama}>Edit</Text>
                   </Box>
                </Flex>
 
@@ -99,9 +100,9 @@ export default function DrawerDetailDiscussion({ onSuccess, id, status, idDivisi
                         <>
                            <Flex justify={'center'} align={'center'} direction={'column'}>
                               <Box>
-                                 <MdClose size={30} color={WARNA.biruTua} />
+                                 <MdClose size={30} color={tema.get().utama} />
                               </Box>
-                              <Text style={{ color: WARNA.biruTua }}>Tutup Diskusi</Text>
+                              <Text style={{ color: tema.get().utama }}>Tutup Diskusi</Text>
                            </Flex>
                         </>
                      ) : (
@@ -109,9 +110,9 @@ export default function DrawerDetailDiscussion({ onSuccess, id, status, idDivisi
                            <Flex justify={'center'} align={'center'} direction={'column'}>
 
                               <Box>
-                                 <FaCheck size={30} color={WARNA.biruTua} />
+                                 <FaCheck size={30} color={tema.get().utama} />
                               </Box>
-                              <Text style={{ color: WARNA.biruTua }}>Buka Diskusi</Text>
+                              <Text style={{ color: tema.get().utama }}>Buka Diskusi</Text>
                            </Flex>
                         </>
                      )}
diff --git a/src/module/discussion/ui/drawer_list_discussion.tsx b/src/module/discussion/ui/drawer_list_discussion.tsx
index cf2d982..9514d84 100644
--- a/src/module/discussion/ui/drawer_list_discussion.tsx
+++ b/src/module/discussion/ui/drawer_list_discussion.tsx
@@ -1,10 +1,12 @@
-import { WARNA } from "@/module/_global";
+import { TEMA } from "@/module/_global";
+import { useHookstate } from "@hookstate/core";
 import { Box, Stack, SimpleGrid, Flex, Text } from "@mantine/core";
 import { useParams } from "next/navigation";
 import { IoAddCircle } from "react-icons/io5";
 
 export default function DrawerListDiscussion() {
    const param = useParams<{ id: string }>()
+   const tema = useHookstate(TEMA)
 
    return (
       <Box>
@@ -14,10 +16,10 @@ export default function DrawerListDiscussion() {
             >
                <Flex onClick={() => window.location.href = "/division/" + param.id + "/discussion/create"} justify={'center'} align={'center'} direction={'column'} >
                   <Box>
-                     <IoAddCircle size={30} color={WARNA.biruTua} />
+                     <IoAddCircle size={30} color={tema.get().utama} />
                   </Box>
                   <Box>
-                     <Text c={WARNA.biruTua}>Tambah Diskusi</Text>
+                     <Text c={tema.get().utama}>Tambah Diskusi</Text>
                   </Box>
                </Flex>
             </SimpleGrid>
diff --git a/src/module/discussion/ui/form_create_discussion.tsx b/src/module/discussion/ui/form_create_discussion.tsx
index 7bc0b6c..f10e4cf 100644
--- a/src/module/discussion/ui/form_create_discussion.tsx
+++ b/src/module/discussion/ui/form_create_discussion.tsx
@@ -1,5 +1,5 @@
 'use client'
-import { WARNA } from "@/module/_global";
+import { TEMA } from "@/module/_global";
 import LayoutModal from "@/module/_global/layout/layout_modal";
 import { Avatar, Box, Button, Center, Grid, Group, rem, Text, Textarea } from "@mantine/core";
 import { useState } from "react";
@@ -8,6 +8,7 @@ import { funCreateDiscussion, funGetDiscussionById } from "../lib/api_discussion
 import { useParams, useRouter } from "next/navigation";
 import { useShallowEffect } from "@mantine/hooks";
 import { funGetProfileByCookies } from "@/module/user/profile/lib/api_profile";
+import { useHookstate } from "@hookstate/core";
 
 export default function FormCreateDiscussion({ id }: { id: string }) {
    const [isValModal, setValModal] = useState(false)
@@ -16,6 +17,7 @@ export default function FormCreateDiscussion({ id }: { id: string }) {
    const param = useParams<{ id: string, detail: string }>()
    const [loading, setLoading] = useState(true)
    const [img, setIMG] = useState<any | null>()
+   const tema = useHookstate(TEMA)
    const [touched, setTouched] = useState({
       desc: false,
    });
@@ -99,11 +101,11 @@ export default function FormCreateDiscussion({ id }: { id: string }) {
          <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
             maxWidth: rem(550),
             zIndex: 999,
-            backgroundColor: `${WARNA.bgWhite}`,
+            backgroundColor: `${tema.get().bgUtama}`,
          }}>
             <Button
                color="white"
-               bg={WARNA.biruTua}
+               bg={tema.get().utama}
                size="lg"
                radius={30}
                fullWidth
diff --git a/src/module/discussion/ui/form_edit_discussion.tsx b/src/module/discussion/ui/form_edit_discussion.tsx
index 54f6bb2..5827859 100644
--- a/src/module/discussion/ui/form_edit_discussion.tsx
+++ b/src/module/discussion/ui/form_edit_discussion.tsx
@@ -1,5 +1,5 @@
 'use client'
-import { WARNA } from "@/module/_global"
+import { TEMA } from "@/module/_global"
 import LayoutModal from "@/module/_global/layout/layout_modal"
 import { Box, Group, Avatar, Textarea, Button, Grid, rem, Skeleton } from "@mantine/core"
 import { useParams, useRouter } from "next/navigation"
@@ -8,6 +8,7 @@ import toast from "react-hot-toast"
 import { funEditDiscussion, funGetDiscussionById } from "../lib/api_discussion"
 import { useShallowEffect } from "@mantine/hooks"
 import { funGetProfileByCookies } from "@/module/user/profile/lib/api_profile"
+import { useHookstate } from "@hookstate/core"
 
 export default function FormEditDiscussion() {
    const [isValModal, setValModal] = useState(false)
@@ -16,6 +17,7 @@ export default function FormEditDiscussion() {
    const [isDataOne, setDataOne] = useState("")
    const [loading, setLoading] = useState(true)
    const [img, setIMG] = useState<any | null>()
+   const tema = useHookstate(TEMA)
    const [touched, setTouched] = useState({
       desc: false,
    });
@@ -125,14 +127,14 @@ export default function FormEditDiscussion() {
          <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
             maxWidth: rem(550),
             zIndex: 999,
-            backgroundColor: `${WARNA.bgWhite}`,
+            backgroundColor: `${tema.get().bgUtama}`,
          }}>
             {loading ?
                <Skeleton height={50} radius={30} />
                :
                <Button
                   color="white"
-                  bg={WARNA.biruTua}
+                  bg={tema.get().utama}
                   size="lg"
                   radius={30}
                   fullWidth
diff --git a/src/module/discussion/ui/list_discussion.tsx b/src/module/discussion/ui/list_discussion.tsx
index fe16b89..4d1b6d8 100644
--- a/src/module/discussion/ui/list_discussion.tsx
+++ b/src/module/discussion/ui/list_discussion.tsx
@@ -1,5 +1,5 @@
 'use client'
-import { WARNA } from "@/module/_global";
+import { TEMA} from "@/module/_global";
 import { Avatar, Badge, Box, Divider, Flex, Grid, Group, Skeleton, Spoiler, Text, TextInput } from "@mantine/core";
 import { useParams, useRouter, useSearchParams } from "next/navigation";
 import { useState } from "react";
@@ -10,12 +10,14 @@ import { useShallowEffect } from "@mantine/hooks";
 import { IDataDiscussion } from "../lib/type_discussion";
 import toast from "react-hot-toast";
 import _ from "lodash";
+import { useHookstate } from "@hookstate/core";
 
 export default function ListDiscussion({ id }: { id: string }) {
    const [isData, setData] = useState<IDataDiscussion[]>([])
    const [searchQuery, setSearchQuery] = useState('')
    const param = useParams<{ id: string }>()
    const [loading, setLoading] = useState(true)
+   const tema = useHookstate(TEMA)
 
    const getData = async () => {
       try {
@@ -46,9 +48,9 @@ export default function ListDiscussion({ id }: { id: string }) {
          <TextInput
             styles={{
                input: {
-                  color: WARNA.biruTua,
-                  borderRadius: WARNA.biruTua,
-                  borderColor: WARNA.biruTua,
+                  color: tema.get().utama,
+                  borderRadius: tema.get().utama,
+                  borderColor: tema.get().utama,
                },
             }}
             size="md"
@@ -115,7 +117,7 @@ export default function ListDiscussion({ id }: { id: string }) {
                                  md: 0,
                                  base: 10
                               }}>
-                                 <Text c={WARNA.biruTua} fw={"bold"} lineClamp={1}>
+                                 <Text c={tema.get().utama} fw={"bold"} lineClamp={1}>
                                     {v.user_name}
                                  </Text>
                                  <Badge color={v.status === 1 ? "green" : "red"} size="sm">{v.status === 1 ? "BUKA" : "TUTUP"}</Badge>
diff --git a/src/module/discussion/ui/navbar_detail_discussion.tsx b/src/module/discussion/ui/navbar_detail_discussion.tsx
index 911899c..8e948c2 100644
--- a/src/module/discussion/ui/navbar_detail_discussion.tsx
+++ b/src/module/discussion/ui/navbar_detail_discussion.tsx
@@ -1,5 +1,5 @@
 'use client'
-import { globalRole, LayoutDrawer, LayoutNavbarNew, WARNA } from "@/module/_global";
+import { globalRole, LayoutDrawer, LayoutNavbarNew, TEMA } from "@/module/_global";
 import { ActionIcon } from "@mantine/core";
 import { useState } from "react";
 import { HiMenu } from "react-icons/hi";
@@ -11,11 +11,12 @@ export default function NavbarDetailDiscussion({id, status, idDivision}: {id: st
    const [openDrawer, setOpenDrawer] = useState(false)
    const param = useParams<{ id: string }>()
    const roleLogin = useHookstate(globalRole)
+   const tema = useHookstate(TEMA)
    return (
       <>
          <LayoutNavbarNew back={`/division/${param.id}/discussion/`} title="Diskusi "
             menu={
-               <ActionIcon variant="light" onClick={() => setOpenDrawer(true)} bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
+               <ActionIcon variant="light" onClick={() => setOpenDrawer(true)} bg={tema.get().bgIcon} size="lg" radius="lg" aria-label="Settings">
                   <HiMenu size={20} color='white' />
                </ActionIcon>}
          />
diff --git a/src/module/discussion/ui/navbar_list_discussion.tsx b/src/module/discussion/ui/navbar_list_discussion.tsx
index 754bee7..35d654b 100644
--- a/src/module/discussion/ui/navbar_list_discussion.tsx
+++ b/src/module/discussion/ui/navbar_list_discussion.tsx
@@ -1,19 +1,21 @@
 'use client'
-import { LayoutNavbarNew, WARNA, LayoutDrawer } from "@/module/_global";
+import { LayoutNavbarNew, LayoutDrawer, TEMA } from "@/module/_global";
 import { ActionIcon } from "@mantine/core";
 import { HiMenu } from "react-icons/hi";
 import { useState } from "react";
 import DrawerListDiscussion from "./drawer_list_discussion";
 import { useParams } from "next/navigation";
+import { useHookstate } from "@hookstate/core";
 
 export default function NavbarListDiscussion() {
    const [openDrawer, setOpenDrawer] = useState(false)
    const param = useParams<{ id: string }>()
+   const tema = useHookstate(TEMA)
    return (
       <>
          <LayoutNavbarNew back={`/division/${param.id}`} title="Diskusi"
             menu={
-               <ActionIcon variant="light" onClick={() => setOpenDrawer(true)} bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
+               <ActionIcon variant="light" onClick={() => setOpenDrawer(true)} bg={tema.get().bgIcon} size="lg" radius="lg" aria-label="Settings">
                   <HiMenu size={20} color='white' />
                </ActionIcon>
             }
diff --git a/src/module/division_new/ui/carousel_division.tsx b/src/module/division_new/ui/carousel_division.tsx
index 315fb6b..5b85c22 100644
--- a/src/module/division_new/ui/carousel_division.tsx
+++ b/src/module/division_new/ui/carousel_division.tsx
@@ -1,11 +1,13 @@
 'use client'
 import React, { useRef } from 'react';
 import { Carousel } from '@mantine/carousel';
-import { WARNA } from '@/module/_global';
+import { TEMA } from '@/module/_global';
 import Autoplay from 'embla-carousel-autoplay';
 import { Flex, Text } from '@mantine/core';
+import { useHookstate } from '@hookstate/core';
 export default function CarouselDivision() {
   const autoplay = useRef(Autoplay({ delay: 5000 }));
+  const tema = useHookstate(TEMA)
   return (
     <>
       <Carousel
@@ -15,17 +17,17 @@ export default function CarouselDivision() {
         onMouseEnter={autoplay.current.stop}
         onMouseLeave={autoplay.current.reset}
       >
-        <Carousel.Slide bg={WARNA.biruTua} style={{ borderRadius: 10 }}>
+        <Carousel.Slide bg={tema.get().utama} style={{ borderRadius: 10 }}>
           <Flex justify={'center'} h={"100%"} align={'center'}>
             <Text c={"white"}>INFORMASI DARMASABA</Text>
           </Flex>
         </Carousel.Slide>
-        <Carousel.Slide bg={WARNA.biruTua} style={{ borderRadius: 10 }}>
+        <Carousel.Slide bg={tema.get().utama} style={{ borderRadius: 10 }}>
           <Flex justify={'center'} h={"100%"} align={'center'}>
             <Text c={"white"}>INFORMASI DARMASABA</Text>
           </Flex>
         </Carousel.Slide>
-        <Carousel.Slide bg={WARNA.biruTua} style={{ borderRadius: 10 }}>
+        <Carousel.Slide bg={tema.get().utama} style={{ borderRadius: 10 }}>
           <Flex justify={'center'} h={"100%"} align={'center'}>
             <Text c={"white"}>INFORMASI DARMASABA</Text>
           </Flex>
diff --git a/src/module/division_new/ui/create_anggota_division.tsx b/src/module/division_new/ui/create_anggota_division.tsx
index 25146c2..577457e 100644
--- a/src/module/division_new/ui/create_anggota_division.tsx
+++ b/src/module/division_new/ui/create_anggota_division.tsx
@@ -1,5 +1,5 @@
 "use client"
-import { LayoutNavbarNew, SkeletonSingle, WARNA } from '@/module/_global';
+import { LayoutNavbarNew, SkeletonSingle, TEMA } from '@/module/_global';
 import LayoutModal from '@/module/_global/layout/layout_modal';
 import { funGetUserByCookies } from '@/module/auth';
 import { funGetAllmember, TypeUser } from '@/module/user';
@@ -14,6 +14,7 @@ import { IDataMemberDivision } from '../lib/type_division';
 import { funAddDivisionMember, funGetDivisionById } from '../lib/api_division';
 import { IoArrowBackOutline, IoClose } from 'react-icons/io5';
 import { Carousel } from '@mantine/carousel';
+import { useHookstate } from '@hookstate/core';
 
 
 export default function CreateAnggotaDivision() {
@@ -26,6 +27,7 @@ export default function CreateAnggotaDivision() {
   const param = useParams<{ id: string }>()
   const [loading, setLoading] = useState(true)
   const [onClickSearch, setOnClickSearch] = useState(false)
+  const tema = useHookstate(TEMA)
 
   const handleFileClick = (index: number) => {
     if (selectedFiles.some((i: any) => i.idUser == dataMember[index].id)) {
@@ -98,7 +100,7 @@ export default function CreateAnggotaDivision() {
   return (
     <Box>
       <LayoutNavbarNew back={`/division/info/${param.id}`} title="tambah anggota"
-        menu={<ActionIcon onClick={handleSearchClick} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="search">
+        menu={<ActionIcon onClick={handleSearchClick} variant="light" bg={tema.get().bgIcon} size="lg" radius="lg" aria-label="search">
           <HiMagnifyingGlass size={20} color='white' />
         </ActionIcon>}
       />
@@ -108,7 +110,7 @@ export default function CreateAnggotaDivision() {
             pos={'fixed'} top={0} p={rem(20)} w={"100%"} style={{
               maxWidth: rem(550),
               zIndex: 9999,
-              backgroundColor: `${WARNA.biruTua}`,
+              backgroundColor: `${tema.get().utama}`,
               borderBottomLeftRadius: 20,
               borderBottomRightRadius: 20,
             }}>
@@ -124,8 +126,8 @@ export default function CreateAnggotaDivision() {
                     input: {
                       color: "white",
                       borderRadius: '#A3A3A3',
-                      borderColor: `${WARNA.biruTua}`,
-                      backgroundColor: `${WARNA.biruTua}`,
+                      borderColor: `${tema.get().utama}`,
+                      backgroundColor: `${tema.get().utama}`,
                     },
                   }}
                   size="md"
@@ -142,7 +144,7 @@ export default function CreateAnggotaDivision() {
       <Box pos={'fixed'} top={80} pl={rem(20)} pr={rem(20)} pt={rem(20)} pb={rem(5)} w={"100%"} style={{
         maxWidth: rem(550),
         zIndex: 100,
-        backgroundColor: `${WARNA.bgWhite}`,
+        backgroundColor: `${tema.get().bgUtama}`,
         borderBottom: `1px solid ${"#E0DFDF"}`
       }}>
         {selectedFiles.length > 0 ? (
@@ -159,7 +161,7 @@ export default function CreateAnggotaDivision() {
                     <Center>
                       <Indicator inline size={25} offset={7} position="bottom-end" color="red" withBorder label={<IoClose />}>
                         <Avatar style={{
-                          border: `2px solid ${WARNA.biruTua}`
+                          border: `2px solid ${tema.get().utama}`
                         }} src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} alt="it's me" size="lg" />
                       </Indicator>
                     </Center>
@@ -219,11 +221,11 @@ export default function CreateAnggotaDivision() {
       <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
         maxWidth: rem(550),
         zIndex: 999,
-        backgroundColor: `${WARNA.bgWhite}`,
+        backgroundColor: `${tema.get().bgUtama}`,
       }}>
         <Button
           color="white"
-          bg={WARNA.biruTua}
+          bg={tema.get().utama}
           size="lg"
           radius={30}
           fullWidth
diff --git a/src/module/division_new/ui/create_division.tsx b/src/module/division_new/ui/create_division.tsx
index 41c4f73..c9f5de5 100644
--- a/src/module/division_new/ui/create_division.tsx
+++ b/src/module/division_new/ui/create_division.tsx
@@ -1,5 +1,5 @@
 "use client";
-import { LayoutNavbarNew, WARNA } from "@/module/_global";
+import { LayoutNavbarNew, TEMA } from "@/module/_global";
 import { useHookstate } from "@hookstate/core";
 import {
     Avatar,
@@ -34,6 +34,7 @@ export default function CreateDivision() {
     const [isChooseAnggota, setChooseAnggota] = useState(false)
     const [isChooseAdmin, setChooseAdmin] = useState(false)
     const member = useHookstate(globalMemberDivision)
+    const tema = useHookstate(TEMA)
     const isMobile = useMediaQuery('(max-width: 369px)');
     const [body, setBody] = useState<any>({
         idGroup: "",
@@ -173,8 +174,8 @@ export default function CreateDivision() {
                     </Box>
                     <Box pt={20} pb={50}>
                         <Group justify="space-between">
-                            <Text c={WARNA.biruTua}>Anggota Terpilih</Text>
-                            <Text c={WARNA.biruTua}>Total {member.length} Anggota</Text>
+                            <Text c={tema.get().utama}>Anggota Terpilih</Text>
+                            <Text c={tema.get().utama}>Total {member.length} Anggota</Text>
                         </Group>
                         <Box pt={10}>
                             <Box mb={20}>
@@ -200,14 +201,14 @@ export default function CreateDivision() {
                                                                 base: isMobile ? 130 : 140,
                                                                 xl: 270
                                                             }}>
-                                                                <Text c={WARNA.biruTua} fw={"bold"} lineClamp={1} fz={isMobile ? 14 : 16}>
+                                                                <Text c={tema.get().utama} fw={"bold"} lineClamp={1} fz={isMobile ? 14 : 16}>
                                                                     {v.name}
                                                                 </Text>
                                                             </Box>
                                                         </Group>
                                                     </Grid.Col>
                                                     <Grid.Col span={3}>
-                                                        <Text c={WARNA.biruTua} fw={"bold"} ta={'end'} fz={isMobile ? 13 : 16}>
+                                                        <Text c={tema.get().utama} fw={"bold"} ta={'end'} fz={isMobile ? 13 : 16}>
                                                             Anggota
                                                         </Text>
                                                     </Grid.Col>
@@ -227,11 +228,11 @@ export default function CreateDivision() {
             <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
                 maxWidth: rem(550),
                 zIndex: 999,
-                backgroundColor: `${WARNA.bgWhite}`,
+                backgroundColor: `${tema.get().bgUtama}`,
             }}>
                 <Button
                     color="white"
-                    bg={WARNA.biruTua}
+                    bg={tema.get().utama}
                     size="lg"
                     radius={30}
                     fullWidth
diff --git a/src/module/division_new/ui/create_report.tsx b/src/module/division_new/ui/create_report.tsx
index ea5e0ec..2dccbc4 100644
--- a/src/module/division_new/ui/create_report.tsx
+++ b/src/module/division_new/ui/create_report.tsx
@@ -1,5 +1,5 @@
 "use client";
-import { LayoutNavbarNew, WARNA } from "@/module/_global";
+import { LayoutNavbarNew, TEMA } from "@/module/_global";
 import { Box, Select, Skeleton, Stack, Text } from "@mantine/core";
 import { DateInput } from "@mantine/dates";
 import React, { useState } from "react";
@@ -13,6 +13,7 @@ import { useShallowEffect } from "@mantine/hooks";
 import { funGetReportDivision } from "../lib/api_division";
 import { useParams } from "next/navigation";
 import moment from "moment";
+import { useHookstate } from "@hookstate/core";
 
 export default function CreateReport() {
   const [value, setValue] = useState<Date | null>(null);
@@ -21,6 +22,7 @@ export default function CreateReport() {
   const [tampil, setTampil] = useState(false);
   const [isGroup, setIsGroup] = useState("");
   const param = useParams<{ id: string }>()
+  const tema = useHookstate(TEMA)
   const [report, setReport] = useState({
     progress: [],
     dokumen: [],
@@ -129,7 +131,7 @@ export default function CreateReport() {
                       <Box
                         bg={"white"}
                         style={{
-                          border: `1px solid ${WARNA.borderBiruMuda}`,
+                          border: `1px solid ${tema.get().bgTotalKegiatan}`,
                           borderRadius: 10,
                           padding: 10,
                         }}
@@ -141,7 +143,7 @@ export default function CreateReport() {
                       <Box
                         bg={"white"}
                         style={{
-                          border: `1px solid ${WARNA.borderBiruMuda}`,
+                          border: `1px solid ${tema.get().bgTotalKegiatan}`,
                           borderRadius: 10,
                           padding: 10,
                         }}
@@ -153,7 +155,7 @@ export default function CreateReport() {
                       <Box
                         bg={"white"}
                         style={{
-                          border: `1px solid ${WARNA.borderBiruMuda}`,
+                          border: `1px solid ${tema.get().bgTotalKegiatan}`,
                           borderRadius: 10,
                           padding: 10,
                         }}
diff --git a/src/module/division_new/ui/drawer_detail_division.tsx b/src/module/division_new/ui/drawer_detail_division.tsx
index 5c3dd1e..bc79051 100644
--- a/src/module/division_new/ui/drawer_detail_division.tsx
+++ b/src/module/division_new/ui/drawer_detail_division.tsx
@@ -1,5 +1,6 @@
 "use client"
-import { WARNA } from "@/module/_global";
+import { TEMA } from "@/module/_global";
+import { useHookstate } from "@hookstate/core";
 import { Box, Stack, SimpleGrid, Flex, Text } from "@mantine/core";
 import { useParams, useRouter } from "next/navigation";
 import { BsInfoCircle } from "react-icons/bs";
@@ -9,6 +10,7 @@ import { TbReportAnalytics } from "react-icons/tb";
 export default function DrawerDetailDivision() {
    const param = useParams<{ id: string }>()
    const router = useRouter()
+   const tema = useHookstate(TEMA)
 
    return (
       <Box>
@@ -18,20 +20,20 @@ export default function DrawerDetailDivision() {
             >
                <Flex onClick={() => router.push('/division/info/' + param.id)} justify={'center'} align={'center'} direction={'column'} >
                   <Box>
-                     <BsInfoCircle size={30} color={WARNA.biruTua} />
+                     <BsInfoCircle size={30} color={tema.get().utama} />
                   </Box>
                   <Box>
-                     <Text c={WARNA.biruTua}>Informasi Divisi</Text>
+                     <Text c={tema.get().utama}>Informasi Divisi</Text>
                   </Box>
                </Flex>
                <Flex onClick={() => {
                   router.push('/division/report/' + param.id)
                }} justify={'center'} align={'center'} direction={'column'} >
                   <Box>
-                     <TbReportAnalytics size={30} color={WARNA.biruTua} />
+                     <TbReportAnalytics size={30} color={tema.get().utama} />
                   </Box>
                   <Box>
-                     <Text c={WARNA.biruTua}>Report Divisi</Text>
+                     <Text c={tema.get().utama}>Report Divisi</Text>
                   </Box>
                </Flex>
             </SimpleGrid>
diff --git a/src/module/division_new/ui/drawer_division.tsx b/src/module/division_new/ui/drawer_division.tsx
index ea48397..0021d2c 100644
--- a/src/module/division_new/ui/drawer_division.tsx
+++ b/src/module/division_new/ui/drawer_division.tsx
@@ -1,5 +1,5 @@
 "use client"
-import { globalRole, WARNA } from '@/module/_global';
+import { globalRole, TEMA } from '@/module/_global';
 import { useHookstate } from '@hookstate/core';
 import { Box, Flex, SimpleGrid, Stack, Text } from '@mantine/core';
 import { useRouter, useSearchParams } from 'next/navigation';
@@ -13,6 +13,7 @@ export default function DrawerDivision() {
   const roleLogin = useHookstate(globalRole)
   const searchParams = useSearchParams()
   const group = searchParams.get('group')
+  const tema = useHookstate(TEMA)
 
   return (
     <Box>
@@ -22,10 +23,10 @@ export default function DrawerDivision() {
         >
           <Flex onClick={() => router.push('/division/create')} justify={'center'} align={'center'} direction={'column'} >
             <Box>
-              <IoAddCircle size={30} color={WARNA.biruTua} />
+              <IoAddCircle size={30} color={tema.get().utama} />
             </Box>
             <Box>
-              <Text c={WARNA.biruTua} ta={"center"}>Tambah Divisi</Text>
+              <Text c={tema.get().utama} ta={"center"}>Tambah Divisi</Text>
             </Box>
           </Flex>
           {
@@ -34,10 +35,10 @@ export default function DrawerDivision() {
               router.push('/division?page=filter&group=' + group)
             }} justify={'center'} align={'center'} direction={'column'} >
               <Box>
-                <HiOutlineFilter size={30} color={WARNA.biruTua} />
+                <HiOutlineFilter size={30} color={tema.get().utama} />
               </Box>
               <Box>
-                <Text c={WARNA.biruTua}>Filter</Text>
+                <Text c={tema.get().utama}>Filter</Text>
               </Box>
             </Flex>
           }
@@ -48,10 +49,10 @@ export default function DrawerDivision() {
               router.push('/division?page=report')
             }} justify={'center'} align={'center'} direction={'column'} >
               <Box>
-                <TbReportAnalytics size={30} color={WARNA.biruTua} />
+                <TbReportAnalytics size={30} color={tema.get().utama} />
               </Box>
               <Box>
-                <Text c={WARNA.biruTua}>Report</Text>
+                <Text c={tema.get().utama}>Report</Text>
               </Box>
             </Flex>
           }
diff --git a/src/module/division_new/ui/echart_bar_report.tsx b/src/module/division_new/ui/echart_bar_report.tsx
index b42af05..b145dc3 100644
--- a/src/module/division_new/ui/echart_bar_report.tsx
+++ b/src/module/division_new/ui/echart_bar_report.tsx
@@ -4,11 +4,13 @@ import EChartsReact from "echarts-for-react";
 import { useShallowEffect } from '@mantine/hooks';
 import * as echarts from 'echarts';
 import { Box } from '@mantine/core';
-import { WARNA } from '@/module/_global';
+import { TEMA,  } from '@/module/_global';
+import { useHookstate } from '@hookstate/core';
 
 export default function EchartBarReport({ data }: { data: any }) {
   const [options, setOptions] = useState<EChartsOption>({});
   const color = ["#F3C96B", "#9EC97F", "#5971C0"]
+  const tema = useHookstate(TEMA)
 
   useShallowEffect(() => {
     loadData(data)
@@ -21,7 +23,7 @@ export default function EchartBarReport({ data }: { data: any }) {
         top: '2%',
         left: 'center',
         textStyle: {
-          color: WARNA.biruTua
+          color: tema.get().utama
         }
       },
       tooltip: {
diff --git a/src/module/division_new/ui/echart_pai_report.tsx b/src/module/division_new/ui/echart_pai_report.tsx
index 1466938..ac99f52 100644
--- a/src/module/division_new/ui/echart_pai_report.tsx
+++ b/src/module/division_new/ui/echart_pai_report.tsx
@@ -4,10 +4,12 @@ import EChartsReact from "echarts-for-react";
 import { useShallowEffect } from '@mantine/hooks';
 import * as echarts from 'echarts';
 import { Box } from '@mantine/core';
-import { WARNA } from '@/module/_global';
+import { TEMA } from '@/module/_global';
+import { useHookstate } from '@hookstate/core';
 
 export default function EchartPaiReport({ data }: { data: any }) {
   const [options, setOptions] = useState<EChartsOption>({});
+  const tema = useHookstate(TEMA)
 
   useShallowEffect(() => {
     loadData(data)
@@ -20,7 +22,7 @@ export default function EchartPaiReport({ data }: { data: any }) {
         top: '2%',
         left: 'center',
         textStyle: {
-          color: WARNA.biruTua
+          color: tema.get().utama
         }
       },
       legend: {
diff --git a/src/module/division_new/ui/edit_division.tsx b/src/module/division_new/ui/edit_division.tsx
index 2258c85..8610fd3 100644
--- a/src/module/division_new/ui/edit_division.tsx
+++ b/src/module/division_new/ui/edit_division.tsx
@@ -1,5 +1,5 @@
 "use client"
-import { LayoutNavbarNew, WARNA } from '@/module/_global';
+import { LayoutNavbarNew, TEMA } from '@/module/_global';
 import LayoutModal from '@/module/_global/layout/layout_modal';
 import { Box, Button, rem, Select, Skeleton, Stack, Textarea, TextInput } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
@@ -9,12 +9,14 @@ import toast from 'react-hot-toast';
 import { funEditDivision, funGetDivisionById } from '../lib/api_division';
 import { funGetAllGroup, IDataGroup } from '@/module/group';
 import { funGetUserByCookies } from '@/module/auth';
+import { useHookstate } from '@hookstate/core';
 
 
 export default function EditDivision() {
   const [openModal, setOpenModal] = useState(false)
   const router = useRouter()
   const param = useParams<{ id: string }>()
+  const tema = useHookstate(TEMA)
   const [loading, setLoading] = useState(false)
   const [body, setBody] = useState<any>({
     idGroup: "",
@@ -119,14 +121,14 @@ export default function EditDivision() {
       <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
         maxWidth: rem(550),
         zIndex: 999,
-        backgroundColor: `${WARNA.bgWhite}`,
+        backgroundColor: `${tema.get().bgUtama}`,
       }}>
         {loading ?
           <Skeleton height={50} radius={30} />
           :
           <Button
             color="white"
-            bg={WARNA.biruTua}
+            bg={tema.get().utama}
             size="lg"
             radius={30}
             fullWidth
diff --git a/src/module/division_new/ui/feature_detail_division.tsx b/src/module/division_new/ui/feature_detail_division.tsx
index c9759c5..86aa43f 100644
--- a/src/module/division_new/ui/feature_detail_division.tsx
+++ b/src/module/division_new/ui/feature_detail_division.tsx
@@ -1,5 +1,5 @@
 "use client"
-import { WARNA } from '@/module/_global';
+import { TEMA } from '@/module/_global';
 import { ActionIcon, Box, Center, Grid, Group, SimpleGrid, Text } from '@mantine/core';
 import React, { useState } from 'react';
 import { HiMiniUserGroup } from 'react-icons/hi2';
@@ -14,11 +14,13 @@ import { funGetDetailDivisionById } from '../lib/api_division';
 import toast from 'react-hot-toast';
 import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
 import { IDataJumlahDetailDivision } from '../lib/type_division';
+import { useHookstate } from '@hookstate/core';
 
 export default function FeatureDetailDivision() {
   const param = useParams<{ id: string }>()
   const router = useRouter()
   const [feature, setFeature] = useState<IDataJumlahDetailDivision>()
+  const tema = useHookstate(TEMA)
 
   async function fetchData() {
     try {
@@ -42,7 +44,7 @@ export default function FeatureDetailDivision() {
 
   return (
     <Box pt={10}>
-      <Text c={WARNA.biruTua} mb={10} fw={'bold'} fz={16}>Features</Text>
+      <Text c={tema.get().utama} mb={10} fw={'bold'} fz={16}>Features</Text>
       <SimpleGrid
         cols={{ base: 2, sm: 2, lg: 2 }}
         style={{
@@ -51,7 +53,7 @@ export default function FeatureDetailDivision() {
         }}
       >
         <Box bg={'white'} style={{
-          border: `1px solid ${WARNA.bgHijauMuda}`,
+          border: `1px solid ${tema.get().bgTotalKegiatan}`,
           borderRadius: 10,
           padding: 10
         }} onClick={() => router.push(param.id + '/task?status=0')}>
@@ -61,13 +63,13 @@ export default function FeatureDetailDivision() {
                 size={isMobile2 ? "lg" : "xl"}
                 aria-label="Gradient action icon"
                 radius={100}
-                color={WARNA.bgHijauMuda}
+                color={tema.get().bgTotalKegiatan}
               >
-                <LuClipboardEdit size={isMobile2 ? 20 : 25} color={WARNA.biruTua} />
+                <LuClipboardEdit size={isMobile2 ? 20 : 25} color={tema.get().utama} />
               </ActionIcon>
             </Grid.Col>
             <Grid.Col span={{ base: 7, md: 9 }}>
-              <Text fz={15} c={WARNA.biruTua} fw={"bold"}>Tugas</Text>
+              <Text fz={15} c={tema.get().utama} fw={"bold"}>Tugas</Text>
               <Group justify='space-between' align='center'>
                 <Text fz={10} c={"gray"}>{feature?.tugas} Tugas</Text>
                 {!isMobile && <IoIosArrowRoundForward size={20} color='gray' />}
@@ -76,7 +78,7 @@ export default function FeatureDetailDivision() {
           </Grid>
         </Box>
         <Box bg={'white'} style={{
-          border: `1px solid ${WARNA.bgHijauMuda}`,
+          border: `1px solid ${tema.get().bgTotalKegiatan}`,
           borderRadius: 10,
           padding: 10
         }} onClick={() => router.push(param.id + '/document')}>
@@ -86,13 +88,13 @@ export default function FeatureDetailDivision() {
                 size={isMobile2 ? "lg" : "xl"}
                 aria-label="Gradient action icon"
                 radius={100}
-                color={WARNA.bgHijauMuda}
+                color={tema.get().bgTotalKegiatan}
               >
-                <BsFileEarmarkText size={isMobile2 ? 20 : 25} color={WARNA.biruTua} />
+                <BsFileEarmarkText size={isMobile2 ? 20 : 25} color={tema.get().utama} />
               </ActionIcon>
             </Grid.Col>
             <Grid.Col span={{ base: 7, md: 9 }}>
-              <Text fz={15} c={WARNA.biruTua} fw={"bold"}>Dokumen</Text>
+              <Text fz={15} c={tema.get().utama} fw={"bold"}>Dokumen</Text>
               <Group justify='space-between' align='center'>
                 <Text fz={10} c={"gray"}>{feature?.dokumen} File</Text>
                 {!isMobile && <IoIosArrowRoundForward size={20} color='gray' />}
@@ -101,7 +103,7 @@ export default function FeatureDetailDivision() {
           </Grid>
         </Box>
         <Box bg={'white'} style={{
-          border: `1px solid ${WARNA.bgHijauMuda}`,
+          border: `1px solid ${tema.get().bgTotalKegiatan}`,
           borderRadius: 10,
           padding: 10
         }} onClick={() => router.push(param.id + '/discussion')}>
@@ -111,13 +113,13 @@ export default function FeatureDetailDivision() {
                 size={isMobile2 ? "lg" : "xl"}
                 aria-label="Gradient action icon"
                 radius={100}
-                color={WARNA.bgHijauMuda}
+                color={tema.get().bgTotalKegiatan}
               >
-                <GoCommentDiscussion size={isMobile2 ? 20 : 25} color={WARNA.biruTua} />
+                <GoCommentDiscussion size={isMobile2 ? 20 : 25} color={tema.get().utama} />
               </ActionIcon>
             </Grid.Col>
             <Grid.Col span={{ base: 7, md: 9 }}>
-              <Text fz={15} c={WARNA.biruTua} fw={"bold"}>Diskusi</Text>
+              <Text fz={15} c={tema.get().utama} fw={"bold"}>Diskusi</Text>
               <Group justify='space-between' align='center'>
                 <Text fz={10} c={"gray"}>{feature?.diskusi} Diskusi</Text>
                 {!isMobile && <IoIosArrowRoundForward size={20} color='gray' />}
@@ -126,7 +128,7 @@ export default function FeatureDetailDivision() {
           </Grid>
         </Box>
         <Box bg={'white'} style={{
-          border: `1px solid ${WARNA.bgHijauMuda}`,
+          border: `1px solid ${tema.get().bgTotalKegiatan}`,
           borderRadius: 10,
           padding: 10
         }} onClick={() => router.push(param.id + '/calender')}>
@@ -136,13 +138,13 @@ export default function FeatureDetailDivision() {
                 size={isMobile2 ? "lg" : "xl"}
                 aria-label="Gradient action icon"
                 radius={100}
-                color={WARNA.bgHijauMuda}
+                color={tema.get().bgTotalKegiatan}
               >
-                <IoCalendarOutline size={isMobile2 ? 20 : 25} color={WARNA.biruTua} />
+                <IoCalendarOutline size={isMobile2 ? 20 : 25} color={tema.get().utama} />
               </ActionIcon>
             </Grid.Col>
             <Grid.Col span={{ base: 7, md: 9 }}>
-              <Text fz={15} c={WARNA.biruTua} fw={"bold"}>Kalender</Text>
+              <Text fz={15} c={tema.get().utama} fw={"bold"}>Kalender</Text>
               <Group justify='space-between' align='center'>
                 <Text fz={10} c={"gray"}>{feature?.kalender} Acara</Text>
                 {!isMobile && <IoIosArrowRoundForward size={20} color='gray' />}
diff --git a/src/module/division_new/ui/information_division.tsx b/src/module/division_new/ui/information_division.tsx
index 745f378..88c49e6 100644
--- a/src/module/division_new/ui/information_division.tsx
+++ b/src/module/division_new/ui/information_division.tsx
@@ -1,5 +1,5 @@
 "use client"
-import { globalRole, LayoutDrawer, LayoutNavbarNew, SkeletonSingle, WARNA } from '@/module/_global';
+import { globalRole, LayoutDrawer, LayoutNavbarNew, SkeletonSingle, TEMA } from '@/module/_global';
 import { ActionIcon, Avatar, Box, Button, Divider, Flex, Grid, Group, Skeleton, Stack, Text } from '@mantine/core';
 import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
 import { useParams, useRouter } from 'next/navigation';
@@ -31,6 +31,7 @@ export default function InformationDivision() {
   const roleLogin = useHookstate(globalRole)
   const [isAdmin, setAdmin] = useState(false)
   const isMobile = useMediaQuery('(max-width: 369px)');
+  const tema = useHookstate(TEMA)
 
   async function getOneData() {
     try {
@@ -110,7 +111,7 @@ export default function InformationDivision() {
           ((roleLogin.get() != 'user' && roleLogin.get() != 'coadmin') || isAdmin) ?
             <ActionIcon variant="light" onClick={() => {
               router.push('/division/edit/' + param.id)
-            }} bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
+            }} bg={tema.get().bgIcon} size="lg" radius="lg" aria-label="Settings">
               <LuClipboardEdit size={20} color='white' />
             </ActionIcon>
             : <></>
@@ -121,7 +122,7 @@ export default function InformationDivision() {
           <Text fw={"bold"}>Deskripsi Divisi</Text>
           <Box p={20} bg={"white"} style={{
             borderRadius: 10,
-            border: `1px solid ${WARNA.borderBiruMuda}`,
+            border: `1px solid ${tema.get().bgTotalKegiatan}`,
           }}>
             {
               loading ?
@@ -142,7 +143,7 @@ export default function InformationDivision() {
         <Box mt={20}>
           <Box p={20} bg={"white"} style={{
             borderRadius: 10,
-            border: `1px solid ${WARNA.borderBiruMuda}`,
+            border: `1px solid ${tema.get().bgTotalKegiatan}`,
           }}>
             <Box>
               <Text>{member.length} Anggota</Text>
@@ -178,7 +179,7 @@ export default function InformationDivision() {
                 ((roleLogin.get() != 'user' && roleLogin.get() != 'coadmin') || isAdmin) ?
                   <Group align='center' onClick={() => router.push('/division/add-member/' + param.id)}>
                     <Avatar size={isMobile ? 'md' : 'lg'}>
-                      <AiOutlineUserAdd size={isMobile ? 25 : 30} color={WARNA.biruTua} />
+                      <AiOutlineUserAdd size={isMobile ? 25 : 30} color={tema.get().utama} />
                     </Avatar>
                     <Text fz={isMobile ? 14 : 16}>Tambah Anggota</Text>
                   </Group>
@@ -213,14 +214,14 @@ export default function InformationDivision() {
                                 base: isMobile ? 130 : 140,
                                 xl: 270
                               }}>
-                                <Text c={WARNA.biruTua} fw={"bold"} lineClamp={1} fz={isMobile ? 14 : 16}>
+                                <Text c={tema.get().utama} fw={"bold"} lineClamp={1} fz={isMobile ? 14 : 16}>
                                   {v.name}
                                 </Text>
                               </Box>
                             </Group>
                           </Grid.Col>
                           <Grid.Col span={3}>
-                            <Text c={WARNA.biruTua} fw={"bold"} ta={'end'} fz={isMobile ? 13 : 16}>
+                            <Text c={tema.get().utama} fw={"bold"} ta={'end'} fz={isMobile ? 13 : 16}>
                               {(v.isAdmin) ? 'Admin' : 'Anggota'}
                             </Text>
                           </Grid.Col>
@@ -242,15 +243,15 @@ export default function InformationDivision() {
         <Box>
           <Group align='center' mb={20} onClick={() => editStatusAdmin()}>
             <ActionIcon variant="light" size={60} aria-label="admin" radius="xl">
-              <FaUserTie size={30} color={WARNA.biruTua} />
+              <FaUserTie size={30} color={tema.get().utama} />
             </ActionIcon>
-            <Text c={WARNA.biruTua}>{(valChooseMemberStatus == false) ? "Jadikan admin" : "Memberhentikan sebagai admin"}</Text>
+            <Text c={tema.get().utama}>{(valChooseMemberStatus == false) ? "Jadikan admin" : "Memberhentikan sebagai admin"}</Text>
           </Group>
           <Group align='center' onClick={() => setOpenModal(true)}>
             <ActionIcon variant="light" size={60} aria-label="admin" radius="xl">
-              <IoIosCloseCircle size={40} color={WARNA.biruTua} />
+              <IoIosCloseCircle size={40} color={tema.get().utama} />
             </ActionIcon>
-            <Text c={WARNA.biruTua}>Keluarkan dari divisi</Text>
+            <Text c={tema.get().utama}>Keluarkan dari divisi</Text>
           </Group>
         </Box>
       </LayoutDrawer>
diff --git a/src/module/division_new/ui/list_discussion.tsx b/src/module/division_new/ui/list_discussion.tsx
index 749ee34..cbf498c 100644
--- a/src/module/division_new/ui/list_discussion.tsx
+++ b/src/module/division_new/ui/list_discussion.tsx
@@ -1,5 +1,5 @@
 "use client"
-import { WARNA } from "@/module/_global";
+import { TEMA } from "@/module/_global";
 import { Box, Grid, Group, Skeleton, Stack, Text } from "@mantine/core";
 import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
 import { useParams, useRouter } from "next/navigation";
@@ -9,6 +9,7 @@ import { CiUser, CiClock2 } from "react-icons/ci";
 import { GoDiscussionClosed } from "react-icons/go";
 import { funGetDetailDivisionById } from "../lib/api_division";
 import { IDataDiscussionOnDetailDivision } from "../lib/type_division";
+import { useHookstate } from "@hookstate/core";
 
 
 export default function ListDiscussionOnDetailDivision() {
@@ -17,6 +18,7 @@ export default function ListDiscussionOnDetailDivision() {
   const [data, setData] = useState<IDataDiscussionOnDetailDivision[]>([])
   const [loading, setLoading] = useState(true);
   const isMobile = useMediaQuery('(max-width: 369px)');
+  const tema = useHookstate(TEMA)
 
   async function fetchData() {
     try {
@@ -43,7 +45,7 @@ export default function ListDiscussionOnDetailDivision() {
   return (
     <>
       <Box pt={10}>
-        <Text c={WARNA.biruTua} mb={10} fw={"bold"} fz={16}>
+        <Text c={tema.get().utama} mb={10} fw={"bold"} fz={16}>
           Diskusi Terbaru
         </Text>
         <Box
diff --git a/src/module/division_new/ui/list_division.tsx b/src/module/division_new/ui/list_division.tsx
index f6ab252..bec93e2 100644
--- a/src/module/division_new/ui/list_division.tsx
+++ b/src/module/division_new/ui/list_division.tsx
@@ -1,5 +1,5 @@
 'use client'
-import { globalRole, LayoutDrawer, LayoutNavbarNew, SkeletonSingle, WARNA } from '@/module/_global';
+import { globalRole, LayoutDrawer, LayoutNavbarNew, SkeletonSingle, TEMA } from '@/module/_global';
 import { ActionIcon, Avatar, Box, Card, Center, Divider, Flex, Grid, Group, Skeleton, Text, TextInput, Title } from '@mantine/core';
 import { useRouter, useSearchParams } from 'next/navigation';
 import React, { useState } from 'react';
@@ -25,6 +25,7 @@ export default function ListDivision() {
   const [loading, setLoading] = useState(true)
   const [nameGroup, setNameGroup] = useState('')
   const roleLogin = useHookstate(globalRole)
+  const tema = useHookstate(TEMA)
 
 
   const handleList = () => {
@@ -67,7 +68,7 @@ export default function ListDivision() {
       <LayoutNavbarNew back='/home' title='Divisi'
         menu={
           (roleLogin.get() != "user" && roleLogin.get() != "coadmin") &&
-          <ActionIcon variant="light" onClick={() => (setOpenDrawer(true))} bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
+          <ActionIcon variant="light" onClick={() => (setOpenDrawer(true))} bg={tema.get().bgIcon} size="lg" radius="lg" aria-label="Settings">
             <HiMenu size={20} color='white' />
           </ActionIcon>
         } />
@@ -78,7 +79,7 @@ export default function ListDivision() {
             <TextInput
               styles={{
                 input: {
-                  color: WARNA.biruTua,
+                  color: tema.get().utama,
                   borderRadius: '#A3A3A3',
                   borderColor: '#A3A3A3',
                 },
@@ -94,9 +95,9 @@ export default function ListDivision() {
           <Grid.Col span={'auto'}>
             <Flex justify={'center'}>
               {isList ? (
-                <HiOutlineListBullet size={35} color={WARNA.biruTua} onClick={handleList} />
+                <HiOutlineListBullet size={35} color={tema.get().utama} onClick={handleList} />
               ) : (
-                <HiSquares2X2 size={35} color={WARNA.biruTua} onClick={handleList} />
+                <HiSquares2X2 size={35} color={tema.get().utama} onClick={handleList} />
               )}
             </Flex>
           </Grid.Col>
@@ -108,7 +109,7 @@ export default function ListDivision() {
               <Skeleton width={"100%"} height={100} radius={"md"} />
             </>
             :
-            <Box bg={WARNA.biruTua} p={10} style={{ borderRadius: 10 }}>
+            <Box bg={tema.get().utama} p={10} style={{ borderRadius: 10 }}>
               <Text fw={'bold'} c={'white'}>Total Divisi</Text>
               <Flex justify={'center'} align={'center'} h={'100%'}>
                 <Text fz={40} fw={'bold'} c={'white'}>{jumlah}</Text>
@@ -142,13 +143,14 @@ export default function ListDivision() {
                               size={50}
                               aria-label="Gradient action icon"
                               radius={100}
-                              gradient={{
-                                from: '#DFDA7C',
-                                to: '#F2AF46',
-                                deg: 174
-                              }}
+                              // gradient={{
+                              //   from: '#DFDA7C',
+                              //   to: '#F2AF46',
+                              //   deg: 174
+                              // }}
+                              bg={tema.get().bgFiturHome}
                             >
-                              <HiMiniUserGroup size={25} color={WARNA.biruTua} />
+                              <HiMiniUserGroup size={25} color={tema.get().utama} />
                             </ActionIcon>
                           </Center>
                         </Group>
@@ -191,7 +193,7 @@ export default function ListDivision() {
                   <Box key={i} mb={20}>
                     <Card shadow="sm" padding="md" component="a" radius={10} onClick={() => router.push(`/division/${v.id}`)}>
                       <Card.Section>
-                        <Box h={120} bg={WARNA.biruTua}>
+                        <Box h={120} bg={tema.get().utama}>
                           <Flex justify={'center'} align={'center'} h={"100%"} pl={20} pr={20}>
                             <Title order={3} c={"white"} ta={"center"} lineClamp={2}>{v.name}</Title>
                           </Flex>
@@ -202,7 +204,7 @@ export default function ListDivision() {
                         <Group align='center' pt={10} justify='flex-end'>
                           <Avatar.Group>
                             <Avatar>
-                              <MdAccountCircle size={32} color={WARNA.biruTua} />
+                              <MdAccountCircle size={32} color={tema.get().utama} />
                             </Avatar>
                             <Avatar>
                               {
diff --git a/src/module/division_new/ui/list_document.tsx b/src/module/division_new/ui/list_document.tsx
index e678610..1600ae2 100644
--- a/src/module/division_new/ui/list_document.tsx
+++ b/src/module/division_new/ui/list_document.tsx
@@ -1,5 +1,5 @@
 'use client'
-import { WARNA } from "@/module/_global";
+import { TEMA, } from "@/module/_global";
 import { Carousel } from "@mantine/carousel";
 import { Box, Image, Text, Center, Paper, Stack, UnstyledButton, Skeleton, Group } from "@mantine/core";
 import * as ICON from '../lib/file_icon'
@@ -9,6 +9,7 @@ import toast from "react-hot-toast";
 import { funGetDetailDivisionById } from "../lib/api_division";
 import { IDataKalenderOnDetailDivision } from "../lib/type_division";
 import { useState } from "react";
+import { useHookstate } from "@hookstate/core";
 
 const iconContainer = (icon: string) => 'data:image/svg+xml;base64,' + btoa(icon)
 
@@ -17,6 +18,7 @@ export default function ListDocumentOnDetailDivision() {
    const param = useParams<{ id: string }>()
    const [data, setData] = useState<IDataKalenderOnDetailDivision[]>([])
    const [loading, setLoading] = useState(true);
+   const tema = useHookstate(TEMA)
 
    async function fetchData() {
       try {
@@ -42,7 +44,7 @@ export default function ListDocumentOnDetailDivision() {
 
    return (
       <Box pt={10}>
-         <Text c={WARNA.biruTua} mb={10} fw={'bold'} fz={16}>Dokumen Terbaru</Text>
+         <Text c={tema.get().utama} mb={10} fw={'bold'} fz={16}>Dokumen Terbaru</Text>
          <Group justify="center" grow>
             {
                loading
diff --git a/src/module/division_new/ui/list_task.tsx b/src/module/division_new/ui/list_task.tsx
index 01d2105..67dce71 100644
--- a/src/module/division_new/ui/list_task.tsx
+++ b/src/module/division_new/ui/list_task.tsx
@@ -1,5 +1,5 @@
 'use client'
-import { WARNA } from "@/module/_global";
+import { TEMA } from "@/module/_global";
 import { Carousel } from "@mantine/carousel";
 import { Avatar, Box, Group, Skeleton, Stack, Text } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
@@ -10,6 +10,7 @@ import { funGetDetailDivisionById } from "../lib/api_division";
 import { useState } from "react";
 import { IDataTaskOnDetailDivision } from "../lib/type_division";
 import _ from "lodash";
+import { useHookstate } from "@hookstate/core";
 
 
 export default function ListTaskOnDetailDivision() {
@@ -17,6 +18,7 @@ export default function ListTaskOnDetailDivision() {
    const param = useParams<{ id: string }>()
    const [data, setData] = useState<IDataTaskOnDetailDivision[]>([])
    const [loading, setLoading] = useState(true);
+   const tema = useHookstate(TEMA)
 
    async function fetchData() {
       try {
@@ -42,7 +44,7 @@ export default function ListTaskOnDetailDivision() {
 
    return (
       <Box pt={10}>
-         <Text c={WARNA.biruTua} mb={10} fw={'bold'} fz={16}>Tugas Hari Ini</Text>
+         <Text c={tema.get().utama} mb={10} fw={'bold'} fz={16}>Tugas Hari Ini</Text>
          <Group justify="center" grow>
             {
                loading ?
@@ -65,8 +67,8 @@ export default function ListTaskOnDetailDivision() {
          <Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"} withIndicators withControls={false}>
             {data.map((v, i) =>
                <Carousel.Slide key={v.id}>
-                  <Box p={20} w={{ base: 300, md: 400 }} onClick={() => router.push(`/task/${v.id}`)} bg={WARNA.biruTua} style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}` }}>
-                     <Text fw={'bold'} c={WARNA.bgWhite} lineClamp={1}>{_.startCase(v.title)}</Text>
+                  <Box p={20} w={{ base: 300, md: 400 }} onClick={() => router.push(`/task/${v.id}`)} bg={tema.get().utama} style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}` }}>
+                     <Text fw={'bold'} c={tema.get().bgUtama} lineClamp={1}>{_.startCase(v.title)}</Text>
                      <Group justify="space-between" mt={20}>
                         <Group gap={5} align="center" c={"#CFCDCD"}>
                            <CiClock2 size={18} />
diff --git a/src/module/division_new/ui/navbar_admin_division.tsx b/src/module/division_new/ui/navbar_admin_division.tsx
index 8f8cb89..e350715 100644
--- a/src/module/division_new/ui/navbar_admin_division.tsx
+++ b/src/module/division_new/ui/navbar_admin_division.tsx
@@ -1,5 +1,5 @@
 "use client"
-import { LayoutNavbarNew, WARNA } from '@/module/_global';
+import { LayoutNavbarNew, TEMA } from '@/module/_global';
 import { useHookstate } from '@hookstate/core';
 import { ActionIcon, Avatar, Box, Button, Checkbox, Divider, Flex, Grid, Group, rem, Stack, Text, TextInput } from '@mantine/core';
 import { useRouter } from 'next/navigation';
@@ -15,6 +15,7 @@ export default function NavbarAdminDivision({ data, onSuccess }: { data: any, on
   const member = useHookstate(globalMemberDivision)
   const memberValue = member.get() as IFormMemberDivision[]
   const [value, setValue] = useState<string[]>([]);
+  const tema = useHookstate(TEMA)
 
   async function onSubmit() {
     if (value.length === 0) {
@@ -50,7 +51,7 @@ export default function NavbarAdminDivision({ data, onSuccess }: { data: any, on
         <TextInput
           styles={{
             input: {
-              color: WARNA.biruTua,
+              color: tema.get().utama,
               borderRadius: '#A3A3A3',
               borderColor: '#A3A3A3',
             },
@@ -77,7 +78,7 @@ export default function NavbarAdminDivision({ data, onSuccess }: { data: any, on
                             base: 200,
                             xl: 270
                           }}>
-                            <Text c={WARNA.biruTua} fw={"bold"} lineClamp={1}>
+                            <Text c={tema.get().utama} fw={"bold"} lineClamp={1}>
                               {v.name}
                             </Text>
                           </Box>
@@ -102,11 +103,11 @@ export default function NavbarAdminDivision({ data, onSuccess }: { data: any, on
       <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
         maxWidth: rem(550),
         zIndex: 999,
-        backgroundColor: `${WARNA.bgWhite}`,
+        backgroundColor: `${tema.get().bgUtama}`,
       }}>
         <Button
           color="white"
-          bg={WARNA.biruTua}
+          bg={tema.get().utama}
           size="lg"
           radius={30}
           fullWidth
diff --git a/src/module/division_new/ui/navbar_create_users.tsx b/src/module/division_new/ui/navbar_create_users.tsx
index 0fc4be0..38b3cba 100644
--- a/src/module/division_new/ui/navbar_create_users.tsx
+++ b/src/module/division_new/ui/navbar_create_users.tsx
@@ -1,5 +1,5 @@
 "use client"
-import { LayoutNavbarNew, SkeletonSingle, WARNA } from '@/module/_global';
+import { LayoutNavbarNew, SkeletonSingle, TEMA } from '@/module/_global';
 import { useHookstate } from '@hookstate/core';
 import { ActionIcon, Avatar, Box, Button, Center, Divider, Flex, Grid, Indicator, Input, rem, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
@@ -22,6 +22,7 @@ export default function NavbarCreateUsers({ grup, onClose }: { grup?: string, on
   const [dataMember, setDataMember] = useState<TypeUser>([])
   const [loading, setLoading] = useState(true)
   const [onClickSearch, setOnClickSearch] = useState(false)
+  const tema = useHookstate(TEMA)
 
   const handleFileClick = (index: number) => {
     if (selectedFiles.some((i: any) => i.idUser == dataMember[index].id)) {
@@ -79,12 +80,12 @@ export default function NavbarCreateUsers({ grup, onClose }: { grup?: string, on
     <Box>
       <LayoutNavbarNew state={
         <Box>
-          <ActionIcon variant="light" onClick={() => { onClose(true) }} bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
+          <ActionIcon variant="light" onClick={() => { onClose(true) }} bg={tema.get().bgIcon} size="lg" radius="lg" aria-label="Settings">
             <HiChevronLeft size={20} color='white' />
           </ActionIcon>
         </Box>
       } title="Pilih Anggota"
-        menu={<ActionIcon onClick={handleSearchClick} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="search">
+        menu={<ActionIcon onClick={handleSearchClick} variant="light" bg={tema.get().bgIcon} size="lg" radius="lg" aria-label="search">
           <HiMagnifyingGlass size={20} color='white' />
         </ActionIcon>} />
         {/* SEARCH */}
@@ -94,7 +95,7 @@ export default function NavbarCreateUsers({ grup, onClose }: { grup?: string, on
               pos={'fixed'} top={0} p={rem(20)} w={"100%"} style={{
                 maxWidth: rem(550),
                 zIndex: 9999,
-                backgroundColor: `${WARNA.biruTua}`,
+                backgroundColor: `${tema.get().utama}`,
                 borderBottomLeftRadius: 20,
                 borderBottomRightRadius: 20,
               }}>
@@ -110,8 +111,8 @@ export default function NavbarCreateUsers({ grup, onClose }: { grup?: string, on
                       input: {
                         color: "white",
                         borderRadius: '#A3A3A3',
-                        borderColor: `${WARNA.biruTua}`,
-                        backgroundColor: `${WARNA.biruTua}`,
+                        borderColor: `${tema.get().utama}`,
+                        backgroundColor: `${tema.get().utama}`,
                       },
                     }}
                     size="md"
@@ -129,7 +130,7 @@ export default function NavbarCreateUsers({ grup, onClose }: { grup?: string, on
         <Box pos={'fixed'} top={80} pl={rem(20)} pr={rem(20)} pt={rem(20)} pb={rem(5)} w={"100%"} style={{
           maxWidth: rem(550),
           zIndex: 100,
-          backgroundColor: `${WARNA.bgWhite}`,
+          backgroundColor: `${tema.get().bgUtama}`,
           borderBottom: `1px solid ${"#E0DFDF"}`
         }}>
           {selectedFiles.length > 0 ? (
@@ -146,7 +147,7 @@ export default function NavbarCreateUsers({ grup, onClose }: { grup?: string, on
                       <Center>
                         <Indicator inline size={25} offset={7} position="bottom-end" color="red" withBorder label={<IoClose />}>
                           <Avatar style={{
-                            border: `2px solid ${WARNA.biruTua}`
+                            border: `2px solid ${tema.get().utama}`
                           }} src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} alt="it's me" size="lg" />
                         </Indicator>
                       </Center>
@@ -211,11 +212,11 @@ export default function NavbarCreateUsers({ grup, onClose }: { grup?: string, on
       <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
         maxWidth: rem(550),
         zIndex: 999,
-        backgroundColor: `${WARNA.bgWhite}`,
+        backgroundColor: `${tema.get().bgUtama}`,
       }}>
         <Button
           color="white"
-          bg={WARNA.biruTua}
+          bg={tema.get().utama}
           size="lg"
           radius={30}
           fullWidth
diff --git a/src/module/division_new/ui/navbar_detail_division.tsx b/src/module/division_new/ui/navbar_detail_division.tsx
index 8cf3106..d857157 100644
--- a/src/module/division_new/ui/navbar_detail_division.tsx
+++ b/src/module/division_new/ui/navbar_detail_division.tsx
@@ -1,5 +1,5 @@
 'use client'
-import { LayoutDrawer, LayoutNavbarNew, WARNA } from "@/module/_global";
+import { LayoutDrawer, LayoutNavbarNew, TEMA } from "@/module/_global";
 import { ActionIcon, Box } from "@mantine/core";
 import { useState } from "react";
 import { HiMenu } from "react-icons/hi";
@@ -8,11 +8,13 @@ import { funGetDivisionById } from "../lib/api_division";
 import { useParams } from "next/navigation";
 import toast from "react-hot-toast";
 import { useShallowEffect } from "@mantine/hooks";
+import { useHookstate } from "@hookstate/core";
 
 export default function NavbarDetailDivision() {
    const [openDrawer, setOpenDrawer] = useState(false)
    const param = useParams<{ id: string }>()
    const [name, setName] = useState('')
+   const tema = useHookstate(TEMA)
 
    async function getOneData() {
       try {
@@ -36,7 +38,7 @@ export default function NavbarDetailDivision() {
    return (
       <>
          <LayoutNavbarNew back="/division" title={name} menu={
-            <ActionIcon variant="light" onClick={() => (setOpenDrawer(true))} bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
+            <ActionIcon variant="light" onClick={() => (setOpenDrawer(true))} bg={tema.get().bgIcon} size="lg" radius="lg" aria-label="Settings">
                <HiMenu size={20} color='white' />
             </ActionIcon>
          } />
diff --git a/src/module/division_new/ui/report_division_id.tsx b/src/module/division_new/ui/report_division_id.tsx
index 9b2fab1..17b3fb0 100644
--- a/src/module/division_new/ui/report_division_id.tsx
+++ b/src/module/division_new/ui/report_division_id.tsx
@@ -1,5 +1,5 @@
 "use client"
-import { LayoutNavbarNew, WARNA } from '@/module/_global';
+import { LayoutNavbarNew, TEMA } from '@/module/_global';
 import { Box, Skeleton, Stack } from '@mantine/core';
 import { DateInput } from '@mantine/dates';
 import React, { useState } from 'react';
@@ -12,6 +12,7 @@ import { funGetReportDivision } from '../lib/api_division';
 import moment from 'moment';
 import "moment/locale/id";
 import toast from 'react-hot-toast';
+import { useHookstate } from '@hookstate/core';
 
 
 export default function ReportDivisionId() {
@@ -19,6 +20,7 @@ export default function ReportDivisionId() {
   const param = useParams<{ id: string }>()
   const [loading, setLoading] = useState(false);
   const [tampil, setTampil] = useState(false);
+  const tema = useHookstate(TEMA)
   const [report, setReport] = useState({
     progress: [],
     dokumen: [],
@@ -95,7 +97,7 @@ export default function ReportDivisionId() {
                       <Box
                         bg={"white"}
                         style={{
-                          border: `1px solid ${WARNA.borderBiruMuda}`,
+                          border: `1px solid ${tema.get().bgTotalKegiatan}`,
                           borderRadius: 10,
                           padding: 10,
                         }}
@@ -107,7 +109,7 @@ export default function ReportDivisionId() {
                       <Box
                         bg={"white"}
                         style={{
-                          border: `1px solid ${WARNA.borderBiruMuda}`,
+                          border: `1px solid ${tema.get().bgTotalKegiatan}`,
                           borderRadius: 10,
                           padding: 10,
                         }}
@@ -119,7 +121,7 @@ export default function ReportDivisionId() {
                       <Box
                         bg={"white"}
                         style={{
-                          border: `1px solid ${WARNA.borderBiruMuda}`,
+                          border: `1px solid ${tema.get().bgTotalKegiatan}`,
                           borderRadius: 10,
                           padding: 10,
                         }}
diff --git a/src/module/task/ui/add_detail_task.tsx b/src/module/task/ui/add_detail_task.tsx
index cc2cf84..0ea40a9 100644
--- a/src/module/task/ui/add_detail_task.tsx
+++ b/src/module/task/ui/add_detail_task.tsx
@@ -1,5 +1,5 @@
 "use client";
-import { LayoutNavbarNew, WARNA } from "@/module/_global";
+import { LayoutNavbarNew, TEMA } from "@/module/_global";
 import {
    Avatar,
    Box,
@@ -21,6 +21,7 @@ import { IFormDateTask } from "../lib/type_task";
 import moment from "moment";
 import { funCreateDetailTask } from "../lib/api_task";
 import LayoutModal from "@/module/_global/layout/layout_modal";
+import { useHookstate } from "@hookstate/core";
 
 
 export default function AddDetailTask() {
@@ -29,6 +30,7 @@ export default function AddDetailTask() {
    const [title, setTitle] = useState("")
    const [openModal, setOpenModal] = useState(false)
    const param = useParams<{ id: string, detail: string }>()
+   const tema = useHookstate(TEMA)
    const [touched, setTouched] = useState({
       title: false,
    });
@@ -83,7 +85,7 @@ export default function AddDetailTask() {
                   value={value}
                   onChange={setValue}
                   size="md"
-                  c={WARNA.biruTua}
+                  c={tema.get().utama}
                />
             </Group>
             <SimpleGrid cols={{ base: 2, sm: 2, lg: 2 }} mt={20}>
@@ -140,11 +142,11 @@ export default function AddDetailTask() {
             <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
                maxWidth: rem(550),
                zIndex: 999,
-               backgroundColor: `${WARNA.bgWhite}`,
+               backgroundColor: `${tema.get().bgUtama}`,
             }}>
                <Button
                   c={"white"}
-                  bg={WARNA.biruTua}
+                  bg={tema.get().utama}
                   size="lg"
                   radius={30}
                   fullWidth
diff --git a/src/module/task/ui/add_file_detail_task.tsx b/src/module/task/ui/add_file_detail_task.tsx
index e7de716..ed858fe 100644
--- a/src/module/task/ui/add_file_detail_task.tsx
+++ b/src/module/task/ui/add_file_detail_task.tsx
@@ -1,5 +1,5 @@
 "use client";
-import { LayoutDrawer, LayoutNavbarNew, WARNA } from "@/module/_global";
+import { LayoutDrawer, LayoutNavbarNew, TEMA } from "@/module/_global";
 import {
    Box,
    Button,
@@ -21,6 +21,7 @@ import ResultsFile from "./results_file";
 import { FaTrash } from "react-icons/fa6";
 import { funAddFileTask, funCekNamFileUploadTask } from "../lib/api_task";
 import LayoutModal from "@/module/_global/layout/layout_modal";
+import { useHookstate } from "@hookstate/core";
 
 
 export default function AddFileDetailTask() {
@@ -31,6 +32,7 @@ export default function AddFileDetailTask() {
    const param = useParams<{ id: string, detail: string }>()
    const [indexDelFile, setIndexDelFile] = useState<number>(0)
    const [openDrawerFile, setOpenDrawerFile] = useState(false)
+   const tema = useHookstate(TEMA)
    const openRef = useRef<() => void>(null)
 
    function deleteFile(index: number) {
@@ -118,7 +120,7 @@ export default function AddFileDetailTask() {
             {
                listFile.length > 0 &&
                <Box pt={20}>
-                  <Text fw={'bold'} c={WARNA.biruTua}>File</Text>
+                  <Text fw={'bold'} c={tema.get().utama}>File</Text>
                   <Box bg={"white"} style={{
                      borderRadius: 10,
                      border: `1px solid ${"#D6D8F6"}`,
@@ -143,11 +145,11 @@ export default function AddFileDetailTask() {
          <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
             maxWidth: rem(550),
             zIndex: 999,
-            backgroundColor: `${WARNA.bgWhite}`,
+            backgroundColor: `${tema.get().bgUtama}`,
          }}>
             <Button
                color="white"
-               bg={WARNA.biruTua}
+               bg={tema.get().utama}
                size="lg" radius={30}
                fullWidth
                onClick={() => {
@@ -170,10 +172,10 @@ export default function AddFileDetailTask() {
                <SimpleGrid cols={{ base: 3, sm: 3, lg: 3 }} >
                   <Flex style={{ cursor: 'pointer' }} justify={'center'} align={'center'} direction={'column'} onClick={() => deleteFile(indexDelFile)}>
                      <Box>
-                        <FaTrash size={30} color={WARNA.biruTua} />
+                        <FaTrash size={30} color={tema.get().utama} />
                      </Box>
                      <Box>
-                        <Text c={WARNA.biruTua} ta='center'>Hapus File</Text>
+                        <Text c={tema.get().utama} ta='center'>Hapus File</Text>
                      </Box>
                   </Flex>
                </SimpleGrid>
diff --git a/src/module/task/ui/add_member_detail_task.tsx b/src/module/task/ui/add_member_detail_task.tsx
index 592d7c0..dc9b7ef 100644
--- a/src/module/task/ui/add_member_detail_task.tsx
+++ b/src/module/task/ui/add_member_detail_task.tsx
@@ -1,5 +1,5 @@
 "use client"
-import { LayoutNavbarNew, SkeletonSingle, WARNA } from "@/module/_global";
+import { LayoutNavbarNew, SkeletonSingle, TEMA } from "@/module/_global";
 import { funGetDivisionById, funGetSearchMemberDivision, IDataMemberDivision } from "@/module/division_new";
 import {
    ActionIcon,
@@ -30,6 +30,7 @@ import LayoutModal from "@/module/_global/layout/layout_modal";
 import { HiMagnifyingGlass } from "react-icons/hi2";
 import { IoArrowBackOutline, IoClose } from "react-icons/io5";
 import { Carousel } from "@mantine/carousel";
+import { useHookstate } from "@hookstate/core";
 
 export default function AddMemberDetailTask() {
    const router = useRouter()
@@ -42,6 +43,7 @@ export default function AddMemberDetailTask() {
    const [loading, setLoading] = useState(true)
    const [onClickSearch, setOnClickSearch] = useState(false)
    const [searchQuery, setSearchQuery] = useState('')
+   const tema = useHookstate(TEMA)
 
 
    async function getData() {
@@ -159,7 +161,7 @@ export default function AddMemberDetailTask() {
          <LayoutNavbarNew
             back=""
             title="Pilih Anggota"
-            menu={<ActionIcon onClick={handleSearchClick} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="search">
+            menu={<ActionIcon onClick={handleSearchClick} variant="light" bg={tema.get().bgIcon} size="lg" radius="lg" aria-label="search">
                <HiMagnifyingGlass size={20} color='white' />
             </ActionIcon>}
          />
@@ -170,7 +172,7 @@ export default function AddMemberDetailTask() {
                   pos={'fixed'} top={0} p={rem(20)} w={"100%"} style={{
                      maxWidth: rem(550),
                      zIndex: 9999,
-                     backgroundColor: `${WARNA.biruTua}`,
+                     backgroundColor: `${tema.get().utama}`,
                      borderBottomLeftRadius: 20,
                      borderBottomRightRadius: 20,
                   }}>
@@ -186,8 +188,8 @@ export default function AddMemberDetailTask() {
                               input: {
                                  color: "white",
                                  borderRadius: '#A3A3A3',
-                                 borderColor: `${WARNA.biruTua}`,
-                                 backgroundColor: `${WARNA.biruTua}`,
+                                 borderColor: `${tema.get().utama}`,
+                                 backgroundColor: `${tema.get().utama}`,
                               },
                            }}
                            size="md"
@@ -205,7 +207,7 @@ export default function AddMemberDetailTask() {
          <Box pos={'fixed'} top={80} pl={rem(20)} pr={rem(20)} pt={rem(20)} pb={rem(5)} w={"100%"} style={{
             maxWidth: rem(550),
             zIndex: 100,
-            backgroundColor: `${WARNA.bgWhite}`,
+            backgroundColor: `${tema.get().bgUtama}`,
             borderBottom: `1px solid ${"#E0DFDF"}`
          }}>
             {selectedFiles.length > 0 ? (
@@ -222,7 +224,7 @@ export default function AddMemberDetailTask() {
                               <Center>
                                  <Indicator inline size={25} offset={7} position="bottom-end" color="red" withBorder label={<IoClose />}>
                                     <Avatar style={{
-                                       border: `2px solid ${WARNA.biruTua}`
+                                       border: `2px solid ${tema.get().utama}`
                                     }} src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} alt="it's me" size="lg" />
                                  </Indicator>
                               </Center>
@@ -244,7 +246,7 @@ export default function AddMemberDetailTask() {
 
          <Box p={20}>
             <Group justify="space-between" mt={100} onClick={handleSelectAll}>
-               <Text c={WARNA.biruTua} fw={"bold"}>
+               <Text c={tema.get().utama} fw={"bold"}>
                   Pilih Semua Anggota
                </Text>
                {selectAll ? <FaCheck style={{ marginRight: 10 }} /> : ""}
@@ -295,11 +297,11 @@ export default function AddMemberDetailTask() {
          <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
             maxWidth: rem(550),
             zIndex: 999,
-            backgroundColor: `${WARNA.bgWhite}`,
+            backgroundColor: `${tema.get().bgUtama}`,
          }}>
             <Button
                c={"white"}
-               bg={WARNA.biruTua}
+               bg={tema.get().utama}
                size="lg"
                radius={30}
                fullWidth
diff --git a/src/module/task/ui/cancel_task.tsx b/src/module/task/ui/cancel_task.tsx
index d59f248..e3af172 100644
--- a/src/module/task/ui/cancel_task.tsx
+++ b/src/module/task/ui/cancel_task.tsx
@@ -1,5 +1,5 @@
 "use client";
-import { LayoutNavbarNew, WARNA } from "@/module/_global";
+import { LayoutNavbarNew, TEMA } from "@/module/_global";
 import {
    Box,
    Button,
@@ -12,12 +12,14 @@ import { useParams, useRouter } from "next/navigation";
 import toast from "react-hot-toast";
 import { funCancelTask } from "../lib/api_task";
 import LayoutModal from "@/module/_global/layout/layout_modal";
+import { useHookstate } from "@hookstate/core";
 
 
 export default function CancelTask() {
    const router = useRouter()
    const [alasan, setAlasan] = useState("")
    const [openModal, setOpenModal] = useState(false)
+   const tema = useHookstate(TEMA)
    const param = useParams<{ id: string, detail: string }>()
    const [touched, setTouched] = useState({
       reason: false,
@@ -73,11 +75,11 @@ export default function CancelTask() {
          <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
             maxWidth: rem(550),
             zIndex: 999,
-            backgroundColor: `${WARNA.bgWhite}`,
+            backgroundColor: `${tema.get().bgUtama}`,
          }}>
             <Button
                c={"white"}
-               bg={WARNA.biruTua}
+               bg={tema.get().utama}
                size="lg"
                radius={30}
                fullWidth
diff --git a/src/module/task/ui/create_date_end_task.tsx b/src/module/task/ui/create_date_end_task.tsx
index f84295c..8300f9a 100644
--- a/src/module/task/ui/create_date_end_task.tsx
+++ b/src/module/task/ui/create_date_end_task.tsx
@@ -1,5 +1,5 @@
 "use client";
-import { LayoutNavbarNew, WARNA } from "@/module/_global";
+import { LayoutNavbarNew, TEMA } from "@/module/_global";
 import {
   ActionIcon,
   Avatar,
@@ -21,6 +21,7 @@ import toast from "react-hot-toast";
 import { IFormDateTask } from "../lib/type_task";
 import moment from "moment";
 import { HiChevronLeft } from "react-icons/hi2";
+import { useHookstate } from "@hookstate/core";
 
 
 export default function ViewDateEndTask({ onClose, onSet }: {onClose: (val: boolean) => void, onSet: (val: IFormDateTask) => void }) {
@@ -28,6 +29,7 @@ export default function ViewDateEndTask({ onClose, onSet }: {onClose: (val: bool
   const router = useRouter()
   const param = useParams<{ id: string }>()
   const [title, setTitle] = useState("")
+  const tema = useHookstate(TEMA)
   const [touched, setTouched] = useState({
     title: false,
   });
@@ -53,7 +55,7 @@ export default function ViewDateEndTask({ onClose, onSet }: {onClose: (val: bool
     <Box>
       <LayoutNavbarNew state={
         <Box>
-          <ActionIcon variant="light" onClick={() => { onClose(true) }} bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
+          <ActionIcon variant="light" onClick={() => { onClose(true) }} bg={tema.get().bgIcon} size="lg" radius="lg" aria-label="Settings">
             <HiChevronLeft size={20} color='white' />
           </ActionIcon>
         </Box>
@@ -71,7 +73,7 @@ export default function ViewDateEndTask({ onClose, onSet }: {onClose: (val: bool
             value={value}
             onChange={setValue}
             size="md"
-            c={WARNA.biruTua}
+            c={tema.get().utama}
           />
         </Group>
         <SimpleGrid cols={{ base: 2, sm: 2, lg: 2 }} mt={20}>
@@ -123,11 +125,11 @@ export default function ViewDateEndTask({ onClose, onSet }: {onClose: (val: bool
       <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
         maxWidth: rem(550),
         zIndex: 999,
-        backgroundColor: `${WARNA.bgWhite}`,
+        backgroundColor: `${tema.get().bgUtama}`,
       }}>
         <Button
           c={"white"}
-          bg={WARNA.biruTua}
+          bg={tema.get().utama}
           size="lg"
           radius={30}
           fullWidth
diff --git a/src/module/task/ui/create_task.tsx b/src/module/task/ui/create_task.tsx
index 576ff01..a981570 100644
--- a/src/module/task/ui/create_task.tsx
+++ b/src/module/task/ui/create_task.tsx
@@ -1,5 +1,5 @@
 "use client";
-import { LayoutDrawer, LayoutNavbarNew, WARNA } from "@/module/_global";
+import { LayoutDrawer, LayoutNavbarNew, TEMA } from "@/module/_global";
 import { Avatar, Box, Button, Center, Divider, Flex, Grid, Group, Input, rem, SimpleGrid, Stack, Text, TextInput } from "@mantine/core";
 import { useParams, useRouter } from "next/navigation";
 import React, { useRef, useState } from "react";
@@ -40,6 +40,7 @@ export default function CreateTask() {
   const [indexDelTask, setIndexDelTask] = useState<number>(0)
   const isMobile = useMediaQuery('(max-width: 369px)');
   const [title, setTitle] = useState("")
+  const tema = useHookstate(TEMA)
   const [touched, setTouched] = useState({
     title: false,
     task: false,
@@ -174,7 +175,7 @@ export default function CreateTask() {
           {
             dataTask.length > 0 &&
             <Box pt={20}>
-              <Text fw={'bold'} c={WARNA.biruTua}>Tanggal & Tugas</Text>
+              <Text fw={'bold'} c={tema.get().utama}>Tanggal & Tugas</Text>
               {
                 dataTask.map((v, i) => {
                   return (
@@ -193,7 +194,7 @@ export default function CreateTask() {
           {
             listFile.length > 0 &&
             <Box pt={20}>
-              <Text fw={'bold'} c={WARNA.biruTua}>File</Text>
+              <Text fw={'bold'} c={tema.get().utama}>File</Text>
               <Box bg={"white"} style={{
                 borderRadius: 10,
                 border: `1px solid ${"#D6D8F6"}`,
@@ -220,8 +221,8 @@ export default function CreateTask() {
             member.length > 0 &&
             <Box pt={30}>
               <Group justify="space-between">
-                <Text c={WARNA.biruTua}>Anggota Terpilih</Text>
-                <Text c={WARNA.biruTua}>Total {member.length} Anggota</Text>
+                <Text c={tema.get().utama}>Anggota Terpilih</Text>
+                <Text c={tema.get().utama}>Total {member.length} Anggota</Text>
               </Group>
               <Box pt={10}>
                 <Box mb={20}>
@@ -245,14 +246,14 @@ export default function CreateTask() {
                                   base: isMobile ? 130 : 140,
                                   xl: 270
                                 }}>
-                                  <Text c={WARNA.biruTua} fw={"bold"} lineClamp={1} fz={isMobile ? 14 : 16}>
+                                  <Text c={tema.get().utama} fw={"bold"} lineClamp={1} fz={isMobile ? 14 : 16}>
                                     {v.name}
                                   </Text>
                                 </Box>
                               </Group>
                             </Grid.Col>
                             <Grid.Col span={3}>
-                              <Text c={WARNA.biruTua} fw={"bold"} ta={'end'} fz={isMobile ? 13 : 16}>
+                              <Text c={tema.get().utama} fw={"bold"} ta={'end'} fz={isMobile ? 13 : 16}>
                                 Anggota
                               </Text>
                             </Grid.Col>
@@ -273,11 +274,11 @@ export default function CreateTask() {
       <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
         maxWidth: rem(550),
         zIndex: 999,
-        backgroundColor: `${WARNA.bgWhite}`,
+        backgroundColor: `${tema.get().bgUtama}`,
       }}>
         <Button
           color="white"
-          bg={WARNA.biruTua}
+          bg={tema.get().utama}
           size="lg" radius={30}
           fullWidth
           onClick={() => {
@@ -371,10 +372,10 @@ export default function CreateTask() {
           <SimpleGrid cols={{ base: 3, sm: 3, lg: 3 }} >
             <Flex style={{ cursor: 'pointer' }} justify={'center'} align={'center'} direction={'column'} onClick={() => deleteFile(indexDelFile)}>
               <Box>
-                <FaTrash size={30} color={WARNA.biruTua} />
+                <FaTrash size={30} color={tema.get().utama} />
               </Box>
               <Box>
-                <Text c={WARNA.biruTua} ta='center'>Hapus File</Text>
+                <Text c={tema.get().utama} ta='center'>Hapus File</Text>
               </Box>
             </Flex>
           </SimpleGrid>
@@ -392,10 +393,10 @@ export default function CreateTask() {
           <SimpleGrid cols={{ base: 3, sm: 3, lg: 3 }} >
             <Flex style={{ cursor: 'pointer' }} justify={'center'} align={'center'} direction={'column'} onClick={() => deleteTask(indexDelTask)}>
               <Box>
-                <FaTrash size={30} color={WARNA.biruTua} />
+                <FaTrash size={30} color={tema.get().utama} />
               </Box>
               <Box>
-                <Text c={WARNA.biruTua} ta='center'>Hapus Tugas</Text>
+                <Text c={tema.get().utama} ta='center'>Hapus Tugas</Text>
               </Box>
             </Flex>
           </SimpleGrid>
diff --git a/src/module/task/ui/create_users_project.tsx b/src/module/task/ui/create_users_project.tsx
index 9428b6b..d932796 100644
--- a/src/module/task/ui/create_users_project.tsx
+++ b/src/module/task/ui/create_users_project.tsx
@@ -1,5 +1,5 @@
 "use client"
-import { LayoutNavbarNew, SkeletonSingle, WARNA } from "@/module/_global";
+import { LayoutNavbarNew, SkeletonSingle, TEMA } from "@/module/_global";
 import { funGetDivisionById, funGetSearchMemberDivision, IDataMemberDivision } from "@/module/division_new";
 import { useHookstate } from "@hookstate/core";
 import {
@@ -40,6 +40,7 @@ export default function CreateUsersProject({ onClose }: { onClose: (val: any) =>
   const [loading, setLoading] = useState(true)
   const [onClickSearch, setOnClickSearch] = useState(false)
   const [searchQuery, setSearchQuery] = useState('')
+  const tema = useHookstate(TEMA)
 
 
   async function getData() {
@@ -135,13 +136,13 @@ export default function CreateUsersProject({ onClose }: { onClose: (val: any) =>
       <LayoutNavbarNew
         state={
           <Box>
-            <ActionIcon variant="light" onClick={() => { onClose(true) }} bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
+            <ActionIcon variant="light" onClick={() => { onClose(true) }} bg={tema.get().bgIcon} size="lg" radius="lg" aria-label="Settings">
               <HiChevronLeft size={20} color='white' />
             </ActionIcon>
           </Box>
         }
         title="Pilih Anggota"
-        menu={<ActionIcon onClick={handleSearchClick} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="search">
+        menu={<ActionIcon onClick={handleSearchClick} variant="light" bg={tema.get().bgIcon} size="lg" radius="lg" aria-label="search">
           <HiMagnifyingGlass size={20} color='white' />
         </ActionIcon>}
       />
@@ -152,7 +153,7 @@ export default function CreateUsersProject({ onClose }: { onClose: (val: any) =>
             pos={'fixed'} top={0} p={rem(20)} w={"100%"} style={{
               maxWidth: rem(550),
               zIndex: 9999,
-              backgroundColor: `${WARNA.biruTua}`,
+              backgroundColor: `${tema.get().utama}`,
               borderBottomLeftRadius: 20,
               borderBottomRightRadius: 20,
             }}>
@@ -168,8 +169,8 @@ export default function CreateUsersProject({ onClose }: { onClose: (val: any) =>
                     input: {
                       color: "white",
                       borderRadius: '#A3A3A3',
-                      borderColor: `${WARNA.biruTua}`,
-                      backgroundColor: `${WARNA.biruTua}`,
+                      borderColor: `${tema.get().utama}`,
+                      backgroundColor: `${tema.get().utama}`,
                     },
                   }}
                   size="md"
@@ -187,7 +188,7 @@ export default function CreateUsersProject({ onClose }: { onClose: (val: any) =>
       <Box pos={'fixed'} top={80} pl={rem(20)} pr={rem(20)} pt={rem(20)} pb={rem(5)} w={"100%"} style={{
         maxWidth: rem(550),
         zIndex: 100,
-        backgroundColor: `${WARNA.bgWhite}`,
+        backgroundColor: `${tema.get().bgUtama}`,
         borderBottom: `1px solid ${"#E0DFDF"}`
       }}>
         {selectedFiles.length > 0 ? (
@@ -204,7 +205,7 @@ export default function CreateUsersProject({ onClose }: { onClose: (val: any) =>
                     <Center>
                       <Indicator inline size={25} offset={7} position="bottom-end" color="red" withBorder label={<IoClose />}>
                         <Avatar style={{
-                          border: `2px solid ${WARNA.biruTua}`
+                          border: `2px solid ${tema.get().utama}`
                         }} src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} alt="it's me" size="lg" />
                       </Indicator>
                     </Center>
@@ -229,10 +230,10 @@ export default function CreateUsersProject({ onClose }: { onClose: (val: any) =>
           <Skeleton height={20} width={"100%"} mt={20} />
           :
           <Group justify="space-between" mt={100} onClick={handleSelectAll}>
-            <Text c={WARNA.biruTua} fw={"bold"}>
+            <Text c={tema.get().utama} fw={"bold"}>
               Pilih Semua Anggota
             </Text>
-            <BsListCheck size={25} style={{ marginRight: 5 }} color={WARNA.biruTua} />
+            <BsListCheck size={25} style={{ marginRight: 5 }} color={tema.get().utama} />
           </Group>
         }
         <Box mt={15} mb={100}>
@@ -280,11 +281,11 @@ export default function CreateUsersProject({ onClose }: { onClose: (val: any) =>
       <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
         maxWidth: rem(550),
         zIndex: 999,
-        backgroundColor: `${WARNA.bgWhite}`,
+        backgroundColor: `${tema.get().bgUtama}`,
       }}>
         <Button
           c={"white"}
-          bg={WARNA.biruTua}
+          bg={tema.get().utama}
           size="lg"
           radius={30}
           fullWidth
diff --git a/src/module/task/ui/detail_list_anggota_task.tsx b/src/module/task/ui/detail_list_anggota_task.tsx
index f475f0a..4f1dc8e 100644
--- a/src/module/task/ui/detail_list_anggota_task.tsx
+++ b/src/module/task/ui/detail_list_anggota_task.tsx
@@ -1,5 +1,5 @@
 'use client'
-import { globalRole, LayoutDrawer, SkeletonSingle, WARNA } from "@/module/_global";
+import { globalRole, LayoutDrawer, SkeletonSingle, TEMA } from "@/module/_global";
 import { Box, Group, Flex, Avatar, Text, SimpleGrid, Stack, Grid } from "@mantine/core";
 import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
 import { useParams, useRouter } from "next/navigation";
@@ -25,6 +25,7 @@ export default function ListAnggotaDetailTask() {
    const roleLogin = useHookstate(globalRole)
    const adminLogin = useHookstate(globalIsAdminDivision)
    const isMobile = useMediaQuery('(max-width: 369px)');
+   const tema = useHookstate(TEMA)
 
    async function getOneData() {
       try {
@@ -70,8 +71,8 @@ export default function ListAnggotaDetailTask() {
    return (
       <Box pt={20}>
          <Group justify="space-between">
-            <Text c={WARNA.biruTua}>Anggota Terpilih</Text>
-            <Text c={WARNA.biruTua}>Total {isData.length} Anggota</Text>
+            <Text c={tema.get().utama}>Anggota Terpilih</Text>
+            <Text c={tema.get().utama}>Total {isData.length} Anggota</Text>
          </Group>
          <Box pt={10}>
             <Box mb={20}>
@@ -118,7 +119,7 @@ export default function ListAnggotaDetailTask() {
                                           </Group>
                                        </Grid.Col>
                                        <Grid.Col span={3}>
-                                          <Text c={WARNA.biruTua} fw={"bold"} ta={'end'} fz={isMobile ? 13 : 16}>
+                                          <Text c={tema.get().utama} fw={"bold"} ta={'end'} fz={isMobile ? 13 : 16}>
                                              Anggota
                                           </Text>
                                        </Grid.Col>
@@ -139,20 +140,20 @@ export default function ListAnggotaDetailTask() {
                   >
                      <Flex onClick={() => { router.push('/member/' + dataChoose.id) }} justify={'center'} align={'center'} direction={'column'} >
                         <Box>
-                           <FaUser size={30} color={WARNA.biruTua} />
+                           <FaUser size={30} color={tema.get().utama} />
                         </Box>
                         <Box>
-                           <Text c={WARNA.biruTua}>Lihat profil</Text>
+                           <Text c={tema.get().utama}>Lihat profil</Text>
                         </Box>
                      </Flex>
                      {
                         (roleLogin.get() != "user" && roleLogin.get() != "coadmin") || adminLogin.get() ?
                            <Flex onClick={() => { setOpenModal(true) }} justify={'center'} align={'center'} direction={'column'} >
                               <Box>
-                                 <IoIosCloseCircle size={30} color={WARNA.biruTua} />
+                                 <IoIosCloseCircle size={30} color={tema.get().utama} />
                               </Box>
                               <Box>
-                                 <Text c={WARNA.biruTua}>Keluarkan anggota</Text>
+                                 <Text c={tema.get().utama}>Keluarkan anggota</Text>
                               </Box>
                            </Flex>
                            : <></>
diff --git a/src/module/task/ui/detail_list_file_task.tsx b/src/module/task/ui/detail_list_file_task.tsx
index a2e72c4..8947058 100644
--- a/src/module/task/ui/detail_list_file_task.tsx
+++ b/src/module/task/ui/detail_list_file_task.tsx
@@ -1,5 +1,5 @@
 'use client'
-import { LayoutDrawer, LayoutModalViewFile, SkeletonDetailListTugasTask, WARNA } from "@/module/_global";
+import { LayoutDrawer, LayoutModalViewFile, SkeletonDetailListTugasTask, TEMA } from "@/module/_global";
 import { Box, Center, Flex, Grid, Group, SimpleGrid, Skeleton, Stack, Text } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
 import { useParams } from "next/navigation";
@@ -10,6 +10,7 @@ import { funDeleteFileTask, funGetTaskDivisionById } from "../lib/api_task";
 import { IDataFileTaskDivision } from "../lib/type_task";
 import { FaTrash } from "react-icons/fa6";
 import LayoutModal from "@/module/_global/layout/layout_modal";
+import { useHookstate } from "@hookstate/core";
 
 export default function ListFileDetailTask() {
    const [isData, setData] = useState<IDataFileTaskDivision[]>([])
@@ -23,6 +24,7 @@ export default function ListFileDetailTask() {
    const [nameData, setNameData] = useState('')
    const [isOpenModalView, setOpenModalView] = useState(false)
    const [isExtension, setExtension] = useState('')
+   const tema = useHookstate(TEMA)
 
    async function getOneData() {
       try {
@@ -67,7 +69,7 @@ export default function ListFileDetailTask() {
 
    return (
       <Box pt={20}>
-         <Text fw={'bold'} c={WARNA.biruTua}>File</Text>
+         <Text fw={'bold'} c={tema.get().utama}>File</Text>
          <Box bg={"white"} style={{
             borderRadius: 10,
             border: `1px solid ${"#D6D8F6"}`,
@@ -140,19 +142,19 @@ export default function ListFileDetailTask() {
                   >
                      <Flex onClick={() => { setOpenModalView(true) }} justify={'center'} align={'center'} direction={'column'} >
                         <Box>
-                           <BsFileTextFill size={30} color={WARNA.biruTua} />
+                           <BsFileTextFill size={30} color={tema.get().utama} />
                         </Box>
                         <Box>
-                           <Text c={WARNA.biruTua}>Lihat file</Text>
+                           <Text c={tema.get().utama}>Lihat file</Text>
                         </Box>
                      </Flex>
 
                      <Flex onClick={() => { setOpenModal(true) }} justify={'center'} align={'center'} direction={'column'} >
                         <Box>
-                           <FaTrash size={30} color={WARNA.biruTua} />
+                           <FaTrash size={30} color={tema.get().utama} />
                         </Box>
                         <Box>
-                           <Text c={WARNA.biruTua}>Hapus file</Text>
+                           <Text c={tema.get().utama}>Hapus file</Text>
                         </Box>
                      </Flex>
                   </SimpleGrid>
diff --git a/src/module/task/ui/detail_list_tugas_task.tsx b/src/module/task/ui/detail_list_tugas_task.tsx
index ca9fd81..d13ef1e 100644
--- a/src/module/task/ui/detail_list_tugas_task.tsx
+++ b/src/module/task/ui/detail_list_tugas_task.tsx
@@ -1,5 +1,5 @@
 'use client'
-import { LayoutDrawer, SkeletonDetailListTugasTask, WARNA } from "@/module/_global"
+import { LayoutDrawer, SkeletonDetailListTugasTask, TEMA } from "@/module/_global"
 import { Box, Grid, Center, Checkbox, Group, SimpleGrid, Text, Stack, Flex, Divider } from "@mantine/core"
 import { useShallowEffect } from "@mantine/hooks"
 import { useParams, useRouter } from "next/navigation"
@@ -25,6 +25,7 @@ export default function ListTugasDetailTask() {
    const [statusData, setStatusData] = useState(0)
    const router = useRouter()
    const refresh = useHookstate(globalRefreshTask)
+   const tema = useHookstate(TEMA)
    async function getOneData() {
       try {
          setLoading(true)
@@ -88,7 +89,7 @@ export default function ListTugasDetailTask() {
 
    return (
       <Box pt={20}>
-         <Text fw={"bold"} c={WARNA.biruTua}>
+         <Text fw={"bold"} c={tema.get().utama}>
             Tanggal & Tugas
          </Text>
          <Box
@@ -178,28 +179,28 @@ export default function ListTugasDetailTask() {
                   >
                      <Flex onClick={() => { setOpenDrawerStatus(true) }} justify={'center'} align={'center'} direction={'column'} >
                         <Box>
-                           <AiOutlineFileDone size={30} color={WARNA.biruTua} />
+                           <AiOutlineFileDone size={30} color={tema.get().utama} />
                         </Box>
                         <Box>
-                           <Text c={WARNA.biruTua}>Update status</Text>
+                           <Text c={tema.get().utama}>Update status</Text>
                         </Box>
                      </Flex>
 
                      <Flex onClick={() => { router.push('edit/' + idData) }} justify={'center'} align={'center'} direction={'column'} >
                         <Box>
-                           <FaPencil size={30} color={WARNA.biruTua} />
+                           <FaPencil size={30} color={tema.get().utama} />
                         </Box>
                         <Box>
-                           <Text c={WARNA.biruTua}>Edit tugas</Text>
+                           <Text c={tema.get().utama}>Edit tugas</Text>
                         </Box>
                      </Flex>
 
                      <Flex onClick={() => { setOpenModal(true) }} justify={'center'} align={'center'} direction={'column'} >
                         <Box>
-                           <FaTrash size={30} color={WARNA.biruTua} />
+                           <FaTrash size={30} color={tema.get().utama} />
                         </Box>
                         <Box>
-                           <Text c={WARNA.biruTua}>Hapus tugas</Text>
+                           <Text c={tema.get().utama}>Hapus tugas</Text>
                         </Box>
                      </Flex>
                   </SimpleGrid>
diff --git a/src/module/task/ui/detail_progress_task.tsx b/src/module/task/ui/detail_progress_task.tsx
index 028ed10..cbcd468 100644
--- a/src/module/task/ui/detail_progress_task.tsx
+++ b/src/module/task/ui/detail_progress_task.tsx
@@ -1,5 +1,5 @@
 'use client'
-import { WARNA } from "@/module/_global";
+import { TEMA } from "@/module/_global";
 import { Box, Grid, ActionIcon, Progress, Text, Skeleton } from "@mantine/core";
 import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
 import { useParams } from "next/navigation";
@@ -17,6 +17,7 @@ export default function ProgressDetailTask() {
    const refresh = useHookstate(globalRefreshTask)
    const [loading, setLoading] = useState(true)
    const isMobile = useMediaQuery('(max-width: 369px)');  
+   const tema = useHookstate(TEMA)
 
    async function getOneData() {
       try {
@@ -60,7 +61,7 @@ export default function ProgressDetailTask() {
             :
             <Box
                p={20}
-               bg={"#DCEED8"}
+               bg={tema.get().bgTotalKegiatan}
                style={{
                   borderRadius: 10,
                }}
@@ -72,9 +73,10 @@ export default function ProgressDetailTask() {
                         size={isMobile ? 50 : 68}
                         aria-label="Gradient action icon"
                         radius={100}
-                        gradient={{ from: "#DFDA7C", to: "#F2AF46", deg: 174 }}
+                        // gradient={{ from: "#DFDA7C", to: "#F2AF46", deg: 174 }}
+                        bg={tema.get().bgFiturDivisi}
                      >
-                        <HiMiniPresentationChartBar size={isMobile ? 25 : 35} color={WARNA.biruTua} />
+                        <HiMiniPresentationChartBar size={isMobile ? 25 : 35} color={tema.get().utama} />
                      </ActionIcon>
                   </Grid.Col>
                   <Grid.Col span={9}>
@@ -85,7 +87,7 @@ export default function ProgressDetailTask() {
                               border: `1px solid ${"#BDBDBD"}`,
                            }}
                            w={"100%"}
-                           color="#FCAA4B"
+                           color={tema.get().bgFiturDivisi}
                            radius="md"
                            size={isMobile ? "lg" : "xl"}
                            value={valProgress}
diff --git a/src/module/task/ui/drawer_division_task.tsx b/src/module/task/ui/drawer_division_task.tsx
index bbda27b..cdc9ba2 100644
--- a/src/module/task/ui/drawer_division_task.tsx
+++ b/src/module/task/ui/drawer_division_task.tsx
@@ -1,8 +1,10 @@
-import { WARNA } from "@/module/_global";
+import { TEMA } from "@/module/_global";
+import { useHookstate } from "@hookstate/core";
 import { Box, Stack, SimpleGrid, Flex, Text } from "@mantine/core";
 import { IoAddCircle } from "react-icons/io5";
 
 export default function DrawerDivisionTask() {
+   const tema = useHookstate(TEMA)
    return (
       <Box>
          <Stack pt={10}>
@@ -11,10 +13,10 @@ export default function DrawerDivisionTask() {
             >
                <Flex onClick={() => window.location.href = "task/create"} justify={'center'} align={'center'} direction={'column'} >
                   <Box>
-                     <IoAddCircle size={30} color={WARNA.biruTua} />
+                     <IoAddCircle size={30} color={tema.get().utama} />
                   </Box>
                   <Box>
-                     <Text c={WARNA.biruTua}>Tambah Tugas</Text>
+                     <Text c={tema.get().utama}>Tambah Tugas</Text>
                   </Box>
                </Flex>
             </SimpleGrid>
diff --git a/src/module/task/ui/edit_detail_task.tsx b/src/module/task/ui/edit_detail_task.tsx
index 86709fb..7a72d8c 100644
--- a/src/module/task/ui/edit_detail_task.tsx
+++ b/src/module/task/ui/edit_detail_task.tsx
@@ -1,5 +1,5 @@
 "use client";
-import { LayoutNavbarNew, WARNA } from "@/module/_global";
+import { LayoutNavbarNew, TEMA } from "@/module/_global";
 import {
    Avatar,
    Box,
@@ -22,6 +22,7 @@ import moment from "moment";
 import { funEditDetailTask, funGetDetailTask } from "../lib/api_task";
 import { useShallowEffect } from "@mantine/hooks";
 import LayoutModal from "@/module/_global/layout/layout_modal";
+import { useHookstate } from "@hookstate/core";
 
 
 export default function EditDetailTask() {
@@ -31,6 +32,7 @@ export default function EditDetailTask() {
    const param = useParams<{ id: string, detail: string }>()
    const [openModal, setOpenModal] = useState(false)
    const [loading, setLoading] = useState(true)
+   const tema = useHookstate(TEMA)
 
    async function onSubmit() {
       if (value[0] == null || value[1] == null)
@@ -101,7 +103,7 @@ export default function EditDetailTask() {
                   value={value}
                   onChange={setValue}
                   size="md"
-                  c={WARNA.biruTua}
+                  c={tema.get().utama}
                />
             </Group>
             <SimpleGrid cols={{ base: 2, sm: 2, lg: 2 }} mt={20}>
@@ -127,7 +129,7 @@ export default function EditDetailTask() {
                      <Skeleton height={45} mt={20} radius={10} />
                      :
                      <>
-                        <Text c={WARNA.biruTua}>Tanggal Berakhir</Text>
+                        <Text c={tema.get().utama}>Tanggal Berakhir</Text>
                         <Group
                            justify="center"
                            bg={"white"}
@@ -164,14 +166,14 @@ export default function EditDetailTask() {
          <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
             maxWidth: rem(550),
             zIndex: 999,
-            backgroundColor: `${WARNA.bgWhite}`,
+            backgroundColor: `${tema.get().bgUtama}`,
          }}>
             {loading ?
                <Skeleton height={50} radius={30} />
                :
                <Button
                   c={"white"}
-                  bg={WARNA.biruTua}
+                  bg={tema.get().utama}
                   size="lg"
                   radius={30}
                   fullWidth
diff --git a/src/module/task/ui/edit_task.tsx b/src/module/task/ui/edit_task.tsx
index 7e6fff7..9e9bb25 100644
--- a/src/module/task/ui/edit_task.tsx
+++ b/src/module/task/ui/edit_task.tsx
@@ -1,5 +1,5 @@
 "use client";
-import { LayoutNavbarNew, WARNA } from "@/module/_global";
+import { LayoutNavbarNew, TEMA } from "@/module/_global";
 import {
    Box,
    Button,
@@ -16,6 +16,7 @@ import toast from "react-hot-toast";
 import LayoutModal from "@/module/_global/layout/layout_modal";
 import { funEditTask, funGetTaskDivisionById } from "../lib/api_task";
 import { useShallowEffect } from "@mantine/hooks";
+import { useHookstate } from "@hookstate/core";
 
 
 export default function EditTask() {
@@ -24,6 +25,7 @@ export default function EditTask() {
    const [openModal, setOpenModal] = useState(false)
    const param = useParams<{ id: string, detail: string }>()
    const [loading, setLoading] = useState(true)
+   const tema = useHookstate(TEMA)
    const [touched, setTouched] = useState({
       title: false,
    });
@@ -111,14 +113,14 @@ export default function EditTask() {
          <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
             maxWidth: rem(550),
             zIndex: 999,
-            backgroundColor: `${WARNA.bgWhite}`,
+            backgroundColor: `${tema.get().bgUtama}`,
          }}>
             {loading ?
                <Skeleton height={50} radius={30} />
                :
                <Button
                   c={"white"}
-                  bg={WARNA.biruTua}
+                  bg={tema.get().utama}
                   size="lg"
                   radius={30}
                   fullWidth
diff --git a/src/module/task/ui/list_division_task.tsx b/src/module/task/ui/list_division_task.tsx
index 02bbea4..82dd51a 100644
--- a/src/module/task/ui/list_division_task.tsx
+++ b/src/module/task/ui/list_division_task.tsx
@@ -1,4 +1,4 @@
-import { WARNA } from "@/module/_global";
+import { TEMA } from "@/module/_global";
 import { ActionIcon, Avatar, Box, Card, Center, Divider, Flex, Grid, Group, Progress, Skeleton, Text, TextInput, Title } from "@mantine/core";
 import { useParams, useRouter, useSearchParams } from "next/navigation";
 import { useState } from "react";
@@ -9,6 +9,7 @@ import { funGetAllTask } from "../lib/api_task";
 import toast from "react-hot-toast";
 import { useShallowEffect } from "@mantine/hooks";
 import _ from "lodash";
+import { useHookstate } from "@hookstate/core";
 
 export default function ListDivisionTask() {
    const [isList, setIsList] = useState(false)
@@ -19,6 +20,7 @@ export default function ListDivisionTask() {
    const status = searchParams.get('status')
    const [searchQuery, setSearchQuery] = useState('')
    const [loading, setLoading] = useState(true);
+   const tema = useHookstate(TEMA)
 
    const handleList = () => {
       setIsList(!isList)
@@ -58,7 +60,7 @@ export default function ListDivisionTask() {
                <TextInput
                   styles={{
                      input: {
-                        color: WARNA.biruTua,
+                        color: tema.get().utama,
                         borderRadius: '#A3A3A3',
                         borderColor: '#A3A3A3',
                      },
@@ -73,9 +75,9 @@ export default function ListDivisionTask() {
             <Grid.Col span={'auto'}>
                <Flex justify={'center'}>
                   {isList ? (
-                     <HiOutlineListBullet size={35} color={WARNA.biruTua} onClick={handleList} />
+                     <HiOutlineListBullet size={35} color={tema.get().utama} onClick={handleList} />
                   ) : (
-                     <HiSquares2X2 size={35} color={WARNA.biruTua} onClick={handleList} />
+                     <HiSquares2X2 size={35} color={tema.get().utama} onClick={handleList} />
                   )}
                </Flex>
             </Grid.Col>
@@ -86,10 +88,10 @@ export default function ListDivisionTask() {
                   <Skeleton width={"100%"} height={100} radius={"md"} />
                </Box>
                :
-               <Box bg={"#DCEED8"} p={10} style={{ borderRadius: 10 }}>
-                  <Text fw={'bold'} c={WARNA.biruTua}>Total Kegiatan</Text>
+               <Box bg={tema.get().bgTotalKegiatan} p={10} style={{ borderRadius: 10 }}>
+                  <Text fw={'bold'} c={tema.get().utama}>Total Kegiatan</Text>
                   <Flex justify={'center'} align={'center'} h={'100%'}>
-                     <Text fz={40} fw={'bold'} c={WARNA.biruTua}>{isData.length}</Text>
+                     <Text fz={40} fw={'bold'} c={tema.get().utama}>{isData.length}</Text>
                   </Flex>
                </Box>
             }
@@ -110,13 +112,14 @@ export default function ListDivisionTask() {
                                           size={50}
                                           aria-label="Gradient action icon"
                                           radius={100}
-                                          gradient={{
-                                             from: '#DFDA7C',
-                                             to: '#F2AF46',
-                                             deg: 174
-                                          }}
+                                          // gradient={{
+                                          //    from: '#DFDA7C',
+                                          //    to: '#F2AF46',
+                                          //    deg: 174
+                                          // }}
+                                          bg={tema.get().bgFiturDivisi}
                                        >
-                                          <HiMiniPresentationChartBar size={25} color={WARNA.biruTua} />
+                                          <HiMiniPresentationChartBar size={25} color={tema.get().utama} />
                                        </ActionIcon>
                                     </Center>
                                  </Group>
@@ -164,7 +167,7 @@ export default function ListDivisionTask() {
                               <Box key={i} mb={20}>
                                  <Card shadow="sm" padding="md" component="a" radius={10} onClick={() => router.push(`task/${v.id}`)}>
                                     <Card.Section>
-                                       <Box h={120} bg={WARNA.biruTua}>
+                                       <Box h={120} bg={tema.get().utama}>
                                           <Flex justify={'center'} align={'center'} h={"100%"} pl={20} pr={20}>
                                              <Title order={3} c={"white"} ta={"center"} lineClamp={2}>{v.title}</Title>
                                           </Flex>
@@ -180,7 +183,7 @@ export default function ListDivisionTask() {
                                        <Group align='center' pt={10} justify='space-between'>
                                           <Avatar.Group>
                                              <Avatar>
-                                                <MdAccountCircle size={32} color={WARNA.biruTua} />
+                                                <MdAccountCircle size={32} color={tema.get().utama} />
                                              </Avatar>
                                              <Avatar>{(v.member == 0) ? "0" : "+" + (v.member - 1)}</Avatar>
                                           </Avatar.Group>
diff --git a/src/module/task/ui/navbar_detail_division_task.tsx b/src/module/task/ui/navbar_detail_division_task.tsx
index 3159ec9..00ed23e 100644
--- a/src/module/task/ui/navbar_detail_division_task.tsx
+++ b/src/module/task/ui/navbar_detail_division_task.tsx
@@ -1,5 +1,5 @@
 'use client'
-import { globalRole, LayoutDrawer, LayoutNavbarNew, WARNA } from "@/module/_global";
+import { globalRole, LayoutDrawer, LayoutNavbarNew, TEMA } from "@/module/_global";
 import { ActionIcon, Box, Flex, SimpleGrid, Stack, Text } from "@mantine/core";
 import { useParams, useRouter } from "next/navigation";
 import { useState } from "react";
@@ -20,6 +20,7 @@ export default function NavbarDetailDivisionTask() {
    const [isOpen, setOpen] = useState(false)
    const roleLogin = useHookstate(globalRole)
    const adminLogin = useHookstate(globalIsAdminDivision)
+   const tema = useHookstate(TEMA)
 
    async function getOneData() {
       try {
@@ -46,7 +47,7 @@ export default function NavbarDetailDivisionTask() {
          <LayoutNavbarNew back={`/division/${param.id}/task/`} title={name} menu={
             <ActionIcon
                variant="light"
-               bg={WARNA.bgIcon}
+               bg={tema.get().bgIcon}
                size="lg"
                radius="lg"
                aria-label="Settings"
@@ -72,10 +73,10 @@ export default function NavbarDetailDivisionTask() {
                         }}
                      >
                         <Box>
-                           <IoAddCircle size={30} color={WARNA.biruTua} />
+                           <IoAddCircle size={30} color={tema.get().utama} />
                         </Box>
                         <Box>
-                           <Text c={WARNA.biruTua} ta='center'>Tambah Tugas</Text>
+                           <Text c={tema.get().utama} ta='center'>Tambah Tugas</Text>
                         </Box>
                      </Flex>
 
@@ -88,10 +89,10 @@ export default function NavbarDetailDivisionTask() {
                         }}
                      >
                         <Box>
-                           <FaFileCirclePlus size={30} color={WARNA.biruTua} />
+                           <FaFileCirclePlus size={30} color={tema.get().utama} />
                         </Box>
                         <Box>
-                           <Text c={WARNA.biruTua} ta='center'>Tambah file</Text>
+                           <Text c={tema.get().utama} ta='center'>Tambah file</Text>
                         </Box>
                      </Flex>
 
@@ -104,10 +105,10 @@ export default function NavbarDetailDivisionTask() {
                                  }}
                                  onClick={() => { router.push(param.detail + '/add-member') }} >
                                  <Box>
-                                    <FaUsers size={30} color={WARNA.biruTua} />
+                                    <FaUsers size={30} color={tema.get().utama} />
                                  </Box>
                                  <Box>
-                                    <Text c={WARNA.biruTua} ta='center'>Tambah anggota</Text>
+                                    <Text c={tema.get().utama} ta='center'>Tambah anggota</Text>
                                  </Box>
                               </Flex>
 
@@ -117,10 +118,10 @@ export default function NavbarDetailDivisionTask() {
                                  }}
                                  onClick={() => { router.push(param.detail + '/edit') }} >
                                  <Box>
-                                    <FaPencil size={30} color={WARNA.biruTua} />
+                                    <FaPencil size={30} color={tema.get().utama} />
                                  </Box>
                                  <Box>
-                                    <Text c={WARNA.biruTua} ta='center'>Edit</Text>
+                                    <Text c={tema.get().utama} ta='center'>Edit</Text>
                                  </Box>
                               </Flex>
 
@@ -130,10 +131,10 @@ export default function NavbarDetailDivisionTask() {
                                  }}
                                  onClick={() => { router.push(param.detail + '/cancel') }} >
                                  <Box>
-                                    <MdCancel size={30} color={WARNA.biruTua} />
+                                    <MdCancel size={30} color={tema.get().utama} />
                                  </Box>
                                  <Box>
-                                    <Text c={WARNA.biruTua} ta='center'>Batal</Text>
+                                    <Text c={tema.get().utama} ta='center'>Batal</Text>
                                  </Box>
                               </Flex>
                            </> : <></>
diff --git a/src/module/task/ui/navbar_division_task.tsx b/src/module/task/ui/navbar_division_task.tsx
index dee616f..8998ddb 100644
--- a/src/module/task/ui/navbar_division_task.tsx
+++ b/src/module/task/ui/navbar_division_task.tsx
@@ -1,5 +1,5 @@
 'use client'
-import { globalRole, LayoutDrawer, LayoutNavbarNew, WARNA } from "@/module/_global";
+import { globalRole, LayoutDrawer, LayoutNavbarNew, TEMA } from "@/module/_global";
 import { ActionIcon } from "@mantine/core";
 import { useState } from "react";
 import { HiMenu } from "react-icons/hi";
@@ -13,12 +13,13 @@ export default function NavbarDivisionTask() {
    const param = useParams<{ id: string }>()
    const roleLogin = useHookstate(globalRole)
    const adminLogin = useHookstate(globalIsAdminDivision)
+   const tema = useHookstate(TEMA)
 
    return (
       <>
          <LayoutNavbarNew back={`/division/${param.id}`} title="Divisi - Tugas"
             menu={((roleLogin.get() != "user" && roleLogin.get() != "coadmin") || adminLogin.get()) ?
-               <ActionIcon variant="light" onClick={() => setOpenDrawer(true)} bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
+               <ActionIcon variant="light" onClick={() => setOpenDrawer(true)} bg={tema.get().bgIcon} size="lg" radius="lg" aria-label="Settings">
                   <HiMenu size={20} color='white' />
                </ActionIcon>
                : <></>
diff --git a/src/module/task/ui/results_date-and_task.tsx b/src/module/task/ui/results_date-and_task.tsx
index 7dc058a..606a423 100644
--- a/src/module/task/ui/results_date-and_task.tsx
+++ b/src/module/task/ui/results_date-and_task.tsx
@@ -1,5 +1,4 @@
 "use client"
-import { WARNA } from '@/module/_global';
 import { Box, Center, Grid, Group, SimpleGrid, Text } from '@mantine/core';
 import React from 'react';
 import { AiOutlineFileSync } from "react-icons/ai";
diff --git a/src/module/task/ui/results_file.tsx b/src/module/task/ui/results_file.tsx
index 04ae7c8..69cb781 100644
--- a/src/module/task/ui/results_file.tsx
+++ b/src/module/task/ui/results_file.tsx
@@ -1,4 +1,3 @@
-import { WARNA } from '@/module/_global';
 import { Box, Center, Grid, Group, Text } from '@mantine/core';
 import React from 'react';
 import { BsFiletypeCsv, BsFiletypeHeic, BsFiletypeJpg, BsFiletypePdf, BsFiletypePng } from 'react-icons/bs';
diff --git a/src/module/task/ui/tabs_division_task.tsx b/src/module/task/ui/tabs_division_task.tsx
index 69b2c48..7278fe2 100644
--- a/src/module/task/ui/tabs_division_task.tsx
+++ b/src/module/task/ui/tabs_division_task.tsx
@@ -7,13 +7,15 @@ import { TbClockPause } from "react-icons/tb";
 import ListDivisionTask from "./list_division_task";
 import { useRouter, useSearchParams } from "next/navigation";
 import { Carousel } from "@mantine/carousel";
-import { WARNA } from "@/module/_global";
+import { TEMA } from "@/module/_global";
+import { useHookstate } from "@hookstate/core";
 
 export default function TabsDivisionTask() {
    const iconStyle = { width: rem(20), height: rem(20) };
    const router = useRouter()
    const searchParams = useSearchParams()
    const status = searchParams.get('status')
+   const tema = useHookstate(TEMA)
 
    const dataStatus = [
       {
@@ -77,15 +79,15 @@ export default function TabsDivisionTask() {
                      color={
                         status == item.id
                            ? "white"
-                           : (status == null && item.id == "0") ? "white" : WARNA.biruTua
+                           : (status == null && item.id == "0") ? "white" : tema.get().utama
                      }
                      onClick={() => { router.push("?status=" + item.id) }}
                      defaultValue={(status == "1" || status == "2" || status == "3") ? status : "0"}
                      radius={"xl"}
                      bg={
                         status == item.id
-                           ? "#FF9861"
-                           : (status == null && item.id == "0") ? "#FF9861" : "transparent"
+                           ? tema.get().bgFiturDivisi
+                           : (status == null && item.id == "0") ? tema.get().bgFiturDivisi : "transparent"
                      }
                   >
                      {item.icon}