/godot-css-theme

Convert CSS to Godot Theme

Primary LanguageGDScriptMIT LicenseMIT

Godot-CSS-Theme

Converts CSS to Godot Themes.

The goal is to make theme creating easier and more reusable. Using CSS you also have the advantage to use preprocessors like SASS.

  • master branch for godot 4
  • godot-3.x branch for godot 3

How to use

Create a css file and run the following commands to create the theme.

# Output defaults to same folder with .tres extension
godot -s addons/godot-css-theme/convert.gd --input="res://themes/themes.css"

Or enable the plugin in godot and go to the CSS tab. Open the css file and click "Export Theme"

Supported Features

Generally all properties of a Godot Theme should be supported. The program uses custom css variables to set values.

The node_type is used like a tag to decide which node to style (e.g. Button or CheckBox). The body tag has a special meaning. It is used to set global styles where possible.

The structure for a statement is --{TYPE}-{PROPERTY}: {VALUE} The only exception is for setting styles. They need a special type definition like --styles-{PROPERTY}-type: {VALUE}. See syntax

Classes for node_types are supported and they will be generated as a separate theme in the same output directory.

For a list of all supported features see FEATURES.md

Syntax Overview

  • --{TYPE}-{PROPERTY}: {VALUE}
    • {TYPE} - colors, const, fonts, styles, icons
    • {PROPERTY} - anything the node_type supports
    • {VALUE} - anything str2var() supports, hex values, url()
  • --styles-{PROPERTY}-type values: Empty, Flat, Line, Texture
  • external resources are specified with url().
    • url(res://file.txt) or url(/file.txt) - absolute path
    • url(file.txt) - relative path to css file

Example:

Button {
  --colors-font-color: #000;
  --colors-font-color-disabled: Color(0, 0, 0, 0.5);

  --const-hseparation: 5;

  --fonts-font: url(res://font.tres);

  --styles-normal-type: Flat;
  --styles-normal-bg-color: #fff;
}

Contribute

If you see any problems or have any ideas for new features feel free to create an issue or a PR

Just make sure that the features are documented in FEATURES.md and that there is some kind of test for it.

  • base-syntax.css - should contain all possible styles that can be set
  • simple-syntax.css - should contain all simplified syntax that is supported

Problems

  • Using colors with words like red or blue does not work. Either use hex #000 or native gdscript Color(0, 0, 0, 1)
  • Godot might have to be closed before generating. Otherwise it might rewrite some values