31:T735,# Framework Guide #4: Styling & Theming

Feel free to refer to [_this Github Repository_](https://github.com/kimryan0416/Observable-Framework-Demo), which contains the _Framework_ project that this guide is based off of.

Previously, we [_set up our Framework project_](https://observablehq.com/@rk2546/guide-local_observable_setup), covered the basics of [_project structure_](https://observablehq.com/@rk2546/guide-project_structure), and [_imported functions and modules from NPM and Observable_](https://observablehq.com/@rk2546/guide-imports). In this guide, we'll be covering the following topics: 1. [Organizing Plots in Grids](#cell-18) 2. [Theming your Entire Project](#cell-53) 3. [Theming a Single Page](#cell-81) For this guide, we'll be working off of our existing _Framework_ project (see [_our previous guide_](https://observablehq.com/@rk2546/guide-imports) if you are unsure where we are now). I've added a new page `styling.md` where the material covered in this guide will be covered. Our _Framework_ structure is now:

${render_filetree({
    "src/": {
      "index.md": null,
      "iris.md": null,
      "quotes.md": null,
      "notebook.md": null,
      "guide.md": null,
      "styling.md": null,
      "components/": { "unique.js": null, "quotes.js": null },
      "data": { "iris.csv": null },
  }
})}

[NOTE]: At this point, you are expected to have an (close to) empty _Framework_ project setup from our previous guide. You are also expected to be familiar with basic levels of [Markdown syntax](https://www.markdownguide.org/), [HTML](https://www.w3schools.com/html/html_intro.asp), and JavaScript.

32:T620,### Step 1: Prepare your Charts Let us assume that we have three plots generated from Seattle weather data, sourced from [_this Kaggle dataset_](https://www.kaggle.com/datasets/ananthr1/weather-prediction) and previously seen in our [_Week 3 Exercise_](https://observablehq.com/@rk2546/2025-infovis-cse_exercise-3). The three plots are as follows: 1. `temp_svg`: A scatter plot showing Seattle's maximum temperature over a four-year time period, colorized by weather type. 2. `wather_svg`: A bar chart showing the number of rows for each weather type. 3. `mm_svg`: A mutli-line plot with two lines depicting trends between the maximum and minimum temperature.

[NOTE]: The multi-line plot isn't something we've covered by this point, but you can see how it works either via the [github project corresponding to this guide](https://github.com/kimryan0416/Observable-Framework-Demo) or via [examples provided by D3](https://d3-graph-gallery.com/graph/line_several_group.html).

One major change we've made to our `svg`'s are the following:

const temp_svg = d3.create('svg')
  .attr("preserveAspectRatio", "xMidYMid meet")   // Ensures the SVG maintains its aspect ratio
  .attr('viewBox', [                              // Replaces `width` and `height`
      0, 0, 
      width+margins*2, 
      height+margins*2])
  .attr('weight', '100%')     // We set `width` now to 100% by default.
  .attr('height', 'auto');    // Since the `viewBox` handles height, we set `height` to "auto"

33:T966,### Step 2: Create and render HTML containers We need to use HTML to organize our plot data. One important consideration is **screen size** - that different computers will have different screen sizes and resolutions. To account for this, Observable provides an easy way to structure your contents. Observe the code sample below, which we place anywhere in the Markdown page:

<div class='grid grid-cols-2'>
  <div>${temp_svg.node()}</div>
  <div>${weather_svg.node()}</div>
  <div>${mm_svg.node()}</div>
</div>

Basically, Observable gives us some pre-defined CSS classes for handling everything. You need to have the following classes in your container HTML: - `grid`: Transforms the HTML container and contents into [_CSS Grid elements_](https://css-tricks.com/snippets/css/complete-guide-grid/). - `grid-cols-`: Tells the grid how many columns are expected. If you have more than `N` elements, then contents will _overflow_ into the next row. - `grid-rows-`: Tells the grid how many rows are expected. If you have more than `N` elements, then the contents will _overflow_ into the next column. You only need one of `grid-cols-` or `grid-rows-`, as the CSS can handle edge cases such as overflows. In the example written above, I've used `grid-cols-2`, meaning I'm expecting there to be 2 columns of items; as I have 3 charts, the third chart (`mm_svg`) will overflow into the first column as a _new row_. ${await FileAttachment("grid_cols.png").image({width:500})} Alternatively, sometimes you can force grid elements to encompass multiple rows or columns. To do this, add the following class(es) to those specific grid elements: - `grid-colspan-`: This grid element spans `N` columns. - `grid-rowspan-`: This grid elementspans `N` rows. In the following example, I've made one change: I've made the first chart have `grid-colspan-2`. This means the `temp_svg` chart will fill up the first row and push the next two charts into the second row:

<div class='grid grid-cols-2'>
  <div class='grid-colspan-2'>${temp_svg.node()}</div>
  <div>${weather_svg.node()}</div>
  <div>${mm_svg.node()}</div>
</div>

${await FileAttachment("grid-colspan.png").image({width:500})}34:T666,### Step 1: Theming your entire project To set the theme of your entire project, you need to navigate to `observablehq.config.js`, which is located at the **root** of your project. As a reminder, here's the following structure of our _Framework_ project so far (including the **root** directory):

${render_filetree({
    ".git/": null,
    ".gitignore": null,
    "node_modules/": null,
    "src/": {
      "index.md": null,
      "iris.md": null,
      "quotes.md": null,
      "notebook.md": null,
      "guide.md": null,
      "styling.md": null,
      "components/": { "unique.js": null, "quotes.js": null },
      "data": { "iris.csv": null },
    },
    "package.json": null,
    "package-lock.json": null,
    "README.md": null,
    "observablehq.config.js": null
})}

Inside `observablehq.config.js`, you will see a lot of code comments that provide suggestions for additional configurations. One of those configurations is `theme`. You can therefore set the `theme` here - just select which [_template theme_](https://observablehq.com/framework/themes) fits your fancy and add it like so (in our project, I've decided to go with "glacier"):

// Content to add to the head of the page, e.g. for a favicon:
head: '',

// The path to the source root.
root: "src",

// The theme of the project.
theme: "glacier",

${await FileAttachment("single_theme.png").image({width:500})} This setting ensures that, regardless of whether the viewer's computer has **Dark Mode** enabled or not, the theme is set to a single theme.35:[{"id":"3abdba141206c01d3fe00d1f27e2eb27be25a5387188574a15c4a5fa02280b19f3ab39e574fb331c95cb9e6d43181af6e476128ed24a90961859bbc90b8cdf71","href":"https://static.observableusercontent.com/files/3abdba141206c01d3fe00d1f27e2eb27be25a5387188574a15c4a5fa02280b19f3ab39e574fb331c95cb9e6d43181af6e476128ed24a90961859bbc90b8cdf71","name":"grid_cols.png","type":"image/png","lastModified":1760739952773.066,"size":1081472},{"id":"e8a75fdecaaff0b38dfa9a30a28d2b3f30590f6abf0db86999a456235988a38d90f2d70673dbf7bd6442702481001e8bcbd1590654bc6a24551212079c2bc552","href":"https://static.observableusercontent.com/files/e8a75fdecaaff0b38dfa9a30a28d2b3f30590f6abf0db86999a456235988a38d90f2d70673dbf7bd6442702481001e8bcbd1590654bc6a24551212079c2bc552","name":"grid-colspan.png","type":"image/png","lastModified":1760740410661.101,"size":1204120},{"id":"259445d3e9c5aa359c4d97fd9405c7081b6ba13a0cdb066a37c02b63c701db898dc4cda4f9786ea2cd6d0e349293708696f61db501536c7a2a8f1055f8e13ed7","href":"https://static.observableusercontent.com/files/259445d3e9c5aa359c4d97fd9405c7081b6ba13a0cdb066a37c02b63c701db898dc4cda4f9786ea2cd6d0e349293708696f61db501536c7a2a8f1055f8e13ed7","name":"card.png","type":"image/png","lastModified":1760741327002.844,"size":1189666},{"id":"a9bbd40a3b6ca7e3f2ac4e9d506dfb82f55d634c2bb9c8bb4ba47c1a4e297bab613283ab08dbf989f9de317bfd4903d6ab417e61cad738399e24f301794ada65","href":"https://static.observableusercontent.com/files/a9bbd40a3b6ca7e3f2ac4e9d506dfb82f55d634c2bb9c8bb4ba47c1a4e297bab613283ab08dbf989f9de317bfd4903d6ab417e61cad738399e24f301794ada65","name":"dark_mode.png","type":"image/png","lastModified":1760741717862.039,"size":1308296},{"id":"ead60ec26bcdb9e8b94b001f15b40c3b1714a95ca86b42e359f580cf2e1b6821cbdf4b7bfa6f61c7f023f6cc47ff1de685c48d3039862a45deced6831cb70176","href":"https://static.observableusercontent.com/files/ead60ec26bcdb9e8b94b001f15b40c3b1714a95ca86b42e359f580cf2e1b6821cbdf4b7bfa6f61c7f023f6cc47ff1de685c48d3039862a45deced6831cb70176","name":"front_matter.png","type":"image/png","lastModified":1760742195569.562,"size":1441709},{"id":"7594526dc287091a0114da785d1c68b5d0eb2228ec31f104f2652118aec7bbbe369bbfcccc13cc2a2d26c9713ff1adcb548e2e18d04984b070416caa3e707058","href":"https://static.observableusercontent.com/files/7594526dc287091a0114da785d1c68b5d0eb2228ec31f104f2652118aec7bbbe369bbfcccc13cc2a2d26c9713ff1adcb548e2e18d04984b070416caa3e707058","name":"single_theme.png","type":"image/png","lastModified":1760741514857.123,"size":1370151}] 2f:{"title":"Framework Guide #4: Styling & Theming","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":18,"value":"## 1. Organizing Plots in Grids\n\nSo far, we've relied on JavaScript and D3 to generate plots. However, we've only generated singular charts with D3. There are indeed ways to generate [_charts with subplots_](https://d3-graph-gallery.com/graph/line_smallmultiple.html), but making them responsive to browser types and screen sizes can be difficult. In _Framework_, we can take advantage of styling and some primitive classes provided by Observable to help organize the content on our dashboards.","pinned":false,"hidden":false,"mode":"md"},{"id":23,"value":"$32","pinned":false,"hidden":false,"mode":"md"},{"id":31,"value":"$33","pinned":false,"hidden":false,"mode":"md"},{"id":64,"value":"### Step 3: Visually separating your charts (optional)\n\nIf you want to further differentiate your charts from each other, then you can add another pre-defined class to each of your grid elements: \"card\". Let's try it:\n\n

\n<div class='grid grid-cols-2'>\n  <div class='grid-colspan-2 card'>${temp_svg.node()}</div>\n  <div class='card'>${weather_svg.node()}</div>\n  <div class='card'>${mm_svg.node()}</div>\n</div>\n

\n\n${await FileAttachment(\"card.png\").image({width:500})}\n\nIt's a bit hard to see in the preview with the dark theme, but if you look closely you can see that the charts now have rounded corners and are more segmented visually.","pinned":false,"hidden":false,"mode":"md"},{"id":53,"value":"## 2. Theming your Entire Project\n\nObservable gives you a bunch of [_template themes_](https://observablehq.com/framework/themes) that you can stylize your dashboards with. Let's try to implement them.","pinned":false,"hidden":false,"mode":"md"},{"id":57,"value":"$34","pinned":false,"hidden":false,"mode":"md"},{"id":72,"value":"### Step 2: Setting both light and dark mode\n\nIf you want to improve accessibility and let your dashboards accommodate both a Light and a Dark Mode, then you can set multiple themes. In our example, we've set \"glacier\" as the Light Mode theme. Let's use the \"ink\" theme as the Dark Mode theme:\n\n

\n// The theme of the project.\ntheme: [\"glacier\", \"ink\"],\n

\n\n${await FileAttachment(\"dark_mode.png\").image({width:500})}\n\nBecause my personal computer is set to Dark Mode, it renders the \"ink\" theme. Your results may vary!","pinned":false,"hidden":false,"mode":"md"},{"id":81,"value":"## 3. Theming a Single Page\n\nYou can set a unique theme for a single page by modifying a page's \"front matter\". Inside of your Markdown file (the `styling.md` in our example project), add the following content to the **top** of your page (I've used \"parchment\" as the theme for `styling.md`):\n\n

\n‐‐‐\ntheme: \"parchment\"\n‐‐‐\n

\n\n${await FileAttachment(\"front_matter.png\").image({width:500})}\n\nEven though my personal browser is set to Dark Mode, I've ensured that the `styling.md` page is set to \"parchment\" (a Light Mode theme) regardless.","pinned":false,"hidden":false,"mode":"md"},{"id":15,"value":"## What's Next\n\nThis is a special case where the documentation reveals more information about styling. Make sure to read [the documentation](https://observablehq.com/framework/themes) to learn more about not just existing themes but also about **custom stylesheets** and **aliases**.\n\nThe next guide we have is [_implementing data loaders_](https://observablehq.com/@rk2546/guide-data_loaders), which allows you to pre-process your datasets using various languages and separate your front-end (Markdown files) from your back-end (JavaScript/Python/R/Java/etc.).\n\nAlternatively, you can check our other guides on _Framework_:\n\n${framework_guides}\n\n### Additional References\n\n- [Template Themes Provided by Observable](https://observablehq.com/framework/themes)\n- [Video: \"Grids, cards, and themes\"](https://www.youtube.com/watch?v=HuYRuRdQMeU&list=PLOHIJAFwtkEcuVZO6WK-Uuswd09Y2Rk2b&index=4)","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"---\n\n## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"import { css, render_filetree, framework_guides } from '@rk2546/2025-infovis-cse_notebook-gallery';","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"css","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}