semantic-ui-forest / forest-themes

A collection of themes for Semantic UI.

Semantic-UI Forest Themes

This repo contains lots of third-party themes for Semantic-UI. Right now, it's mainly consist of themes ported from Bootswatch. To build these themes yourself, you need to follow some steps here.

By default, Semantic-UI use gulp.js as its build tools, and gulp will ask you several questions when called first time and store your answers to a semantic.json file. Next time you call gulp build-css, it will execute directly without asking you questions.

Semantic-UI use a theme.config file to configure different components for different themes.

You can check the official documentation for a detailed guide about how to customize Semantic-UI.

We have write a build script and wrap it with npm, so you can build tens of themes in one shot. The basic workflow:

git clone https://github.com/semantic-ui-forest/forest-themes.git

# we prefer yarn, however, npm is also OK
yarn install --ignore-scripts

# it takes about 7 minutes to build about 20 themes.
yarn run build

# all generated theme files are put into `output` directory in forest-themes repo.
# ls -lR dist

forest-themes's Issues

Darkly - Input Icon Font Color

Darkly's input icon (left in particular from what I currently have setup, likely right icon as well) font color is white. This should be grey.

White icon on white text field input.

<div class="ui left icon input"><i class="user icon"></i><input type="text"></div>

Opening tar.gz files?

I've tried various utilities to open these files for the themes but keep getting errors when trying to unpack. Any suggestions? Or are the files corrupted somehow?

Semantic 2.3 support

Hello @xiaohanyu, do you have planned to support semantic 2.3 ?

I think I've got a bug with pushable and theme superhero, mays be because you build this theme on semantic 2.2.13 an I'm using semantic 2.3.0

Build Script Broken?

I'm noticing at the end of the build script the line git checkout . && git clean -fd deletes all the themes the script just got done creating, thus leaving no themes. Am I missing something here?

[CLOSED] Revision of Bootswatch themes

Issue by tarvos21
Monday Feb 06, 2017 at 08:09 GMT
Originally opened as semantic-ui-forest/Semantic-UI#2

---

• cerulean
• cosmo
• cyborg
• darkly
• flatly
• journal
• lumen
• paper
• readable
• sandstone
• simplex
• slate
• spacelab
• superhero
• united
• yeti

Cerulean

• Global
  • header and page font-family: from default Lato to Helvetica Neue
• Elements
  • button: background and box-shadow effects modified
  • step, breadcrumb: background color
• Collections
  • menu: active item's text color, from black to white
  • vertical and tabular menu: keep text color consistent with other menu

Cosmo

• Global
  • global colors: redefine variable names
• Elements
  • button: basic button's text visibility
  • step: background color
  • label: text color
• Collections
  • breadcrumb: background color
  • form: warning, error form input's border, background color modified
  • menu: text color(hover, active)
  • message: header, description's text color
  • table: positive, negative, warning table row and cell's background color
• Modules
  • accordion: make accordion menu appear right

Cyborg

• Global
  • code color: improve visibility on black background
  • state colors: hovered, pressed, selected, disabled, unselected
  • placeholder color: from white to gray
• Elements
  • code icon: from black to gray
  • divider: color of text inside the divider
  • block and attached header: background color
  • corner label: top and right border
  • list: background set to transparent to keep consistent
  • list description: text color
  • piled and stacked segment: decorative segments color, from white to dark
  • step: add a style, almost same as cosmo theme
• Collections
  • breadcrumb: background set to transparent, and make text visible
  • form: warning, error form input's border, background color modified
  • vertical menu: background set to transparent
  • table: remove box-shadow of the empty header in definition table
• Views
  • feed: color of meta, date, extra parts
  • statistic: big number's color, from gray to white
• Modules
  • checkbox: toggle and slider checkbox's slider bar, from black to gray
  • rating icon: color when inactive

Darkly

• Global
  • default and inverted color: exchange, and do some modification
  • code color: improve visibility on black background
  • state background colors: hovered, pressed, selected, disabled, unselected
  • border color: gray
  • placeholder color: from white to gray
• Elements
  • code icon: gray, more visible
  • divider: color of text inside the divider
  • block and attached header: background color
  • input: border and height
  • list: background set to transparent to keep consistent
  • list description: text color
  • piled and stacked segment: decorative segments color, from white to dark
  • step: add a style, almost same as cosmo theme
• Collections
  • breadcrumb: background set to transparent, and make text visible
  • form: warning, error form input's border, background color modified
  • menu:
    • sub menu's text color
    • vertical menu's background, from white to none
    • hovered color of dropdown menu's item
    • default and active background of secondary menu's item
    • active background of tabular menu's item
  • message: default background color
  • table background colors:
    • default
    • header
    • footer
    • definition table
    • active row or cell
• Views
  • feed: color of meta data and label icon, increase visibility
  • statistic: value and label color, big contrast
• Modules
  • checkbox: toggle and slider checkbox's slider bar, from transparent to gray
  • dropdown: header and divider's colors
  • progress bar: consistent height of 10px
  • rating icon: visible color when inactive

Flatly

• Global
  • state background colors: selected, muted
  • placeholder color: increase visibility
  • solid definition: avoid references
• Elements
  • input label: make the text vertically center aligned when height increased
  • corner label: icon's color
  • piled and stacked segment: decorative segments color, from white to light gray
  • step: add a style
• Collections
  • breadcrumb: increase padding, but background not changed
  • form: warning, error form input's border, background color modified
  • menu:
    • active item text color in rail vertical menu
    • vertical menu's background
    • tabular menu's default text color
  • table background colors: remove color reference in global setting, then work
• Modules
  • progress bar: consistent height of 10px, use variable to define

Journal

• Global
  • font family: modify a few variables
    • google font must be open source
• Elements
  • button: delete duplicate text color variable

Lumen

• Global
  • global colors: remove reference, use direct definition
  • google fonts: use only available open source font
• Elements
  • button:
    • font-size: smaller than page font size
    • text-transform: all uppercase
    • border: border-bottom is emphasized
  • input: height, border, label middle aligned
  • segment, step: add border style
• Collections
  • form: remove inconsistent border
  • menu:
    • border-bottom: 4px
    • active item background color(darker)
  • message: add border style

Paper

• Global
  • global colors: avoid variables references
  • headers: use relative font size
  • font family: remove superfluous fonts
• Elements
  • button:
    • remove useless lines
    • effects when button is clicked
    • border
    • uppercase text
  • input: bigger line height, visible border
  • segment header: remove border
  • step: border
• Collections
  • breadcrumb: increase padding, add border
  • form:
    • input and select border and height
    • error field input text color
  • menu: border of icon
  • message: default text color
• Views
  • card: add border
• Modules
  • progress: bar height

Readable

• Global
  • global colors: remove variables references
  • global font: remove incorrect definition
• Elements
  • button: remove @fontName
  • input: correct border definition
  • label: background color and corner label's border
• Collections
  • menu: minor revision of border

Sandstone

• Global
  • global colors: remove variables references
  • global font: remove incorrect definition
• Elements
  • basic button: text color, uppercase
  • input: correct border definition
  • label: text and background color
  • segment: remove border and text-transform settings
  • step: add text-transform setting to title
• Collections
  • breadcrumb:
    • exchange default and active section text color
    • increase padding
  • menu: vertical menu's label background, active text color
  • form: error field input placeholder color, more visible

Simplex

• Global
  • global font: remove duplicate definition
• Elements
  • button:
    • default hovered text color
    • basic button text color, set to black
  • input: make border visible
  • step: add border and background style

Slate

• Global
  • default and inverted color: exchange, and do some modification
  • code color: improve visibility on black background
  • border color: gray
  • placeholder color: from white to gray
• Elements
  • button:
    • basic button: background changed to gray
    • add gradient effects to button background
    • change hover background color
  • block and attached header: background color
  • code icon: gray, more visible
  • input: border, placeholder color
  • list:
    • description text color, more visible
    • make text color of links white in inverted list(page footer)
    • background set to transparent to keep consistent
  • piled and stacked segment: decorative segments color, from white to dark
  • step: add a style
• Collections
  • breadcrumb:
    • increase padding
    • default and active text color
  • form:
    • make text of select visible
    • add gradient effects to label and button in inputs
  • menu:
    • remove inconsistent border style
    • hovered color of dropdown menu's item
    • sub menu's text color
    • vertical menu's background, label background
    • pointing border color of pointing secondary menu
  • message: default background color
  • table background colors:
    • default
    • header
    • footer
    • definition table border
    • active row or cell
• Views
  • feed: color of meta data
  • statistic: value color
• Modules
  • checkbox: toggle and slider checkbox's slider bar, bullet color of checked radio
  • rating icon: set to visible color when inactive

Spacelab

• Global
  • font and color: minor revision of variables
• Elements
  • button:
    • basic button text color
    • hovered background
    • background of button in input
  • step: add gradient background

Superhero

• Global
  • default and inverted color: exchange, and do some modification
  • code color: improve visibility on black background
  • border color: gray
  • placeholder color: more visible and consistent
• Elements
  • basic button: hover background color
  • block and attached header: consistent background color
  • code icon: gray, more visible
  • input: border width set to zero
  • label: background set to @primarycolor
  • list:
    • description text color, more visible
    • background set to transparent to keep consistent
  • piled and stacked segment: decorative segments color, from white to gray
  • step: add a style
• Collections
  • breadcrumb: increase padding
  • form:
    • make text of select visible
    • input placeholder color modified
  • menu:
    • set text and background color of dropdown menu
    • active hovered item's text color
    • vertical menu's background and label background color
    • tabular and secondary active item background color
  • message: default text and background color
  • table background colors:
    • default
    • header
    • footer
    • striped
    • definition table border
    • active row or cell
• Views
  • feed: meta data and icon color
  • statistic: value and label color
• Modules
  • checkbox: toggle and slider checkbox's slider bar, bullet color of checked radio
  • rating icon: set to visible color when inactive

United

• Global
  • font: set to Ubuntu
  • muted text color: set to light gray(for text menu item)
• Elements
  • basic button: default text color
  • step: add a style
• Collections
  • menu:
    • secondary menu default text color
    • tabular menu deafult text color
    • hover color of active item
    • vertical menu background, primary color
    • label background in menu

Yeti

• Global
  • font: simplify definition
• Elements
  • button: unify padding
  • step: add theme style, black
• Collections
  • breadcrumb: increase padding
  • menu:
    • secondary menu's default text color
    • accordion vertical menu's background color, transparent
    • label background in menu
    • hover text and background color of active item
    • text and background color of dropdown
    • vertical menu's default background
    • tabular menu's default text color
• Modules
  • dropdown: header text color
  • popup: remove previous background color

---

tarvos21 included the following code: https://github.com/semantic-ui-forest/Semantic-UI/pull/2/commits

Issue with Loader element (Yeti + other themes)

I noticed this issue in one of our sites. I came here to check and noticed the same issue where the loading indicator wasn't rotating, but rather moving from left to right. This issue appears to be affecting Chrome v66.0.

[Question] Status of this project?

I just had a general question as to the status of this project and if there were any plans to support fomantic-ui (given that it seems the plan is merge that community fork back into semantic-ui at some point)? I tried one of the themes, materia, with fomantic but there were some issues although it still worked fairly well.

[CLOSED] build multiple themes in one pass

Issue by xiaohanyu
Sunday Mar 26, 2017 at 14:30 GMT
Originally opened as semantic-ui-forest/Semantic-UI#4

---

This PR will be merged after we all finished the improvement of bootswatch themes.

---

xiaohanyu included the following code: https://github.com/semantic-ui-forest/Semantic-UI/pull/4/commits

[CLOSED] Third round revision of bootswatch themes

Issue by tarvos21
Thursday Mar 23, 2017 at 08:39 GMT
Originally opened as semantic-ui-forest/Semantic-UI#3

---

Cerulean
Cosmo
Readable
Sandstone
Superhero

Universal problems for checking:

• hidden/fadein button background color, and button hovered background in dimmable card
• input focus text color and border color
• ribbon label shadow color
• list link item color: 'Language'
• message border and box-shadow
• card meta and content text color
• accordion's top margin, styled accordion text color
• dropdown selected item text color and diamond color
• toggle checkbox checking back
• modal header color
• popup header background and diamond
• sidebar menu background and page background in scaledown effect
• tab's bottom attached segmet (last-child) margin-bottom

---

tarvos21 included the following code: https://github.com/semantic-ui-forest/Semantic-UI/pull/3/commits

Windows build script

Build script only works on Linux.

Lumen - invisible input & form placeholders

Publish npm packages

We need to publish this theme package to npm registry to make it easy to get and download.

Incorrect links from web to downloads

1. Go to http://semantic-ui-forest.com/themes/
2. Click on Download at sandstone, which reads: semantic.sandstone.min.css
3. Be redirected to https://github.com/semantic-ui-forest/forest-themes/blob/master/dist/bootswatch/semantic.sandstone.min.css, which is currently a 404

I believe this works with all the themes.

[CLOSED] Bootswatch themes

Issue by tarvos21
Monday Jan 02, 2017 at 01:28 GMT
Originally opened as semantic-ui-forest/Semantic-UI#1

---

• cerulean
• cosmo
• cyborg
• darkly
• flatly
• journal
• lumen
• paper
• readable
• sandstone
• simplex
• slate
• spacelab
• superhero
• united
• yeti

---

tarvos21 included the following code: https://github.com/semantic-ui-forest/Semantic-UI/pull/1/commits

superhero active hover menu items color stays dark

Greetings and thanks for the great themes. I tried out the superhero theme with semantic-ui-react, and it looks awesome. However, there is an issue with the styling of some items, where the font color would be black on a #333 background-color.

I initially noticed it on a Dropdown menu item (the Electronics item is hovered in this image):

The Dropdown is nested in a Menu.

When I viewed the demo of the superhero theme on http://semantic-ui-forest.com/themes/bootswatch/superhero/, the dropdown menu's hovered items had white font.

If I remove the Menu parent component, the Dropdown is styled correctly. I tried a few things, including downgrading semantic-ui from 2.3.1 to 2.2.0, but ultimately just downloaded the semantic.superhero.min.css and replaced the one in my dist/ folder, and it corrected the problem locally.

Using the css from the demo site:

I used create-react-app to initialize my react app. I have the semantic.superhero.min.css file in src/semantic/dist, and I import that into my src/index.js. I'm not applying any other css. Here are my dependencies:

"dependencies": {
   "ajv": "^6.0.0",
   "react": "^15.4.2",
   "react-dom": "^15.4.2",
   "react-router": "^3.0.0",
   "react-scripts": "1.1.4",
   "semantic-ui-react": "^0.80.2"
 },
 "devDependencies": {
   "gulp": "^3.9.1",
   "semantic-ui": "^2.3.1"
 }

I don't know if the problem is related to my build of the css or not. But, if I can track down the root cause, I'll report back.

yarn install fails

Right out of the box, yarn install fails

Microsoft Windows [Version 10.0.17134.48]

Robert@CORSAIRONE D:\Sites\react
$ git clone https://github.com/semantic-ui-forest/forest-themes.git
Cloning into 'forest-themes'...
remote: Counting objects: 4191, done.
remote: Total 4191 (delta 0), reused 0 (delta 0), pack-reused 4191R
Receiving objects: 100% (4191/4191), 3.99 MiB | 1.47 MiB/s, done.
Resolving deltas: 100% (1775/1775), done.

Robert@CORSAIRONE D:\Sites\react
$ cd forest-themes

Robert@CORSAIRONE D:\Sites\react\forest-themes
$ yarn install
yarn install v1.6.0
(node:71120) [DEP0005] DeprecationWarning: Buffer() is deprecated due to security and usability issues. Please use the Buffer.alloc(), Buffer.allocUnsafe(), or Buffer.from() methods instead.
[1/4] Resolving packages...
[2/4] Fetching packages...
info [email protected]: The platform "win32" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning " > [email protected]" has unmet peer dependency "better-console@*".
warning " > [email protected]" has unmet peer dependency "del@*".
warning " > [email protected]" has unmet peer dependency "extend@*".
warning " > [email protected]" has unmet peer dependency "gulp@*".
warning " > [email protected]" has unmet peer dependency "gulp-autoprefixer@*".
warning " > [email protected]" has unmet peer dependency "gulp-chmod@*".
warning " > [email protected]" has unmet peer dependency "gulp-clean-css@*".
warning " > [email protected]" has unmet peer dependency "gulp-clone@*".
warning " > [email protected]" has unmet peer dependency "gulp-concat@*".
warning " > [email protected]" has unmet peer dependency "gulp-concat-css@*".
warning " > [email protected]" has unmet peer dependency "gulp-copy@*".
warning " > [email protected]" has unmet peer dependency "gulp-dedupe@*".
warning " > [email protected]" has unmet peer dependency "gulp-flatten@*".
warning " > [email protected]" has unmet peer dependency "gulp-header@*".
warning " > [email protected]" has unmet peer dependency "gulp-help@*".
warning " > [email protected]" has unmet peer dependency "gulp-if@*".
warning " > [email protected]" has unmet peer dependency "gulp-less@*".
warning " > [email protected]" has unmet peer dependency "gulp-notify@*".
warning " > [email protected]" has unmet peer dependency "gulp-plumber@*".
warning " > [email protected]" has unmet peer dependency "gulp-print@*".
warning " > [email protected]" has unmet peer dependency "gulp-rename@*".
warning " > [email protected]" has unmet peer dependency "gulp-replace@*".
warning " > [email protected]" has unmet peer dependency "gulp-rtlcss@*".
warning " > [email protected]" has unmet peer dependency "gulp-uglify@*".
warning " > [email protected]" has unmet peer dependency "gulp-util@*".
warning " > [email protected]" has unmet peer dependency "gulp-watch@*".
warning " > [email protected]" has unmet peer dependency "map-stream@*".
warning " > [email protected]" has unmet peer dependency "require-dot-file@*".
warning " > [email protected]" has unmet peer dependency "run-sequence@*".
warning " > [email protected]" has unmet peer dependency "yamljs@*".
[4/4] Building fresh packages...
[1/1] ⠁ semantic-ui: gulp[71240]: src\node_contextify.cc:628: Assertion `args[1]->IsString()' failed.
[-/1] ⠁ waiting...
[-/1] ⠁ waiting...
[-/1] ⠁ waiting...
error D:\Sites\react\forest-themes\node_modules\semantic-ui: Command failed.
Exit code: 134
Command: gulp install
Arguments:
Directory: D:\Sites\react\forest-themes\node_modules\semantic-ui
Output:
gulp[71240]: src\node_contextify.cc:628: Assertion `args[1]->IsString()' failed.
 1: node::DecodeWrite
 2: node::DecodeWrite
 3: uv_loop_fork
 4: v8::internal::interpreter::BytecodeDecoder::Decode
 5: v8::internal::RegExpImpl::Exec

Sandstone - Header Color

Is white on white.

Needs to be

.ui.segment > .header, .ui.segment > .footer { color: #3E3F3A; }

Darkly - Card Hover Background Color

Hello, thanks for the themes.

There's a problem I noticed with the Darkly theme cards. When you set cards as links (raise on hover) and you hover, the background color breaks from the dark one back to white.

Superhero - Current Selection goes blank when dropdown is presented

Using a selection dropdown, Superhero will have the current selected item turn white in the primary box when the dropdown is activated.

semantic.material.min.css broken

the semantic.material.min.css file seems to have a syntax error.

Checkboxes don't work in a few themes.

Checkboxes do not change state in a few themes (mainly dark themes).

Superhero for sure.

Add support for bootstrap v4 themes

It seems that bootstrap has released v4 and bootswatch has created/ported 21 themes to bootstrap v4, we need to support that.

Documentation for Semantic UI React

Links on the site link out the css files, but putting the css as an import fails.

Publish latest themes to npm

@xiaohanyu thanks for all the themes! 😄
Please publish the latest Bootswatch v4 themes to npm