Custom Colorful Table Styles for [Dark Theme]

Tricks & Techniques
1

If you’re like me and looking to give your tables a colorful and stylish look. these code-snipets provide a complete solution using frontmatter and space-style.

Beside the colors, I’ve also added rounded corners for a more polished design.

frontmatter

applies specific CSS class to your page, enabling the unique table theme.
Below is an example frontmatter for the wine-table theme:

---
pageDecoration:
    cssClasses:
        - wine-table
---

space-style

defines various table themes, including a rounded corner design for all tables:

table { border-radius: 15px; overflow: hidden;}
html[data-theme="dark"]{
    /*----------------------------------------------------------------*/
    body.wine-table table {--editor-wiki-link-page-color: #e6a9c9;}
    body.wine-table thead {background-color: #4a0d26;}
    body.wine-table tbody tr:nth-child(even) {background-color: #6b1a3b;}
    body.wine-table tbody tr:nth-child(odd) {background-color: #5e1735;}
    /*----------------------------------------------------------------*/
    body.sea-table table {--editor-wiki-link-page-color: #ffe559;}
    body.sea-table thead {background-color: #26277b;}
    body.sea-table tbody tr:nth-child(even) {background-color: #4569a2;}
    body.sea-table tbody tr:nth-child(odd) {background-color: #658ac4;}
    /*----------------------------------------------------------------*/
    body.silver-table table {--editor-wiki-link-page-color: #d1d1d1;}
    body.silver-table thead {background-color: #333333;}
    body.silver-table tbody tr:nth-child(even) {background-color: #444444;}
    body.silver-table tbody tr:nth-child(odd) {background-color: #555555;}
    /*----------------------------------------------------------------*/
    body.mint-table table {--editor-wiki-link-page-color: #a8d5a2; }
    body.mint-table thead {background-color: #264d26;}
    body.mint-table tbody tr:nth-child(even) {background-color: #336633;}
    body.mint-table tbody tr:nth-child(odd) {background-color: #2b5b2b;}
    /*----------------------------------------------------------------*/
    body.burgundy-table table {--editor-wiki-link-page-color: #d19999; }
    body.burgundy-table thead {background-color: #330d0d;}
    body.burgundy-table tbody tr:nth-child(even) {background-color: #4d1a1a;}
    body.burgundy-table tbody tr:nth-child(odd) {background-color: #401515;}
    /*----------------------------------------------------------------*/
    body.grape-table table {--editor-wiki-link-page-color: #a799d1; }
    body.grape-table thead {background-color: #1a0d33;}
    body.grape-table tbody tr:nth-child(even) {background-color: #341b51;}
    body.grape-table tbody tr:nth-child(odd) {background-color: #261540;}
    /*----------------------------------------------------------------*/
    body.hazel-table table {--editor-wiki-link-page-color: #e6d899; }
    body.hazel-table thead {background-color: #4a3b0d;}
    body.hazel-table tbody tr:nth-child(even) {background-color: #6b561a;}
    body.hazel-table tbody tr:nth-child(odd) {background-color: #5e4e17;}
    /*----------------------------------------------------------------*/
    body.maroon-table table {--editor-wiki-link-page-color: #e6b899; }
    body.maroon-table thead {background-color: #4a230d;}
    body.maroon-table tbody tr:nth-child(even) {background-color: #6b361a;}
    body.maroon-table tbody tr:nth-child(odd) {background-color: #5e3017;}
}

Note: Only one table theme can be applied per page, but you can use different themes on different pages.

Table Previews:

wine-table

image
image2376×646 73.3 KB

sea-table

image
image2356×634 48 KB

silver-table

image
image2354×624 68.5 KB

mint-table

image
image2360×630 49.1 KB

burgundy-table

image
image2358×618 72.8 KB

grape-table

image
image2358×626 49.2 KB

hazel-table

image
image2354×626 72.6 KB

maroon-table

image
image2362×632 73.1 KB

Feel free to share your thoughts or suggest additional improvements!

Enjoy customising :paintbrush:

2

@Mr.Red Really nice! :rocket:

3

Thank you @MrMugame for your post here, you gave me the idea to update my tables themes space-script accordingly, so now you can add multiple colors to tables individually on your page using #tags:

Light Theme

IMG_3634
IMG_36341179×1994 147 KB

Dark Theme

IMG_3635
IMG_36351179×1996 154 KB

You can add them to your space from my `silverbullet-libraries on github:

feel free to modify the colors or simply give your feedback below.

4

On the same idea, I updated my space-stlye and added the option to set your tables width using #t30-#t90p tags.

This comes in handy when you want to add a smaller table and don’t want to expand to the whole width of the editor.

Here is the example how it looks like in action:

image
image1715×1231 147 KB

5

Hello @Mr.Red ,

I am oftern struggling with column width management.
As discussed previously, would it possible to add this kind of feature :

column width disucssion

i recommend using other synthax to avoid confusion. you could use for example:

#c30p #c70p for Column30Percent, Column70Percent.

:smile:

6

Here you go a table to test it out:

| ID #sea #t80p #c5p| Name #c10p| Email #c20p | Phone #c10p| Country #c5p| Dep. #c5p| Role |
|----|------|--------|--------|----------|-------------|--------|
| 1  | Alice | [email protected] | +1-555-1234 | USA | Sales | Manager |
| 2  | Bob   | [email protected]   | +44-555-5678 | UK  | IT    | Engineer |
| 3  | Carol | [email protected] | +49-555-9012 | DE  | HR    | Analyst  |

image
image1429×263 20.7 KB

and here is the coresponding space-style


.sb-table-widget table {
  table-layout: fixed !important;
  width: 100%; 
}

/* Hide the control hashtags so they don't clutter your headers */
.sb-table-widget .sb-hashtag[data-tag-name^="t"],
.sb-table-widget .sb-hashtag[data-tag-name^="c"] {
  display: none !important;
}

/* Overall Table Width Controls (via the widget container) */
.sb-table-widget:has(.sb-hashtag[data-tag-name="t30p"]) { width: 30% !important; }
.sb-table-widget:has(.sb-hashtag[data-tag-name="t40p"]) { width: 40% !important; }
.sb-table-widget:has(.sb-hashtag[data-tag-name="t50p"]) { width: 50% !important; }
.sb-table-widget:has(.sb-hashtag[data-tag-name="t60p"]) { width: 60% !important; }
.sb-table-widget:has(.sb-hashtag[data-tag-name="t70p"]) { width: 70% !important; }
.sb-table-widget:has(.sb-hashtag[data-tag-name="t80p"]) { width: 80% !important; }
.sb-table-widget:has(.sb-hashtag[data-tag-name="t90p"]) { width: 90% !important; }

/* Individual Column Width Controls */
.sb-table-widget td:has(.sb-hashtag[data-tag-name="c5p"]) { width: 5% !important; }
.sb-table-widget td:has(.sb-hashtag[data-tag-name="c10p"]) { width: 10% !important; }
.sb-table-widget td:has(.sb-hashtag[data-tag-name="c20p"]) { width: 20% !important; }
.sb-table-widget td:has(.sb-hashtag[data-tag-name="c30p"]) { width: 30% !important; }
.sb-table-widget td:has(.sb-hashtag[data-tag-name="c40p"]) { width: 40% !important; }
.sb-table-widget td:has(.sb-hashtag[data-tag-name="c50p"]) { width: 50% !important; }
.sb-table-widget td:has(.sb-hashtag[data-tag-name="c60p"]) { width: 60% !important; }
.sb-table-widget td:has(.sb-hashtag[data-tag-name="c70p"]) { width: 70% !important; }
.sb-table-widget td:has(.sb-hashtag[data-tag-name="c80p"]) { width: 80% !important; }
.sb-table-widget td:has(.sb-hashtag[data-tag-name="c90p"]) { width: 90% !important; }

If you need other percentages you just need to create new rules accordingly.
Example for 1% or 15%

.sb-table-widget td:has(.sb-hashtag[data-tag-name="c1p"]) { width: 1% !important; }
.sb-table-widget td:has(.sb-hashtag[data-tag-name="c15p"]) { width: 15% !important; }

i will add this to my Custom Table Library later today, but until then you can test and use my space-style snippet above.

7

Hi @Mr.Red ,

Perfect, thanks!
Did not think it was so straight forward and thought there was lot of logic behind this.

Note : added :

.sb-table-widget td,
.sb-table-widget th {
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: break-word;
}

For line break.
I think SB is filtering \n and
, because I cannot add manuel arriage return :expressionless:

8

[UPDATE]

9

[Updated]

added the wrap-fix & rounded corner fix to Custom Width and Color Tables.

[EDIT] i take it back...i made it worse :man_facepalming:

[EDIT 2] OK, i think it's fixed now, I needed a workaround -> to inject a couple of html elements to mirror the dom hierarchy of the query/widget-tables.
Please update and give a short feedback if it's ok now?

10

I will check it when I find time.
Thanks