talexander/organic_ast_explorer
1
0
Fork 0
Code Issues Pull Requests Releases Activity

Add dark mode support for the AST tree.

Browse Source
This commit is contained in:
Tom Alexander 2024-01-28 19:00:46 -05:00
parent 43de54039b
commit 8c2c48a719
Signed by: talexander
GPG Key ID: D3A179C9A53C0EDE
1 changed files with 56 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
src/OrgAst.module.css
View File

@ -1,16 +1,57 @@
.OrgAst {
background: #eeeeee;
--ast-background-color: #111111;
--ast-font-color: #ffffff;
--ast-node-border-color: #bbbbbb;
--ast-node-shadow-color: #bbbbbb;
--ast-node-type-background-color: #933009;
--ast-node-type-hover-background-color: #8f0745;
--ast-node-type-selected-background-color: #630368;
--ast-node-subsection-border-color: #ffffff;
--ast-node-children-background-color: #111111;
--ast-node-table-row-odd-background-color: #111111;
--ast-node-table-row-even-background-color: #000000;
}
@media (prefers-color-scheme: light) {
.OrgAst {
--ast-background-color: #eeeeee;
--ast-font-color: #000000;
--ast-node-background-color: #ffffff;
--ast-node-border-color: #000000;
--ast-node-shadow-color: #000000;
--ast-node-type-background-color: #6ccff6;
--ast-node-type-hover-background-color: #70f8ba;
--ast-node-type-selected-background-color: #9cfc97;
--ast-node-subsection-border-color: #000000;
--ast-node-children-background-color: #eeeeee;
--ast-node-table-row-odd-background-color: #eeeeee;
--ast-node-table-row-even-background-color: #ffffff;
}
}
.OrgAst {
background: var(--ast-background-color);
color: var(--ast-font-color);
padding: 5px;
overflow: auto;
}
.OrgAstNode {
border: 1px solid #000000;
background: #ffffff;
box-shadow: -3px 3px 1px #000000;
border: 1px solid var(--ast-node-border-color);
background: var(--ast-node-background-color);
box-shadow: -3px 3px 1px var(--ast-node-shadow-color);
> details {
border: 1px solid #000000;
border: 1px solid var(--ast-node-subsection-border-color);
margin: 5px 5px 5px 2px;
> summary {
@ -23,25 +64,25 @@
> summary {
border-width: 0 0 1px 0;
border-style: dotted;
border-color: #000000;
border-color: var(--ast-node-subsection-border-color);
}
}
}
.OrgAstNode.selected {
> .OrgAstNodeType {
background: #9cfc97;
background: var(--ast-node-type-selected-background-color);
}
}
.OrgAstNode.hovered:not(.selected) {
> .OrgAstNodeType {
background: #70f8ba;
background: var(--ast-node-type-hover-background-color);
}
}
.OrgAstNodeType {
background: #6ccff6;
background: var(--ast-node-type-background-color);
padding: 3px;
overflow: hidden;
cursor: pointer;
@ -64,20 +105,20 @@
.OrgAstChildren {
padding: 5px 5px 5px 20px;
background: #eeeeee;
background: var(--ast-node-children-background-color);
}
.OrgAstProperties,
.OrgAstObjectTree,
.OrgAstOptionalPair {
border: 1px solid #000000;
border: 1px solid var(--ast-node-subsection-border-color);
margin: 5px;
> tbody {
> tr {
border-width: 1px 0;
border-style: solid;
border-color: #000000;
border-color: var(--ast-node-subsection-border-color);
> th,
> td {
@ -92,10 +133,10 @@
}
> tr:nth-child(odd) {
background-color: #eeeeee;
background-color: var(--ast-node-table-row-odd-background-color);
}
> tr:nth-child(even) {
background-color: #ffffff;
background-color: var(--ast-node-table-row-even-background-color);
}
}
}
@ -103,7 +144,7 @@
.OrgAstObjectTree {
> tbody {
border-style: dashed;
border-color: #000000;
border-color: var(--ast-node-subsection-border-color);
}
> tbody:not(:first-child, :last-child) {
border-width: 3px 0;