Change primary color attribute in theme

[rajesh-s]

Thanks for all your efforts on the development of this theme.

I am using the latest version of the them. In the theme settings default.toml (copied to create a custom theme), I updated the "primary" attribute, and see this update the "network-icon" field on the page for both light/dark accordingly. However, I do not see "primary_light" and "primary_dark" not affect the appearance of the elements.

In academic.css I do not see any color attribute i.e primary associated with the network icon field, is there a way I can change this to toggle based on dark/light?

[gcushen]

You can create a CSS plugin with your custom CSS:
https://sourcethemes.com/academic/docs/customization/#customize-style-css

It can be used to override Academic's styles. For light theme style, define .<SELECTOR-NAME> {...}. For dark theme style, define .dark .<SELECTOR-NAME> {...}.

[rajesh-s]

Thanks for the quick response
What is the value of .<SELECTOR-NAME> for network-icon?

I have the following in my custom.css but it does not override. I experimented within academic.css and the same definitions work there:

.dark a,
h3.article-title a:hover {
  color: {{ .Get "primary_dark" }};
}

.dark .form-control:focus {
  border-color: {{ .Get "primary_dark" }};
}

.dark .featurette-icon {
  color: {{ .Get "primary_dark" }};
}

[saadjavaid]

As a quick update, @rajesh-s I was able to get the featurette icon color changed in the dark mode by using the code code you provided. I placed the css file in assets/css and changed the param.toml plugin_css to the name of the css file.