Freedom theme colors

Omeka S Themes
1

Hello! I have been digging into the Freedom theme with the hopes of adding more customization options–namely adding some colors.

I know how to add them to the /themes/freedom/config/theme.ini Settings page:
(this is what is currently says)

; /// General settings ///

element_groups.general = "General Settings"

elements.primary_color.name = "primary_color"
elements.primary_color.type = "Laminas\Form\Element\Color"
elements.primary_color.options.label = "Theme's Primary Color"
elements.primary_color.options.info = "The color to be used as the theme's primary color. The default value is (231, 127, 17)."
elements.primary_color.attributes.value = "#e77f11"
elements.primary_color.options.element_group = "general"

and found the /themes/freedom/asset/sass/abstracts/variables/_colors.scss file where

// Colors
$color__primary: var(--primary);
$color__primary-dark: var(--primary-dark);
$color__secondary: #394f68;
$color__secondary-light: #eef7fa;
$color__secondary-dark: #36475a;

What I haven’t found is where the elements.primary_color.name = "primary_color" turns into $color__primary.

I am also wondering when/how the ShadeColor.php helper comes in. And is it possible to to automatically show the -light and -dark versions of the color scheme (with their hex# and/or rgb() codes) on the theme’s Settings page?

The next step would be the ability to have the theme’s main colors become options in the Block Layout Configuration’s Background setting. (“Opacity/Transparency” and “Blending Mode” are also a good options to add to the Background settings as well.) If that is not possible in the near future, that’s one reason why it would be handy to have them all on the theme Settings page in order to easy copy the hex# or rgb() code.

A related question would be how to add to or generate a new Welcome page (or page block?) in order to not only see samples of the site’s typography settings, but to also show swatches of the color scheme.

2

$color__primary and so on that you’re looking at are in the SASS code, that’s CSS code that gets compiled down into the actual stylesheet that’s used to display the site.

There’s no getting a user-editable setting like the theme’s primary_color into the SASS code, instead it’s using CSS variables: this var(--primary); means that the color is looking up a variable set elsewhere.

To see where the theme setting gets set as that variable, see the theme’s layout.phtml file. This also shows shadeColor in use.

3

Thanks, I think that answers that question.

It looks like the :root variable is defined in view/layout/layout.phtml, where it pulls the themeSetting('primary_color') and first calls it $primaryColor before declaring the :root{} variables that are referenced in the CSS and declared as $color__primary in the SASS.

So let’s say I add this to the freedom/config/theme.ini:

; /// General settings ///

element_groups.general = "General Settings"

elements.primary_color.name = "primary_color"
elements.primary_color.type = "Laminas\Form\Element\Color"
elements.primary_color.options.label = "Theme's Color Scheme #1"
elements.primary_color.options.info = "First of the theme's color scheme. The default is hex #025442 or rgb(2, 84, 66)."
elements.primary_color.attributes.value = "#025442"
elements.primary_color.options.element_group = "general"

elements.second_color.name = "second_color"
elements.second_color.type = "Laminas\Form\Element\Color"
elements.second_color.options.label = "Theme's Color Scheme #2"
elements.second_color.options.info = "Second of the theme's color scheme. The default is hex #035dab or rgb(3, 93, 171)."
elements.second_color.attributes.value = "#035dab"
elements.second_color.options.element_group = "general"

elements.third_color.name = "third_color"
elements.third_color.type = "Laminas\Form\Element\Color"
elements.third_color.options.label = "Theme's Color Scheme #3"
elements.third_color.options.info = "Third of the theme's color scheme. The default is hex #05aff2 or rgb(5, 175, 242)."
elements.third_color.attributes.value = "#05aff2"
elements.third_color.options.element_group = "general"

elements.fourth_color.name = "fourth_color"
elements.fourth_color.type = "Laminas\Form\Element\Color"
elements.fourth_color.options.label = "Theme's Color Scheme #4"
elements.fourth_color.options.info = "Fourth of the theme's color scheme. The default is hex #04e0a6 or rgb(4, 224, 166)."
elements.fourth_color.attributes.value = "#04e0a6"
elements.fourth_color.options.element_group = "general"

elements.fifth_color.name = "fifth_color"
elements.fifth_color.type = "Laminas\Form\Element\Color"
elements.fifth_color.options.label = "Theme's Color Scheme #5"
elements.fifth_color.options.info = "Fifth of the theme's color scheme. The default is hex #fff4b1 or rgb(255, 244, 177)."
elements.fifth_color.attributes.value = "#fff4b1"
elements.fifth_color.options.element_group = "general"

*is it reading the name from the elements.name.element_group or the ="name"?

Now I would need to go make sure that each new color was represented in the files that we discussed above:
freedom/view/layout/layout.phtml

$primaryColor = $this->themeSettings('primary_color') ??  '#025442';
$secondColor = $this->themeSettings('second_color') ??  '#035dab';
$thirdColor = $this->themeSettings('third_color') ??  '#05aff2';
$fourthColor = $this->themeSettings('fourth_color') ??  '#04e0a6';
$fifthColor = $this->themeSettings('fifth_color') ??  '#fff4b1';
...

<style type="text/css" media="screen">
:root {
--primary: <?php echo $primaryColor; ?>;
  --primary-light: <?php echo $this->ShadeColor($primaryColor, 10); ?>;
  --primary-dark: <?php echo $this->ShadeColor($primaryColor, -10); ?>;
--second: <?php echo $secondColor; ?>;
  --second-light: <?php echo $this->ShadeColor($secondColor, 10); ?>;
  --second-dark: <?php echo $this->ShadeColor($secondColor, -10); ?>;
--third: <?php echo $thirdColor; ?>;
  --third-light: <?php echo $this->ShadeColor($thirdColor, 10); ?>;
  --third-dark: <?php echo $this->ShadeColor($thirdColor, -10); ?>;
--fourth: <?php echo $fourthColor; ?>;
  --fourth-light: <?php echo $this->ShadeColor($fourthColor, 10); ?>;
  --fourth-dark: <?php echo $this->ShadeColor($fourthColor, -10); ?>;
--fifth: <?php echo $fifthColor; ?>;
  --fifth-light: <?php echo $this->ShadeColor($fifthColor, 10); ?>;
  --fifth-dark: <?php echo $this->ShadeColor($fifthColor, -10); ?>;
}
...

freedom/asset/sass/abstracts/variables/_colors.scss

$color__primary: var(--primary);
  $color__primary-light: var(--primary-light);
  $color__primary-dark: var(--primary-dark);
$color__secondary: var(--second);
  $color__secondary-light: var(--second-light);
  $color__secondary-dark: var(--second-dark);
$color__third: var(--third);
  $color__third-light: var(--third-light);
  $color__third-dark: var(--third-dark);
$color__fourth: var(--fourth);
  $color__fourth-light: var(--fourth-light);
  $color__fourth-dark: var(--fourth-dark);
$color__fifth: var(--fifth);
  $color__fifth-light: var(--fifth-light);
  $color__fifth-dark: var(--fifth-dark);

and making adjustments as needed in any of the SASS or CSS that I want changed (github says there are 15 files that include “$color__primary” and 12 for “$color__secondary”).

If I didn’t want to go through the original SASS and CSS, I should be able to use the newly defined root variables in the CSSEditor, right?

Did I miss anything?

4

The name after the equals sign on the .name line is what actually sets the name the setting will be saved under and that you’d need to look up using $this->themeSettings. Conventionally we tend to keep that and the part after elements. the same to avoid confusion.

Your example inside the layout file looks pretty much right to me. As for the SASS/CSS, you could modify them like you say, and I’m pretty sure you can also use CSS Editor for this without a problem. You could also write yourself a new stylesheet with just your changes and load that in the layout.phtml, so you could write your styles in a file but not have to deal with recompiling the base styles.

1 Like
5

I’m guessing that if I loaded a new stylesheet into the layout.phtml, it would then show in the HTML block styling? The question now is do I prependStylesheet, appendStylesheet, prependFile, or appendFile?

Looking at freedom/view/layout/layout.phtml%3B-,%24this%2D%3EheadLink()%2D%3EprependStylesheet,-(%27https), I see

$this->headLink()->prependStylesheet('--insert font stylesheet URL here--');

But then when I look at CSSEditor/view/css-editor/admin/index/index.phtml, I found

$this->headLink()->appendStylesheet('--insert new stylesheet url here--');

Which one is right in this instance? (I’m pretty sure it’s append, but just want to make sure.)

6

You can use append.

The built-in layouts use prepend and reverse their order to keep it so that the module-added stylesheets will appear later. You don’t really need to do this in your specific case since this is intended to be an “override” sheet.

1 Like