fix: use frappe-ui theme colors and fixed tailwind config

2025-12-08 10:37:08 +05:30
parent 87a7b93334
commit 5825bcf9b3
16 changed files with 598 additions and 1466 deletions
--- a/frontend/src/components/Controls/ColorSwatches.vue
+++ b/frontend/src/components/Controls/ColorSwatches.vue
@@ -21,8 +21,7 @@
 								:style="
 									modelValue
 										? {
-												backgroundColor:
-													theme.backgroundColor[modelValue.toLowerCase()][400],
+												backgroundColor: getColor(modelValue.toLowerCase(), 400)
 										  }
 										: {}
 								"
@@ -55,8 +54,8 @@
 							:key="color"
 							class="size-5 rounded-full cursor-pointer"
 							:style="{
-								backgroundColor:
-									theme.backgroundColor[color.toLowerCase()][400],
+								backgroundColor: 
+									getColor(color.toLowerCase(), 400),
 							}"
 							@click="
 								(e) => {
@@ -79,7 +78,7 @@
 import { Button, FormControl, Popover } from 'frappe-ui'
 import { computed } from 'vue'
 import { Palette, X } from 'lucide-vue-next'
-import { theme } from '@/utils/theme'
+import { getColor } from '@/utils'

 const emit = defineEmits(['update:modelValue', 'change'])

@@ -105,4 +104,5 @@ const colors = computed(() => {
 		'Yellow',
 	]
 })
+
 </script>
--- a/frontend/src/components/CourseCard.vue
+++ b/frontend/src/components/CourseCard.vue
@@ -136,11 +136,11 @@
 import { Award, BookOpen, GraduationCap, Star, Users } from 'lucide-vue-next'
 import { sessionStore } from '@/stores/session'
 import { Tooltip } from 'frappe-ui'
-import { theme } from '@/utils/theme'
 import { formatAmount } from '@/utils'
 import CourseInstructors from '@/components/CourseInstructors.vue'
 import UserAvatar from '@/components/UserAvatar.vue'
 import ProgressBar from '@/components/ProgressBar.vue'
+import colors from '@/utils/frappe-ui-colors.json'

 const { user } = sessionStore()

@@ -152,8 +152,9 @@ const props = defineProps({
 })

 const getGradientColor = () => {
+	let theme = localStorage.getItem('theme') == "light" ? "lightMode": "darkMode"
 	let color = props.course.card_gradient?.toLowerCase() || 'blue'
-	let colorMap = theme.backgroundColor[color]
+	let colorMap = colors[theme][color]
 	return `linear-gradient(to top right, black, ${colorMap[400]})`
 	/* return `bg-gradient-to-br from-${color}-100 via-${color}-200 to-${color}-400` */
 	/* return `linear-gradient(to bottom right, ${colorMap[100]}, ${colorMap[400]})` */
--- a/frontend/src/components/Modals/CourseProgressSummary.vue
+++ b/frontend/src/components/Modals/CourseProgressSummary.vue
@@ -114,11 +114,11 @@
 							categoryColumn: 'category',
 							valueColumn: 'count',
 							colors: [
-								theme.colors.red['400'],
-								theme.colors.amber['400'],
-								theme.colors.pink['400'],
-								theme.colors.blue['400'],
-								theme.colors.green['400'],
+								getColor('red', 400),
+								getColor('amber', 400),
+								getColor('pink', 400),
+								getColor('blue', 400),
+								getColor('green', 400),
 							],
 						}"
 					/>
@@ -146,7 +146,7 @@ import {
 	NumberChart,
 } from 'frappe-ui'
 import { computed, ref, watch } from 'vue'
-import { theme } from '@/utils/theme'
+import { getColor } from '@/utils'

 const show = defineModel<boolean>({ default: false })
 const searchFilter = ref<string | null>(null)
--- a/frontend/src/components/Notes/InlineLessonMenu.vue
+++ b/frontend/src/components/Notes/InlineLessonMenu.vue
@@ -20,7 +20,7 @@
 					<span
 						class="size-3 rounded-full"
 						:style="{
-							backgroundColor: theme.backgroundColor[color.toLowerCase()][400],
+							backgroundColor: getColor(color.toLowerCase(), 400),
 						}"
 					></span>
 					<span>
@@ -55,9 +55,8 @@
 <script setup lang="ts">
 import { computed, inject, ref, watch } from 'vue'
 import { NotepadText, Trash2 } from 'lucide-vue-next'
-import { theme } from '@/utils/theme'
 import type { Note, Notes } from '@/components/Notes/types'
-import { blockQuotesClick, highlightText } from '@/utils'
+import { blockQuotesClick, getColor, highlightText } from '@/utils'

 const user = inject<any>('$user')
 const show = defineModel()
--- a/frontend/src/components/StudentHeatmap.vue
+++ b/frontend/src/components/StudentHeatmap.vue
@@ -17,7 +17,7 @@
 import { createResource } from 'frappe-ui'
 import { computed, inject, onMounted, ref, watch } from 'vue'
 import ApexChart from 'vue3-apexcharts'
-import { theme } from '@/utils/theme'
+import { getColor } from '@/utils'

 const user = inject('$user')
 const labels = ref([])
@@ -81,11 +81,11 @@ const chartOptions = computed(() => {
 				enableShades: true,
 				colorScale: {
 					ranges: [
-						{ from: 0, to: 0, color: theme.colors.gray[400] },
-						{ from: 1, to: 5, color: theme.colors.green[200] },
-						{ from: 6, to: 15, color: theme.colors.green[500] },
-						{ from: 16, to: 30, color: theme.colors.green[700] },
-						{ from: 31, to: 100, color: theme.colors.green[800] },
+						{ from: 0, to: 0, color: getColor("green", 400) },
+						{ from: 1, to: 5, color: getColor("green", 200) },
+						{ from: 6, to: 15, color: getColor("green", 500) },
+						{ from: 16, to: 30, color: getColor("green", 700) },
+						{ from: 31, to: 100, color: getColor("green", 800) },
 					],
 				},
 			},
--- a/frontend/src/pages/Programs/ProgramForm.vue
+++ b/frontend/src/pages/Programs/ProgramForm.vue
@@ -58,7 +58,7 @@
 						</Button>
 					</div>
 					<ListView
-						v-if="program.program_courses.length > 0"
+						v-if="program.program_courses?.length > 0"
 						:columns="courseColumns"
 						:rows="program.program_courses"
 						:options="{
@@ -133,7 +133,7 @@
 						</div>
 					</div>
 					<ListView
-						v-if="program.program_members.length > 0"
+						v-if="program.program_members?.length > 0"
 						:columns="memberColumns"
 						:rows="program.program_members"
 						:options="{
@@ -430,7 +430,7 @@ const addCourse = (close: () => void) => {
 	}

 	const existingCourse = program.value.program_courses.find(
-		(c) => c.course === course.value
+		(c: any) => c.course === course.value
 	)
 	if (!existingCourse) {
 		program.value.program_courses.push({
@@ -544,11 +544,11 @@ const remove = (
 	const selectionsArray = Array.from(selections)
 	if (type === 'courses') {
 		program.value.program_courses = program.value.program_courses.filter(
-			(c) => !selectionsArray.includes(c.name || c.course)
+			(c: any) => !selectionsArray.includes(c.name || c.course)
 		)
 	} else {
 		program.value.program_members = program.value.program_members.filter(
-			(m) => !selectionsArray.includes(m.name || m.member)
+			(m: any) => !selectionsArray.includes(m.name || m.member)
 		)
 	}
 	dirty.value = true
--- a/frontend/src/pages/Programs/ProgramProgressSummary.vue
+++ b/frontend/src/pages/Programs/ProgramProgressSummary.vue
@@ -31,11 +31,11 @@
 						categoryColumn: 'category',
 						valueColumn: 'count',
 						colors: [
-							theme.colors.red['400'],
-							theme.colors.amber['400'],
-							theme.colors.pink['400'],
-							theme.colors.blue['400'],
-							theme.colors.green['400'],
+							getColor('red', 400),
+							getColor('amber', 400),
+							getColor('pink', 400),
+							getColor('blue', 400),
+							getColor('green', 400),
 						],
 					}"
 				/>
@@ -74,7 +74,7 @@ import {
 } from 'frappe-ui'
 import type { ProgramMember } from '@/types'
 import { computed, ref, watch } from 'vue'
-import { theme } from '@/utils/theme'
+import { getColor } from '@/utils'

 const show = defineModel<boolean>({ default: false })
 const searchFilter = ref<string | null>(null)
--- a/frontend/src/utils/frappe-ui-colors.json
+++ b/frontend/src/utils/frappe-ui-colors.json
@@ -0,0 +1,499 @@
+{
+  "lightMode": {
+    "gray": {
+      "50": "#F8F8F8",
+      "100": "#F3F3F3",
+      "200": "#EDEDED",
+      "300": "#E2E2E2",
+      "400": "#C7C7C7",
+      "500": "#999999",
+      "600": "#7C7C7C",
+      "700": "#525252",
+      "800": "#383838",
+      "900": "#171717"
+    },
+    "blue": {
+      "50": "#F2F9FF",
+      "100": "#E6F4FF",
+      "200": "#C8E6FF",
+      "300": "#A7D7FD",
+      "400": "#73BBF6",
+      "500": "#0289F7",
+      "600": "#007BE0",
+      "700": "#0070CC",
+      "800": "#005CA3",
+      "900": "#004880"
+    },
+    "green": {
+      "50": "#F2FDF4",
+      "100": "#E4FAEB",
+      "200": "#C3F9D3",
+      "300": "#A6EFC0",
+      "400": "#86E0A8",
+      "500": "#46B37E",
+      "600": "#278F5E",
+      "700": "#137949",
+      "800": "#075E35",
+      "900": "#173B2C"
+    },
+    "red": {
+      "50": "#FFF7F7",
+      "100": "#FFE7E7",
+      "200": "#FFD8D8",
+      "300": "#FDC2C2",
+      "400": "#F79596",
+      "500": "#E03636",
+      "600": "#CC2929",
+      "700": "#B52A2A",
+      "800": "#941F1F",
+      "900": "#6B1515"
+    },
+    "amber": {
+      "50": "#FDFAED",
+      "100": "#FFF7D3",
+      "200": "#FEEDA9",
+      "300": "#FBDB73",
+      "400": "#FBCC55",
+      "500": "#E79913",
+      "600": "#DB7706",
+      "700": "#B35309",
+      "800": "#91400D",
+      "900": "#763813"
+    },
+    "orange": {
+      "50": "#FFF9F5",
+      "100": "#FFEFE4",
+      "200": "#FFDEC5",
+      "300": "#FFCBA3",
+      "400": "#F4B07F",
+      "500": "#E86C13",
+      "600": "#D45A08",
+      "700": "#BD3E0C",
+      "800": "#9E3513",
+      "900": "#6B2711"
+    },
+    "yellow": {
+      "50": "#FFFCEF",
+      "100": "#FFF7D3",
+      "200": "#F7E9A8",
+      "300": "#F5E171",
+      "400": "#F2D14B",
+      "500": "#EDBA13",
+      "600": "#D1930D",
+      "700": "#AB6E05",
+      "800": "#8C5600",
+      "900": "#733F12"
+    },
+    "teal": {
+      "50": "#F0FDFA",
+      "100": "#E6F7F4",
+      "200": "#BAE8E1",
+      "300": "#97DED4",
+      "400": "#73D1C4",
+      "500": "#36BAAD",
+      "600": "#0B9E92",
+      "700": "#0F736B",
+      "800": "#115C57",
+      "900": "#114541"
+    },
+    "cyan": {
+      "50": "#F5FBFC",
+      "100": "#DDF7FF",
+      "200": "#B3E8F7",
+      "300": "#99E2F8",
+      "400": "#72D5F3",
+      "500": "#3BBDE5",
+      "600": "#32A4C7",
+      "700": "#267A94",
+      "800": "#125C73",
+      "900": "#164759"
+    },
+    "purple": {
+      "50": "#FDFAFF",
+      "100": "#F6E9FF",
+      "200": "#ECD3FF",
+      "300": "#E2B9FC",
+      "400": "#CFA1F2",
+      "500": "#9C45E3",
+      "600": "#8642C2",
+      "700": "#6E399D",
+      "800": "#5C2F83",
+      "900": "#401863"
+    },
+    "pink": {
+      "50": "#FFF7FC",
+      "100": "#FDE8F5",
+      "200": "#FFD5F0",
+      "300": "#F9B9E0",
+      "400": "#F6A7D6",
+      "500": "#E34AA6",
+      "600": "#CF3A96",
+      "700": "#9C2671",
+      "800": "#801458",
+      "900": "#570F3E"
+    },
+    "violet": {
+      "50": "#FBFAFF",
+      "100": "#F0EBFF",
+      "200": "#DBD5FF",
+      "300": "#C9BAFB",
+      "400": "#B3A1F5",
+      "500": "#6846E3",
+      "600": "#5F46C7",
+      "700": "#4F3DA1",
+      "800": "#392980",
+      "900": "#251959"
+    }
+  },
+  "darkMode": {
+    "gray": {
+      "50": "#F8F8F8",
+      "100": "#D4D4D4",
+      "200": "#AFAFAF",
+      "250": "#999999",
+      "300": "#808080",
+      "400": "#717171",
+      "500": "#424242",
+      "600": "#343434",
+      "650": "#2B2B2B",
+      "700": "#232323",
+      "800": "#1C1C1C",
+      "900": "#0F0F0F"
+    },
+    "blue": {
+      "50": "#C9E0F5",
+      "100": "#ADD2F5",
+      "200": "#8CC1EC",
+      "300": "#5AAEF2",
+      "400": "#3294E3",
+      "500": "#1580D8",
+      "600": "#155999",
+      "700": "#063D71",
+      "800": "#052B53",
+      "900": "#0E2037",
+      "900-80": "#0E2037CC"
+    },
+    "green": {
+      "50": "#C8F3DE",
+      "100": "#9BE6C1",
+      "200": "#78D7A9",
+      "300": "#58C08E",
+      "400": "#1BA964",
+      "500": "#0A9752",
+      "600": "#0F814A",
+      "700": "#035831",
+      "800": "#0A3F27",
+      "900": "#0B2E1C"
+    },
+    "red": {
+      "50": "#FFC1C1",
+      "100": "#FF9595",
+      "200": "#FC7474",
+      "300": "#EB4D52",
+      "400": "#E43838",
+      "500": "#C12020",
+      "600": "#901818",
+      "700": "#681916",
+      "800": "#521515",
+      "900": "#361515",
+      "800-90": "#521515E6",
+      "900-90": "#361515E6"
+    },
+    "amber": {
+      "50": "#F9E8A5",
+      "100": "#F8D16E",
+      "200": "#F0BA31",
+      "300": "#E79913",
+      "400": "#E37D00",
+      "500": "#CB6D10",
+      "600": "#824108",
+      "700": "#603007",
+      "800": "#4B2606",
+      "900": "#371E06"
+    },
+    "orange": {
+      "50": "#FFCDAD",
+      "100": "#FFA873",
+      "200": "#FA8A40",
+      "300": "#DE6D1B",
+      "400": "#C45A0E",
+      "500": "#984509",
+      "600": "#823906",
+      "700": "#683108",
+      "800": "#532707",
+      "900": "#401F07",
+      "900-80": "#401F07CC"
+    },
+    "yellow": {
+      "50": "#FFE89D",
+      "100": "#F8D76A",
+      "200": "#ECC02E",
+      "300": "#DAAE15",
+      "400": "#C69C12",
+      "500": "#9C7A0A",
+      "600": "#705606",
+      "700": "#5B4605",
+      "800": "#3F3004",
+      "900": "#322604"
+    },
+    "teal": {
+      "50": "#93F2E8",
+      "100": "#6EE7DB",
+      "200": "#52DACC",
+      "300": "#3DC6B8",
+      "400": "#219C8F",
+      "500": "#1B7169",
+      "600": "#13564F",
+      "700": "#0C423C",
+      "800": "#0B3A35",
+      "900": "#0A2D29"
+    },
+    "cyan": {
+      "50": "#D0F0FA",
+      "100": "#A0E6F7",
+      "200": "#68D3F3",
+      "300": "#3CB8DC",
+      "400": "#2B8DAB",
+      "500": "#23728B",
+      "600": "#155266",
+      "700": "#0E3B49",
+      "800": "#0D2B36",
+      "900": "#0B252D"
+    },
+    "purple": {
+      "50": "#E5C6FB",
+      "100": "#D9AFF5",
+      "200": "#C993EF",
+      "300": "#B168E8",
+      "400": "#984BD8",
+      "500": "#7A2DB9",
+      "600": "#591F89",
+      "700": "#47176E",
+      "800": "#391457",
+      "900": "#2E1146"
+    },
+    "pink": {
+      "50": "#F6C5DE",
+      "100": "#F69AD1",
+      "200": "#ED77BE",
+      "300": "#E359AB",
+      "400": "#CB4394",
+      "500": "#AC377D",
+      "600": "#822A5F",
+      "700": "#68204B",
+      "800": "#601D46",
+      "900": "#471432",
+      "900-80": "#471432CC"
+    },
+    "violet": {
+      "50": "#DACBF7",
+      "100": "#C4AFEE",
+      "200": "#B398EF",
+      "300": "#9D7CEA",
+      "400": "#8867E8",
+      "500": "#5C3FC2",
+      "600": "#4639A6",
+      "700": "#332978",
+      "800": "#281E5D",
+      "900": "#221C42"
+    }
+  },
+  "overlay": {
+    "white": {
+      "50": "#FFFFFF1A",
+      "100": "#FFFFFF2E",
+      "200": "#FFFFFF45",
+      "300": "#FFFFFF5C",
+      "400": "#FFFFFF73",
+      "500": "#FFFFFF8A",
+      "600": "#FFFFFFA1",
+      "700": "#FFFFFFB8",
+      "800": "#FFFFFFCF",
+      "900": "#FFFFFFE6"
+    },
+    "black": {
+      "50": "#00000017",
+      "100": "#0000002E",
+      "200": "#00000045",
+      "300": "#0000005C",
+      "400": "#00000073",
+      "500": "#0000008A",
+      "600": "#000000A1",
+      "700": "#000000B8",
+      "800": "#000000CF",
+      "900": "#000000E6"
+    }
+  },
+  "neutral": {
+    "white": "#FFFFFF",
+    "black": "#000000"
+  },
+  "themedVariables": {
+    "light": {
+      "outline": {
+        "white": "neutral/white",
+        "gray-1": "lightMode/gray/200",
+        "gray-2": "lightMode/gray/300",
+        "gray-3": "lightMode/gray/400",
+        "gray-4": "lightMode/gray/500",
+        "gray-5": "lightMode/gray/800",
+        "red-1": "lightMode/red/300",
+        "red-2": "lightMode/red/400",
+        "red-3": "lightMode/red/500",
+        "green-1": "lightMode/green/300",
+        "green-2": "lightMode/green/400",
+        "amber-1": "lightMode/amber/300",
+        "amber-2": "lightMode/amber/400",
+        "blue-1": "lightMode/blue/300",
+        "orange-1": "lightMode/orange/400",
+        "gray-modals": "lightMode/gray/200"
+      },
+      "surface": {
+        "white": "neutral/white",
+        "gray-1": "lightMode/gray/50",
+        "gray-2": "lightMode/gray/100",
+        "gray-3": "lightMode/gray/200",
+        "gray-4": "lightMode/gray/300",
+        "gray-5": "lightMode/gray/700",
+        "gray-6": "lightMode/gray/800",
+        "gray-7": "lightMode/gray/900",
+        "red-1": "lightMode/red/50",
+        "red-2": "lightMode/red/100",
+        "red-3": "lightMode/red/200",
+        "red-4": "lightMode/red/300",
+        "red-5": "lightMode/red/600",
+        "red-6": "lightMode/red/700",
+        "red-7": "lightMode/red/800",
+        "green-1": "lightMode/green/50",
+        "green-2": "lightMode/green/100",
+        "green-3": "lightMode/green/600",
+        "amber-1": "lightMode/amber/50",
+        "amber-2": "lightMode/amber/100",
+        "amber-3": "lightMode/amber/600",
+        "blue-1": "lightMode/blue/50",
+        "blue-2": "lightMode/blue/100",
+        "blue-3": "lightMode/blue/600",
+        "orange-1": "lightMode/orange/100",
+        "violet-1": "lightMode/violet/100",
+        "cyan-1": "lightMode/cyan/100",
+        "pink-1": "lightMode/pink/100",
+        "menu-bar": "lightMode/gray/50",
+        "cards": "neutral/white",
+        "modal": "neutral/white",
+        "selected": "neutral/white"
+      },
+      "ink": {
+        "white": "neutral/white",
+        "gray-1": "lightMode/gray/200",
+        "gray-2": "lightMode/gray/300",
+        "gray-3": "lightMode/gray/400",
+        "gray-4": "lightMode/gray/500",
+        "gray-5": "lightMode/gray/600",
+        "gray-6": "lightMode/gray/700",
+        "gray-7": "lightMode/gray/700",
+        "gray-8": "lightMode/gray/800",
+        "gray-9": "lightMode/gray/900",
+        "red-1": "lightMode/red/50",
+        "red-2": "lightMode/red/400",
+        "red-3": "lightMode/red/500",
+        "red-4": "lightMode/red/600",
+        "green-1": "lightMode/green/50",
+        "green-2": "lightMode/green/500",
+        "green-3": "lightMode/green/600",
+        "amber-1": "lightMode/amber/50",
+        "amber-2": "lightMode/amber/500",
+        "amber-3": "lightMode/amber/600",
+        "blue-1": "lightMode/blue/50",
+        "blue-2": "lightMode/blue/500",
+        "blue-3": "lightMode/blue/600",
+        "cyan-1": "lightMode/cyan/500",
+        "pink-1": "lightMode/pink/500",
+        "violet-1": "lightMode/violet/500",
+        "blue-link": "lightMode/blue/400"
+      }
+    },
+    "dark": {
+      "outline": {
+        "white": "darkMode/gray/800",
+        "gray-1": "darkMode/gray/700",
+        "gray-2": "darkMode/gray/600",
+        "gray-3": "darkMode/gray/500",
+        "gray-4": "darkMode/gray/300",
+        "gray-5": "lightMode/gray/200",
+        "red-1": "darkMode/red/800",
+        "red-2": "darkMode/red/700",
+        "red-3": "darkMode/red/600",
+        "green-1": "darkMode/green/800",
+        "green-2": "darkMode/green/700",
+        "amber-1": "darkMode/amber/800",
+        "amber-2": "darkMode/amber/700",
+        "blue-1": "darkMode/blue/800",
+        "orange-1": "darkMode/orange/700",
+        "gray-modals": "darkMode/gray/600"
+      },
+      "surface": {
+        "white": "darkMode/gray/900",
+        "gray-1": "darkMode/gray/700",
+        "gray-2": "darkMode/gray/650",
+        "gray-3": "darkMode/gray/600",
+        "gray-4": "darkMode/gray/500",
+        "gray-5": "darkMode/gray/200",
+        "gray-6": "darkMode/gray/100",
+        "gray-7": "darkMode/gray/50",
+        "red-1": "darkMode/red/900",
+        "red-2": "darkMode/red/900-90",
+        "red-3": "darkMode/red/800-90",
+        "red-4": "darkMode/red/700",
+        "red-5": "darkMode/red/400",
+        "red-6": "darkMode/red/500",
+        "red-7": "darkMode/red/600",
+        "green-1": "darkMode/green/900",
+        "green-2": "darkMode/green/800",
+        "green-3": "darkMode/green/400",
+        "amber-1": "darkMode/amber/900",
+        "amber-2": "darkMode/amber/800",
+        "amber-3": "darkMode/amber/400",
+        "blue-1": "darkMode/blue/900",
+        "blue-2": "darkMode/blue/800",
+        "blue-3": "darkMode/blue/400",
+        "orange-1": "darkMode/orange/900-80",
+        "violet-1": "darkMode/violet/900",
+        "cyan-1": "darkMode/cyan/900",
+        "pink-1": "darkMode/pink/900-80",
+        "menu-bar": "darkMode/gray/900",
+        "cards": "darkMode/gray/800",
+        "modal": "darkMode/gray/700",
+        "selected": "darkMode/gray/500"
+      },
+      "ink": {
+        "white": "darkMode/gray/900",
+        "gray-1": "darkMode/gray/700",
+        "gray-2": "darkMode/gray/500",
+        "gray-3": "darkMode/gray/400",
+        "gray-4": "darkMode/gray/400",
+        "gray-5": "darkMode/gray/300",
+        "gray-6": "darkMode/gray/250",
+        "gray-7": "darkMode/gray/200",
+        "gray-8": "darkMode/gray/100",
+        "gray-9": "darkMode/gray/50",
+        "red-1": "neutral/white",
+        "red-2": "darkMode/red/700",
+        "red-3": "darkMode/red/400",
+        "red-4": "darkMode/red/200",
+        "green-1": "neutral/white",
+        "green-2": "darkMode/green/400",
+        "green-3": "darkMode/green/300",
+        "amber-1": "neutral/white",
+        "amber-2": "darkMode/amber/400",
+        "amber-3": "darkMode/amber/300",
+        "blue-1": "neutral/white",
+        "blue-2": "darkMode/blue/400",
+        "blue-3": "darkMode/blue/300",
+        "cyan-1": "darkMode/cyan/300",
+        "pink-1": "darkMode/pink/300",
+        "violet-1": "darkMode/violet/300",
+        "blue-link": "darkMode/blue/500"
+      }
+    }
+  }
+}
--- a/frontend/src/utils/index.js
+++ b/frontend/src/utils/index.js
@@ -1,6 +1,6 @@
 import { call, toast } from 'frappe-ui'
 import { useTimeAgo } from '@vueuse/core'
-import { theme } from '@/utils/theme'
+import colorsJSON from '@/utils/frappe-ui-colors.json'
 import { Quiz } from '@/utils/quiz'
 import { Program } from '@/utils/program'
 import { Assignment } from '@/utils/assignment'
@@ -729,10 +729,10 @@ const createHighlightSpan = (color, name, scrollIntoView) => {
 	const span = document.createElement('span')
 	span.className = 'highlighted-text'
 	if (scrollIntoView) {
-		span.style.border = `2px solid ${theme.backgroundColor[color][400]}`
+		span.style.border = `2px solid ${getColor(color, 400)}`
 		span.style.borderRadius = '4px'
 	} else {
-		span.style.backgroundColor = theme.backgroundColor[color][200]
+		span.style.backgroundColor = getColor(color, 200)
 	}
 	span.dataset.name = name
 	return span
@@ -805,3 +805,8 @@ export const decodeEntities = (encodedString) => {
 	textarea.innerHTML = encodedString
 	return textarea.value
 }
+
+export const getColor = (color, shade) => {
+	let theme = localStorage.getItem('theme') == "light" ? "lightMode" : "darkMode"
+	return colorsJSON[theme][color][shade]
+}
--- a/frontend/src/utils/theme.js
+++ b/frontend/src/utils/theme.js
@@ -1,5 +0,0 @@
-import resolveConfig from 'tailwindcss/resolveConfig'
-import tailwindConfig from 'tailwind.config.js'
-
-export const config = resolveConfig(tailwindConfig)
-export const theme = config.theme