HTML: Nested Table Colors

README.md

HTML: Nested Table Colors

view on jsgist

index.css

:root { 
  color-scheme: light dark;
  --bg-c: 0.15;
  --bg-l: 0.7;
  --bg: 150;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg-l: 0.3;
  }
}


table {
  background-color: oklch(var(--bg-l) var(--bg-c) calc(var(--bg) * var(--nest-level)));
}

table { --nest-level: 1; }
table table { --nest-level: 2; }
table table table { --nest-level: 3; }
table table table table { --nest-level: 4; }
table table table table table { --nest-level: 5; }
table table table table table table { --nest-level: 6; }

index.html

<table><tbody>
  <tr><td>abc</td><td>def</td></tr>
  <tr><td>123</td><td>456</td></tr>
  <tr><td>...</td><td>

<table><tbody>
  <tr><td>abc</td><td>def</td></tr>
  <tr><td>123</td><td>456</td></tr>
  <tr><td>...</td><td>
    
<table><tbody>
  <tr><td>abc</td><td>def</td></tr>
  <tr><td>123</td><td>456</td></tr>
  <tr><td>...</td><td>
    
    
  </td></tr>
</tbody></table>    
    
  </td></tr>
</tbody></table>    
    
  </td></tr>
</tbody></table>

index.js

/*bug-in-github-api-content-can-not-be-empty*/

jsGist.json

{"name":"HTML: Nested Table Colors","settings":{},"filenames":["index.html","index.css","index.js"]}