diff --git a/src/renderer/src/components/PhpExtensionManager.tsx b/src/renderer/src/components/PhpExtensionManager.tsx
index edf6087..700d037 100644
--- a/src/renderer/src/components/PhpExtensionManager.tsx
+++ b/src/renderer/src/components/PhpExtensionManager.tsx
@@ -175,8 +175,8 @@ const PhpExtensionManager: React.FC<PhpExtensionManagerProps> = ({ open, onClose
                         <CloseIcon fontSize="small" />
                     </IconButton>
                 </DialogTitle>
-                <DialogContent dividers sx={{ borderColor: 'rgba(255,255,255,0.05)', p: 0 }}>
-                    <Box sx={{ p: 1.5, bgcolor: 'rgba(255,255,255,0.02)', display: 'flex', gap: 1 }}>
+                <DialogContent dividers sx={{ borderColor: 'var(--color-border-soft)', p: 0 }}>
+                    <Box sx={{ p: 1.5, bgcolor: 'var(--color-bg-soft)', display: 'flex', gap: 1 }}>
                         <TextField
                             fullWidth
                             size="small"
@@ -190,7 +190,7 @@ const PhpExtensionManager: React.FC<PhpExtensionManagerProps> = ({ open, onClose
                                     </InputAdornment>
                                 ),
                                 className: 'text-sm',
-                                sx: { color: '#fff', bgcolor: 'rgba(0,0,0,0.2)', height: 32 }
+                                sx: { color: 'white', bgcolor: 'var(--color-bg-medium)', height: 32 }
                             }}
                         />
                         <Button
@@ -223,7 +223,7 @@ const PhpExtensionManager: React.FC<PhpExtensionManagerProps> = ({ open, onClose
                                     <ListItem
                                         key={ext.name}
                                         divider
-                                        sx={{ borderColor: 'rgba(255,255,255,0.03)', py: 0.5 }}
+                                        sx={{ borderColor: 'var(--color-border-soft)', py: 0.5 }}
                                         secondaryAction={
                                             saving === ext.name ? (
                                                 <CircularProgress size={16} />
@@ -254,7 +254,7 @@ const PhpExtensionManager: React.FC<PhpExtensionManagerProps> = ({ open, onClose
                         </List>
                     )}
                 </DialogContent>
-                <DialogActions sx={{ p: 1.5, bgcolor: 'rgba(255,255,255,0.01)' }}>
+                <DialogActions sx={{ p: 1.5, bgcolor: 'var(--color-bg-soft)' }}>
                     <Button onClick={fetchExtensions} size="small" startIcon={<RefreshIcon sx={{ fontSize: 'var(--font-size-md)' }} />} className="text-xs" sx={{ mr: 'auto' }}>
                         {t('common.refresh').toUpperCase()}
                     </Button>
@@ -276,7 +276,7 @@ const PhpExtensionManager: React.FC<PhpExtensionManagerProps> = ({ open, onClose
                 <DialogTitle sx={{ display: 'flex', flexDirection: 'column', gap: 0.5, p: 1.5 }}>
                     <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                         <Typography variant="subtitle2" className="font-black">{t('php.extensions.ini_edit', { version: phpVersion })}</Typography>
-                        <IconButton onClick={() => setIsRawEditorOpen(false)} size="small" sx={{ color: 'rgba(255,255,255,0.5)' }}>
+                        <IconButton onClick={() => setIsRawEditorOpen(false)} size="small" sx={{ color: 'var(--color-text-tertiary)' }}>
                             <CloseIcon fontSize="small" />
                         </IconButton>
                     </Box>
@@ -311,21 +311,21 @@ const PhpExtensionManager: React.FC<PhpExtensionManagerProps> = ({ open, onClose
                             ),
                             className: 'text-sm',
                             sx: {
-                                color: '#fff',
-                                bgcolor: 'rgba(255,255,255,0.03)',
+                                color: 'white',
+                                bgcolor: 'var(--color-bg-soft)',
                                 height: 32,
                                 '& fieldset': { borderColor: 'var(--color-border-soft)' }
                             }
                         }}
                     />
                 </Box>
-                <DialogContent sx={{ p: 0, minHeight: 350, borderTop: '1px solid rgba(255,255,255,0.05)' }}>
+                <DialogContent sx={{ p: 0, minHeight: 350, borderTop: '1px solid var(--color-border-soft)' }}>
                     <PhpIniCodeEditor
                         value={rawConfig}
                         onChange={setRawConfig}
                     />
                 </DialogContent>
-                <DialogActions sx={{ p: 1.5, bgcolor: 'rgba(0,0,0,0.1)' }}>
+                <DialogActions sx={{ p: 1.5, bgcolor: 'var(--color-bg-medium)' }}>
                     <Button onClick={() => setIsRawEditorOpen(false)} size="small" className="text-secondary text-xs">
                         {t('common.cancel').toUpperCase()}
                     </Button>
diff --git a/src/renderer/src/components/ServiceEventMonitor.tsx b/src/renderer/src/components/ServiceEventMonitor.tsx
index cb07628..feddd0f 100644
--- a/src/renderer/src/components/ServiceEventMonitor.tsx
+++ b/src/renderer/src/components/ServiceEventMonitor.tsx
@@ -135,11 +135,11 @@ export default function ServiceEventMonitor({ onClose }: { onClose?: () => void
             renderCell: (params) => {
                 const status = params.value as string
                 return status === 'success' ? (
-                    <SuccessIcon sx={{ color: 'success.main', fontSize: 'var(--font-size-md)' }} />
+                    <SuccessIcon sx={{ color: 'var(--color-success)', fontSize: 'var(--font-size-md)' }} />
                 ) : status === 'failure' ? (
-                    <ErrorIcon sx={{ color: 'error.main', fontSize: 'var(--font-size-md)' }} />
+                    <ErrorIcon sx={{ color: 'var(--color-error)', fontSize: 'var(--font-size-md)' }} />
                 ) : (
-                    <InfoIcon sx={{ color: 'info.main', fontSize: 'var(--font-size-md)' }} />
+                    <InfoIcon sx={{ color: 'var(--color-primary)', fontSize: 'var(--font-size-md)' }} />
                 )
             }
         },
@@ -160,7 +160,7 @@ export default function ServiceEventMonitor({ onClose }: { onClose?: () => void
     return (
         <Box sx={{ height: '100%', display: 'flex', flexDirection: 'column', bgcolor: 'var(--color-bg-dark)', color: 'var(--color-text-primary)' }}>
             {/* Header */}
-            <Box sx={{ p: 2, display: 'flex', alignItems: 'center', justifyContent: 'space-between', borderBottom: '1px solid rgba(255,255,255,0.05)' }}>
+            <Box sx={{ p: 2, display: 'flex', alignItems: 'center', justifyContent: 'space-between', borderBottom: '1px solid var(--color-border-soft)' }}>
                 <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
                     <HistoryIcon color="primary" />
                     <Box>
@@ -176,7 +176,7 @@ export default function ServiceEventMonitor({ onClose }: { onClose?: () => void
                     <IconButton onClick={fetchEvents} size="small" sx={{ color: 'rgba(255,255,255,0.5)' }}>
                         <RefreshIcon fontSize="small" />
                     </IconButton>
-                    <IconButton onClick={handleClear} size="small" sx={{ color: '#f44336' }}>
+                    <IconButton onClick={handleClear} size="small" sx={{ color: 'var(--color-error)' }}>
                         <ClearIcon fontSize="small" />
                     </IconButton>
                     {onClose && (
@@ -194,7 +194,7 @@ export default function ServiceEventMonitor({ onClose }: { onClose?: () => void
                         <CircularProgress size={30} />
                     </Box>
                 ) : events.length === 0 ? (
-                    <Alert severity="info" sx={{ bgcolor: 'rgba(2, 136, 209, 0.05)', color: 'info.light' }}>
+                    <Alert severity="info" sx={{ bgcolor: 'var(--color-primary-soft)', color: 'var(--color-primary)' }}>
                         {t('service_monitor.no_events')}
                     </Alert>
                 ) : (
@@ -209,9 +209,9 @@ export default function ServiceEventMonitor({ onClose }: { onClose?: () => void
                                     dataset={chartData}
                                     xAxis={[{ scaleType: 'band', dataKey: 'service' }]}
                                     series={[
-                                        { dataKey: 'start', label: t('common.start'), color: '#4caf50' },
-                                        { dataKey: 'stop', label: t('common.stop'), color: '#f44336' },
-                                        { dataKey: 'error', label: t('common.error'), color: '#ff9800' }
+                                        { dataKey: 'start', label: t('common.start'), color: 'var(--color-success)' },
+                                        { dataKey: 'stop', label: t('common.stop'), color: 'var(--color-error)' },
+                                        { dataKey: 'error', label: t('common.error'), color: 'var(--color-warning)' }
                                     ]}
                                     slotProps={{
                                         legend: {
@@ -221,10 +221,10 @@ export default function ServiceEventMonitor({ onClose }: { onClose?: () => void
                                     }}
                                     margin={{ top: 10, bottom: 50, left: 30, right: 10 }}
                                     sx={{
-                                        '& .MuiChartsAxis-left .MuiChartsAxis-tickLabel': { fill: 'rgba(255,255,255,0.3)' },
-                                        '& .MuiChartsAxis-bottom .MuiChartsAxis-tickLabel': { fill: 'rgba(255,255,255,0.3)', fontSize: 10 },
-                                        '& .MuiChartsAxis-line': { stroke: 'rgba(255,255,255,0.1)' },
-                                        '& .MuiChartsAxis-tick': { stroke: 'rgba(255,255,255,0.1)' }
+                                        '& .MuiChartsAxis-left .MuiChartsAxis-tickLabel': { fill: 'var(--color-text-muted)' },
+                                        '& .MuiChartsAxis-bottom .MuiChartsAxis-tickLabel': { fill: 'var(--color-text-muted)', fontSize: 10 },
+                                        '& .MuiChartsAxis-line': { stroke: 'var(--color-border-soft)' },
+                                        '& .MuiChartsAxis-tick': { stroke: 'var(--color-border-soft)' }
                                     }}
                                 />
                             </Box>
@@ -242,7 +242,7 @@ export default function ServiceEventMonitor({ onClose }: { onClose?: () => void
                                     border: 'none',
                                     color: 'var(--color-text-primary)',
                                     '& .MuiDataGrid-cell': { borderBottom: '1px solid var(--color-border-soft)', fontSize: 'var(--font-size-xs)' },
-                                    '& .MuiDataGrid-columnHeaders': { bgcolor: 'rgba(255,255,255,0.03)', borderBottom: '1px solid var(--color-border-medium)' },
+                                    '& .MuiDataGrid-columnHeaders': { bgcolor: 'var(--color-bg-soft)', borderBottom: '1px solid var(--color-border-medium)' },
                                     '& .MuiDataGrid-columnHeaderTitle': { fontWeight: 'bold', fontSize: 'var(--font-size-xs)', opacity: 0.5 },
                                     '& .MuiDataGrid-virtualScroller': { bgcolor: 'transparent' },
                                     '& .MuiDataGrid-footerContainer': { borderTop: '1px solid var(--color-border-soft)' }