render: support dark themes #613

vfosnar · 2023-01-06T19:02:00Z

Hey, I tried to create my own dark theme, but I found out there is no way to change the background. There was also hardcoded foreground color for arrow labels so I changed it to N1 (Text).

I added colors from the Cattpuccin Mocha Mauve color scheme for testing and because it looks really nice.

Some things are still missing, Latex and code blocks render horribly, but I just wanted to share my changes. What do you all think about this?

What is working

And what is not AFAIK

…nerated SVGs

alixander · 2023-01-06T19:05:28Z

whoa very cool! can you create issues for what's blocking dark themes? they should be minor changes that i'd be happy to make to unblock @vfosnar

vfosnar · 2023-01-06T19:17:04Z

whoa very cool! can you create issues for what's blocking dark themes? they should be minor changes that i'd be happy to make to unblock @vfosnar

Thanks! Made the issue, think I covered everything but let me know if I missed something.

vfosnar · 2023-01-07T10:49:25Z

Hi, had some free time today so I tried to fix #619 and think it is working now. I also added --sketch_bg option and raised an issue #622 to discuss it. I also tried updating the tests to reflect my changes but they fail at something I didn't change AFAIK.. I would be grateful if you could take a look at them because I am not be able to @alixander

Light

Dark

…f the 3D box

…toring

alixander

can you add some tests of shapes with varying fill for sketch mode to see the overlay stuff?

https://github.com/terrastruct/d2/blob/master/d2renderers/d2sketch/sketch_test.go

vfosnar · 2023-01-11T21:32:15Z

Will look into that

vfosnar · 2023-01-11T21:43:20Z

I made a demo while adding the tests:

vfosnar · 2023-01-11T21:47:23Z

Never wrote tests in Go or like unit tests in general so sorry for any misunderstanding from my side:(

vfosnar · 2023-01-11T22:01:16Z

Also a note for myself because I left some colors unimplemented and it looks like they really should have been implemented :D

alixander · 2023-01-11T22:15:42Z

the sketched overlays look good. would it be possible to split that into its own PR or is it intertwined? i'd be ready to merge that, whereas this one might take some more review and discussion.

vfosnar · 2023-01-11T22:23:47Z

Sadly no, it heavily depends on the new implementation of theming. That's why it was one of the last things on my TODO

alixander · 2023-01-11T22:38:46Z

gotcha. okay, looking forward to reviewing, feel free to request when it's ready!

bo-ku-ra · 2023-02-22T02:55:45Z

stylish!
i'm interested in how the following would look

https://play.d2lang.com/?script=bJJBbvMgEIX3c4qnLH_pN5WrbEZV70IMIVaxiQBXlioWvUV3vWKPUEEcSKN4-SzevPnerIzdz_fX5w4fBBTD7mY8Y1_lyo7x3Ff1Ty-M6Bdd_125NTmTYbh3aQnYkjGOzh2kJyBDZ5xiPAcWwozxtBy6wU0iau9liH4ZolC98NpqGXRokQv4Oif32nxUb-Vsis84GWGdcd15NpRoxcv_V6wMJf3bDYHr6bbgd-0x_uWvPKlrDaMfrL4oF2LlMBlHaUPWE-Wt7_p5aKVGOblZPfDaAiVK1OK35NtdMp66PSX6DQAA__8%3D&

alixander

absolutely sick.

dark.mp4

bad diffs:

(probably has to do with that rx thing you left a comment on)

(looks like some markdown colors got rewritten)

alixander · 2023-02-22T03:22:48Z

@bo-ku-ra is our stress-tester 😄

bo-ku-ra · 2023-02-22T04:25:42Z

absolutely sick.

Is that video wrong?

alixander · 2023-02-22T04:27:36Z

@bo-ku-ra https://www.urbandictionary.com/define.php?term=sick

vfosnar · 2023-02-22T07:07:17Z

absolutely sick.

thanks!

probably has to do with that rx thing you left a comment on

that todo was meant more like "we should follow a convention but won't break if we don't" I will investigate this when I get to a computer

looks like some markdown colors got rewritten

think this was intentional cuz the hardcoded values looked meh with a dark theme

vfosnar · 2023-02-22T17:56:21Z

fixed. it was a small typo :p

alixander

@vfosnar awesome i think this is good to go then! can you squash your commits and then add a changelog line?

vfosnar · 2023-02-22T18:01:41Z

@alixander alright!

vfosnar · 2023-02-22T18:32:21Z

@alixander welp, it throws some error...

Merge conflict in ci/release/changelogs/next.md

can't I just update the changelog and you will merge squash it?

alixander · 2023-02-22T18:33:55Z

@vfosnar we have squash merges turned off for some reason of CI I don't remember. you don't have to update the changelog, but squashing 60 commits down would be good

vfosnar · 2023-02-22T18:42:47Z

I understand that, but when I run

git rebase -i 80892f9ff9317b709d7176a6bffbbd4ca92bf9a3

It throws

Auto-merging ci/release/changelogs/next.md
CONFLICT (content): Merge conflict in ci/release/changelogs/next.md
error: could not apply 3a5e5bd1... changelog
hint: Resolve all conflicts manually, mark them as resolved with
hint: "git add/rm <conflicted_files>", then run "git rebase --continue".
hint: You can instead skip this commit: run "git rebase --skip".
hint: To abort and get back to the state before "git rebase", run "git rebase --abort".
Could not apply 3a5e5bd1... changelog

and when I do as it says and resolve it, it throws the same error on another file

alixander · 2023-02-22T18:54:28Z

@vfosnar oh, yeah that's annoying, idk what to do when i hit those either. can you give this a shot? https://stackoverflow.com/questions/25356810/git-how-to-squash-all-commits-on-branch

vfosnar · 2023-02-22T19:06:17Z

Okayy, looks like I'm really bad at git. Dunno how to make this work with a fork, maybe you could try merging it yourself? https://www.baeldung.com/ops/git-squash-commits#squashing-by-merging-with-the---squash-option

alixander

ah it's okay we'll just merge without squashing. doing one last look though -- looks like there's a regression here.

vfosnar · 2023-02-23T12:25:45Z

ah it's okay we'll just merge without squashing

alright, sorry for that

looks like there's a regression here

fixed! I did notice this but I thought it was current behavior and needs to be fixed in the future #613 (comment)

alixander

ty for pushing this through!

vfosnar · 2023-02-23T18:38:47Z

thank you too for you cooperation and for this awesome project!

nhooyr · 2023-02-23T19:42:58Z

super excited for this!!! thanks @vfosnar

alixander · 2023-02-24T01:09:19Z

lib/color/color.go

+		case colorString[0:2] == "AB":
+			switch colorString[2] {
+			case '4', '5':
+				return AB4, nil
+			}


@vfosnar i just realized, is there a reason why 4 and 5 are aggregated here?

i'm assuming it's a mistake (even though the code here looks deliberate). fixed here: #883

Well, AFAIR this code should shift any given theme color to the next one and when it was the first one, it will return itself. Thus if we have 2 colors, we return same color in both cases.

This whole shifting code was intended more like a "somewhat working" solution and I thought I left a TODO explaining it somewhere there and that a better solution may be available but would probably require adding all rn missing colors to themes and tweaking them a little.

also I think this method does the opposite in dark mode, it lightens the value, becase dark themes have flipped pallet.

reference to why I thought shifting could work:
https://github.com/terrastruct/d2/tree/master/d2themes#color-coding-example

oh shoot yeah i didn't look at the function name, this makes sense. hmmm, will think about this.

alixander · 2023-02-24T01:09:31Z

lib/color/color.go

+
+	// Alternative colors B
+	AB4 = "AB4"
+	AB5 = "AB4"


is this intentional?

oh, no it's not.

make bgColor and fgColor variables instead of hardcoded values for ge…

34d15da

…nerated SVGs

vfosnar mentioned this pull request Jan 6, 2023

render: support dark themes #616

Closed

10 tasks

vfosnar added 4 commits January 6, 2023 19:38

Merge branch 'terrastruct:master' into master

9f360f0

Merge branch 'terrastruct:master' into master

2d775c4

add --sketch_bg option

8f903d7

make Latex use N1 (Text) color

0919cc1

vfosnar added 2 commits January 8, 2023 10:34

Merge branch 'terrastruct:master' into master

bcb1289

support for prefers-color-scheme

a81ab2d

vfosnar mentioned this pull request Jan 9, 2023

render: respect prefer-color-scheme #623

Closed

vfosnar added 7 commits January 9, 2023 22:16

removed --sketch_bg and added --dark_theme option

a972b5b

implemented (limited) darkening of theme colors and fixed rendering o…

84e8c25

…f the 3D box

added theming support to LaTeX and markdown

41fd673

Merge branch 'terrastruct:master' into master

2849624

removed useless TODOs

3160f88

Merge branch 'terrastruct:master' into master

fb6eee9

vary sketch overlay color depending on the background and small refac…

63a0c1e

…toring

alixander reviewed Jan 11, 2023

View reviewed changes

added sketch overlay tests

11bc734

vfosnar added 2 commits January 12, 2023 08:51

Merge branch 'terrastruct:master' into master

2f9aad0

added missing colors conversion

19c53d5

fix manpage :D

9d5a0fa

alixander requested changes Feb 22, 2023

View reviewed changes

vfosnar added 2 commits February 22, 2023 15:36

Merge branch 'terrastruct:master' into master

72417d5

fix filled circle arrowhead offset

79abc91

alixander reviewed Feb 22, 2023

View reviewed changes

alixander requested changes Feb 22, 2023

View reviewed changes

vfosnar added 3 commits February 23, 2023 11:41

merge updates

6c8ff99

Merge branch 'terrastruct-master'

897b4d3

fix appendix background

ba72dfa

alixander approved these changes Feb 23, 2023

View reviewed changes

alixander merged commit 619a3ab into terrastruct:master Feb 23, 2023

alixander reviewed Feb 24, 2023

View reviewed changes

This was referenced Feb 24, 2023

Fix color code #883

Merged

theme darken/lighten programmatically #887

Open

gavin-ts mentioned this pull request Feb 28, 2023

render: update background rect width and height for appendix #941

Merged

render: support dark themes #613

render: support dark themes #613

Conversation

vfosnar commented Jan 6, 2023

What is working

And what is not AFAIK

alixander commented Jan 6, 2023

vfosnar commented Jan 6, 2023

vfosnar commented Jan 7, 2023

Light

Dark

alixander left a comment

Choose a reason for hiding this comment

vfosnar commented Jan 11, 2023

vfosnar commented Jan 11, 2023

vfosnar commented Jan 11, 2023

vfosnar commented Jan 11, 2023

alixander commented Jan 11, 2023 • edited Loading

vfosnar commented Jan 11, 2023

alixander commented Jan 11, 2023

bo-ku-ra commented Feb 22, 2023

alixander left a comment • edited Loading

Choose a reason for hiding this comment

alixander commented Feb 22, 2023

bo-ku-ra commented Feb 22, 2023

alixander commented Feb 22, 2023

vfosnar commented Feb 22, 2023

vfosnar commented Feb 22, 2023

alixander left a comment

Choose a reason for hiding this comment

vfosnar commented Feb 22, 2023

vfosnar commented Feb 22, 2023

alixander commented Feb 22, 2023

vfosnar commented Feb 22, 2023

alixander commented Feb 22, 2023

vfosnar commented Feb 22, 2023

alixander left a comment

Choose a reason for hiding this comment

vfosnar commented Feb 23, 2023

alixander left a comment

Choose a reason for hiding this comment

vfosnar commented Feb 23, 2023

nhooyr commented Feb 23, 2023

alixander Feb 24, 2023

Choose a reason for hiding this comment

alixander Feb 24, 2023 • edited Loading

Choose a reason for hiding this comment

vfosnar Feb 24, 2023

Choose a reason for hiding this comment

alixander Feb 24, 2023

Choose a reason for hiding this comment

alixander Feb 24, 2023

Choose a reason for hiding this comment

alixander Feb 24, 2023

Choose a reason for hiding this comment

vfosnar Feb 24, 2023

Choose a reason for hiding this comment

alixander commented Jan 11, 2023 •

edited

Loading

alixander left a comment •

edited

Loading

alixander Feb 24, 2023 •

edited

Loading