Los temas de Plume son archivos CSS (y opcionalmente otros recursos que pueden ser cargados con CSS, como fuentes o imágenes de fondo), así que todo lo que necesita saber para escribir un tema es saber CSS.

Plantilla base

Un buen comienzo puede ser el tema base oficial, que está escrito en SCSS, y que puedes encontrar en el repositorio de Plume’s. Puedes copiar estos archivos (están bajo la licencia AGPL-3.0), y empezar cambiando las variables en _variables.scss. Si usas este tema como base, el SASS/SCSS será necesario para transformarlo en un único archivo CSS que un administrador pueda instalar en su instancia.

Para probar tu tema, puedes instalar una extensión del navegador como Stylish y copiar tu CSS dentro.

Las actualizaciones de Plume a veces pueden romper tu tema (si hacemos un cambio de diseño, añade una nueva clase CSS, o así sucesivamente). Si quieres asegurar que tu tema siga funcionando a medida que se desarrolla Plume, siguiendo el proyecto en Gitea(GitHub) puede notificarle cuando hagamos cambios que puedan afectar su tema. Pull requests and commits breaking themes are normally clearly identified as such.

Explicaciones detalladas

Hay dos tipos de temas en Plume:

• temas de la instancia, que un administrador puede definir como el tema predeterminado para una instancia, y que los usuarios registrados en esta instancia pueden elegir como su valor por defecto personal si quieren.
• y temas de blog, que los autores de blog pueden utilizar para personalizar sus blogs. Sólo se aplican a las páginas de este blog, y anulan los temas de nivel de instancia.

La única diferencia cuando construyes un tema es que los temas del blog deben estar en el directorio static/css/blog-NAME, mientras que los temas de la instancia deben estar en static/css/NAME (con NAME el nombre real de tu tema).

Dentro de este directorio, el único archivo necesario es theme.css. Este archivo es el único que carga Plume, por lo que se encarga de cargar todo lo demás (fuentes que usas por ejemplo).

Y que’s es libre de hacer cualquier cosa que quieras con temas, siempre y cuando respete estas reglas.

Detectando temas oscuros

Al escribir un tema para los blogs, puede ser útil saber si el tema de la instancia global es oscuro o no, para adaptar el tema del blog’s en consecuencia. Thus, as a convention, dark themes should always have the word “dark” in their name. Plume luego añade el nombre del tema actual a las clases CSS del documento HTML, permitiéndote detectar qué tipo de tema tiene el usuario.

Aquí hay un ejemplo que muestra entre comillas ( {} ) en azul (blue) para temas claros, y en naranja (orange) para temas oscuros:

article blockquote {
    color: blue;
}

html[class*=dark] article blockquote {
    color: orange;
}

Plume puede compilar sus temas

Si compilas a Plume desde el código fuente, cualquier tema en assets/themes/NAME será compilado en static/css/NAME. Los archivos SCSS o SASS se convertirán en CSS, a menos que su nombre comience con un guión bajo. Cada archivo SCSS/SASS es tratado como un tema diferente incluso si están en el mismo directorio, permitiéndoles compartir archivos (útil cuando quieres hacer variantes de color de tu tema, por ejemplo).

Otros archivos serán copiados al directorio de salida.