Skip to content

Commit dacbbb3

Browse files
laurenceislalaurenceisla
committed
docs: add dark mode
- Uses sphinx-rtd-dark-mode for sphinx-rtd-theme - Adds dark mode logos for sponsors
1 parent 650249e commit dacbbb3

File tree

12 files changed

+134
-17
lines changed

12 files changed

+134
-17
lines changed

‎docs/_static/css/custom.css

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ div.line-block {
2828

2929
#sponsors img{
3030
margin: 10px;
31+
width: 13em; /* ".. image::" does not apply width properly to SVGs */
3132
}
3233

3334
#thanks{
@@ -93,3 +94,58 @@ div.line-block {
9394
#api span.caption-text {
9495
display: none;
9596
}
97+
98+
/* Tweaks for dark mode from extension: sphinx-rtd-dark-theme */
99+
100+
html[data-theme="dark"] .highlight {
101+
background-color: #17181c !important;
102+
}
103+
104+
html[data-theme="dark"] .sphinx-tabs-tab {
105+
color: var(--dark-link-color);
106+
}
107+
108+
html[data-theme="dark"] .sphinx-tabs-panel {
109+
border: 1px solid #404040;
110+
border-top: 0;
111+
background: #141414;
112+
}
113+
114+
html[data-theme="dark"] .sphinx-tabs-tab[aria-selected="true"] {
115+
border: 1px solid #404040;
116+
border-bottom: 1px solid #141414;
117+
background-color: #141414;
118+
}
119+
120+
html[data-theme="dark"] [role="tablist"] {
121+
border-bottom: 1px solid #404040;
122+
}
123+
124+
html[data-theme="dark"] .btn-neutral {
125+
color: white !important;
126+
}
127+
128+
html[data-theme="dark"] .img-dark {
129+
display: inline;
130+
}
131+
132+
html:not([data-theme="dark"]) .img-dark {
133+
display: none;
134+
}
135+
136+
html[data-theme="dark"] .img-light {
137+
display: none;
138+
}
139+
140+
html:not([data-theme="dark"]) .img-light {
141+
display: inline;
142+
}
143+
144+
html[data-theme="dark"] .img-translucent img {
145+
background-color: #cccccc;
146+
}
147+
148+
.img-translucent img {
149+
transition: background-color 0.3s;
150+
margin-bottom: 24px;
151+
}

‎docs/conf.py

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@
3232
"sphinx_tabs.tabs",
3333
"sphinx_copybutton",
3434
"sphinxext.opengraph",
35+
"sphinx_rtd_dark_mode",
3536
]
3637

3738
# Add any paths that contain templates here, relative to this directory.
@@ -301,6 +302,9 @@ def setup(app):
301302
# sphinx-tabs configuration
302303
sphinx_tabs_disable_tab_closing = True
303304

305+
# sphinx_rtd_dark_mode configuration
306+
default_dark_mode = False
307+
304308
# sphinxext-opengraph configuration
305309

306310
ogp_image = "_images/logo.png"

‎docs/explanations/schema_isolation.rst

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,4 +12,6 @@ A PostgREST instance exposes all the tables, views, and functions of a single `P
1212
It is recommended that you don't expose tables on your API schema. Instead expose views and functions which insulate the internal details from the outside world.
1313
This allows you to change the internals of your schema and maintain backwards compatibility. It also keeps your code easier to refactor, and provides a natural way to do API versioning.
1414

15-
.. image:: ../_static/db.png
15+
.. container:: img-translucent
16+
17+
.. image:: ../_static/db.png

‎docs/index.rst

Lines changed: 36 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -34,38 +34,59 @@ Sponsors
3434

3535
.. container:: image-container
3636

37-
.. image:: ../static/cybertec-new.png
38-
:target: https://www.cybertec-postgresql.com/en/?utm_source=postgrest.org&utm_medium=referral&utm_campaign=postgrest
39-
:width: 13em
37+
.. container:: img-dark
38+
39+
.. image:: ../static/cybertec-dark.svg
40+
:target: https://www.cybertec-postgresql.com/en/?utm_source=postgrest.org&utm_medium=referral&utm_campaign=postgrest
41+
42+
.. container:: img-light
43+
44+
.. image:: ../static/cybertec-new.png
45+
:target: https://www.cybertec-postgresql.com/en/?utm_source=postgrest.org&utm_medium=referral&utm_campaign=postgrest
4046

4147
.. image:: ../static/gnuhost.png
4248
:target: https://gnuhost.eu/?utm_source=sponsor&utm_campaign=postgrest
43-
:width: 13em
4449

45-
.. image:: ../static/neon.jpg
46-
:target: https://neon.tech/?utm_source=sponsor&utm_campaign=postgrest
47-
:width: 13em
50+
.. container:: img-dark
51+
52+
.. image:: ../static/neon-dark.jpg
53+
:target: https://neon.tech/?utm_source=sponsor&utm_campaign=postgrest
54+
55+
.. container:: img-light
56+
57+
.. image:: ../static/neon.jpg
58+
:target: https://neon.tech/?utm_source=sponsor&utm_campaign=postgrest
4859

4960
|
5061
51-
.. image:: ../static/code-build.webp
52-
:target: https://code.build/?utm_source=sponsor&utm_campaign=postgrest
53-
:width: 13em
62+
.. container:: img-dark
63+
64+
.. image:: ../static/code-build-dark.png
65+
:target: https://code.build/?utm_source=sponsor&utm_campaign=postgrest
66+
67+
.. container:: img-light
68+
69+
.. image:: ../static/code-build.webp
70+
:target: https://code.build/?utm_source=sponsor&utm_campaign=postgrest
71+
72+
.. container:: img-dark
73+
74+
.. image:: ../static/supabase-dark.png
75+
:target: https://supabase.com/?utm_source=postgrest%20backers&utm_medium=open%20source%20partner&utm_campaign=postgrest%20backers%20github&utm_term=homepage
76+
77+
.. container:: img-light
5478

55-
.. image:: ../static/supabase.png
56-
:target: https://supabase.com/?utm_source=postgrest%20backers&utm_medium=open%20source%20partner&utm_campaign=postgrest%20backers%20github&utm_term=homepage
57-
:width: 13em
79+
.. image:: ../static/supabase.png
80+
:target: https://supabase.com/?utm_source=postgrest%20backers&utm_medium=open%20source%20partner&utm_campaign=postgrest%20backers%20github&utm_term=homepage
5881

5982
.. image:: ../static/tembo.png
6083
:target: https://tembo.io/?utm_source=sponsor&utm_campaign=postgrest
61-
:width: 13em
6284

6385
.. The static/empty.png(created with `convert -size 320x95 xc:#fcfcfc empty.png`) is an ugly workaround
6486
to create space and center the logos. It's not easy to layout with restructuredText.
6587
6688
.. .. image:: _static/empty.png
6789
:target: #sponsors
68-
:width: 13em
6990
7091
|
7192

‎docs/requirements.txt

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ docutils==0.20.1
22
sphinx-copybutton
33
sphinx-intl
44
sphinx-rtd-theme>=0.5.1
5+
sphinx-rtd-dark-mode>=1.3.0
56
sphinx-tabs>=3.2.0
67
sphinx>=5.0.2
78
sphinxext-opengraph==0.9.1

‎docs/tutorials/tut0.rst

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,9 @@ Welcome to PostgREST! In this pre-tutorial we're going to get things running so
99

1010
PostgREST is a standalone web server which turns a PostgreSQL database into a RESTful API. It serves an API that is customized based on the structure of the underlying database.
1111

12-
.. image:: ../_static/tuts/tut0-request-flow.png
12+
.. container:: img-translucent
13+
14+
.. image:: ../_static/tuts/tut0-request-flow.png
1315

1416
To make an API we'll simply be building a database. All the endpoints and permissions come from database objects like tables, views, roles, and functions. These tutorials will cover a number of common scenarios and how to model them in the database.
1517

‎nix/docs-extensions/sphinx-rtd-dark-mode.nix

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
{ lib
2+
, buildPythonPackage
3+
, fetchPypi
4+
, sphinx
5+
}:
6+
7+
buildPythonPackage rec {
8+
pname = "sphinx_rtd_dark_mode";
9+
version = "1.3.0";
10+
11+
src = fetchPypi {
12+
inherit pname version;
13+
sha256 = "sha256-AnK/PZ72IJIa3GflY0pmlpQZ50TahOoYgwraz9sWDqg=";
14+
};
15+
16+
propagatedBuildInputs = [
17+
sphinx
18+
];
19+
20+
doCheck = false;
21+
22+
pythonImportsCheck = [ "sphinx_rtd_dark_mode" ];
23+
24+
meta = with lib; {
25+
description = "Dark mode for the Sphinx Read the Docs theme";
26+
homepage = "https://github.com/MrDogeBro/sphinx_rtd_dark_mode";
27+
license = licenses.mit;
28+
};
29+
}

‎nix/tools/docs.nix

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ let
1616
ps.sphinx-tabs
1717
ps.sphinx-copybutton
1818
ps.sphinxext-opengraph
19+
(ps.callPackage ../docs-extensions/sphinx-rtd-dark-mode.nix { })
1920
# TODO: Remove override once new sphinx-intl version (> 2.1.0) is released and available in nixpkgs
2021
(ps.sphinx-intl.overrideAttrs (drv: { nativeBuildInputs = drv.nativeBuildInputs ++ [ ps.six ]; }))
2122
];

‎static/code-build-dark.png

65.7 KB
Loading

‎static/cybertec-dark.svg

Lines changed: 1 addition & 0 deletions
Loading

‎static/neon-dark.jpg

63.9 KB
Loading

‎static/supabase-dark.png

14.1 KB
Loading

0 commit comments

Comments
 (0)