Skip to content
GitLab
Projects Groups Snippets
  • /
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
  • B bootstrap
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 263
    • Issues 263
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 114
    • Merge requests 114
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Packages and registries
    • Packages and registries
    • Package Registry
    • Infrastructure Registry
  • Monitor
    • Monitor
    • Incidents
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Repository
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • Bootstrap
  • bootstrap
  • Merge requests
  • !6624

Use contrast function to make things readable on dark backgrounds

  • Review changes

  • Download
  • Email patches
  • Plain diff
Closed Administrator requested to merge github/fork/Synchro/3.0.0-wip into 3.0.0-wip Jan 18, 2013
  • Overview 0
  • Commits 1
  • Pipelines 0
  • Changes 2

Created by: Synchro

If you change bootstrap's background color from light to dark, many things become unreadable, and there are lots of color values that need updating manually in order to make things usable. There's no reason this can't be done automatically since we've got all kinds of color processing functions on hand in less. This commit makes some attempt at doing this using less' contrast function (which I wrote specifically for this purpose!). It's not a complete translation, but if you think this is a good idea, I'll persevere.

This shows an example page with the default bootstrap styles after changing only @body-background to #000:

Screen Shot 2013-01-18 at 10 10 15

and this is how it looks with this change applied:

Screen Shot 2013-01-18 at 10 11 54

It strikes me that much of the inverse navbar could be achieved using a similar mechanism and far less markup.

Assignee
Assign to
Reviewers
Request review from
Time tracking
Source branch: github/fork/Synchro/3.0.0-wip