color customisation doc

sparna-git · Jan 30, 2023 · ea155dc · ea155dc
1 parent fad5822
commit ea155dc
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 0 deletions.
diff --git a/docs/Customize-colors.md b/docs/Customize-colors.md
@@ -0,0 +1,22 @@
+_[Home](index.html) > Customize colors_
+
+
+# How to customize colors of Sparnatural ?
+
+_/!\This feature is available since version 8.1 of Sparnatural._
+
+## Include a theme CSS
+
+To customize the colors of Sparnatural, you need to include an additionnal "sparnatural-theme" CSS in your webpage and overwrite the color variables declaration inside it. This reference needs to be placed _after_ the reference to Sparnatural main CSS
+
+```html
+	<!-- Sparnatural Main CSS -->
+  <link href="sparnatural.css" rel="stylesheet" />
+  <!-- Sparnatural Theme CSS, place after Sparnatual main one to override the variables declaration -->
+  <link href="themes/sparnatural-theme-sea.css" rel="stylesheet" />
+```
+
+Some default themes are provided under the "themes" subfolder of the distribution.
+
+To get started, copy one of the theme css that are under the "themes" subfolder and adjust the values inside.
+
diff --git a/docs/index.md b/docs/index.md
@@ -25,6 +25,7 @@ Other configuration related topics:
   - [Javascript integration v8](Javascript-integration) - Reference page for Javascript integration and parameters for version 8
   - [React integration v8](react-integration) - Initialization of Sparnatural as a custom component within react
   - [Javascript integration v7](Javascript-integration-v7) - Reference page for Javascript integration and parameters for version 7
+  - [Customize colors](Customize-colors) - How to customize colors of Sparnatural
   - [Query JSON format](Query-JSON-format) - Documentation on the JSON structure used by Sparnatural to output and reload queries
   - [Querying a password protected SPARQL endpoint](Querying-a-password-protected-SPARQL-endpoint)