diff --git a/docs/index.md b/docs/index.md
index a6243c92..dfa70ad6 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -27,12 +27,12 @@ hide:

-**TagStudio** is a photo & file organization application with an underlying tag-based system that focuses on giving freedom and flexibility to the user. No proprietary programs or formats, no sea of sidecar files, and no complete upheaval of your filesystem structure.
+TagStudio is a photo & file organization application with an underlying tag-based system that focuses on giving freedom and flexibility to the user. No proprietary programs or formats, no sea of sidecar files, and no complete upheaval of your filesystem structure.
- [:material-download: Download Latest Release](https://github.com/TagStudioDev/TagStudio/releases){ .md-button .md-button--primary }
+ [:material-github: Download Latest Release](https://github.com/TagStudioDev/TagStudio/releases){ .md-button .md-button--primary }
## :material-star: Core Features
diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css
index d2ed979d..636e457f 100644
--- a/docs/stylesheets/extra.css
+++ b/docs/stylesheets/extra.css
@@ -3,11 +3,14 @@
* SPDX-License-Identifier: GPL-3.0-only
*/
/* Dark Theme */
+
[data-md-color-scheme="slate"] {
+ --md-primary-fg-color: rgb(197, 110, 255);
+ --md-accent-fg-color: rgb(92, 222, 255);
--md-default-bg-color: #060617;
--md-default-fg-color: #eae1ff;
- --md-default-fg-color--light: #b898ff;
- --md-code-fg-color: #eae1ffcc;
+ --md-default-fg-color--light: #c2a5ff;
+ --md-code-fg-color: #d8c7ffcc;
--md-code-hl-string-color: rgb(92, 255, 228);
--md-code-hl-keyword-color: rgb(61, 155, 255);
--md-code-hl-constant-color: rgb(205, 78, 255);
@@ -17,6 +20,8 @@
/* Light Theme */
[data-md-color-scheme="default"] {
+ --md-primary-fg-color: #7758ff;
+ --md-accent-fg-color: rgb(22, 166, 255);
--md-default-fg-color--light: #090a26;
}
@@ -73,6 +78,11 @@ td {
padding: 0.5em 1em 0.5em 1em !important;
}
+hr {
+ border-bottom-width: 2px !important;
+ border-color: #9988ff50 !important;
+}
+
.md-typeset ul li ul {
margin-top: 0;
margin-bottom: 0.1rem;
@@ -119,6 +129,18 @@ h2,
margin-right: -0.8rem;
}
+.md-code__nav,
+.md-content__button,
+.headerlink {
+ border-radius: 0.2rem;
+ background: none;
+ color: #9988ff50 !important;
+}
+
+.md-code__nav:hover {
+ background-color: #9988ff50;
+}
+
figcaption {
margin-top: 0 !important;
}
@@ -149,6 +171,51 @@ td code {
padding: 0 !important;
}
+.admonition {
+ border-radius: 0.4rem !important;
+ border-width: 2px !important;
+}
+
+.highlight > .filename {
+ border-width: 2px !important;
+ border: solid;
+ border-color: #9988ff10 !important;
+ border-radius: 0.4rem 0.4rem 0 0 !important;
+}
+
+code {
+ border-radius: 0.4rem !important;
+ border-width: 2px !important;
+ border: solid;
+ border-color: #9988ff10;
+}
+
+:is(span, ul, li, td, p, a) > code {
+ border-width: 1px !important;
+ border-radius: 0.1rem !important;
+}
+
+.filename + pre > code {
+ border-top-width: 0 !important;
+ border-radius: 0 0 0.4rem 0.4rem !important;
+}
+
+.tabbed-labels.tabbed-labels--linked {
+ padding-left: 0.4rem;
+ padding-right: 0.4rem;
+ box-shadow: none !important;
+}
+
+.admonition-title {
+ font-size: 0.7rem;
+ font-family: "Bai Jamjuree", Roboto, sans-serif;
+ font-weight: 600 !important;
+}
+
+.admonition-title span {
+ margin-top: 0.05rem !important;
+}
+
/* Matches the palette used by mkdocs-material */
.priority-high {
color: #f1185a;
diff --git a/docs/stylesheets/home.css b/docs/stylesheets/home.css
index a32f0a80..94a9428e 100644
--- a/docs/stylesheets/home.css
+++ b/docs/stylesheets/home.css
@@ -29,3 +29,30 @@ h2 {
margin-right: 0;
}
}
+
+.grid.cards > ul > li {
+ border-radius: 0.4rem !important;
+ border-width: 2px !important;
+ border-color: #9988ff20 !important;
+}
+
+.md-button--primary {
+ margin: 1rem;
+ padding: 0.3rem 1.2rem !important;
+ border-radius: 0.4rem !important;
+ font-size: 1rem;
+ font-family: "Bai Jamjuree", Roboto, sans-serif;
+ background: linear-gradient(60deg, rgb(205, 78, 255) 0%, rgb(116, 123, 255) 100%);
+ border-style: solid;
+ border-width: 0 0 2px 0 !important;
+ border-color: #ffffff33 !important;
+}
+
+.md-button--primary:hover {
+ background: linear-gradient(60deg, rgb(205, 78, 255) 30%, rgb(116, 123, 255) 100%);
+ border-color: #ffffff55 !important;
+}
+
+.md-button--primary span {
+ margin-top: 0.1rem !important;
+}
diff --git a/mkdocs.yml b/mkdocs.yml
index a56509bd..0082adee 100644
--- a/mkdocs.yml
+++ b/mkdocs.yml
@@ -70,16 +70,16 @@ theme:
# Palette toggle for light mode
- media: "(prefers-color-scheme: light)"
scheme: default
- primary: purple
- accent: purple
+ primary: custom
+ accent: custom
toggle:
icon: material/lightbulb
name: Switch to Dark Mode
# Palette toggle for dark mode
- media: "(prefers-color-scheme: dark)"
scheme: slate
- primary: purple
- accent: purple
+ primary: custom
+ accent: custom
toggle:
icon: material/lightbulb-night-outline
name: Switch to System Preference