I've followed the examples in the docs and still cannot seem to get my custom theme to work. All I want to do is change the app background in the dark theme to something that isn't as...green. I removed CLR on my angular.json and imported it on styles.scss along with my custom theme sheet. The custom theme just has a root adjustment using CSS custom property of
:root {
--clr-global-app-background: hsl(226, 30%, 14%);
}
I get a flash of my preferred background before the page fully renders and then it goes back to the default greenish grey default.
Related
im creating a vue app.
At the moment I have a light.scss and a dark.scss and decide in the build process which one I use.
But I want to toggle the dark mode directly in my app.
Im using a css theme and until now I could write:
light.scss
$header-bar-color: null;
dark.scss
$header-bar-color: black;
The light variant took the default value from my css theme.
Now I want to use only one main.scss with custom properties.
Therefore I have a light.scss with:
--header-bar-color: null
and a dark.scss with:
--header-bar-color: black
and in my main.scss I write:
$header-bar-color: var(--header-bar-color)
My Problem is that the null value from the light theme don't fallback to my default css theme. Is it possible to achieve this?
There are some severe theming limitations when VSCode lumps themes into only two uiTheme's:
"vs" (for all light themes) or "vs-dark" (for all dark theme)s.
This doesn't allow people to make VSCode color themes that don't fall into either category. I would like to know how to access and override uiTheme colors via a custom extension to allow more interesting color themes. Maybe, this can be done via a custom CSS? If so, I'm hoping someone could give me an example of how to do this.
EDIT: It looks like this resource is stored in:
C:/Users/micha/AppData/Local/Programs/Microsoft%20VS%20Code/resources/app/out/vs/workbench/workbench.main.css
It looks like I need a css with the vscode-custom-css extension. However, I have no idea how to determine the name of the resource I would like to customize. I know I might need to use the developer mode in VSCode. However, I have no idea what to do.
I was able to figure this all out. I tried both vscode-custom-css as well as vscode-vibrancy VScode extensions they both allowed me to inject my own custom CSS code to modify parts to VSCode that normally wouldn't be customizable. I started off by replacing VSCode's code folding icons. I then ended up using the Vibrancy extension's code since it didn't produce a "corrupted installation" message in VSCode like the other extension did. Also, it has a Vibrancy (blur transparency) feature as a bonus. I then integrated that code (MIT opensource) in my own theme extension.
I used VSCode's Developer mode to inspect its existing CSS; and, make a custom CSS. Below is the CSS I used:
body {
background: transparent !important;
}
.monaco-editor.vs-dark .margin-view-overlays .folding,
body {
background-image: url(../themes/images/arrow_down.png);
}
.monaco-editor.vs-dark .margin-view-overlays .folding.collapsed,
body {
background-image: url(../themes/images/arrow_right.png);
}
.monaco-editor .inline-folded,
body {
background-image: url(../themes/images/fold.png);
}
Here's the link my VSCode Extension:
MKANET Theme V2
For custom themes, dark vs light mainly means the following:
The base set of theme colors used. Custom themes override these base colors
Which variant of icons to use (icons that work well on a darker background vs ones that are designed for a lighter background light). Theme can customize some icon colors too
Which category theme is listed in when the user is selecting a theme (dark vs light)
But dark vs light in no way limits what colors a custom theme can or cannot use. A light theme for example could set every UI color with various shades of dark grey, or it could use a neon rainbow of colors.
In short: you do not need to create a new category of themes beyond dark or light, nor should you need to use custom css.
Default text in TinyMCE editor is black until styles are applied either via the plugins or my custom CSS. Once saved and viewed, default text-color is #555, as defined in my primary stylesheet.
I would like TinyMCE to display #555 as the default, to assist users in selecting compatible colors when formatting text via the editor.
Previous questions/answers on StackOverlow (c.2013) refer to a CSS file that no longer exists in the TinyMCE package. I've tried changing the default "color" in content.min.css without result.
I've also tried adjusting the CSS that controls the data-entry forms BUT this is not working, eg.
#ppform textarea {color:#555}
<table id="ppform">
<tr><td><textarea id="ppmce" name="entry">
Is is possible? What else can I try?
If you want to impact the content in the editor via CSS you can pass CSS to the editor via the content_css configuration setting:
https://www.tiny.cloud/docs/configure/content-appearance/#content_css
I am unable to change color of my "navbar-default" that is defined in bootstrap.css file under my public folder. I am using bootstrap 3.3.5 files. Changes do not appear when I reload the page. Help me out please as its first time I am sing custom styling in a Laravel project.
image of code
Create your custom class and style it such as
.my-navebar-style
or add background-color: red !important; at the end for your property.
And make sure your CSS file should be include towards after bootstrap.css
I'm having a lot of trouble with a few of the SASS theming components. I'll start with the one providing me the most annoyance... I've written a BUNCH of custom themes for EXTjs 4.x, and haven't had these issues, but theming 5.x is proving to be a bit buggy/different. I'm not sure if I'm just not using the proper sass variables, or what... please help!
TAB
I've extended a theme from the 'ext-theme-gray' package. I'm simply trying to change the text color of the tab title, but these sass variables don't seem to change the color properly. The 'ext-theme-gray' has a text color of #333.
I add these sass values, and build my theme:
Code:
$tab-color: #c8c8c8 !default;
$tab-color-active: #c8c8c8 !default;
$tab-color-over: #c8c8c8 !default;
$tab-color-disabled: #c8c8c8 !default;
No change to the ACTIVE tab only. For some reason, the active tab is still using the ext-theme-gray css, and overwriting my theme (screenshot below):
What am I doing wrong?!
ref: link to duplicate sencha forum post here
Why are you including both your theme's CSS and the ExtJS theme? Your theme will have all of the relevant CSS, based on detection by ExtJS about what classes you use.
Your style is being overridden by the more specific style in the extjs theme. If you need both (and I don't think you do), you'll need to mark your styles as !important, not !default