diff --git a/docs/theming.md b/docs/theming.md index b70ef628d3..cb7233e08b 100644 --- a/docs/theming.md +++ b/docs/theming.md @@ -43,7 +43,8 @@ It's also possible to set CSS in the config file under `appConfig.customCss`. Ho ### Loading External Stylesheets -The URI of a stylesheet, either local or hosted on a remote CDN can be passed into the config file. The attribute `appConfig.externalStyleSheet` accepts either a string, or an array of strings. This is handled in [`ThemeHelper.js`](https://github.com/Lissy93/dashy/blob/master/src/utils/ThemeHelper.js). +The URI of a stylesheet, either local or hosted on a remote CDN can be passed into the config file. The attribute `appConfig.externalStyleSheet` accepts either a string, or an array of strings. You can also pass custom font stylesheets here, they must be in a CSS format (for example, `https://fonts.googleapis.com/css2?family=Cutive+Mono`). +This is handled in [`ThemeHelper.js`](https://github.com/Lissy93/dashy/blob/master/src/utils/ThemeHelper.js). For example: @@ -63,6 +64,14 @@ Some UI components have a color option, that can be set in the config file, to f - `item.color` - Font and icon color for a given item - `item.backgroundColor` - Background color for a given icon +### Typography + +Essential fonts bundled within the app are located within `./src/assets/fonts/`. All optional fonts that are used by themes are stored in `./public/fonts/`, if you want to add your own font, this is where you should put it. As with assets, if you're using Docker then using a volume to link a directory on your host system with this path within the container will make management much easier. + +Fonts which are not being used by the current theme are **not** fetched on page load. They are instead only loaded into the application if and when they are required. So having multiple themes with various typefaces shouldn't have any negative impact on performance. + +Full credit to the typographers behind each of the included fonts. Specifically: Matt McInerney, Christian Robertson, Haley Fiege, Peter Hull, Cyreal and the legendary Vernon Adams + ### CSS Variables All colors as well as other variable values (such as borders, border-radius, shadows) are specified as CSS variables. This makes theming the application easy, as you only need to change a given color or value in one place. You can find all variables in [`color-palette.scss`](https://github.com/Lissy93/dashy/blob/master/src/styles/color-palette.scss) and the themes which make use of these color variables are specified in [`color-themes.scss`](https://github.com/Lissy93/dashy/blob/master/src/styles/color-themes.scss) diff --git a/public/fonts/AllertaStencil-Regular.ttf b/public/fonts/AllertaStencil-Regular.ttf new file mode 100644 index 0000000000..f8104ecfb2 Binary files /dev/null and b/public/fonts/AllertaStencil-Regular.ttf differ diff --git a/public/fonts/Audiowide-Regular.ttf b/public/fonts/Audiowide-Regular.ttf new file mode 100644 index 0000000000..e5d242b3a5 Binary files /dev/null and b/public/fonts/Audiowide-Regular.ttf differ diff --git a/public/fonts/CutiveMono-Regular.ttf b/public/fonts/CutiveMono-Regular.ttf new file mode 100644 index 0000000000..e5bcf88427 Binary files /dev/null and b/public/fonts/CutiveMono-Regular.ttf differ diff --git a/public/fonts/FrancoisOne-Regular.ttf b/public/fonts/FrancoisOne-Regular.ttf new file mode 100644 index 0000000000..7d646fa11c Binary files /dev/null and b/public/fonts/FrancoisOne-Regular.ttf differ diff --git a/public/fonts/Podkova-Medium.ttf b/public/fonts/Podkova-Medium.ttf new file mode 100644 index 0000000000..c5e5bf1eee Binary files /dev/null and b/public/fonts/Podkova-Medium.ttf differ diff --git a/public/fonts/Roboto-Light.ttf b/public/fonts/Roboto-Light.ttf new file mode 100644 index 0000000000..0e977514ff Binary files /dev/null and b/public/fonts/Roboto-Light.ttf differ diff --git a/public/fonts/Sniglet-Regular.ttf b/public/fonts/Sniglet-Regular.ttf new file mode 100644 index 0000000000..f62bffe164 Binary files /dev/null and b/public/fonts/Sniglet-Regular.ttf differ diff --git a/public/fonts/VT323-Regular.ttf b/public/fonts/VT323-Regular.ttf new file mode 100644 index 0000000000..e838581129 Binary files /dev/null and b/public/fonts/VT323-Regular.ttf differ diff --git a/src/assets/fonts/Inconsolata-Variable.ttf b/src/assets/fonts/Inconsolata-Variable.ttf deleted file mode 100644 index 20251d93e3..0000000000 Binary files a/src/assets/fonts/Inconsolata-Variable.ttf and /dev/null differ diff --git a/src/styles/color-themes.scss b/src/styles/color-themes.scss index ed60df950c..57ad1afa92 100644 --- a/src/styles/color-themes.scss +++ b/src/styles/color-themes.scss @@ -187,6 +187,7 @@ html[data-theme='nord-frost'] { } html[data-theme='material-original'] { + --font-body: 'Roboto', serif; --primary: #29B6F6; --settings-text-color: #01579b; --background: #e2e1e0; @@ -308,8 +309,8 @@ html[data-theme='colorful'] { } html[data-theme='minimal-light'], html[data-theme='minimal-dark'], html[data-theme='vaporware'] { - --font-body: 'PTMono-Regular', 'Courier New', monospace; - --font-headings: 'PTMono-Regular', 'Courier New', monospace; + --font-body: 'Courier New', monospace; + --font-headings: 'Courier New', monospace; --footer-height: 94px; .item.size-medium .tile-title { diff --git a/src/styles/typography.scss b/src/styles/typography.scss index 6d8407d937..1888a754e1 100644 --- a/src/styles/typography.scss +++ b/src/styles/typography.scss @@ -1,5 +1,5 @@ - +/* Fonts used by the default theme, and bundled within the app */ @font-face { font-family: 'Inconsolata'; src: url('./assets/fonts/Inconsolata-Light.ttf'); @@ -27,12 +27,12 @@ html { vertical-align: baseline; /* Default app font face */ - body, div, p, a, span, label, input, button { + body, div, p, a, span, label, input, button, .text { font-family: var(--font-body); } /* Headings font face */ - h1, h2, h3, h4, h5 { + h1, h2, h3, h4, h5, .heading { font-family: var(--font-headings); } @@ -42,22 +42,39 @@ html { font-weight: normal; } } +/* Optional fonts for specific themes */ +/* These fonts are loaded from ./public and therefore not bundled within the apps source */ +@font-face { // Used by Dracula. Credit to Matt McInerney + font-family: 'Allerta Stencil'; + src: url('/fonts/AllertaStencil-Regular.ttf'); +} +@font-face { // Used by body text in Matrix and Hacker themes. Credit to the late Vernon Adams, RIP + font-family: 'Cutive Mono'; + src: url('/fonts/CutiveMono-Regular.ttf'); +} +@font-face { // Heading text in Material and Material Dark. Credit to Vernon Adams + font-family: 'Francois One'; + src: url('/fonts/FrancoisOne-Regular.ttf'); +} +@font-face { // Heading text in Colorful theme. Credit to Cyreal + font-family: 'Podkova'; + src: url('/fonts/Podkova-Medium.ttf'); +} +@font-face { // Standard body text in material original. Credit to Christian Robertson + font-family: 'Roboto'; + src: url('/fonts/Roboto-Light.ttf'); +} +@font-face { // Heading text in Jam, Bee and Tiger themes. Credit to Haley Fiege + font-family: 'Sniglet'; + src: url('/fonts/Sniglet-Regular.ttf'); +} +@font-face { // Used by heading text in Matrix and Hacker themes. Credit to Peter Hull + font-family: 'VT323'; + src: url('/fonts/VT323-Regular.ttf'); +} -/* Fonts used for external themes */ -/* Material Design Themes */ -@import url('https://fonts.googleapis.com/css2?family=Francois+One&family=Roboto:wght@300&display=swap'); - -/* Matrix, Hacker, Nerd Themes */ -@import url('https://fonts.googleapis.com/css2?family=Cutive+Mono&family=VT323&display=swap'); - -/* Colourful */ -@import url('https://fonts.googleapis.com/css2?family=Podkova:wght@500&display=swap'); - -/* Dracula */ -@import url('https://fonts.googleapis.com/css2?family=Allerta+Stencil&display=swap'); - -/* Jam */ -@import url('https://fonts.googleapis.com/css2?family=Sniglet&display=swap'); +@font-face { // Used by cyberpunk theme. Credit to Astigmatic + font-family: 'Audiowide'; + src: url('/fonts/Audiowide-Regular.ttf'); +} -/* Cyber Punk */ -@import url('https://fonts.googleapis.com/css2?family=Audiowide&display=swap'); \ No newline at end of file