This is about The Docs Overview of the problem T

Can we get an example of how to create a simple bulma scss theme? about bulma HOT 1 CLOSED

stemid commented on May 24, 2024

Can we get an example of how to create a simple bulma scss theme?

from bulma.

Comments (1)

stemid commented on May 24, 2024 1

I think I figured it out finally, I had to get some variables from this page and further I used inspect in Firefox to see other variables not listed there.

I still don't understand how to name the theme and have multiple, but I don't care because it's just for my personal site anyways.

So this is my first draft Nord theme.

// Set your brand colors
$nord0Black: #2e3440;
$nord1Black: #3b4252;
$nord2Black: #434c5e;
$nord3Black: #4c566a;

$nord4White: #d8dee9;
$nord5White: #e5e9f0;
$nord6White: #eceff4;

$nord7Blue: #8fbcbb;
$nord8Blue: #88c0d0;
$nord9Blue: #81a1c1;
$nord10Blue: #5e81ac;

$nord11Red: #bf616a;
$nord12Orange: #d08770;
$nord13Yellow: #ebcb8b;
$nord14Green: #a3be8c;
$nord15Purple: #b48ead;

// Path to Bulma's sass folder
@use "bulma/sass" with (
  $black: $nord0Black,
  $white: $nord6White,
  $blue: $nord10Blue,
  $red: $nord11Red,
  $orange: $nord12Orange,
  $yellow: $nord13Yellow,
  $green: $nord14Green,
  $purple: $nord15Purple,

  $primary: $nord7Blue,
  $link: $nord8Blue,
  $success: $nord14Green,
  $info: $nord7Blue,
  $warning: $nord11Red,
  $dark: $nord0Black,

  $background: $nord0Black,
  $border: $nord8Blue,
  $code: $nord3Black,
  $pre: $nord3Black,
  $shadow-color: $nord2Black,

  $body-background-color: $nord0Black,

  $control-border-width: 2px,
  $input-shadow: none
);

ul.taxonomy-list > li {
  display: inline;
}