Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add additional-theme option #2059

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Conversation

expikr
Copy link
Contributor

@expikr expikr commented Apr 9, 2023

Closes #2048

This allows users to specify additional themes without replacing the presets.

image

Example usage

book.toml

[output.html]
additional-css = ["orange.css"]
additional-theme = ["Orange"]

orange.css

Click to expand
.orange {
    --bg: #f6f6ef;
    --fg: Black;

    --sidebar-bg: #ff6600;
    --sidebar-fg: Black;
    --sidebar-non-existant: color-mix(in srgb, var(--sidebar-bg) 75%, Black);
    --sidebar-active: White;
    --sidebar-spacer: color-mix(in srgb, var(--sidebar-bg) 95%, Black);

    --scrollbar: #8F8F8F;

    --icons: #747474;
    --icons-hover: #000000;

    --links: #828282;

    --inline-code-color: Black

    --theme-popup-bg: #fafafa;
    --theme-popup-border: #cccccc;
    --theme-hover: #e6e6e6;

    --quote-bg: #e9e9ed;
    --quote-border: #8f8f9d;

    --table-border-color: hsl(0, 0%, 95%);
    --table-header-bg: hsl(0, 0%, 80%);
    --table-alternate-bg: hsl(0, 0%, 97%);

    --searchbar-border-color: #aaa;
    --searchbar-bg: #fafafa;
    --searchbar-fg: #000;
    --searchbar-shadow-color: #aaa;
    --searchresults-header-fg: #666;
    --searchresults-border-color: #888;
    --searchresults-li-bg: #e4f2fe;
    --search-mark-bg: #a2cff5;
}

Limitations

  • The theme class needs to specify ALL the variables, otherwise they default to no-style.
    Can we figure out an easy way to derive the variable values from the presets?
  • The syntax highlighting defaults to that of an assumed light mode (see here).
    What would be the most appropriate way for the theme class to declare itself as a dark-based or light-based theme and have the correct syntax highlight selected?

@rustbot rustbot added the S-waiting-on-review Status: waiting on a review label Apr 9, 2023
@expikr expikr force-pushed the patch-2 branch 5 times, most recently from 80646e3 to b335dbf Compare April 16, 2023 12:36
@expikr expikr changed the title (Proof of concept) Additional-Theme option Add additional-Theme option Apr 16, 2023
@expikr expikr changed the title Add additional-Theme option Add additional-theme option Apr 16, 2023
add tests for additional-themes

Update book.js

sanitized default

sanitize the id name in the DOM

catch error if attempting to select or deselect a non-existent theme.

sanitize theme names

Update book.js

Update book.js

Update book.js

Revert "Update book.js"

This reverts commit 0ed9477.

Update book.js

Update config.rs

Revert "Update hbs_renderer.rs"

This reverts commit 54ad1d5.

Revert "Update config.rs"

This reverts commit 06909a7.

Revert "Update hbs_renderer.rs"

This reverts commit dc0f959.

Update hbs_renderer.rs

Update hbs_renderer.rs

Update config.rs

Update book.js

Additional Theme
@xzi
Copy link

xzi commented Jul 5, 2024

Is there anything that needs to be done before this can be merged upstream? Myself and a few people in the Catppuccin discord were curious as to the status of this since this PR would greatly help out our theming project for mdBook

I am more than willing to help out where I can with anything that needs to be finished up.

@xzi
Copy link

xzi commented Jul 5, 2024

@ehuss forgot to ping you in my original comment. Please see #2059 (comment)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
A-Theme Area: Theme S-waiting-on-review Status: waiting on a review
Projects
None yet
4 participants