Theming

1
const theme = {
2
  colors: {
3
    primary: { hex: '#3366FF' },
4
    secondary: { hex: '#FF6B3D' },
5
    accent: { hex: '#00C851' },
6
    error: { hex: '#FF4444' },
7
    warning: { hex: '#FFBB33' },
8
    info: { hex: '#33B5E5' },
9
    background: { hex: '#F8F9FA' },
10
    surface: { hex: '#FFFFFF' },
11
    text: { hex: '#212529' }
12
  },
13
  typography: {
14
    fontFamily: "'Roboto', sans-serif",
15
    fontSize: '16px',
16
    fontWeights: {
17
      regular: 400,
18
      medium: 500,
19
      bold: 700
20
    },
21
    headings: {
22
      h1: {
23
        fontSize: '2.5rem',
24
        fontWeight: 700,
25
        lineHeight: 1.2
26
      },
27
      h2: {
28
        fontSize: '2rem',
29
        fontWeight: 700,
30
        lineHeight: 1.3
31
      },
32
      h3: {
33
        fontSize: '1.75rem',
34
        fontWeight: 500,
35
        lineHeight: 1.4
36
      }
37
    }
38
  },
39
  spacing: {
40
    unit: 8, // Base spacing unit in pixels
41
    small: 8,
42
    medium: 16,
43
    large: 24,
44
    xlarge: 32
45
  },
46
  borderRadius: {
47
    small: 4,
48
    medium: 8,
49
    large: 12
50
  },
51
  shadows: {
52
    small: '0 2px 4px rgba(0,0,0,0.1)',
53
    medium: '0 4px 8px rgba(0,0,0,0.12)',
54
    large: '0 8px 16px rgba(0,0,0,0.14)'
55
  }
56
};

1
import { OpenLedgerProvider } from "@openledger/accounting-react";
2
3
function App() {
4
return (
5
<OpenLedgerProvider
6
entityId="your-entity-id"
7
developerId="your-developer-id"
8
developerSecret="your-api-key"
9
environment="development"
10
theme={theme} // Your custom theme
11
apiUrl="your-api-url" >
12
<YourApp />
13
</OpenLedgerProvider>
14
);
15
}

1
// Example of how our components detect theme brightness
2
const isLightColor = (hexColor) => {
3
  // Convert hex to RGB and calculate perceived brightness
4
  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hexColor);
5
  if (!result) return false;
6
7
  const r = parseInt(result[1], 16);
8
  const g = parseInt(result[2], 16);
9
  const b = parseInt(result[3], 16);
10
11
  // Perceived brightness formula (ITU-R BT.709)
12
  return (r * 299 + g * 587 + b * 114) / 1000 > 140;
13
};

1
// Example of how our components create adaptive background shades
2
const getAdaptiveShade = (hexColor) => {
3
  // Determine if color is light or dark, then adjust accordingly
4
  const isLight = isLightColor(hexColor);
5
  
6
  if (isLight) {
7
    // Subtle darkening for light themes
8
    return `rgba(${r - 8}, ${g - 8}, ${b - 8}, 0.04)`;
9
  } else {
10
    // Subtle lightening for dark themes
11
    return `rgba(${r + 12}, ${g + 12}, ${b + 12}, 0.25)`;
12
  }
13
};

1
// Example of how our components apply adaptive shadows
2
const getCardShadow = (isLight) => {
3
  if (isLight) {
4
    // Subtle shadows for light themes
5
    return `
6
      0 1px 2px rgba(0,0,0,0.04),
7
      0 2px 4px rgba(0,0,0,0.02)
8
    `;
9
  } else {
10
    // Stronger, more defined shadows for dark themes
11
    return `0 1px 2px rgba(0,0,0,0.25)`;
12
  }
13
};

1
{
2
  primary: { hex: '#3366FF' },
3
  background: { hex: '#F8F9FA' }
4
}

1
const lightTheme = {
2
  colors: {
3
    primary: { hex: '#3366FF' },
4
    secondary: { hex: '#FF6B3D' },
5
    accent: { hex: '#00C851' },
6
    background: { hex: '#F8F9FA' },
7
    surface: { hex: '#FFFFFF' },
8
    text: { hex: '#212529' }
9
  }
10
};

1
const darkTheme = {
2
  colors: {
3
    primary: { hex: '#5C7CFA' },
4
    secondary: { hex: '#FF8F6B' },
5
    accent: { hex: '#00E676' },
6
    background: { hex: '#121212' },
7
    surface: { hex: '#1E1E1E' },
8
    text: { hex: '#E1E1E1' }
9
  }
10
};