Comments (3)
I agree it would be nice to allow users to change the sidebar link icon color with a theme property. At the very least, it should inherit the --theme-color
value.
The simple explanation is that doing so is not as easy as it may appear because each implementation comes with its own drawbacks. I am familiar with CSS-only icons as you've suggested above, but these require standalone elements to style (which does not exist in HTML markup generated by docsify) or styling pseudo-content which can be tricky to "undo" when users prefer using background images for sidebar icons. In the end, I favored ease of changing the icon entirely over ease of changing the color of the existing icons. As a result, the simplest way to modify the sidebar icons is to use an alternate image. Services like https://icongr.am make this nice and easy:
<style>
:root {
--theme-hue: 20;
--sidebar-nav-pagelink-background-image: url(https://icongr.am/entypo/chevron-right.svg?size=16&color=c7c7c7);
--sidebar-nav-pagelink-background-image--active: url(https://icongr.am/entypo/chevron-down.svg?size=16&color=fc9867);
}
</style>
Another option is to leverage the pseudo-content theme properties and render text characters instead of icons:
<style>
:root {
--theme-hue: 20;
--sidebar-nav-link-before-content-l1: '+';
--sidebar-nav-link-before-content-l1--active: '-';
--sidebar-nav-link-before-color-l1: #b3b3b3;
--sidebar-nav-link-before-color-l1--active: var(--theme-color);
--sidebar-nav-pagelink-padding: 0.15em 0;
--sidebar-nav-pagelink-background-image: none;
--sidebar-nav-pagelink-background-image--active: none;
--sidebar-nav-pagelink-background-image--collapse: none;
--sidebar-nav-pagelink-background-image--loaded: none;
}
</style>
Or, if you prefer the existing icons but just want to change the color, you can use the same SVGs-as-data-URIs included in the "Simple" or "Simple Dark" theme and just modify the colors as detailed in #3.
It's also worth mentioning that a more forward-thinking version of docsify-themeable will be implemented for docsify v5. I will definitely revisit this issue at that time as the markup and theme capabilities will change significantly.
Hope this helps!
from docsify-themeable.
Fixed in v0.9.0
from docsify-themeable.
awesome!
from docsify-themeable.
Related Issues (20)
- cannot change '>' and 'v' color HOT 2
- The drop-down arrow does not appear when using "routerMode: 'history'" HOT 2
- Changing the padding (top/bottom) on "blockquote" HOT 2
- expand/collapse icons in the sidebar not working when external link present HOT 3
- Browser console reports an uncaught error HOT 2
- Sidebar not aligning to left of page HOT 1
- sidebar not aligned between file and folder classes HOT 2
- Inactive chevron in multilevel menu show up as active HOT 6
- Inactive chevron in multilevel menu show up as active HOT 3
- Page content is not using all available space on large screens HOT 1
- Unexpected style of title when I come to the third level of the sidebar HOT 1
- Can we make the sidebar arrow in theme-simple point right if it has multiple sidebar .md files HOT 1
- On a phone brower, when touching any sidebar contents, the sidebar will hide automatically. HOT 5
- Top level sidebar items should always be collapsible HOT 2
- Table in small screens will render with CSS attribute `content`
- Switch button for dark/light mode HOT 2
- In the cover page Custom background is invalid HOT 5
- Quotation Marks Inconsistent HOT 5
- Unexplained 'TypeError: Attempted to assign to readonly property.' console error message HOT 8
- Keyboard focus is not visible at Hamburger menu present at the UI.
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from docsify-themeable.