hendrik/lens
1
0
Fork 0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00
Code Issues Projects Releases Wiki Activity

Fixing urls

Browse Source 
Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2020-11-09 13:45:54 +03:00
parent 35fec8ea6a
commit 4b4808e0ef
2 changed files with 4 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
docs/extensions/capabilities/styling.md
View File

@ -1,4 +1,4 @@
# Styling # Styling an extension
Lens provides a set of global styles and UI components that can be used by any extension to preserve look and feel of the application. Lens provides a set of global styles and UI components that can be used by any extension to preserve look and feel of the application.
## Styling approach ## Styling approach
@ -24,7 +24,7 @@ Lens using 2 built-in themes located in `src/renderer/themes` folder each for li
![Color Theme](images/theme-selector.png) ![Color Theme](images/theme-selector.png)
When Lens gets loaded it transforms selected theme `json` file into list of [CSS Custom Properties (CSS Variables)](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) which then gets injected into `:root` element so any of the down-level components can use them. When Lens gets loaded it transforms selected theme `json` file into list of [CSS Custom Properties (CSS Variables)](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) which then gets injected into `:root` element so any of the down-level components can use them.
![CSS vars listed in devtools](images/theme-selector.png) ![CSS vars listed in devtools](images/css-vars-in-devtools.png)
When user changes a theme, the process is repeated, new css variables appear instead of previous ones. When user changes a theme, the process is repeated, new css variables appear instead of previous ones.
@ -86,7 +86,7 @@ After theme file gets parsed it provides list of theme-defined colors. Most of t
They can be used in form of `var(--magenta)`. They can be used in form of `var(--magenta)`.
A complete list of all themable colors can be found in the [color reference](color-reference). A complete list of all themable colors can be found in the [color reference](../color-reference).
Colors values are located inside `src/renderer/themes/lens-dark.json` and `src/renderer/themes/lens-light.json` files. Colors values are located inside `src/renderer/themes/lens-dark.json` and `src/renderer/themes/lens-light.json` files.

1
mkdocs.yml
View File

@ -27,6 +27,7 @@ nav:
- Overview: extensions/capabilities/README.md - Overview: extensions/capabilities/README.md
- Common Capabilities: extensions/capabilities/common-capabilities.md - Common Capabilities: extensions/capabilities/common-capabilities.md
- Styling: extensions/capabilities/styling.md - Styling: extensions/capabilities/styling.md
- Color reference: extensions/capabilities/color-reference.md
- Extension Guides: - Extension Guides:
- Overview: extensions/guides/README.md - Overview: extensions/guides/README.md
- Renderer Extension: extensions/guides/renderer-extension.md - Renderer Extension: extensions/guides/renderer-extension.md