A graceful theme for Discourse


(Kris) #1

I really liked the theme shared way back in 2016 by @jsthon :heart_eyes:. They haven’t been around since it was initially posted, so I’ve updated it, expanded it, and added it to github.

:microscope: Preview it on the theme creator

:link: Github repo link: https://github.com/awesomerobot/graceful

:man_shrugging: How do I install a theme?

This theme has two settings:

  • A field to add your own background image
  • and the option to tile it

If you disable the tile option, the image will be set to background-size: cover, and your browser will scale your image to proportionately cover the full background. For example:

Credit for the default background pattern included goes to Toptal Subtle Patterns.

Babble - A Chat Plugin
A graceful style for Discourse
(Sam Saffron) #2

3 posts were split to a new topic: How do I create dynamic pages on my site



I’d like to share some tweaks that I enjoyed (I’m happy to try submit PR if you think any might be good as default)

No background option:

Under common.scss:

body {
  background-color: $primary-very-low;

  @if $no-background == "false" {

    @if $background-image != "default"  {
      background-image: url($background-image);
   } @else {
      background-image: url($default-background);
    // Default background pattern from Toptal Subtle Patterns
    // ♡ https://www.toptal.com/designers/subtlepatterns/japanese-sayagata/

    background-attachment: fixed;
    @if $tile-background == "true" {
      background-size: auto;
    } @else {
      background-size: cover;
      background-repeat: no-repeat;



Theme setting:


(Footer is a separate image)

Allow $header-background color to take effect

Under desktop.scss:

Find .d-header and change from $secondary to background: rgba($header-background, 0.92);

Another example

^I was going to add that I thought I needed background-repeat: no-repeat; but it seems no

Dots (style)


Background image from: Worn Dots - Subtle Patterns | Free textures for your next web project

"Dots": {
  "primary": "222222",
  "secondary": "ffffff",
  "tertiary": "888eaf",
  "quaternary": "d393a7",
  "header_background": "ffffff",
  "header_primary": "333333",
  "highlight": "d4efd8",
  "danger": "f8745c",
  "success": "41e254",
  "love": "fa6c8d"

If anyone like any of my color schemes :)

"Capes": {
  "primary": "222222",
  "secondary": "ffffff",
  "tertiary": "ffc500",
  "quaternary": "79d3f4",
  "header_background": "f75200",
  "header_primary": "ffffff",
  "highlight": "ffc500",
  "danger": "f75200",
  "success": "76b242",
  "love": "fa6c8d"

"Sky": {
  "primary": "222222",
  "secondary": "ffffff",
  "tertiary": "4077aa",
  "quaternary": "79d3f4",
  "header_background": "213a5a",
  "header_primary": "ffffff",
  "highlight": "ffc500",
  "danger": "f75200",
  "success": "76b242",
  "love": "fa6c8d"

Inspired for tgc’s next game, Sky, but they all use facebook etc. for their communities :cry:

A bright header can be distracting, use carefully :blush:

Small issue
When you click on a user card, the text can be difficult to see if there’s a user card background:

Thank you both awesomerobot and jsthon.

(Kris) #5

Thanks for suggesting these changes! I’ve updated the theme to include them.

(MinkyTung) #9

Wow :slight_smile: :slight_smile: :slight_smile:

(Stephen) #10