Theming

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

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

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

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

1
:root {
2
  --ol-color-primary: #3366FF;
3
  --ol-color-secondary: #FF6B3D;
4
  --ol-color-background: #F8F9FA;
5
  --ol-color-surface: #FFFFFF;
6
  --ol-color-text-primary: #212529;
7
  --ol-color-text-secondary: #6C757D;
8
  
9
  --ol-typography-font-family: 'Roboto', sans-serif;
10
  --ol-typography-font-size: 16px;
11
  
12
  --ol-spacing-unit: 8px;
13
  --ol-spacing-small: 8px;
14
  --ol-spacing-medium: 16px;
15
  --ol-spacing-large: 24px;
16
}