Mastodon/Pinafore-Web-Client-Frontend
1
0
Fork 0
mirror of https://github.com/nolanlawson/pinafore synced 2024-12-15 03:44:02 +01:00
Code Issues Releases Wiki Activity
6d3a0b5fee
Pinafore-Web-Client-Frontend/docs/Theming.md
Nolan Lawson d198250eab
chore: switch to yarn (#927) 
* chore: switch to yarn

BREAKING CHANGE: Pinafore is now using yarn rather than npm, so those
who self-host will need to stop running e.g. `npm install` and run `yarn
install` instead.

* install latest yarn
2019-01-27 17:44:30 -08:00

1011 B
Raw Blame History

Theming

This document describes how to write your own theme for Pinafore.

First, create a file scss/themes/foobar.scss, write some SCSS inside and add the following at the bottom of scss/themes/foobar.scss.

@import "_base.scss";

body.theme-foobar {
  @include baseTheme();
}

Note: You can find all the SCSS variables available in scss/themes/_default.scss while the all CSS Custom Properties available are listed in scss/themes/_base.scss.

Then, Add your theme to src/routes/_static/themes.js

const themes = [
  ...
  {
    name: 'foobar',
    label: 'Foobar', // user-visible name
    color: 'magenta', // main theme color
    dark: true // whether it's a dark theme or not
  }
]

Start the development server (yarn run dev), go to http://localhost:4002/settings/instances/your-instance-name and select your newly-created theme. Once you've done that, you can update your theme, and refresh the page to see the change (you don't have to restart the server).