Skip to content

Named themes #60

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.

Sign up for GitHub

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

Jump to bottom
Closed
mbostock opened this issue Oct 24, 2023 · 4 comments
Closed

Named themes #60

mbostock opened this issue Oct 24, 2023 · 4 comments
Assignees
@Fil
Labels
design Designs needed for a polished UI enhancement New feature or request
Milestone
Early access

Comments

@mbostock
Copy link
Member

As an alternative to including a custom stylesheet such as dashboard.css, we should allow named themes to be applied via YAML frontmatter, and provide built-in stylesheets for these themes. The current theme could be moved to default.css.
@mbostock mbostock added the enhancement New feature or request label Oct 24, 2023
@mbostock mbostock added this to the Early access milestone Nov 13, 2023
@Fil
Copy link
Contributor

Fil commented Nov 14, 2023

Are themes css only, or does the concept also include “templates” for pages and navigation?

@Fil Fil added the design Designs needed for a polished UI label Nov 20, 2023
@mbostock
Copy link
Member Author

Another possibility is that a theme is simply adding dashboard.css to the page (in which case, themes are separate CSS files that are included in /_observablehq)?

@Fil Fil mentioned this issue Nov 28, 2023
Closed
@Fil
Copy link
Contributor

Fil commented Nov 28, 2023

Our current theme might be written as

<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
{{title}}
{{base}}
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css2?family=Source+Serif+Pro:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap">
<link rel="stylesheet" type="text/css" href="{{root}}_observablehq/style.css">
{{preloads}}
{{module}}
{{sidebar}}
{{toc}}
<div id="observablehq-center">
<main id="observablehq-main" class="observablehq">
{{main}}
</main>
<footer id="observablehq-footer">
{{pager}}
{{copyright}}
</footer>
</div>

If we just need to add a dashboard.css, we might want to do something like this instead:

<link rel="stylesheet" type="text/css" href="{{root}}_observablehq/base.css">
+ <link rel="stylesheet" type="text/css" href="{{root}}_observablehq/{{custom}}.css">

In the long run, I'd like the whole template to be customizable. Maybe my project will not want google fonts, or I'll want a different HTML structure altogether. Making the whole template editable (outside the src file) is easy (#253); however, it means that these {{xxx}} tags become part of the API, so I'm not sure it's wise at this stage. But it seems obvious that having to rely only on css to customize the page will quickly feel inadequate.

This was referenced Dec 4, 2023
Closed
Closed
This was referenced Dec 14, 2023
Merged
Merged
@Fil Fil mentioned this issue Jan 4, 2024
Closed
@mbostock
Copy link
Member Author

mbostock commented Jan 8, 2024

Fixed in #442 etc.

@mbostock mbostock closed this as completed Jan 8, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@Fil Fil

Labels
design Designs needed for a polished UI enhancement New feature or request
Projects
None yet
Milestone
Early access
Development

Successfully merging a pull request may close this issue.

full-page templates observablehq/framework
named themes observablehq/framework
2 participants
@Fil @mbostock