Customization Guide - School Science

Overview

School Science uses a combination of Material-UI, Styled Components, and CSS for styling. This guide covers how to customize the visual appearance to match your branding or preferences.

Color System

The application uses a consistent color palette throughout:

Current Color Scheme

Color Name	Hex Code	Usage
Dark Navy	`#0a192f`	Card backgrounds, primary dark
Deep Purple	`#211951`	Overlays, secondary dark
Cyan Accent	`#15F5BA`	Primary accent, highlights
Cyan Light	`#64ffda`	Hover states, gradients
Purple Accent	`#836FFF`	Secondary accent, buttons
Purple Light	`#A48BFF`	Hover gradients
Light Text	`#F0F3FF`	Primary text color
Pink Accent	`#ff6b81`	Favorite icon
Hot Pink	`#ff4081`	Favorite hover

Customizing Colors

Global Theme Colors

Modify colors in src/index.css for global changes:

src/index.css

:root {
  --primary-dark: #0a192f;
  --secondary-dark: #211951;
  --accent-cyan: #15F5BA;
  --accent-purple: #836FFF;
  --text-light: #F0F3FF;
}

body {
  background-color: var(--primary-dark);
  color: var(--text-light);
}

Component-Specific Colors

FlipScienceCard

Edit colors in src/components/FlipScienceCard.jsx:

src/components/FlipScienceCard.jsx

// Card background
bgcolor: "#0a192f",  // Line 50

// Title color
color: "#15F5BA",    // Line 92

// Button gradient
background: "linear-gradient(135deg, #15F5BA, #64ffda)",  // Line 123

// Hover gradient
background: "linear-gradient(135deg, #836FFF, #15F5BA)",  // Line 128

Home Page

Modify button styling in src/pages/Home.jsx:

src/pages/Home.jsx

export const BotonInicio = styled.button`
  background: linear-gradient(135deg, #15f5ba, #64ffda);
  
  &:hover {
    background: linear-gradient(135deg, #836fff, #a48bff);
  }
`;

Project Detail Page

Update background color in src/pages/ProyectoDetalle.jsx:

src/pages/ProyectoDetalle.jsx

<div style={{
  minHeight: "100vh",
  backgroundColor: "#211951",  // Change this
  paddingBottom: "40px"
}}>

Customizing Typography

Font Families

The default fonts can be changed in src/index.css:

src/index.css

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Poppins', sans-serif;
}

Importing Custom Fonts

Add Google Fonts or custom fonts:

index.html

<head>
  <!-- Add to <head> section -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@600;700&family=Inter:wght@400;500&display=swap" rel="stylesheet">
</head>

Font Sizes

Modify typography scale:

src/index.css

h1 {
  font-size: 3rem;      /* 48px */
  font-weight: 700;
}

h2 {
  font-size: 2.5rem;    /* 40px */
  font-weight: 600;
}

h3 {
  font-size: 2rem;      /* 32px */
}

p {
  font-size: 1rem;      /* 16px */
  line-height: 1.6;
}

Customizing Components

Card Styling

Border Radius

Change card roundness:

FlipScienceCard.jsx

borderRadius: 4,  // Material-UI uses multiplier (4 = 32px)
// Change to:
borderRadius: 2,  // Sharper corners (16px)
borderRadius: 8,  // More rounded (64px)

Shadows and Glow

Modify glow effects:

FlipScienceCard.jsx

boxShadow: "0 0 18px rgba(21, 245, 186, 0.35)",  // Default

// Stronger glow:
boxShadow: "0 0 30px rgba(21, 245, 186, 0.6)",

// Softer glow:
boxShadow: "0 0 10px rgba(21, 245, 186, 0.2)",

// No glow (standard shadow):
boxShadow: "0 4px 12px rgba(0, 0, 0, 0.1)",

Hover Effects

Adjust hover animations:

FlipScienceCard.jsx

"&:hover": {
  transform: "translateY(-6px)",  // Lift amount
  boxShadow: "0 0 28px rgba(21, 245, 186, 0.6)",  // Hover glow
}

// Subtler hover:
"&:hover": {
  transform: "translateY(-3px)",
  boxShadow: "0 0 20px rgba(21, 245, 186, 0.4)",
}

Button Styling

Button Shape

Home.jsx

border-radius: 2rem;  /* Pill shape */

// Change to:
border-radius: 0.5rem;  /* Rounded corners */
border-radius: 0;       /* Square corners */

Button Colors

Home.jsx

// Primary button
background: linear-gradient(135deg, #15f5ba, #64ffda);
color: #0a192f;

// Try different combinations:
background: linear-gradient(135deg, #836fff, #a48bff);
color: #ffffff;

// Solid color:
background: #15f5ba;
color: #0a192f;

Carousel Styling

Customize the image carousel in src/components/ImageCarousel.jsx:

ImageCarousel.jsx

const CarruselContenedor = styled.div`
  border-radius: 16px;  // Container roundness
  background: rgba(10, 25, 47, 0.95);  // Background blur color
`;

const ImagenPrincipal = styled.img`
  border-radius: 12px;  // Image roundness
`;

Material-UI Theme Customization

Creating a Custom Theme

Add theme configuration to src/main.jsx:

src/main.jsx

import { createTheme, ThemeProvider } from '@mui/material/styles';

const theme = createTheme({
  palette: {
    mode: 'dark',
    primary: {
      main: '#15F5BA',
      light: '#64ffda',
      dark: '#0a192f',
    },
    secondary: {
      main: '#836FFF',
      light: '#A48BFF',
      dark: '#211951',
    },
    background: {
      default: '#0a192f',
      paper: '#211951',
    },
    text: {
      primary: '#F0F3FF',
      secondary: '#15F5BA',
    },
  },
  typography: {
    fontFamily: 'Inter, sans-serif',
    h1: {
      fontSize: '3rem',
      fontWeight: 700,
    },
    button: {
      textTransform: 'none',  // Disable uppercase buttons
    },
  },
  shape: {
    borderRadius: 12,  // Global border radius
  },
});

createRoot(document.getElementById("root")).render(
  <StrictMode>
    <BrowserRouter>
      <ThemeProvider theme={theme}>
        <App />
      </ThemeProvider>
    </BrowserRouter>
  </StrictMode>
);

Using Theme in Components

Access theme values in components:

import { useTheme } from '@mui/material/styles';

function MyComponent() {
  const theme = useTheme();
  
  return (
    <div style={{
      backgroundColor: theme.palette.background.paper,
      color: theme.palette.text.primary,
    }}>
      Content
    </div>
  );
}

Styled Components

Creating Custom Styled Components

Add new styled components:

import styled from 'styled-components';

const CustomCard = styled.div`
  background: linear-gradient(135deg, #0a192f, #211951);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease;
  
  &:hover {
    transform: scale(1.05);
  }
`;

const GlowText = styled.h2`
  color: #15F5BA;
  text-shadow: 0 0 10px rgba(21, 245, 186, 0.5);
  font-size: 2rem;
  margin: 0;
`;

function MyComponent() {
  return (
    <CustomCard>
      <GlowText>Custom Styled Component</GlowText>
    </CustomCard>
  );
}

Responsive Design

Breakpoints

Current responsive breakpoints:

@media (max-width: 1100px) {
  /* Tablet and below */
}

@media (max-width: 768px) {
  /* Mobile */
}

@media (max-width: 480px) {
  /* Small mobile */
}

Adding Responsive Styles

const ResponsiveContainer = styled.div`
  display: flex;
  gap: 20px;
  
  @media (max-width: 1100px) {
    flex-direction: column;
  }
  
  @media (max-width: 768px) {
    gap: 10px;
    padding: 10px;
  }
`;

Animation Customization

Transition Speeds

Modify animation durations:

// Default
transition: "transform 0.3s ease, box-shadow 0.3s ease"

// Faster
transition: "transform 0.15s ease, box-shadow 0.15s ease"

// Slower, more dramatic
transition: "transform 0.5s ease, box-shadow 0.5s ease"

// Different easing
transition: "transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)"

Custom Animations

Add keyframe animations:

import styled, { keyframes } from 'styled-components';

const fadeIn = keyframes`
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
`;

const AnimatedCard = styled.div`
  animation: ${fadeIn} 0.6s ease-out;
`;

Icon Customization

Using Different Icons

School Science uses both Material-UI Icons and Lucide React:

// Material-UI Icons
import FavoriteIcon from "@mui/icons-material/Favorite";
import ShareIcon from "@mui/icons-material/Share";

// Lucide React Icons
import { ChevronLeft, ChevronRight } from "lucide-react";

Replace with different icons:

import { Heart, Share2, Star, ThumbsUp } from "lucide-react";

<IconButton>
  <Heart />  // Instead of FavoriteIcon
</IconButton>

Icon Sizes

// Lucide React
<ChevronLeft size={24} />  // Default
<ChevronLeft size={32} />  // Larger

// Material-UI
<FavoriteIcon fontSize="small" />
<FavoriteIcon fontSize="medium" />  // Default
<FavoriteIcon fontSize="large" />

Layout Customization

Container Width

Modify max-width in src/pages/Home.jsx:

import { Container } from "@mui/material";

<Container fixed>  {/* Default: 1280px max-width */}
<Container maxWidth="lg">  {/* 1280px */}
<Container maxWidth="xl">  {/* 1920px */}
<Container maxWidth="md">  {/* 960px */}

Grid Layouts

Adjust card grid:

const GrupoCartas = styled.div`
  display: flex;
  flex-wrap: wrap;
  gap: 20px;  /* Space between cards */
  justify-content: space-around;  /* Alignment */
`;

// Or use CSS Grid:
const GrupoCartas = styled.div`
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
`;

Dark/Light Mode

Adding Light Mode Support

Implement theme toggle:

src/main.jsx

import { useState, createContext } from 'react';
import { ThemeProvider, createTheme } from '@mui/material/styles';

export const ColorModeContext = createContext();

function App() {
  const [mode, setMode] = useState('dark');
  
  const theme = createTheme({
    palette: {
      mode: mode,
      ...(mode === 'dark' ? {
        background: { default: '#0a192f', paper: '#211951' },
        primary: { main: '#15F5BA' },
      } : {
        background: { default: '#ffffff', paper: '#f5f5f5' },
        primary: { main: '#836FFF' },
      }),
    },
  });
  
  const toggleColorMode = () => {
    setMode(prevMode => prevMode === 'light' ? 'dark' : 'light');
  };
  
  return (
    <ColorModeContext.Provider value={{ toggleColorMode, mode }}>
      <ThemeProvider theme={theme}>
        {/* App content */}
      </ThemeProvider>
    </ColorModeContext.Provider>
  );
}

Best Practices

Use CSS Variables for Consistency

Define colors once in :root and reference throughout:

:root {
  --accent-color: #15F5BA;
}

.button {
  background: var(--accent-color);
}

Test on Multiple Devices

Always test customizations on:

Desktop (1920x1080)
Laptop (1366x768)
Tablet (768x1024)
Mobile (375x667)

Maintain Accessibility

Ensure:

Sufficient color contrast (4.5:1 minimum)
Focus states visible on keyboard navigation
Touch targets at least 44x44px on mobile

Performance Considerations

Minimize animation complexity
Use transform and opacity for smooth animations
Avoid animating width, height, or top/left
Consider reduced motion preferences

Material-UI Theming

Official MUI theme documentation

Styled Components Docs

Learn advanced styled-components techniques

Documentation Index

​Overview

​Color System

​Current Color Scheme

​Customizing Colors

​Global Theme Colors

​Component-Specific Colors

​FlipScienceCard

​Home Page

​Project Detail Page

​Customizing Typography

​Font Families

​Importing Custom Fonts

​Font Sizes

​Customizing Components

​Card Styling

​Border Radius

​Shadows and Glow

​Hover Effects

​Button Styling

​Button Shape

​Button Colors

​Carousel Styling

​Material-UI Theme Customization

​Creating a Custom Theme

​Using Theme in Components

​Styled Components

​Creating Custom Styled Components

​Responsive Design

​Breakpoints

​Adding Responsive Styles

​Animation Customization

​Transition Speeds

​Custom Animations

​Icon Customization

​Using Different Icons

​Icon Sizes

​Layout Customization

​Container Width

​Grid Layouts

​Dark/Light Mode

​Adding Light Mode Support

​Best Practices

​Related Documentation

Material-UI Theming

Styled Components Docs

Overview

Color System

Current Color Scheme

Customizing Colors

Global Theme Colors

Component-Specific Colors

FlipScienceCard

Home Page

Project Detail Page

Customizing Typography

Font Families

Importing Custom Fonts

Font Sizes

Customizing Components

Card Styling

Border Radius

Shadows and Glow

Hover Effects

Button Styling

Button Shape

Button Colors

Carousel Styling

Material-UI Theme Customization

Creating a Custom Theme

Using Theme in Components

Styled Components

Creating Custom Styled Components

Responsive Design

Breakpoints

Adding Responsive Styles

Animation Customization

Transition Speeds

Custom Animations

Icon Customization

Using Different Icons

Icon Sizes

Layout Customization

Container Width

Grid Layouts

Dark/Light Mode

Adding Light Mode Support

Best Practices

Related Documentation