You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
select'Default theme'as title, '?theme=default'as link, 'Default theme'as description, case $theme when 'default' then 'primary' end as color, $theme ='default'as disabled;
21
+
select'Custom theme'as title, '?theme=custom'as link, 'Custom theme'as description, case $theme when 'custom' then 'primary' end as color, $theme ='custom'as disabled;
22
+
23
+
12
24
select'card'as component, 'Colors'as title;
13
25
select color as title, hex as description, color as background_color
14
-
from colors;
26
+
from colors;
27
+
28
+
29
+
select'text'as component, '
30
+
The colors above are from the [official site custom theme](https://github.com/sqlpage/SQLPage/blob/main/examples/official-site/assets/highlightjs-and-tabler-theme.css).
31
+
View [this page with the default theme](?theme=default) to see the colors that are used by default.
32
+
'as contents_md where $theme ='custom';
33
+
34
+
select'text'as component, '
35
+
### Customization and theming
36
+
37
+
SQLPage is designed to be easily customizable and themable.
38
+
You cannot pass arbitrary color codes to components from your SQL queries,
39
+
but you can customize which exact color is associated to each color name.
40
+
41
+
#### Creating a custom theme
42
+
43
+
To create a custom theme, you can create a CSS file and use the [shell component](/component.sql?component=shell) to include it.
44
+
45
+
##### `index.sql`
46
+
47
+
```sql
48
+
select ''shell'' as component, ''custom_theme.css'' as css, ''custom_theme'' as theme;
49
+
```
50
+
51
+
##### `custom_theme.css`
52
+
53
+
```css
54
+
:root,
55
+
.layout-boxed[data-bs-theme="custom_theme"] {
56
+
color-scheme: light;
57
+
58
+
/* Base text colors */
59
+
--tblr-body-color: #cfd5e6;
60
+
--tblr-text-secondary-rgb: 204, 209, 217;
61
+
--tblr-secondary-color: #cccccc;
62
+
--tblr-muted-color: rgba(191, 191, 191, 0.8);
63
+
64
+
/* Background colors */
65
+
--tblr-body-bg: #0f1426;
66
+
--tblr-bg-surface: #111629;
67
+
--tblr-bg-surface-secondary: #151a2e;
68
+
--tblr-bg-surface-tertiary: #191f33;
69
+
70
+
/* Primary and secondary colors */
71
+
--tblr-primary-rgb: 95, 132, 169;
72
+
--tblr-primary: rgb(var(--tblr-primary-rgb));
73
+
--tblr-secondary-rgb: 235, 232, 255;
74
+
--tblr-secondary: rgb(var(--tblr-secondary-rgb));
75
+
76
+
/* Border colors */
77
+
--tblr-border-color: #151926;
78
+
--tblr-border-color-translucent: #404d73b3;
79
+
80
+
/* Theme colors. All sqlpage colors can be customized in the same way. */
81
+
--tblr-blue-rgb: 84, 151, 213; /* To convert between #RRGGBB color codes to decimal RGB values, you can use https://www.rapidtables.com/web/color/RGB_Color.html */
Copy file name to clipboardExpand all lines: examples/official-site/sqlpage/migrations/13_tab.sql
+18-6Lines changed: 18 additions & 6 deletions
Original file line number
Diff line number
Diff line change
@@ -16,7 +16,7 @@ INSERT INTO parameter (
16
16
VALUES (
17
17
'tab',
18
18
'title',
19
-
'Text to display on the tab.',
19
+
'Text to display on the tab. If link is not set, the link will be the current page with a ''$tab'' parameter set to the tab''s title. If ''id'' is set, the page will be scrolled to the tab.',
20
20
'TEXT',
21
21
FALSE,
22
22
FALSE
@@ -80,17 +80,29 @@ To implement contents that change based on the active tab, use the `tab` paramet
80
80
For example, if the page is `/my-page.sql`, then the first tab will have a link of `/my-page.sql?tab=My+First+tab`.
81
81
82
82
You could then for instance display contents coming from the database based on the value of the `tab` parameter.
83
-
For instance: `SELECT ''text'' AS component, contents_md FROM my_page_contents WHERE tab = $tab`
83
+
For instance: `SELECT ''text'' AS component, contents_md FROM my_page_contents WHERE tab = $tab`.
84
+
Or you could write different queries for different tabs and use the `$tab` parameter with a static value in a where clause to switch between tabs:
85
+
86
+
```sql
87
+
select ''tab'' as component;
88
+
select ''Projects'' as title, $tab = ''Projects'' as active;
89
+
select ''Tasks'' as title, $tab = ''Tasks'' as active;
90
+
91
+
select ''table'' as component;
92
+
93
+
select * from my_projects where $tab = ''Projects'';
94
+
select * from my_tasks where $tab = ''Tasks'';
95
+
```
84
96
85
97
Note that the example below is completely static, and does not use the `tab` parameter to actually switch between tabs.
86
98
View the [dynamic tabs example](/examples/tabs/).
87
99
',
88
100
JSON(
89
101
'[
90
102
{ "component": "tab" },
91
-
{ "title": "This tab does not exist", "active": true },
92
-
{ "title": "I am not a true tab" },
93
-
{ "title": "Do not click here" }
103
+
{ "title": "This tab does not exist", "active": true, "link": "?component=tab&tab=tab_1" },
104
+
{ "title": "I am not a true tab", "link": "?component=tab&tab=tab_2" },
105
+
{ "title": "Do not click here", "link": "?component=tab&tab=tab_3" }
94
106
]'
95
107
)
96
108
),
@@ -101,7 +113,7 @@ View the [dynamic tabs example](/examples/tabs/).
101
113
'[
102
114
{ "component": "tab", "center": true },
103
115
{ "title": "Hero", "link": "?component=hero#component", "icon": "home", "description": "The hero component is a full-width banner with a title and an image." },
0 commit comments