mirror of
https://github.com/TeachBooks/manual.git
synced 2026-11-12 22:35:51 +00:00
Merge branch 'release' of github.com:TeachBooks/manual into release
This commit is contained in:
Tom van Woudenberg
commit
fe7fbdc2fa
8 changed files with 15 additions and 174 deletions
4
.gitmodules
vendored
4
.gitmodules
vendored
|
|
@ -45,3 +45,7 @@
|
|||
path = book/external/Sphinx-launch-buttons
|
||||
url = https://github.com/TeachBooks/Sphinx-launch-buttons.git
|
||||
branch = manual
|
||||
[submodule "book/external/Sphinx-Named-Colors"]
|
||||
path = book/external/Sphinx-Named-Colors
|
||||
url = https://github.com/TeachBooks/Sphinx-Named-Colors.git
|
||||
branch = manual
|
||||
|
|
|
|||
|
|
@ -19,6 +19,8 @@ sphinx:
|
|||
- teachbooks_sphinx_grasple
|
||||
- sphinx_image_inverter
|
||||
- sphinx_exercise
|
||||
- sphinx_proof
|
||||
- sphinx_named_colors
|
||||
config:
|
||||
html_js_files:
|
||||
- https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.4/require.min.js
|
||||
|
|
@ -47,6 +49,7 @@ sphinx:
|
|||
tex:
|
||||
macros:
|
||||
"newcolor": ['\definecolor{newcolor}{RGB}{111, 29, 119}{\color{newcolor}#1}',1]
|
||||
named_colors_custom_colors: {'onlylight':[165,21,160],'lightanddark':[45,180,117,204,158,110]}
|
||||
local_extensions:
|
||||
apastyle: _ext/
|
||||
bracket_citation_style: _ext/
|
||||
|
|
|
|||
|
|
@ -79,7 +79,7 @@ parts:
|
|||
- file: external/Sphinx-TUDelft-theme/README.md
|
||||
- file: external/teachbooks-sphinx-tippy/README.md
|
||||
- file: features/apa
|
||||
- file: features/custom_colors.md
|
||||
- file: external/Sphinx-Named-Colors/README.md
|
||||
- file: features/students
|
||||
sections:
|
||||
- file: external/annotater/README.md
|
||||
|
|
|
|||
2
book/external/Sphinx-Image-Inverter
vendored
2
book/external/Sphinx-Image-Inverter
vendored
|
|
@ -1 +1 @@
|
|||
Subproject commit 6789ae2128e183874f758b05b897580aba587689
|
||||
Subproject commit 20d8d6d1280edbb2e6df9639fe66c28b58d2e63c
|
||||
1
book/external/Sphinx-Named-Colors
vendored
Submodule
1
book/external/Sphinx-Named-Colors
vendored
Submodule
|
|
@ -0,0 +1 @@
|
|||
Subproject commit 730c036c4842de4a7bdae52d40ee106ac72bc8c7
|
||||
2
book/external/template
vendored
2
book/external/template
vendored
|
|
@ -1 +1 @@
|
|||
Subproject commit 1ea38abf8b30e9076fe315d258655ecf679e4bf2
|
||||
Subproject commit 536a00b2e9c96356a90ddd22fbfea20b42de735c
|
||||
|
|
@ -1,170 +0,0 @@
|
|||
# Custom colors
|
||||
|
||||
```{admonition} User types
|
||||
:class: tip
|
||||
This page is useful for user type 4 and 5.
|
||||
```
|
||||
|
||||
Within these online books sometimes extra/new colors are wished for. In this page is shown how this can be achieved.
|
||||
|
||||
## Using `definecolor`
|
||||
|
||||
::::{warning}
|
||||
This method only works for $\LaTeX$ colors.
|
||||
::::
|
||||
|
||||
::::{warning}
|
||||
In this case the color remains the same in ligt and dark mode.
|
||||
::::
|
||||
|
||||
### Code in `_config.yml`
|
||||
|
||||
```yaml
|
||||
sphinx:
|
||||
config:
|
||||
mathjax3_config:
|
||||
tex:
|
||||
macros:
|
||||
"newcolor": ['\definecolor{newcolor}{RGB}{111, 29, 119}{\color{newcolor}#1}',1]
|
||||
```
|
||||
|
||||
### Code in content
|
||||
|
||||
```latex
|
||||
:::{math}
|
||||
\newcolor{\LaTeX}
|
||||
:::
|
||||
```
|
||||
|
||||
### Result
|
||||
|
||||
:::{math}
|
||||
\newcolor{\LaTeX}
|
||||
:::
|
||||
|
||||
## Using CSS
|
||||
|
||||
In this case one has three options:
|
||||
|
||||
1. Light and dark mode the same color
|
||||
1. Light and dark mode different colors using two color definitions
|
||||
1. Light and dark mode different colors using a color filter
|
||||
|
||||
### Light and dark mode the same color
|
||||
|
||||
::::{note}
|
||||
This method has the benefit that the custom color can be used also within html and css elements.
|
||||
::::
|
||||
|
||||
#### Code in `_static/color.css`
|
||||
|
||||
```css
|
||||
:root {
|
||||
--newcolor: rgb(111, 29, 119);
|
||||
}
|
||||
|
||||
.newcolor {color: var(--newcolor);}
|
||||
```
|
||||
|
||||
#### Code in content
|
||||
|
||||
```latex
|
||||
:::{math}
|
||||
\class{newcolor}{\LaTeX}
|
||||
:::
|
||||
```
|
||||
|
||||
```html
|
||||
<div class="newcolor">HTML text</div>
|
||||
```
|
||||
|
||||
#### Result
|
||||
|
||||
:::{math}
|
||||
\class{newcolor-same}{\LaTeX}
|
||||
:::
|
||||
|
||||
<div class="newcolor-same">HTML text</div>
|
||||
|
||||
### Light and dark mode different colors using two color definitions
|
||||
|
||||
::::{note}
|
||||
This method has the benefit that the custom colors can be used also within html and css elements with automatic changes when the mode changes from Light to dark or vice versa.
|
||||
::::
|
||||
|
||||
|
||||
#### Code in `_static/color.css`
|
||||
|
||||
```css
|
||||
:root {
|
||||
--newcolor: rgb(111, 29, 119);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] {
|
||||
--newcolor: rgb(255, 167, 255)
|
||||
}
|
||||
|
||||
.newcolor {color: var(--newcolor);}
|
||||
```
|
||||
|
||||
#### Code in content
|
||||
|
||||
```latex
|
||||
:::{math}
|
||||
\class{newcolor}{\LaTeX}
|
||||
:::
|
||||
```
|
||||
|
||||
```html
|
||||
<div class="newcolor">HTML text</div>
|
||||
```
|
||||
|
||||
#### Result
|
||||
|
||||
:::{math}
|
||||
\class{newcolor}{\LaTeX}
|
||||
:::
|
||||
|
||||
<div class="newcolor">HTML text</div>
|
||||
|
||||
(filter)=
|
||||
### Light and dark mode different colors using a color filter
|
||||
|
||||
::::{warning}
|
||||
This method has the drawback that the custom colors can only be used as a class.
|
||||
::::
|
||||
|
||||
#### Code in `_static/color.css`
|
||||
|
||||
```css
|
||||
:root {
|
||||
--newcolor: rgb(111, 29, 119);
|
||||
}
|
||||
|
||||
.newcolor {color: var(--newcolor);}
|
||||
|
||||
html[data-theme="dark"] .newcolor {
|
||||
filter: invert(1) hue-rotate(180deg) saturate(1.5);
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
#### Code in content
|
||||
|
||||
```latex
|
||||
:::{math}
|
||||
\class{newcolor}{\LaTeX}
|
||||
:::
|
||||
```
|
||||
|
||||
```html
|
||||
<div class="newcolor">HTML text</div>
|
||||
```
|
||||
|
||||
#### Result
|
||||
|
||||
:::{math}
|
||||
\class{newcolor-filter}{\LaTeX}
|
||||
:::
|
||||
|
||||
<div class="newcolor-filter">HTML text</div>
|
||||
|
|
@ -12,4 +12,7 @@ sphinx-image-inverter
|
|||
sphinx-thebe ~= 0.9.9
|
||||
|
||||
docutils==0.17.1
|
||||
sphinx-exercise
|
||||
sphinx-exercise
|
||||
|
||||
sphinx-proof
|
||||
git+https://github.com/TeachBooks/Sphinx-Named-Colors.git
|
||||
Loading…
Add table
Add a link
Reference in a new issue