Themes for Bulma

  • By Jenil Gogari
  • Last update: Jan 5, 2023
  • Comments: 16

Comments(16)

  • 1

    Dropdown color variables

    There seems to be some variables that are either missing or not overridden for dropdowns.

    Specifically hover color and hover background color.

    For reference I'm using Cyborg theme. Hovered dropdown items have black text on dark gray backgrounds and have the exact same hover background. You probably only need to do this for dark themes.

    Bulma file: https://github.com/jgthms/bulma/blob/master/sass/components/dropdown.sass

  • 2

    0.6.1 update

    Bulma recently moved to 0.6 and there are a few updates.

    The biggest changes that will effect Bulmaswatch is the new blue link color, and the navbar markup changed.

    https://bulma.io/2017/10/09/roses-are-red-links-are-blue/

  • 3

    Ability to turn off direct font import in CSS

    Closes #45

    I named the variable $bulmaswatch-import-font so that its namespaced.

    This solution only disables the hardcoded @import, it doesn't make the font configurable.

    By disabling this, the user should know that they either need to import it through other means such as the <link> tag or override all instances of font-family manually.

    EDIT:

    PR #31 seems to try to solve the same problem but they only edited Flatly. I went through all the themes.

    Their solution would be more ideal since it gives the user full control of the font, however they didn't put in the work to update all the themes.

    Maybe you could implement it that way eventually, but for now I think this PR is a good enough solution to some of the problems caused by the hardcoded @import.

  • 4

    Warning text color

    Hi,

    Some themes have a light/yellow warning background color with dark text. Other themes, such as Darkly and Flatly have light warning text.

    If I enter the yellow color from one of those themes (#F1B70E) into this contrast checker tool: https://webaim.org/resources/contrastchecker/ it suggests that dark text is more accessible.

  • 5

    Would it be possible to make the fonts in the themes optional?

    I'm using Journal which has this font in _overrides.scss

    @import url(https://fonts.googleapis.com/css?family=News+Cycle:400,700);
    

    But I also want to use this font that I include through my HTML.

    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:200,300">
    

    I would much rather have them both be in the link tag but News Cycle is hard coded into the overrides.

    Possible solutions:

    Sass has control structures right? Can you add a boolean variable + an if-statement to conditionally include this font.

    That way I can remove/disable it from my css and then combine it with Raleway in my link tag.


    A simpler solution might be to add another scss file to the themes with custom fonts.

    Add a _theme-font.scss file, it should contain just one line, the @import url(...).

    This allows me to do the same thing in a different way.

  • 6

    Select dropdown arrow over the select content

    Just found bulmswatch today. Thanks for your hard work.

    I was using the current 0.4.2 CDN version of Bulma, like this: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.2/css/bulma.css">

    When I have a select styled, it looks like this (correct): image

    If I switch over to a bulmaswatch CSS (minified download version), I get this: image

    My select style looks like this:

    <span class="select level-item">
    <select><option>And</option><option>Or</option></select>
    </span>
    

    Am I doing something wrong?

  • 7

    Use the variable $control-height to set height of form element.

    Hi,

    It may be more simple to use the variable $control-height instead of overwrite all form element. It seems all were good after these changes.

    If there is a problem, I will correct.

    Thanks for reading

  • 8

    Input text is hardly visible in dark themes by default

    Hi!

    First of all, thank you for putting this together.

    Input text is hardly visible in dark themes by default. For example, look at the cyborg theme

    image

    Not sure if this is intended or not.

  • 9

    select with is-multiple in the cerulean swatch has a bug

    Here, I've created a codepen to demonstrate the issue.

    It seems the issue is with this:

    .button,.control.has-icons-left .icon,.control.has-icons-right .icon,.input,.pagination-ellipsis,.pagination-link,.pagination-next,.pagination-previous,.select,.select select,.textarea{height:2.375em}

    This is my fix:

    .select, .select select { height: auto!important; }

  • 10

    Getting an overflow in .media-content

    Bug

    screenshotatuploadcc_1519220952262

    Expected behaviour

    No overflow at all

    Suggested edit

    .media-content {
        overflow: hidden;
    }
    

    Things I checked

    I've compared it to standard Bulma as well as the Superhero style both of them didn't have the bug. When I look in the element styles: overflow: auto Opening it says:

    overflow-x: auto
    overflow-y: hidden;
    

    Solution

    I haven't checked if it worked only through the developer tools. This was done by unmarking overflow: auto and adding overflow-y: hidden

  • 11

    Module build failed: Undefined variable: "$button-focus-border".

    Trying to even get this started and I am getting this.

    On app.scss:

    // Bulma
    @import "~bulmaswatch/lux/_variables.scss";
    @import "~bulma/bulma.sass";
    @import "~bulmaswatch/lux/_overrides.scss";
    

    Gives me:

     error  in ./resources/assets/sass/app.scss
    
    Module build failed: ModuleBuildError: Module build failed:
    undefined
                                  ^
          Undefined variable: "$button-focus-border".
          in ~/code/project/node_modules/bulmaswatch/lux/_overrides.scss (line 36, column 32)
    
  • 12

    New tagged release?

    Hi! Looking at the history there are a few commits since the v0.8.1 tag on Apr 26, 2020. Reading the issues it looks like there's some work needed (PRs welcome?) to bring Bulmaswatch up to fully supporting the Bulma 0.9.x release series, but it'd be great to have a v0.8.2 tag in the meantime to be able to pin sites to and capture the latest fixes.

    Thanks for the great themes!

  • 13

    build(deps): bump decode-uri-component from 0.2.0 to 0.2.2

    Bumps decode-uri-component from 0.2.0 to 0.2.2.

    Release notes

    Sourced from decode-uri-component's releases.

    v0.2.2

    • Prevent overwriting previously decoded tokens 980e0bf

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.1...v0.2.2

    v0.2.1

    • Switch to GitHub workflows 76abc93
    • Fix issue where decode throws - fixes #6 746ca5d
    • Update license (#1) 486d7e2
    • Tidelift tasks a650457
    • Meta tweaks 66e1c28

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.0...v0.2.1

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

  • 14

    bookmarklet use

    in order to use the bookmarklet we had to make some minor modifications, thought you might like to see that, i would of rather been able to import the bookmarklet with a crossorigin script tag and avoided maintaining this file (minor issue) ;) thank you for the bookmarklet

    https://github.com/ddupas/msfish/blob/main/bookmarklet.js

  • 15

    How is the status of `@imort` deprecation and replace to @use/@forward?

    I mainly use the npm version of bulmaswatch. With @import being deprecated in Dart Sass, bulmaswatch should be replaced with @use and @forward. However, at this time, the bulmaswatch source is so dependent on @import that we may have to consider discontinuing its use. Are there any plans for bulmaswatch to support the obsoletion of @import?

    • See also: https://sass-lang.com/documentation/cli/migrator

    I have used bulmaswatch conveniently in the development of several WebView applications. It has been especially useful in implementing the Dark/Light mode switching. Thank you!

  • 16

    build(deps): bump postcss from 7.0.17 to 7.0.39

    Bumps postcss from 7.0.17 to 7.0.39.

    Release notes

    Sourced from postcss's releases.

    7.0.39

    • Reduce package size.
    • Backport nanocolors to picocolors migration.

    7.0.38

    • Update Processor#version.

    7.0.37

    • Backport chalk to nanocolors migration.

    7.0.36

    • Backport ReDoS vulnerabilities from PostCSS 8.

    7.0.35

    7.0.34

    • Fix compatibility with postcss-scss 2.

    7.0.33

    • Add error message for PostCSS 8 plugins.

    7.0.32

    7.0.31

    • Use only the latest source map annotation (by @​emzoumpo).

    7.0.30

    • Fix TypeScript definition (by @​nex3)

    7.0.29

    • Update Processor#version.

    7.0.28

    • Fix TypeScript definition (by @​nex3).

    7.0.27

    • Fix TypeScript definition (by @​nex3).

    7.0.26

    • Fix TypeScript definition (by @​nex3)

    7.0.25

    • Fix absolute path support for Windows (by @​tomrav)

    7.0.24

    7.0.23

    ... (truncated)

    Changelog

    Sourced from postcss's changelog.

    7.0.39

    • Reduce package size.
    • Backport nanocolors to picocolors migration.

    7.0.38

    • Update Processor#version.

    7.0.37

    • Backport chalk to nanocolors migration.

    7.0.36

    • Backport ReDoS vulnerabilities from PostCSS 8.

    7.0.35

    • Add migration guide link to PostCSS 8 error text.

    7.0.34

    • Fix compatibility with postcss-scss 2.

    7.0.33

    • Add error message for PostCSS 8 plugins.

    7.0.32

    7.0.31

    • Use only the latest source map annotation (by Emmanouil Zoumpoulakis).

    7.0.30

    • Fix TypeScript definition (by Natalie Weizenbaum).

    7.0.29

    • Update Processor#version.

    7.0.28

    • Fix TypeScript definition (by Natalie Weizenbaum).

    7.0.27

    • Fix TypeScript definition (by Natalie Weizenbaum).

    7.0.26

    • Fix TypeScript definition (by Natalie Weizenbaum).

    7.0.25

    • Fix absolute path support for Windows (by Tom Raviv).

    7.0.24

    • Fix TypeScript definition (by Keith Cirkel).

    7.0.23

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.