Mirrors/Dispatcharr
1
0
Fork 1
mirror of https://github.com/Dispatcharr/Dispatcharr.git synced 2026-07-17 16:50:53 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

Centralize theme config

Browse source 
Updated theme.js to include common styling properties.
Updated app.js to use common styling properties
Updated Sidebar.js to use common styling properties
This commit is contained in:
Dispatcharr 2025-03-07 19:51:08 -06:00
parent f57e15bd00
commit 6118feeecf
3 changed files with 54 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

4
frontend/src/App.js
View file

@ -98,14 +98,14 @@ const App = () => {
toggleDrawer={toggleDrawer}
/>
{/* Main content area, no AppBar, so no marginTop */}
{/* Main content area */}
<Box
sx={{
display: 'flex',
flexDirection: 'column',
ml: `${open ? drawerWidth : miniDrawerWidth}px`,
transition: 'margin-left 0.3s',
backgroundColor: '#18181b',
backgroundColor: 'background.default',
minHeight: '100vh',
color: 'text.primary',
}}

25
frontend/src/components/Sidebar.js
View file

@ -11,6 +11,7 @@ import {
ListItemIcon,
ListItemText,
} from '@mui/material';
import { useTheme } from '@mui/material/styles';
import {
ListOrdered,
Play,
@ -25,17 +26,14 @@ const navItems = [
{ label: 'Channels', icon: <ListOrdered size={20} />, path: '/channels' },
{ label: 'M3U', icon: <Play size={20} />, path: '/m3u' },
{ label: 'EPG', icon: <Database size={20} />, path: '/epg' },
{
label: 'Stream Profiles',
icon: <SlidersHorizontal size={20} />,
path: '/stream-profiles',
},
{ label: 'Stream Profiles', icon: <SlidersHorizontal size={20} />, path: '/stream-profiles' },
{ label: 'TV Guide', icon: <LayoutGrid size={20} />, path: '/guide' },
{ label: 'Settings', icon: <LucideSettings size={20} />, path: '/settings' },
];
const Sidebar = ({ open, drawerWidth, miniDrawerWidth, toggleDrawer }) => {
const location = useLocation();
const theme = useTheme();
return (
<Drawer
@ -45,7 +43,7 @@ const Sidebar = ({ open, drawerWidth, miniDrawerWidth, toggleDrawer }) => {
width: open ? drawerWidth : miniDrawerWidth,
overflowX: 'hidden',
transition: 'width 0.3s',
backgroundColor: '#18181b',
backgroundColor: theme.palette.background.default,
color: 'text.primary',
display: 'flex',
flexDirection: 'column',
@ -118,16 +116,18 @@ const Sidebar = ({ open, drawerWidth, miniDrawerWidth, toggleDrawer }) => {
borderRadius: 1,
width: open ? '208px' : 'auto',
transition: 'all 0.2s ease',
bgcolor: isActive ? 'rgba(21, 69, 62, 0.67)' : 'transparent',
bgcolor: isActive
? theme.custom.sidebar.activeBackground
: 'transparent',
border: isActive
? '1px solid #14917e'
? `1px solid ${theme.custom.sidebar.activeBorder}`
: '1px solid transparent',
color: 'text.primary',
px: 1,
py: 0.25,
'&:hover': {
bgcolor: '#27272a',
border: '1px solid #3f3f46',
bgcolor: theme.custom.sidebar.hoverBackground,
border: `1px solid ${theme.custom.sidebar.hoverBorder}`,
},
}}
>
@ -148,9 +148,10 @@ const Sidebar = ({ open, drawerWidth, miniDrawerWidth, toggleDrawer }) => {
sx: {
fontSize: '14px',
fontWeight: 400,
color: isActive ? '##d4d4d8' : '##d4d4d8',
fontFamily: 'Inter, sans-serif',
fontFamily: theme.custom.sidebar.fontFamily,
letterSpacing: '-0.3px',
// Keeping the text color as it is in your original
color: isActive ? '#d4d4d8' : '#d4d4d8',
},
}}
/>

65
frontend/src/theme.js
View file

@ -1,38 +1,44 @@
// frontend/src/theme.js
// src/theme.js
import { createTheme } from '@mui/material/styles';
const sharedColors = {
primary: '#4A90E2',
secondary: '#F5A623',
background: '#18181b', // Global background color on every page
paper: '#333539',
textPrimary: '#FFFFFF',
textSecondary: '#C3C3C3',
};
const sharedTypography = {
fontFamily: ['Roboto', 'Helvetica', 'Arial', 'sans-serif'].join(','),
h1: { fontSize: '2.5rem', fontWeight: 700 },
h2: { fontSize: '2rem', fontWeight: 700 },
body1: { fontSize: '1rem' },
};
const theme = createTheme({
palette: {
mode: 'dark',
background: {
default: '#2B2C30', // Dark background
paper: '#333539', // Slightly lighter panel background
default: sharedColors.background, // This is now #18181b
paper: sharedColors.paper,
},
primary: {
// Adjust accent color if your Figma calls for a different highlight
main: '#4A90E2',
contrastText: '#FFFFFF',
main: sharedColors.primary,
contrastText: sharedColors.textPrimary,
},
secondary: {
main: '#F5A623',
contrastText: '#FFFFFF',
main: sharedColors.secondary,
contrastText: sharedColors.textPrimary,
},
text: {
primary: '#FFFFFF',
secondary: '#C3C3C3',
},
},
typography: {
fontFamily: ['Roboto', 'Helvetica', 'Arial', 'sans-serif'].join(','),
// Example typography tweaks
h6: {
fontWeight: 500,
fontSize: '0.95rem',
},
body1: {
fontSize: '0.875rem',
primary: sharedColors.textPrimary,
secondary: sharedColors.textSecondary,
},
},
typography: sharedTypography,
spacing: 8,
components: {
MuiButton: {
styleOverrides: {
@ -46,20 +52,27 @@ const theme = createTheme({
MuiDrawer: {
styleOverrides: {
paper: {
backgroundColor: '#333539',
color: '#FFFFFF',
backgroundColor: sharedColors.paper,
color: sharedColors.textPrimary,
},
},
},
// We remove the AppBar override since we won't be using it in App.js anymore
MuiAppBar: {
styleOverrides: {
root: {
backgroundColor: '#2B2C30',
backgroundColor: sharedColors.background,
},
},
},
// Feel free to override more MUI components as needed...
},
custom: {
sidebar: {
activeBackground: 'rgba(21, 69, 62, 0.67)',
activeBorder: '#14917e',
hoverBackground: '#27272a',
hoverBorder: '#3f3f46',
fontFamily: 'Inter, sans-serif',
},
},
});