mirror of
https://github.com/TeachBooks/manual.git
synced 2026-11-12 22:35:51 +00:00
Added alll stuff for Named Colors
This commit is contained in:
douden
parent
2922e1a267
commit
da3392afd9
6 changed files with 10 additions and 173 deletions
2
.gitmodules
vendored
2
.gitmodules
vendored
|
|
@ -48,4 +48,4 @@
|
|||
[submodule "book/external/Sphinx-Named-Colors"]
|
||||
path = book/external/Sphinx-Named-Colors
|
||||
url = https://github.com/TeachBooks/Sphinx-Named-Colors.git
|
||||
branch = manual
|
||||
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
|
||||
|
|
|
|||
1
book/external/Sphinx-Named-Colors
vendored
Submodule
1
book/external/Sphinx-Named-Colors
vendored
Submodule
|
|
@ -0,0 +1 @@
|
|||
Subproject commit fda40274420c46a05cee1de839ee4726a3816aed
|
||||
|
|
@ -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