From f606ad2d9da7cb39bf8c66d18038f5d4a885e0cc Mon Sep 17 00:00:00 2001 From: Marco Beelen Date: Tue, 27 Jun 2023 09:39:43 +0200 Subject: [PATCH 1/2] docs: Howto on foreground color on timelines --- packages/mermaid/src/docs/syntax/timeline.md | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/mermaid/src/docs/syntax/timeline.md b/packages/mermaid/src/docs/syntax/timeline.md index c9bc9161e..a485cba3f 100644 --- a/packages/mermaid/src/docs/syntax/timeline.md +++ b/packages/mermaid/src/docs/syntax/timeline.md @@ -172,9 +172,11 @@ let us look at same example, where we have disabled the multiColor option. ### Customizing Color scheme -You can customize the color scheme using the `cScale0` to `cScale11` theme variables. Mermaid allows you to set unique colors for up-to 12 sections, where `cScale0` variable will drive the value of the first section or time-period, `cScale1` will drive the value of the second section and so on. +You can customize the color scheme using the `cScale0` to `cScale11` theme variables, which will change the background colors. Mermaid allows you to set unique colors for up-to 12 sections, where `cScale0` variable will drive the value of the first section or time-period, `cScale1` will drive the value of the second section and so on. In case you have more than 12 sections, the color scheme will start to repeat. +If you also want to change the foreground color of a section, you can do so use theme variables corresponding `cScaleLabel0` to `cScaleLabel11` variables. + NOTE: Default values for these theme variables are picked from the selected theme. If you want to override the default values, you can use the `initialize` call to add your custom theme variable values. Example: @@ -183,9 +185,9 @@ Now let's override the default values for the `cScale0` to `cScale2` variables: ```mermaid-example %%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': { - 'cScale0': '#ff0000', + 'cScale0': '#ff0000', 'cScaleLabel0': '#ffffff', 'cScale1': '#00ff00', - 'cScale2': '#0000ff' + 'cScale2': '#0000ff', 'cScaleLabel2': '#ffffff' } } }%% timeline title History of Social Media Platform From e2f21a2d984ddaf359c334c6f971dcb5aacc99d9 Mon Sep 17 00:00:00 2001 From: Marco Beelen Date: Tue, 27 Jun 2023 13:03:31 +0200 Subject: [PATCH 2/2] Lint fix --- docs/syntax/timeline.md | 12 +++++++----- packages/mermaid/src/docs/syntax/timeline.md | 2 +- 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/docs/syntax/timeline.md b/docs/syntax/timeline.md index d9915ff3e..d42a2dc7c 100644 --- a/docs/syntax/timeline.md +++ b/docs/syntax/timeline.md @@ -257,9 +257,11 @@ let us look at same example, where we have disabled the multiColor option. ### Customizing Color scheme -You can customize the color scheme using the `cScale0` to `cScale11` theme variables. Mermaid allows you to set unique colors for up-to 12 sections, where `cScale0` variable will drive the value of the first section or time-period, `cScale1` will drive the value of the second section and so on. +You can customize the color scheme using the `cScale0` to `cScale11` theme variables, which will change the background colors. Mermaid allows you to set unique colors for up-to 12 sections, where `cScale0` variable will drive the value of the first section or time-period, `cScale1` will drive the value of the second section and so on. In case you have more than 12 sections, the color scheme will start to repeat. +If you also want to change the foreground color of a section, you can do so use theme variables corresponding `cScaleLabel0` to `cScaleLabel11` variables. + NOTE: Default values for these theme variables are picked from the selected theme. If you want to override the default values, you can use the `initialize` call to add your custom theme variable values. Example: @@ -268,9 +270,9 @@ Now let's override the default values for the `cScale0` to `cScale2` variables: ```mermaid-example %%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': { - 'cScale0': '#ff0000', + 'cScale0': '#ff0000', 'cScaleLabel0': '#ffffff', 'cScale1': '#00ff00', - 'cScale2': '#0000ff' + 'cScale2': '#0000ff', 'cScaleLabel2': '#ffffff' } } }%% timeline title History of Social Media Platform @@ -286,9 +288,9 @@ Now let's override the default values for the `cScale0` to `cScale2` variables: ```mermaid %%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': { - 'cScale0': '#ff0000', + 'cScale0': '#ff0000', 'cScaleLabel0': '#ffffff', 'cScale1': '#00ff00', - 'cScale2': '#0000ff' + 'cScale2': '#0000ff', 'cScaleLabel2': '#ffffff' } } }%% timeline title History of Social Media Platform diff --git a/packages/mermaid/src/docs/syntax/timeline.md b/packages/mermaid/src/docs/syntax/timeline.md index a485cba3f..201ab6b16 100644 --- a/packages/mermaid/src/docs/syntax/timeline.md +++ b/packages/mermaid/src/docs/syntax/timeline.md @@ -185,7 +185,7 @@ Now let's override the default values for the `cScale0` to `cScale2` variables: ```mermaid-example %%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': { - 'cScale0': '#ff0000', 'cScaleLabel0': '#ffffff', + 'cScale0': '#ff0000', 'cScaleLabel0': '#ffffff', 'cScale1': '#00ff00', 'cScale2': '#0000ff', 'cScaleLabel2': '#ffffff' } } }%%