Skip to content

Change svg background color for dark mode #415

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 1 commit into from
Closed

Change svg background color for dark mode #415

wants to merge 1 commit into from

Conversation

utensil
Copy link
Member

@utensil utensil commented May 28, 2020

No description provided.

@codecov
Copy link

codecov bot commented May 28, 2020

Codecov Report

Merging #415 into master will not change coverage.
The diff coverage is n/a.

Impacted file tree graph

@@           Coverage Diff           @@
##           master     #415   +/-   ##
=======================================
  Coverage   77.56%   77.56%           
=======================================
  Files          16       16           
  Lines        4217     4217           
=======================================
  Hits         3271     3271           
  Misses        946      946           

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 7f57a09...035add5. Read the comment docs.

@utensil
Copy link
Member Author

utensil commented May 28, 2020

Somehow this doesn't actually work yet, my guess is that the styles in tag svg has no effect or no precedence. PR it anyway to mark the issue:

In README:

image

In https://github.com/pygae/galgebra/blob/master/doc/module-components.rst#latex-printing :

image

GitHub
Symbolic Geometric Algebra/Calculus package for SymPy 🔮 - pygae/galgebra

@utensil utensil marked this pull request as draft May 28, 2020 02:00
@eric-wieser
Copy link
Member

eric-wieser commented May 28, 2020

Is this a problem just for the readme, or the Sphinx docs too?

@utensil
Copy link
Member Author

utensil commented May 28, 2020

Currently only for .md and .rst in Github Dark theme .

@utensil
Copy link
Member Author

utensil commented May 28, 2020

https://github.com/StylishThemes/GitHub-Dark

GitHub
:octocat: Dark GitHub style. Contribute to StylishThemes/GitHub-Dark development by creating an account on GitHub.

@waldyrious
Copy link
Contributor

Somehow this doesn't actually work yet, my guess is that the styles in tag svg has no effect or no precedence.

What I usually do in these cases is create a rectangle for the background, with the same dimensions as the svg document/viewport. For example, for Dop.svg, that would be:

 </defs>
+<rect width="400" height="375" fill="#fcfcfc"/>
 <g id="surface1">

May I ask why use rgb(252,252,252) / #fcfcfc instead of plain white, though? That will make these slightly off in a white background.

Also, note that the contents of the SVG files are immediately adjacent to its margins, so a white fill would still not look good in a dark background. You'd need some sort of margin, e.g.:

 <?xml version="1.0" encoding="UTF-8"?>
-<svg ... width="400pt" height="375pt" viewBox="0 0 400 375" version="1.1">
+<svg ... width="400pt" height="375pt" viewBox="-10 10 420 395" version="1.1">
 <defs>
 ...
 </defs>
+<rect x="-10" y="-10" width="420" height="395" fill="#fcfcfc"/>
 <g id="surface1">
 ...
 </g>
 </svg>

@utensil
Copy link
Member Author

utensil commented May 28, 2020

May I ask why use rgb(252,252,252) / #fcfcfc instead of plain white, though? That will make these slightly off in a white background.

Using rgb(252,252,252) / #fcfcfc is to match the background color of http://galgebra.readthedocs.io/.

@utensil
Copy link
Member Author

utensil commented May 28, 2020

What I usually do in these cases is create a rectangle for the background, with the same dimensions as the svg document/viewport. For example, for Dop.svg, that would be:

 </defs>
+<rect width="400" height="375" fill="#fcfcfc"/>
 <g id="surface1">

Thanks for the suggestion. Why I'm hesitating is that this method is too manual, although not much of trouble.

@eric-wieser
Copy link
Member

eric-wieser commented May 28, 2020

Could alternatively fix this with StylishThemes/GitHub-Dark#1060, which is what makes this work:

e^{i /pi} = -1

Edit: #418 is a failed attempt at this

@utensil
Copy link
Member Author

utensil commented May 28, 2020

![](https://render.githubusercontent.com/render/math?math=%5CHuge%20e%5E%7Bi%5Cpi%7D%20%3D%20-1) gives:

which looks like this:

image

@eric-wieser
Copy link
Member

Sounds like a bug you should report back to Github-Dark.

@utensil
Copy link
Member Author

utensil commented Jun 1, 2020

Sounds like a bug you should report back to Github-Dark.

Indeed, will do that instead.

@utensil
Copy link
Member Author

utensil commented Mar 30, 2024

Superseded by #503

@utensil utensil closed this Mar 30, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants