JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › Buttons › Applying a theme to the button
Tagged: button, dark red theme, smart button
- This topic has 2 replies, 2 voices, and was last updated 4 years, 1 month ago by
mikolaj.bernecki.
Viewing 3 posts - 1 through 3 (of 3 total)
-
AuthorPosts
-
July 2, 2020 at 11:15 am #100827
mikolaj.bernecki
MemberSo I’ve been trying to apply a particular theme to a button, but no luck.
My HTML is:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="styles/smart.default.css" type="text/css" /> <link rel="stylesheet" href="styles/smart.dark-red.css" type="text/css"/> <title>Document</title> </head> <body> <smart-button id="button" class="primary"></smart-button> </body> <script type="module" src="index.js"></script> </html>
And my JS is:
import "./modules/smart.button.js"; const button = document.getElementById("button"); button.theme = "dark-red"; button.content = "New button"; button.type = "button"; button.clickMode = "hover";
But the end result is a default theme:
Button image
Is there something I’m missing?July 3, 2020 at 5:22 am #100860admin
KeymasterAs the theme file is:
body[theme="dark-red"] { --smart-primary-rgb: 221, 44, 0; --smart-primary: rgba(var(--smart-primary-rgb), 1); --smart-background: #242424; /* The theme background color. The background color appears behind scrollable content.*/ --smart-background-color: #fff; /* Text color on top of a background background */ --smart-surface: #333; /* The theme surface color. Surface colors affect surfaces of components, such as cards, sheets, and menus. */ --smart-surface-color: #fff; /* Text color on top of a surface surface */ --smart-disabled: #535353; /* The theme primary color in disabled state. */ --smart-disabled-color: #fff; /* Text color on top of a theme background in disabled state */ --smart-border: #464646; /* The theme background border color */ --smart-editor-selection: var(--smart-primary); --smart-editor-selection-color: var(--smart-primary-color); --smart-ui-state-hover: #444; --smart-ui-state-color-hover: #fff; --smart-ui-state-border-hover: #444; --smart-ui-state-active: var(--smart-primary); --smart-ui-state-color-active: var(--smart-primary-color); --smart-ui-state-border-active: var(--smart-primary); --smart-ui-state-focus: #555; --smart-ui-state-color-focus: #fff; --smart-ui-state-border-focus: #555; --smart-ui-state-selected: rgba(var(--smart-primary-rgb), .1); --smart-ui-state-color-selected: var(--smart-primary); --smart-ui-state-border-selected: rgba(var(--smart-primary-rgb), .1); --smart-alternation-index0-color: var(--smart-surface-color); /* Alternation color for index0 */ --smart-alternation-index0-border: var(--smart-surface); /* Alternation border color for index0 */ --smart-alternation-index0-background: var(--smart-surface); /* Alternation background color for index0 */ --smart-alternation-index1-color: #111; /*Alternation color for index1 */ --smart-alternation-index1-border: #9BBB59; /* Alternation border color for index1 */ --smart-alternation-index1-background: #9BBB59; /* Alternation background color for index1 */ --smart-alternation-index2-color: #fff; /*Alternation color for index2 */ --smart-alternation-index2-border: #FC3752; /* Alternation border color for index2 */ --smart-alternation-index2-background: #FC3752; /* Alternation background color for index2 */ --smart-scroll-bar-background: #3E3E42; --smart-scroll-bar-border: #3E3E42; --smart-scroll-bar-thumb-background: #686868; --smart-scroll-bar-thumb-border: #686868; --smart-scroll-bar-thumb-background-hover: #9E9E9E; --smart-scroll-bar-thumb-border-hover: #9E9E9E; --smart-scroll-bar-thumb-background-active: #444; --smart-scroll-bar-thumb-border-active: #444; --smart-scroll-bar-button-background: #3E3E42; --smart-scroll-bar-button-border: #3E3E42; --smart-scroll-bar-button-color: #999999; --smart-scroll-bar-button-background-hover: #3E3E42; --smart-scroll-bar-button-border-hover: #3E3E42; --smart-scroll-bar-button-color-hover: var(--smart-primary); --smart-scroll-bar-button-background-active: #3E3E42; --smart-scroll-bar-button-border-active: #3E3E42; --smart-scroll-bar-button-color-active: var(--smart-primary); }
it expects a theme attribute set to the document’s body tag.
Hope this helps you.
Best Regards,
BoykoJuly 6, 2020 at 7:30 am #100862mikolaj.bernecki
Memberit expects a theme attribute set to the document’s body tag.
Yep, that was the problem. Thanks.
-
AuthorPosts
Viewing 3 posts - 1 through 3 (of 3 total)
- You must be logged in to reply to this topic.